Fix infinite expanding error list (#80)

* Use native components instead of DataList * Version * Use ML TS client instead of voodoo client to close settlement windows * Add some alternating background colour to rows * Versions
mojaloop · Jan 17, 2022 · f1b3a1d · f1b3a1d
1 parent ec8f934
commit f1b3a1d
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 56 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: "v3.0.2"
+appVersion: "v3.0.3"
 description: Mojaloop Finance Portal UI v2
 name: finance-portal-v2-ui
-version: 3.0.2
+version: 3.0.3
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: v3.0.2
+  tag: v3.0.3
   pullPolicy: IfNotPresent
 
 imagePullCredentials:

diff --git a/integration_test/e2e-ui-tests/src/tests/SettlementWindowsPage.test.ts b/integration_test/e2e-ui-tests/src/tests/SettlementWindowsPage.test.ts
@@ -162,10 +162,12 @@ test.meta({
   await cli.completeTransfers(transfers1);
   const openWindows1 = await cli.getSettlementWindows({ state: "OPEN" });
   await t.expect(openWindows1.length).eql(1, 'Expected only a single open window');
-  const closedSettlementWindowId1 = await cli.closeSettlementWindow({
-    id: openWindows1[0].settlementWindowId,
-    reason: 'Integration test',
-  });
+  const closedSettlementWindowId1 = openWindows1[0].settlementWindowId;
+  await settlementApi.closeSettlementWindow(
+    settlementsBasePath,
+    closedSettlementWindowId1,
+    'Integration test',
+  );
 
   // Run a transfer so the settlement window can be closed
   const transfers2: protocol.TransferMessage[] = [{
@@ -178,10 +180,12 @@ test.meta({
   await cli.completeTransfers(transfers2);
   const openWindows2 = await cli.getSettlementWindows({ state: "OPEN" });
   await t.expect(openWindows2.length).eql(1, 'Expected only a single open window');
-  const closedSettlementWindowId2 = await cli.closeSettlementWindow({
-    id: openWindows2[0].settlementWindowId,
-    reason: 'Integration test',
-  });
+  const closedSettlementWindowId2 = openWindows2[0].settlementWindowId;
+  await settlementApi.closeSettlementWindow(
+    settlementsBasePath,
+    closedSettlementWindowId2,
+    'Integration test',
+  );
 
   const settlementWindowIds = [
     closedSettlementWindowId1,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "finance-portal-v2-ui",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/src/App/Settlements/SettlementFinalizingModal/SettlementFinalizingModal.css b/src/App/Settlements/SettlementFinalizingModal/SettlementFinalizingModal.css
@@ -1,11 +1,53 @@
-tr {
+tr.settlement-state-item {
   height: 30px;
 }
 
-td:nth-child(1) {
+tr.settlement-state-item td:nth-child(1) {
   width: 30px;
 }
 
+table.finalize-error-list {
+  color: #3e3e3e;
+}
+
+table.finalize-error-list caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 18px;
+  padding-bottom: 8px;
+  text-transform: capitalize;
+}
+
+table.finalize-error-list thead {
+  background-color: #3e3e3e;
+  color: #eeeeee;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: black;
+}
+
+table.finalize-error-list tbody tr:nth-child(odd) {
+  background-color: white;
+}
+
+table.finalize-error-list tbody tr:nth-child(even) {
+  background-color: #eee;
+}
+
+table.finalize-error-list th, table.finalize-error-list td {
+  border-color: black;
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  padding: 8px;
+  text-align: left;
+}
+
+table.finalize-error-list {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid black;
+}
+
 br {
   display: block; /* makes it have a width */
   content: ""; /* clears default height */

diff --git a/src/App/Settlements/SettlementFinalizingModal/index.tsx b/src/App/Settlements/SettlementFinalizingModal/index.tsx
@@ -1,6 +1,6 @@
 import { strict as assert } from 'assert';
 import React, { FC, useState } from 'react';
-import { Button, ErrorBox, Modal, Spinner, DataList } from 'components';
+import { Button, ErrorBox, Modal, Spinner } from 'components';
 import { MD5 as hash } from 'object-hash';
 import connector, { ConnectorProps } from './connectors';
 import {
@@ -67,51 +67,57 @@ const SettlementFinalizingModal: FC<ConnectorProps> = ({
       }
       case FinalizeSettlementErrorKind.SET_SETTLEMENT_PS_TRANSFERS_COMMITTED:
       case FinalizeSettlementErrorKind.SETTLE_ACCOUNTS: {
-        const columns = [
-          { key: 'participantName', label: 'Participant' },
-          { key: 'errorMessage', label: 'Error' },
-          { key: 'errorCode', label: 'Code' },
-          { key: 'currency', label: 'Currency' },
-          { key: 'amount', label: 'Amount' },
-          { key: 'state', label: 'State' },
-          { key: 'accountId', label: 'Account ID' },
-          { key: 'remediation', label: 'Remediation' },
-        ];
-        const list = err.value.map((v) => ({
-          participantName: v.participant.name,
-          errorMessage: v.apiResponse.errorDescription,
-          errorCode: v.apiResponse.errorCode,
-          currency: v.account.netSettlementAmount.currency,
-          amount: v.account.netSettlementAmount.amount,
-          state: v.account.state,
-          accountId: v.account.id,
-          remediation: 'TODO', // TODO
-        }));
+        const rows = err.value.map((v) => (
+          <tr key={hash(v)}>
+            <td>{v.participant.name}</td>
+            <td>{v.apiResponse.errorDescription}</td>
+            <td>{v.apiResponse.errorCode}</td>
+            <td>{v.account.netSettlementAmount.currency}</td>
+            <td>{v.account.netSettlementAmount.amount}</td>
+            <td>{v.account.state}</td>
+            <td>{v.account.id}</td>
+          </tr>
+        ));
         return (
-          <div>
-            <div>Errors in settlement state change</div>
-            <DataList columns={columns} list={list} sortColumn="Participant" sortAsc={true} />
-          </div>
+          <table className="finalize-error-list">
+            <caption>Errors in settlement state change</caption>
+            <thead>
+              <tr>
+                <th>Participant</th>
+                <th>Error</th>
+                <th>Code</th>
+                <th>Currency</th>
+                <th>Amount</th>
+                <th>State</th>
+                <th>Account ID</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </table>
         );
       }
       case FinalizeSettlementErrorKind.PROCESS_ADJUSTMENTS: {
-        const columns = [
-          { key: 'type', label: 'Message' },
-          { key: 'participantName', label: 'Participant' },
-          { key: 'positionAccountId', label: 'Position Account ID' },
-          { key: 'settlementAccountId', label: 'Settlement Account ID' },
-        ];
-        const list = err.value.map((v) => ({
-          participantName: v.value.adjustment.participant.name,
-          positionAccountId: v.value.adjustment.positionAccount.id,
-          settlementAccountId: v.value.adjustment.settlementAccount.id,
-          type: v.type,
-        }));
+        const rows = err.value.map((v) => (
+          <tr key={hash(v)}>
+            <td>{v.type}</td>
+            <td>{v.value.adjustment.participant.name}</td>
+            <td>{v.value.adjustment.positionAccount.id}</td>
+            <td>{v.value.adjustment.settlementAccount.id}</td>
+          </tr>
+        ));
         return (
-          <div>
-            <div>Error processing adjustments</div>
-            <DataList flex={true} columns={columns} list={list} sortColumn="Participant" sortAsc={true} />
-          </div>
+          <table className="finalize-error-list">
+            <caption>Errors during settlement finalization</caption>
+            <thead>
+              <tr>
+                <th>Message</th>
+                <th>Participant</th>
+                <th>Position Account ID</th>
+                <th>Settlement Account ID</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </table>
         );
       }
       default: {
@@ -293,7 +299,7 @@ const SettlementFinalizingModal: FC<ConnectorProps> = ({
       <table>
         <tbody>
           {orderedStates.map((s) => (
-            <tr key={s}>
+            <tr className="settlement-state-item" key={s}>
               <td>{computeStateCharacter(s, finalizingSettlement.state, settlementFinalizingInProgress)}</td>
               <td>{s}</td>
             </tr>