chore: UI improvements/fixes (#874)

* fix: menu styles, ordering * chore: update credential details * chore: update iscountrycode validation * chore: update tables ui * fix: dependencies warnings --------- Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Dec 30, 2024 · a0ff857 · a0ff857
1 parent 48aec25
commit a0ff857
Show file tree

Hide file tree

Showing 14 changed files with 424 additions and 118 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/assets/iso31661Countries.ts b/ui/src/assets/iso31661Countries.ts
diff --git a/ui/src/components/connections/CredentialsTable.tsx b/ui/src/components/connections/CredentialsTable.tsx
@@ -76,11 +76,17 @@ export function CredentialsTable({ userID }: { userID: string }) {
       dataIndex: "schemaType",
       ellipsis: { showTitle: false },
       key: "schemaType",
-      render: (schemaType: Credential["schemaType"]) => (
-        <Tooltip placement="topLeft" title={schemaType}>
-          <Typography.Text strong>{schemaType}</Typography.Text>
-        </Tooltip>
+      render: (schemaType: Credential["schemaType"], credential: Credential) => (
+        <Typography.Link
+          onClick={() =>
+            navigate(generatePath(ROUTES.credentialDetails.path, { credentialID: credential.id }))
+          }
+          strong
+        >
+          {schemaType}
+        </Typography.Link>
       ),
+
       sorter: ({ schemaType: a }, { schemaType: b }) => a.localeCompare(b),
       title: "Credential",
     },

diff --git a/ui/src/components/credentials/CredentialDetails.tsx b/ui/src/components/credentials/CredentialDetails.tsx
@@ -202,6 +202,7 @@ export function CredentialDetails() {
           );
         } else {
           const {
+            credentialStatus,
             displayMethod,
             expirationDate,
             issuanceDate,
@@ -260,13 +261,20 @@ export function CredentialDetails() {
                       text={expirationDate ? formatDate(expirationDate) : "-"}
                     />
 
+                    <Detail
+                      label="Revocation nonce"
+                      text={credentialStatus.revocationNonce.toString()}
+                    />
+
+                    <Detail label="Credential status type" text={credentialStatus.type} />
+
                     <Detail
                       label="Refresh Service"
                       text={refreshService ? refreshService.id : "-"}
                     />
 
                     <Detail
-                      copyable
+                      copyable={!!displayMethod}
                       label="Display Method"
                       text={displayMethod ? displayMethod.id : "-"}
                     />

diff --git a/ui/src/components/credentials/CredentialsTable.tsx b/ui/src/components/credentials/CredentialsTable.tsx
@@ -109,10 +109,15 @@ export function CredentialsTable() {
       dataIndex: "schemaType",
       ellipsis: { showTitle: false },
       key: "schemaType",
-      render: (schemaType: Credential["schemaType"]) => (
-        <Tooltip placement="topLeft" title={schemaType}>
-          <Typography.Text strong>{schemaType}</Typography.Text>
-        </Tooltip>
+      render: (schemaType: Credential["schemaType"], credential: Credential) => (
+        <Typography.Link
+          onClick={() =>
+            navigate(generatePath(ROUTES.credentialDetails.path, { credentialID: credential.id }))
+          }
+          strong
+        >
+          {schemaType}
+        </Typography.Link>
       ),
       sorter: {
         multiple: 1,

diff --git a/ui/src/components/credentials/IssueCredentialForm.tsx b/ui/src/components/credentials/IssueCredentialForm.tsx
@@ -35,6 +35,7 @@ import {
 import IconBack from "src/assets/icons/arrow-narrow-left.svg?react";
 import IconRight from "src/assets/icons/arrow-narrow-right.svg?react";
 import IconLink from "src/assets/icons/link-external-01.svg?react";
+import { iso31661Countries } from "src/assets/iso31661Countries";
 import { InputErrors, ObjectAttributeForm } from "src/components/credentials/ObjectAttributeForm";
 import { ErrorResult } from "src/components/shared/ErrorResult";
 import { LoadingResult } from "src/components/shared/LoadingResult";
@@ -144,9 +145,8 @@ export function IssueCredentialForm({
     }
   };
 
-  const isCountryCode = (x: number) => {
-    const iso31661NumericRegex = /^\d{1,3}$/;
-    return iso31661NumericRegex.test(x.toString());
+  const isCountryCode = (code: number) => {
+    return iso31661Countries.some((country) => country.code === code);
   };
 
   function isFormValid(value: Record<string, unknown>, objectAttribute: ObjectAttribute): boolean {

diff --git a/ui/src/components/credentials/LinkDetails.tsx b/ui/src/components/credentials/LinkDetails.tsx
@@ -229,7 +229,7 @@ export function LinkDetails() {
                     />
 
                     <Detail
-                      copyable
+                      copyable={!!displayMethod}
                       label="Display Method"
                       text={displayMethod ? displayMethod.id : "-"}
                     />

diff --git a/ui/src/components/credentials/LinksTable.tsx b/ui/src/components/credentials/LinksTable.tsx
@@ -13,7 +13,6 @@ import {
   Table,
   TableColumnsType,
   Tag,
-  Tooltip,
   Typography,
 } from "antd";
 
@@ -97,10 +96,13 @@ export function LinksTable() {
       dataIndex: "schemaType",
       ellipsis: true,
       key: "schemaType",
-      render: (schemaType: Link["schemaType"]) => (
-        <Tooltip placement="topLeft" title={schemaType}>
-          <Typography.Text strong>{schemaType}</Typography.Text>
-        </Tooltip>
+      render: (schemaType: Link["schemaType"], link: Link) => (
+        <Typography.Link
+          onClick={() => navigate(generatePath(ROUTES.linkDetails.path, { linkID: link.id }))}
+          strong
+        >
+          {schemaType}
+        </Typography.Link>
       ),
       sorter: ({ schemaType: a }, { schemaType: b }) => a.localeCompare(b),
       title: "Credential",

diff --git a/ui/src/components/identities/IdentitiesTable.tsx b/ui/src/components/identities/IdentitiesTable.tsx
@@ -8,11 +8,14 @@ import {
   Table,
   TableColumnsType,
   Tag,
+  Tooltip,
   Typography,
 } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 import IconIssuers from "src/assets/icons/building-08.svg?react";
+import IconCheckMark from "src/assets/icons/check.svg?react";
+import IconCopy from "src/assets/icons/copy-01.svg?react";
 import IconDots from "src/assets/icons/dots-vertical.svg?react";
 import IconInfoCircle from "src/assets/icons/info-circle.svg?react";
 import IconPlus from "src/assets/icons/plus.svg?react";
@@ -81,9 +84,18 @@ export function IdentitiesTable({ handleAddIdentity }: { handleAddIdentity: () =
       dataIndex: "displayName",
       key: "displayName",
       render: (displayName: Identity["displayName"], identity: Identity) => (
-        <Typography.Text strong>
+        <Typography.Link
+          onClick={() =>
+            navigate(
+              generatePath(ROUTES.identityDetails.path, {
+                identityID: identity.identifier,
+              })
+            )
+          }
+          strong
+        >
           {displayName || formatIdentifier(identity.identifier, { short: true })}
-        </Typography.Text>
+        </Typography.Link>
       ),
       sorter: (a, b) =>
         (a.displayName || a.identifier).localeCompare(b.displayName || b.identifier),
@@ -93,24 +105,44 @@ export function IdentitiesTable({ handleAddIdentity }: { handleAddIdentity: () =
       dataIndex: "identifier",
       key: "identifier",
       render: (identifier: Identity["identifier"]) => (
-        <Typography.Text strong>{formatIdentifier(identifier)}</Typography.Text>
+        <Tooltip title={identifier}>
+          <Typography.Text
+            copyable={{
+              icon: [<IconCopy key={0} />, <IconCheckMark key={1} />],
+            }}
+            ellipsis={{
+              suffix: identifier.slice(-5),
+            }}
+          >
+            {identifier}
+          </Typography.Text>
+        </Tooltip>
       ),
       sorter: ({ identifier: a }, { identifier: b }) => a.localeCompare(b),
       title: "DID",
     },
+    {
+      dataIndex: "credentialStatusType",
+      key: "credentialStatusType",
+      render: (credentialStatusType: Identity["credentialStatusType"]) => (
+        <Typography.Text>{credentialStatusType}</Typography.Text>
+      ),
+      sorter: ({ identifier: a }, { identifier: b }) => a.localeCompare(b),
+      title: "Credential status",
+    },
     {
       dataIndex: "blockchain",
       key: "blockchain",
       render: (blockchain: Identity["blockchain"]) => (
-        <Typography.Text strong>{blockchain}</Typography.Text>
+        <Typography.Text>{blockchain}</Typography.Text>
       ),
       sorter: ({ blockchain: a }, { blockchain: b }) => a.localeCompare(b),
       title: "Blockchain",
     },
     {
       dataIndex: "network",
       key: "network",
-      render: (network: Identity["network"]) => <Typography.Text strong>{network}</Typography.Text>,
+      render: (network: Identity["network"]) => <Typography.Text>{network}</Typography.Text>,
       sorter: ({ network: a }, { network: b }) => a.localeCompare(b),
       title: "Network",
     },