From 68e477ea7d32393e04b449c5253f148bac76d0b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Dethier?= <gerard@logion.network>
Date: Mon, 20 Nov 2023 13:56:28 +0100
Subject: [PATCH] feat: add description column to items table.

logion-network/logion-internal#1070
---
 src/common/ButtonGroup.css                    |  5 ++
 src/loc/CollectionLocItemChecker.test.tsx     |  3 +-
 src/loc/CollectionLocItemChecker.tsx          | 34 +++++-------
 src/loc/DashboardCertificate.tsx              | 26 ++++++++-
 .../CollectionLocItemChecker.test.tsx.snap    | 24 ++++++---
 .../DashboardCertificate.test.tsx.snap        | 53 +++++++++++++++++++
 6 files changed, 116 insertions(+), 29 deletions(-)

diff --git a/src/common/ButtonGroup.css b/src/common/ButtonGroup.css
index f41371c0..8df1d73e 100644
--- a/src/common/ButtonGroup.css
+++ b/src/common/ButtonGroup.css
@@ -8,6 +8,11 @@
     margin-left: 25px;
 }
 
+.ButtonGroup.narrow .Button,
+.ButtonGroup.narrow .Button-container {
+    margin-left: 5px;
+}
+
 .ButtonGroup .Button:first-child,
 .ButtonGroup .Button-container:first-child {
     margin-left: 0;
diff --git a/src/loc/CollectionLocItemChecker.test.tsx b/src/loc/CollectionLocItemChecker.test.tsx
index dc9b1ce5..c9657436 100644
--- a/src/loc/CollectionLocItemChecker.test.tsx
+++ b/src/loc/CollectionLocItemChecker.test.tsx
@@ -8,7 +8,7 @@ jest.mock("src/legal-officer/LegalOfficerContext");
 
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { LocData } from "@logion/client";
+import { LocData, HashString } from "@logion/client";
 import { UUID, Hash } from "@logion/node-api";
 
 import { LOCollectionLocItemChecker, UserCollectionLocItemChecker, Props } from "./CollectionLocItemChecker";
@@ -71,6 +71,7 @@ const locId = new UUID("d97c99fd-9bcc-4f92-b9ea-b6be93abbbcd");
 const itemId = toItemId("test")!;
 const item = {
     id: itemId,
+    description: HashString.fromValue("description"),
     files: [],
     termsAndConditions: [],
 } as unknown as CollectionItem;
diff --git a/src/loc/CollectionLocItemChecker.tsx b/src/loc/CollectionLocItemChecker.tsx
index f0fc5b38..8f10f722 100644
--- a/src/loc/CollectionLocItemChecker.tsx
+++ b/src/loc/CollectionLocItemChecker.tsx
@@ -16,14 +16,12 @@ import CopyPasteButton from "../common/CopyPasteButton";
 import { fullCollectionItemCertificate } from "../PublicPaths";
 
 import "./CollectionLocItemChecker.css"
-import StatementOfFactsButton from "./statement/StatementOfFactsButton";
 import { toItemId } from './types';
-import StatementOfFactsRequestButton from "./statement/StatementOfFactsRequestButton";
 import { useUserLocContext } from "./UserLocContext";
 import { useLocContext } from "./LocContext";
 import { useLegalOfficerContext } from "src/legal-officer/LegalOfficerContext";
 import PagedTable, { getPage, Page } from "src/components/pagedtable/PagedTable";
-import Table, { ActionCell, Column, DateTimeCell, EmptyTableMessage } from "src/common/Table";
+import Table, { ActionCell, Cell, Column, DateTimeCell, EmptyTableMessage } from "src/common/Table";
 import ButtonGroup from "src/common/ButtonGroup";
 import { useNavigate } from "react-router-dom";
 import { dashboardCertificateRelativePath } from "src/RootPaths";
@@ -179,9 +177,18 @@ function CollectionLocItemChecker(props: LocalProps) {
             render: item => <CellWithCopyPaste content={ item.id.toHex() } />,
             align: "left",
         },
+        {
+            header: "Description",
+            render: item => <Cell content={ item.description.validValue() } overflowing tooltipId={ `description-${ item.id.toHex() }` } />,
+            align: "left",
+        },
         {
             header: "Timestamp",
             render: item => <DateTimeCell dateTime={ item.addedOn } />,
+            width: width({
+                onSmallScreen: "120px",
+                otherwise: "200px",
+            }),
         },
         {
             header: "Certificate",
@@ -197,8 +204,8 @@ function CollectionLocItemChecker(props: LocalProps) {
                 </ActionCell>
             ),
             width: width({
-                onSmallScreen: "100px",
-                otherwise: "300px",
+                onSmallScreen: "140px",
+                otherwise: "160px",
             }),
         },
         {
@@ -211,25 +218,10 @@ function CollectionLocItemChecker(props: LocalProps) {
                         >
                             View
                         </Button>
-                        {
-                            (props.viewer === 'LegalOfficer' &&
-                                <StatementOfFactsButton
-                                    item={ item }
-                                />
-                            ) ||
-                            (props.viewer === 'User' &&
-                                <StatementOfFactsRequestButton
-                                    itemId={ item.id }
-                                />
-                            )
-                        }
                     </ButtonGroup>
                 </ActionCell>
             ),
-            width: width({
-                onSmallScreen: "360px",
-                otherwise: "400px",
-            }),
+            width: "100px",
         },
     ];
 
diff --git a/src/loc/DashboardCertificate.tsx b/src/loc/DashboardCertificate.tsx
index 684d60fb..35bec9a4 100644
--- a/src/loc/DashboardCertificate.tsx
+++ b/src/loc/DashboardCertificate.tsx
@@ -16,6 +16,9 @@ import FrameTitle from "src/components/frametitle/FrameTitle";
 
 import "./DashboardCertificate.css";
 import CheckFileFrame from "../components/checkfileframe/CheckFileFrame";
+import StatementOfFactsButton from "./statement/StatementOfFactsButton";
+import StatementOfFactsRequestButton from "./statement/StatementOfFactsRequestButton";
+import Frame from "src/common/Frame";
 
 export default function DashboardCertificate() {
     const itemId = useParams<"itemId">().itemId;
@@ -27,7 +30,7 @@ export default function DashboardCertificate() {
     const collectionItem = useMemo(() => collectionItems.find(item => item.id.toHex() === itemId), [ itemId, collectionItems ]);
     const [ deliveries, setDeliveries ] = useState<ItemDeliveriesResponse>();
     const { axiosFactory } = useLogionChain();
-    const { colorTheme } = useCommonContext();
+    const { colorTheme, viewer } = useCommonContext();
     const [ checkCertifiedCopyResult, setCheckCertifiedCopyResult ] = useState<CheckCertifiedCopyResult>();
     const [ checkHashResult, setCheckHashResult ] = useState<CheckHashResult>();
 
@@ -113,6 +116,27 @@ export default function DashboardCertificate() {
                 }
                 </>
             }
+            <div className="frame-container">
+                <Frame
+                    title={
+                        <FrameTitle text="Statement of Facts"/>
+                    }
+                    border="2px solid #3B6CF4"
+                >
+                    {
+                        (viewer === 'LegalOfficer' &&
+                            <StatementOfFactsButton
+                                item={ collectionItem }
+                            />
+                        ) ||
+                        (viewer === 'User' &&
+                            <StatementOfFactsRequestButton
+                                itemId={ collectionItem.id }
+                            />
+                        )
+                    }
+                </Frame>
+            </div>
         </LocPane>
     );
 }
diff --git a/src/loc/__snapshots__/CollectionLocItemChecker.test.tsx.snap b/src/loc/__snapshots__/CollectionLocItemChecker.test.tsx.snap
index ba5922fb..a2ed5926 100644
--- a/src/loc/__snapshots__/CollectionLocItemChecker.test.tsx.snap
+++ b/src/loc/__snapshots__/CollectionLocItemChecker.test.tsx.snap
@@ -149,19 +149,25 @@ Object {
                 </div>
                 <div
                   class="Col"
-                  style="text-align: center;"
+                  style="text-align: left;"
+                >
+                  Description
+                </div>
+                <div
+                  class="Col"
+                  style="width: 200px; text-align: center;"
                 >
                   Timestamp
                 </div>
                 <div
                   class="Col"
-                  style="width: 300px; text-align: center;"
+                  style="width: 160px; text-align: center;"
                 >
                   Certificate
                 </div>
                 <div
                   class="Col"
-                  style="width: 400px; text-align: center;"
+                  style="width: 100px; text-align: center;"
                 />
               </div>
             </div>
@@ -360,19 +366,25 @@ Object {
               </div>
               <div
                 class="Col"
-                style="text-align: center;"
+                style="text-align: left;"
+              >
+                Description
+              </div>
+              <div
+                class="Col"
+                style="width: 200px; text-align: center;"
               >
                 Timestamp
               </div>
               <div
                 class="Col"
-                style="width: 300px; text-align: center;"
+                style="width: 160px; text-align: center;"
               >
                 Certificate
               </div>
               <div
                 class="Col"
-                style="width: 400px; text-align: center;"
+                style="width: 100px; text-align: center;"
               />
             </div>
           </div>
diff --git a/src/loc/__snapshots__/DashboardCertificate.test.tsx.snap b/src/loc/__snapshots__/DashboardCertificate.test.tsx.snap
index cbc7f9ed..cb3681e2 100644
--- a/src/loc/__snapshots__/DashboardCertificate.test.tsx.snap
+++ b/src/loc/__snapshots__/DashboardCertificate.test.tsx.snap
@@ -95,5 +95,58 @@ exports[`DashboardCertificate renders item 1`] = `
       }
     />
   </PolkadotFrame>
+  <div
+    className="frame-container"
+  >
+    <Frame
+      border="2px solid #3B6CF4"
+      title={
+        <FrameTitle
+          text="Statement of Facts"
+        />
+      }
+    >
+      <StatementOfFactsRequestButton
+        itemId={
+          Hash {
+            "_bytes": Uint8Array [
+              154,
+              174,
+              187,
+              189,
+              63,
+              143,
+              230,
+              81,
+              184,
+              126,
+              131,
+              99,
+              4,
+              85,
+              167,
+              10,
+              67,
+              150,
+              76,
+              105,
+              145,
+              7,
+              123,
+              180,
+              80,
+              191,
+              26,
+              62,
+              210,
+              210,
+              92,
+              204,
+            ],
+          }
+        }
+      />
+    </Frame>
+  </div>
 </LocPane>
 `;