Pending request and process request notifications (#388)

* move requests to notifications

* improve typing

* hold off on auction requests

* add notification menu header

* issue with invalid rrequests

* limit account operations to owner

* clean

* clean

* clean

* compile error

* add auction requests

* use lodash lib partition function

Author: Sarahb-da

ui/src/App.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Route, RouteProps, Switch, useLocation, withRouter } from 'react-router-dom';
 import { SidebarEntry } from './components/Sidebar/SidebarEntry';
-import { Requests as CustodyRequests } from './pages/custody/Requests';
 import { useParty } from '@daml/react';
 import { Service as CustodyService } from '@daml.js/da-marketplace/lib/Marketplace/Custody/Service/';
 import { Service as ClearingService } from '@daml.js/da-marketplace/lib/Marketplace/Clearing/Service/';
@@ -14,7 +13,6 @@ import { Role as CustodyRole } from '@daml.js/da-marketplace/lib/Marketplace/Cus
 import { Role as ClearingRole } from '@daml.js/da-marketplace/lib/Marketplace/Clearing/Role';
 
 import { Auctions } from './pages/distribution/auction/Auctions';
-import { Requests as AuctionRequests } from './pages/distribution/auction/Requests';
 import Assets from './pages/custody/Assets';
 import { New as NewAuction } from './pages/distribution/auction/New';
 import { BiddingAuction } from './pages/distribution/bidding/Auction';
@@ -38,7 +36,6 @@ import {
   MegaphoneIcon,
   OrdersIcon,
   WalletIcon,
-  IconMailLetter,
 } from './icons/icons';
 import { Instrument } from './pages/origination/Instrument';
 import { ClearingMembers } from './pages/clearing/Members';
@@ -318,16 +315,15 @@ const AppComponent = () => {
     ],
   });
 
-  const notifications = useAllNotifications(party);
-  const notifCount = notifications.reduce((count, { contracts }) => count + contracts.length, 0);
+  const allNotifications = useAllNotifications(party);
 
   entries.push({
     displayEntry: () => true,
     sidebar: [],
     additionalRoutes: [
       {
         path: paths.app.notifications,
-        render: () => <Notifications notifications={notifications} />,
+        render: () => <Notifications notifications={allNotifications} />,
       },
       {
         path: paths.app.identity,
@@ -428,25 +424,6 @@ const AppComponent = () => {
     ],
   });
 
-  entries.push({
-    displayEntry: () => custodyService.length > 0 || auctionCustomer.length > 0,
-    sidebar: [
-      {
-        label: 'Requests',
-        groupBy: 'Manage',
-        path: paths.app.requests,
-        render: () => (
-          <>
-            {custodyService.length > 0 && <CustodyRequests services={custodyService} />}
-            {auctionCustomer.length > 0 && <AuctionRequests services={auctionService} />}
-          </>
-        ),
-        icon: <IconMailLetter />,
-        children: [],
-      },
-    ],
-  });
-
   const entriesToDisplay = entries.filter(e => e.displayEntry()).flatMap(e => e.sidebar);
   const additionRouting: RouteProps[] = _.compact(
     entries.filter(e => e.displayEntry()).flatMap(e => e.additionalRoutes)
@@ -476,7 +453,6 @@ const AppComponent = () => {
         )
       }
       topMenuButtons={currentEntry && currentEntry.topMenuButtons}
-      showNotificationAlert={notifCount > 0}
     >
       {servicesLoading ? (
         <div className="page-loading">

ui/src/components/Form/ModalFormErrorHandled.tsx

@@ -79,10 +79,10 @@ const ModalFormErrorHandled: (props: Props) => React.ReactElement = ({
         )}
       </Modal.Content>
       <Modal.Actions>
+        <Button className="ghost" disabled={disabled} content="Submit" loading={loading} />
         <Button className="ghost warning" onClick={() => setOpen(false)}>
           Cancel
         </Button>
-        <Button className="ghost" disabled={disabled} content="Submit" loading={loading} />
       </Modal.Actions>
     </Modal>
   );

ui/src/pages/QuickSetup/AccountSelectionModal.tsx

@@ -156,6 +156,14 @@ const AccountSelectionModal: React.FC<Props> = ({
         )}
       </Modal.Content>
       <Modal.Actions>
+        <Button
+          disabled={disabled}
+          content="Submit"
+          labelPosition="right"
+          icon="checkmark"
+          type="submit"
+          positive
+        />
         <Button
           className="ghost warning"
           color="black"
@@ -166,14 +174,6 @@ const AccountSelectionModal: React.FC<Props> = ({
         >
           Cancel
         </Button>
-        <Button
-          disabled={disabled}
-          content="Submit"
-          labelPosition="right"
-          icon="checkmark"
-          type="submit"
-          positive
-        />
       </Modal.Actions>
     </Modal>
   );

ui/src/pages/custody/Account.scss

@@ -62,6 +62,10 @@
       p.p2 {
         margin: $spacing-s $spacing-m 0 0;
       }
+
+      .close-request {
+        margin-left: auto;
+      }
     }
   }
 }

ui/src/pages/custody/Account.tsx

@@ -7,6 +7,8 @@ import { AssetDeposit } from '@daml.js/da-marketplace/lib/DA/Finance/Asset';
 import { Account as AccountContract } from '@daml.js/da-marketplace/lib/DA/Finance/Types';
 import { CreateEvent } from '@daml/ledger';
 import { Service } from '@daml.js/da-marketplace/lib/Marketplace/Custody/Service';
+import { CloseAccountRequest } from '@daml.js/da-marketplace/lib/Marketplace/Custody/Model';
+
 import { InputDialog, InputDialogProps } from '../../components/InputDialog/InputDialog';
 import { usePartyName } from '../../config';
 import Tile from '../../components/Tile/Tile';
@@ -37,6 +39,9 @@ const Account: React.FC<ServicePageProps<Service> & AccountProps> = ({
   const { contracts: allocatedAccounts, loading: allocatedAccountsLoading } =
     useStreamQueries(AllocationAccountRule);
   const { contracts: deposits, loading: depositsLoading } = useStreamQueries(AssetDeposit);
+  const existingCloseRequest = !!useStreamQueries(CloseAccountRequest).contracts.find(
+    c => c.payload.accountId.label === targetAccount.account.id.label
+  );
 
   const defaultTransferRequestDialogProps: InputDialogProps<any> = {
     open: false,
@@ -137,14 +142,20 @@ const Account: React.FC<ServicePageProps<Service> & AccountProps> = ({
         <div className="account-details">
           <div className="account-data">
             <h4> {targetAccount.account.id.label} </h4>
-            {normalAccount && (
-              <OverflowMenu>
-                <OverflowMenuEntry
-                  label={'Close Account'}
-                  onClick={() => requestCloseAccount(normalAccount)}
-                />
-              </OverflowMenu>
-            )}
+            {normalAccount &&
+              targetAccount.account.owner === party &&
+              (existingCloseRequest ? (
+                <p className="close-request">
+                  <i> close request pending</i>
+                </p>
+              ) : (
+                <OverflowMenu>
+                  <OverflowMenuEntry
+                    label={'Close Account'}
+                    onClick={() => requestCloseAccount(normalAccount)}
+                  />
+                </OverflowMenu>
+              ))}
           </div>
           <div className="account-data body">
             <p className="p2">Type: {normalAccount ? 'Normal' : 'Allocation'} </p>

ui/src/pages/custody/Assets.tsx

@@ -82,7 +82,7 @@ const Assets: React.FC<ServicePageProps<Service>> = ({ services }: ServicePagePr
       <div className="page-section-row">
         <div>
           {allAccounts.map(a => (
-            <Account targetAccount={a} services={services} key={a.contractId} />
+            <Account key={a.contractId} targetAccount={a} services={services} />
           ))}
         </div>
 
@@ -91,9 +91,14 @@ const Assets: React.FC<ServicePageProps<Service>> = ({ services }: ServicePagePr
           <FormErrorHandled onSubmit={() => onRequestCredit()}>
             <Form.Select
               label="Account"
-              options={allAccounts.map(a => {
-                return { text: a.account.id.label, value: a.contractId };
-              })}
+              options={accounts
+                .filter(a => a.payload.account.owner === party)
+                .map(a => {
+                  return {
+                    text: a.payload.account.id.label,
+                    value: a.contractId.replace('#', '_'),
+                  };
+                })}
               value={selectedAccount}
               onChange={(_, data) => setSelectedAccount(data.value as string)}
             />