chore: move keys table to identity details page (#902)

Co-authored-by: Oleksandr Raspopov <[email protected]>
0xPolygonID · Jan 27, 2025 · 5f462ff · 5f462ff
1 parent 447ba8e
commit 5f462ff
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 94 deletions.
diff --git a/ui/src/components/identities/Identity.tsx b/ui/src/components/identities/Identity.tsx
@@ -1,11 +1,12 @@
-import { App, Button, Card, Divider, Flex, Form, Input, Space, Typography } from "antd";
+import { App, Button, Card, Divider, Flex, Form, Input, Space, Tabs, Typography } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import { getIdentity, updateIdentityDisplayName } from "src/adapters/api/identities";
 import { IdentityDetailsFormData } from "src/adapters/parsers/view";
 import EditIcon from "src/assets/icons/edit-02.svg?react";
 import { IdentityAuthCredentials } from "src/components/identities/IdentityAuthCredentials";
+import { KeysTable } from "src/components/keys/KeysTable";
 import { Detail } from "src/components/shared/Detail";
 import { EditModal } from "src/components/shared/EditModal";
 import { ErrorResult } from "src/components/shared/ErrorResult";
@@ -161,12 +162,28 @@ export function Identity() {
 
               <Divider />
 
-              {identity.data.authCredentialsIDs.length && (
-                <IdentityAuthCredentials
-                  identityID={identifier}
-                  IDs={identity.data.authCredentialsIDs}
-                />
-              )}
+              <Flex justify="center" style={{ margin: "0 auto", width: "100%" }}>
+                {identity.data.authCredentialsIDs.length ? (
+                  <Tabs
+                    items={[
+                      { children: <KeysTable />, key: "keys", label: "Keys" },
+                      {
+                        children: (
+                          <IdentityAuthCredentials
+                            identityID={identifier}
+                            IDs={identity.data.authCredentialsIDs}
+                          />
+                        ),
+                        key: "credentials",
+                        label: "Auth credentials",
+                      },
+                    ]}
+                    style={{ width: "100%" }}
+                  />
+                ) : (
+                  <KeysTable />
+                )}
+              </Flex>
 
               <EditModal
                 onClose={() => setIsEditModalOpen(false)}

diff --git a/ui/src/components/identities/IdentityAuthCredentials.tsx b/ui/src/components/identities/IdentityAuthCredentials.tsx
@@ -6,7 +6,6 @@ import {
   Dropdown,
   Flex,
   Row,
-  Space,
   Table,
   TableColumnsType,
   Tag,
@@ -204,20 +203,7 @@ export function IdentityAuthCredentials({
   const showDefaultContent = credentials.status === "successful" && credentialsList.length === 0;
 
   return (
-    <Card
-      style={{ width: "100%" }}
-      title={
-        <Flex align="center" justify="flex-end" style={{ padding: 12 }}>
-          <Button
-            icon={<IconPlus />}
-            onClick={() => navigate(ROUTES.createAuthCredential.path)}
-            type="primary"
-          >
-            Create auth credential
-          </Button>
-        </Flex>
-      }
-    >
+    <>
       <TableCard
         defaultContents={
           <>
@@ -245,13 +231,19 @@ export function IdentityAuthCredentials({
           />
         }
         title={
-          <Row gutter={[0, 8]} justify="space-between">
-            <Space size="middle">
+          <Flex align="center" justify="space-between" style={{ padding: "12px 0" }}>
+            <Flex align="center" gap={16}>
               <Card.Meta title="Auth credentials" />
-
               <Tag>{credentialsList.length}</Tag>
-            </Space>
-          </Row>
+            </Flex>
+            <Button
+              icon={<IconPlus />}
+              onClick={() => navigate(ROUTES.createAuthCredential.path)}
+              type="primary"
+            >
+              Create auth credential
+            </Button>
+          </Flex>
         }
       />
       {credentialToRevoke && (
@@ -261,6 +253,6 @@ export function IdentityAuthCredentials({
           onRevoke={() => void fetchAuthCredentials()}
         />
       )}
-    </Card>
+    </>
   );
 }
diff --git a/ui/src/components/keys/CreateKey.tsx b/ui/src/components/keys/CreateKey.tsx
@@ -1,5 +1,5 @@
 import { App, Button, Card, Divider, Flex, Form, Input, Select, Space } from "antd";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 
 import { CreateKey as CreateKeyType, createKey } from "src/adapters/api/keys";
 import { SiderLayoutContent } from "src/components/shared/SiderLayoutContent";
@@ -24,7 +24,11 @@ export function CreateKey() {
     }).then((response) => {
       if (response.success) {
         void message.success("Key added successfully");
-        navigate(ROUTES.keys.path);
+        navigate(
+          generatePath(ROUTES.identityDetails.path, {
+            identityID: identifier,
+          })
+        );
       } else {
         void message.error(response.error.message);
       }

diff --git a/ui/src/components/keys/Key.tsx b/ui/src/components/keys/Key.tsx
@@ -12,7 +12,7 @@ import {
   Typography,
 } from "antd";
 import { useCallback, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { generatePath, useNavigate, useParams } from "react-router-dom";
 
 import { useIdentityContext } from "../../contexts/Identity";
 import { UpdateKey, deleteKey, getKey, updateKeyName } from "src/adapters/api/keys";
@@ -102,7 +102,11 @@ export function Key() {
   const handleDeleteKey = () => {
     void deleteKey({ env, identifier, keyID }).then((response) => {
       if (response.success) {
-        navigate(ROUTES.keys.path);
+        navigate(
+          generatePath(ROUTES.identityDetails.path, {
+            identityID: identifier,
+          })
+        );
         void message.success(response.data.message);
       } else {
         void message.error(response.error.message);

diff --git a/ui/src/components/keys/Keys.tsx b/ui/src/components/keys/Keys.tsx
diff --git a/ui/src/components/keys/KeysTable.tsx b/ui/src/components/keys/KeysTable.tsx
@@ -4,8 +4,8 @@ import {
   Button,
   Card,
   Dropdown,
+  Flex,
   Row,
-  Space,
   Table,
   TableColumnsType,
   Tag,
@@ -40,6 +40,7 @@ import {
   DEFAULT_PAGINATION_TOTAL,
   DETAILS,
   DOTS_DROPDOWN_WIDTH,
+  KEYS,
   KEY_ADD_NEW,
   PAGINATION_MAX_RESULTS_PARAM,
   PAGINATION_PAGE_PARAM,
@@ -299,15 +300,23 @@ export function KeysTable() {
           rowKey="id"
           showSorterTooltip
           sortDirections={["ascend", "descend"]}
+          style={{ width: "100%" }}
         />
       }
       title={
-        <Row justify="space-between">
-          <Space size="middle">
-            <Card.Meta title="Keys" />
+        <Flex align="center" justify="space-between" style={{ padding: "12px 0" }}>
+          <Flex align="center" gap={16}>
+            <Card.Meta title={KEYS} />
             <Tag>{paginationTotal}</Tag>
-          </Space>
-        </Row>
+          </Flex>
+          <Button
+            icon={<IconPlus />}
+            onClick={() => navigate(ROUTES.createKey.path)}
+            type="primary"
+          >
+            Create key
+          </Button>
+        </Flex>
       }
     />
   );

diff --git a/ui/src/components/shared/Router.tsx b/ui/src/components/shared/Router.tsx
@@ -18,7 +18,6 @@ import { Onboarding } from "src/components/identities/Onboarding";
 import { IssuerState } from "src/components/issuer-state/IssuerState";
 import { CreateKey } from "src/components/keys/CreateKey";
 import { Key } from "src/components/keys/Key";
-import { Keys } from "src/components/keys/Keys";
 import { FullWidthLayout } from "src/components/layouts/FullWidthLayout";
 import { SiderLayout } from "src/components/layouts/SiderLayout";
 import { CreatePaymentOption } from "src/components/payments/CreatePaymentOption";
@@ -50,7 +49,6 @@ const COMPONENTS: Record<RouteID, ComponentType> = {
   issueCredential: IssueCredential,
   issuerState: IssuerState,
   keyDetails: Key,
-  keys: Keys,
   linkDetails: LinkDetails,
   notFound: NotFound,
   onboarding: Onboarding,

diff --git a/ui/src/components/shared/SiderMenu.tsx b/ui/src/components/shared/SiderMenu.tsx
@@ -7,7 +7,6 @@ import IconDisplayMethod from "src/assets/icons/display-method.svg?react";
 import IconFile from "src/assets/icons/file-05.svg?react";
 import IconSchema from "src/assets/icons/file-search-02.svg?react";
 import IconIdentities from "src/assets/icons/fingerprint-02.svg?react";
-import IconKeys from "src/assets/icons/keys.svg?react";
 import IconLink from "src/assets/icons/link-external-01.svg?react";
 import IconPaymentOptions from "src/assets/icons/payment-options.svg?react";
 import IconSettings from "src/assets/icons/settings-01.svg?react";
@@ -28,7 +27,6 @@ import {
   DOCS_URL,
   IDENTITIES,
   ISSUER_STATE,
-  KEYS,
   PAYMENT_OPTIONS,
   SCHEMAS,
 } from "src/utils/constants";
@@ -55,7 +53,6 @@ export function SiderMenu({
   const schemasPath = ROUTES.schemas.path;
   const identitiesPath = ROUTES.identities.path;
   const displayMethodsPath = ROUTES.displayMethods.path;
-  const keysPath = ROUTES.keys.path;
   const paymentOptionsPath = ROUTES.paymentOptions.path;
 
   const getSelectedKey = (): string[] => {
@@ -94,6 +91,8 @@ export function SiderMenu({
           { path: identitiesPath },
           { path: ROUTES.createIdentity.path },
           { path: ROUTES.identityDetails.path },
+          { path: ROUTES.keyDetails.path },
+          { path: ROUTES.createKey.path },
         ],
         pathname
       )
@@ -110,13 +109,6 @@ export function SiderMenu({
       )
     ) {
       return [displayMethodsPath];
-    } else if (
-      matchRoutes(
-        [{ path: keysPath }, { path: ROUTES.keyDetails.path }, { path: ROUTES.createKey.path }],
-        pathname
-      )
-    ) {
-      return [keysPath];
     } else if (
       matchRoutes(
         [
@@ -201,13 +193,6 @@ export function SiderMenu({
                 title: "",
               },
 
-              {
-                icon: <IconKeys />,
-                key: keysPath,
-                label: KEYS,
-                onClick: () => onMenuClick(keysPath),
-                title: "",
-              },
               {
                 icon: <IconPaymentOptions />,
                 key: paymentOptionsPath,

diff --git a/ui/src/routes.ts b/ui/src/routes.ts
@@ -18,7 +18,6 @@ export type RouteID =
   | "displayMethods"
   | "displayMethodDetails"
   | "createDisplayMethod"
-  | "keys"
   | "keyDetails"
   | "createKey"
   | "createPaymentOption"
@@ -104,10 +103,6 @@ export const ROUTES: Routes = {
     layout: "sider",
     path: "/keys/:keyID",
   },
-  keys: {
-    layout: "sider",
-    path: "/keys",
-  },
   linkDetails: {
     layout: "sider",
     path: "/credentials/links/:linkID",