feat: enable transfer details popup when selecting row from transfer …

…search page (#57) * enable transfer details popup when selecting row from transfer search page * centre spinner for transfer details loading * adding more transfer detail to popup * bump minor version for feature add * add integration test to verify detail popup is triggered on row click * bump chart versions
mojaloop · Sep 14, 2021 · 73639a8 · 73639a8
1 parent 7e09869
commit 73639a8
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 19 deletions.
diff --git a/helm/finance-portal-v2-ui/Chart.yaml b/helm/finance-portal-v2-ui/Chart.yaml
@@ -1,5 +1,5 @@
 apiVersion: v1
-appVersion: "v2.3.2"
+appVersion: "v2.4.0"
 description: Mojaloop Finance Portal UI v2
 name: finance-portal-v2-ui
-version: 2.3.2
+version: 2.4.0
diff --git a/helm/finance-portal-v2-ui/values.yaml b/helm/finance-portal-v2-ui/values.yaml
@@ -6,7 +6,7 @@ replicaCount: 1
 
 image:
   repository: ghcr.io/mojaloop/finance-portal-v2-ui
-  tag: v2.3.2
+  tag: v2.4.0
   pullPolicy: IfNotPresent
 
 imagePullCredentials:

diff --git a/integration_test/tests/src/page-objects/pages/FindTransfersPage.ts b/integration_test/tests/src/page-objects/pages/FindTransfersPage.ts
@@ -3,6 +3,7 @@ import { Temporal } from '@js-temporal/polyfill';
 import { t } from 'testcafe';
 
 export type TransferRow = {
+  row: Selector,
   id: Selector,
 }
 
@@ -20,7 +21,10 @@ export const FindTransfersPage = {
     return Array
       .from({ length })
       .map((_, i) => ({
+        row: rows.nth(i),
         id: rows.nth(i).findReact('ItemCell').nth(0),
       }));
   },
+
+  getTransferDetailsModal: (transferId: string) => ReactSelector('Modal').withProps({ title: `Transfer Details: ${transferId}` }),
 };
diff --git a/integration_test/tests/src/tests/FindTransfersPage.test.ts b/integration_test/tests/src/tests/FindTransfersPage.test.ts
@@ -96,4 +96,26 @@ test.meta({
   }
 });
 
+test.meta({
+  ID: '',
+  STORY: 'MMD-1430',
+  description:
+    `Clicking on a transfer row should show a detail popup`,
+})('Clicking on transfer row should show detail popup', async (t) => {
+  // navigate to the find transfers page
+  await t.click(SideMenu.findTransfersButton);
+
+  // click the find transfers button (no filters selected by default)
+  await t.click(FindTransfersPage.findTransfersButton);
+
+  // get all rows found
+  const rows = await FindTransfersPage.getResultRows();
 
+  // click the first found row
+  await t.click(rows[0].row);
+  const transferId = await rows[0].id.innerText;
+
+  const popup = FindTransfersPage.getTransferDetailsModal(transferId);
+
+  await t.expect(popup.exists).ok('Transfer details popup not found in dom');
+});
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finance-portal-v2-ui",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/src/App/Transfers/TransferDetails/TransferDetails.css b/src/App/Transfers/TransferDetails/TransferDetails.css
@@ -0,0 +1,7 @@
+.transfers__transferDetails__loader {
+  height: 100px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+}
diff --git a/src/App/Transfers/TransferDetails/index.tsx b/src/App/Transfers/TransferDetails/index.tsx
@@ -5,6 +5,7 @@ import { State, Dispatch } from 'store/types';
 import { TransferDetail, QuoteRequest, QuoteResponse, TransferPrepare } from '../types';
 import * as actions from '../actions';
 import * as selectors from '../selectors';
+import './TransferDetails.css';
 
 const stateProps = (state: State) => ({
   transferDetails: selectors.getSelectedTransfer(state),
@@ -33,13 +34,13 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
   let content = null;
 
   content = (
-    <div className="transfers__transfers__loader">
+    <div className="transfers__transferDetails__loader">
       <Spinner size={20} />
     </div>
   );
 
   if (transferDetails) {
-    const TransferPartiesTab = (
+    const QuotePartiesTab = transferDetails.quoteParties.length ? (
       <TabPanel>
         <Tabs>
           <TabList>
@@ -56,9 +57,28 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
           </TabPanels>
         </Tabs>
       </TabPanel>
-    );
+    ) : null;
+
+    const QuoteErrorsTab = transferDetails.quoteErrors.length ? (
+      <TabPanel>
+        <Tabs>
+          <TabList>
+            {transferDetails.quoteErrors.map((qe: any) => (
+              <Tab key={`${qe.quoteId}-${qe.quoteErrorId}`}>{qe.quoteErrorId}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {transferDetails.quoteErrors.map((qe: any) => (
+              <TabPanel key={`${qe.quoteId}-${qe.quoteErrorId}`}>
+                <ScrollBox>{objectToFormInputs(qe.quoteId, qe)}</ScrollBox>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </TabPanel>
+    ) : null;
 
-    const QuoteRequestsTab = (
+    const QuoteRequestsTab = transferDetails.quoteRequests.length ? (
       <TabPanel>
         <Tabs>
           <TabList>
@@ -73,22 +93,24 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
                   <TabList>
                     <Tab>Quote Request</Tab>
                     <Tab>Quote Parties</Tab>
+                    <Tab>Quote Errors</Tab>
                   </TabList>
                   <TabPanels>
                     <TabPanel>
                       <ScrollBox>{objectToFormInputs(qr.quoteId, qr)}</ScrollBox>
                     </TabPanel>
-                    {TransferPartiesTab}
+                    <TabPanel>{QuotePartiesTab}</TabPanel>
+                    <TabPanel>{QuoteErrorsTab}</TabPanel>
                   </TabPanels>
                 </Tabs>
               </TabPanel>
             ))}
           </TabPanels>
         </Tabs>
       </TabPanel>
-    );
+    ) : null;
 
-    const QuoteResponsesTab = (
+    const QuoteResponsesTab = transferDetails.quoteResponses.length ? (
       <TabPanel>
         <Tabs>
           <TabList>
@@ -105,9 +127,9 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
           </TabPanels>
         </Tabs>
       </TabPanel>
-    );
+    ) : null;
 
-    const TransferPreparesTab = (
+    const TransferPreparesTab = transferDetails.transferPrepares.length ? (
       <TabPanel>
         <Tabs>
           <TabList>
@@ -124,7 +146,64 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
           </TabPanels>
         </Tabs>
       </TabPanel>
-    );
+    ) : null;
+
+    const TransferParticipantsTab = transferDetails.transferParticipants.length ? (
+      <TabPanel>
+        <Tabs>
+          <TabList>
+            {transferDetails.transferParticipants.map((tp: any) => (
+              <Tab key={tp.transferParticipantId}>{tp.transferParticipantId}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {transferDetails.transferParticipants.map((tp: any) => (
+              <TabPanel key={tp.transferParticipantId}>
+                <ScrollBox>{objectToFormInputs(tp.transferParticipantId, tp)}</ScrollBox>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </TabPanel>
+    ) : null;
+
+    const TransferFulfilmentsTab = transferDetails.transferFulfilments.length ? (
+      <TabPanel>
+        <Tabs>
+          <TabList>
+            {transferDetails.transferFulfilments.map((tf: any) => (
+              <Tab key={tf.transferId}>{tf.transferId}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {transferDetails.transferFulfilments.map((tf: any) => (
+              <TabPanel key={tf.transferId}>
+                <ScrollBox>{objectToFormInputs(tf.transferId, tf)}</ScrollBox>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </TabPanel>
+    ) : null;
+
+    const TransferStateChangesTab = transferDetails.transferStateChanges.length ? (
+      <TabPanel>
+        <Tabs>
+          <TabList>
+            {transferDetails.transferStateChanges.map((tsc: any) => (
+              <Tab key={tsc.transferStateChangeId}>{tsc.transferStateChangeId}</Tab>
+            ))}
+          </TabList>
+          <TabPanels>
+            {transferDetails.transferStateChanges.map((tsc: any) => (
+              <TabPanel key={tsc.transferStateChangeId}>
+                <ScrollBox>{objectToFormInputs(tsc.transferStateChangeId, tsc)}</ScrollBox>
+              </TabPanel>
+            ))}
+          </TabPanels>
+        </Tabs>
+      </TabPanel>
+    ) : null;
 
     content = (
       <div>
@@ -133,11 +212,17 @@ const TransferDetails: FC<ConnectorProps> = ({ transferDetails, onModalCloseClic
             <Tab>Quote Requests</Tab>
             <Tab>Quote Responses</Tab>
             <Tab>Transfer Prepares</Tab>
+            <Tab>Transfer Participants</Tab>
+            <Tab>Transfer Fulfilments</Tab>
+            <Tab>Transfer State Changes</Tab>
           </TabList>
           <TabPanels>
             <TabPanel>{QuoteRequestsTab}</TabPanel>
             <TabPanel>{QuoteResponsesTab}</TabPanel>
             <TabPanel>{TransferPreparesTab}</TabPanel>
+            <TabPanel>{TransferParticipantsTab}</TabPanel>
+            <TabPanel>{TransferFulfilmentsTab}</TabPanel>
+            <TabPanel>{TransferStateChangesTab}</TabPanel>
           </TabPanels>
         </Tabs>
       </div>

diff --git a/src/App/Transfers/reducer.ts b/src/App/Transfers/reducer.ts
@@ -18,7 +18,7 @@ const initialState: types.TransfersState = {
     to: undefined,
   },
   isTransfersPending: false,
-  isTransferDetailsPending: true,
+  isTransferDetailsPending: false,
 };
 
 export default createReducer(initialState, (builder) =>
@@ -62,10 +62,16 @@ export default createReducer(initialState, (builder) =>
       (state: types.TransfersState, action: PayloadAction<types.TransferDetail>) => ({
         ...state,
         selectedTransfer: action.payload,
+        isTransferDetailsPending: false,
       }),
     )
     .addCase(actions.transferDetailsModalClose, (state: types.TransfersState) => ({
       ...state,
       selectedTransfer: initialState.selectedTransfer,
+      isTransferDetailsPending: false,
+    }))
+    .addCase(actions.selectTransfer, (state: types.TransfersState) => ({
+      ...state,
+      isTransferDetailsPending: true,
     })),
 );
diff --git a/src/App/Transfers/selectors.ts b/src/App/Transfers/selectors.ts
@@ -5,3 +5,4 @@ export const getTransfers = (state: State) => state.subApp.transfers.transfers;
 export const getTransfersError = (state: State) => state.subApp.transfers.transfersError;
 export const getIsTransfersPending = (state: State) => state.subApp.transfers.isTransfersPending;
 export const getTransfersFilter = (state: State) => state.subApp.transfers.transfersFilter;
+export const getIsTransferDetailsPending = (state: State) => state.subApp.transfers.isTransferDetailsPending;
diff --git a/src/App/Transfers/views.tsx b/src/App/Transfers/views.tsx
@@ -3,7 +3,7 @@ import { Heading, Button, MessageBox, Spinner, DataList, DatePicker, TextField,
 import { connect } from 'react-redux';
 import withMount from 'hocs';
 import { State, Dispatch } from 'store/types';
-import { TransfersFilter, FilterChangeValue, Transfer } from './types';
+import { TransfersFilter, FilterChangeValue, Transfer, TransferDetail } from './types';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import './Transfers.css';
@@ -93,11 +93,12 @@ const IDTypes = [
 ];
 
 const stateProps = (state: State) => ({
-  // selectedTransfer: selectors.getSelectedTransfer(state),
+  selectedTransfer: selectors.getSelectedTransfer(state),
   transfers: selectors.getTransfers(state),
   transfersError: selectors.getTransfersError(state),
   isTransfersPending: selectors.getIsTransfersPending(state),
   filtersModel: selectors.getTransfersFilter(state),
+  isTransferDetailsPending: selectors.getIsTransferDetailsPending(state),
 });
 
 const dispatchProps = (dispatch: Dispatch) => ({
@@ -109,10 +110,11 @@ const dispatchProps = (dispatch: Dispatch) => ({
 });
 
 interface ConnectorProps {
-  // selectedTransfer: TransferDetail | undefined;
+  selectedTransfer: TransferDetail | undefined;
   transfers: Transfer[];
   transfersError: string | null;
   isTransfersPending: boolean;
+  isTransferDetailsPending: boolean;
   filtersModel: TransfersFilter;
   onFindTransfersClick: () => void;
   onClearFiltersClick: () => void;
@@ -121,10 +123,11 @@ interface ConnectorProps {
 }
 
 const Transfers: FC<ConnectorProps> = ({
-  // selectedTransfer,
+  selectedTransfer,
   transfers,
   transfersError,
   isTransfersPending,
+  isTransferDetailsPending,
   filtersModel,
   onFindTransfersClick,
   onClearFiltersClick,
@@ -166,6 +169,10 @@ const Transfers: FC<ConnectorProps> = ({
     );
   }
 
+  if (isTransferDetailsPending || selectedTransfer) {
+    detailModal = <TransferDetailsModal />;
+  }
+
   return (
     <div className="transfers">
       <Heading size="3">Find Transfers</Heading>