Add sorting to certificate list

PeculiarVentures · May 20, 2024 · e89e5ff · e89e5ff
1 parent 4296d2f
commit e89e5ff
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 15 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -3,6 +3,7 @@ import type { Preview } from "@storybook/react";
 import { ThemeProvider, ToastProvider } from "@peculiar/react-components";
 import { theme } from "../src/config/theme";
 import i18n from "../src/i18n";
+import "../public/assets/styles/reset.css";
 import "../src/global.scss";
 import "./storybook.css";
 

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "devDependencies": {
     "@eslint/js": "^9.1.1",
+    "@faker-js/faker": "^8.4.1",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-essentials": "^8.0.9",
     "@storybook/addon-interactions": "^8.0.9",
@@ -43,6 +44,7 @@
     "clsx": "^2.1.1",
     "i18next": "^23.11.2",
     "intl-messageformat": "^10.5.11",
+    "lodash": "^4.17.21",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-dropzone": "^14.2.3",

diff --git a/src/app.module.scss b/src/app.module.scss
@@ -22,3 +22,11 @@
     background-color: var(--pv-color-gray-2);
   }
 }
+.certificate_list {
+  background-color: var(--pv-color-gray-2);
+  th {
+    position: sticky;
+    top: var(--pv-top-header-height);
+    z-index: 99;
+  }
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -8,6 +8,7 @@ import { CertificatesProvidersList } from "./components/certificates-providers-l
 import { CertificatesTopbar } from "./components/certificates-topbar";
 import { CertificateDeleteDialog } from "./components/certificate-delete-dialog";
 import { CertificateViewerDialog } from "./components/certificate-viewer-dialog";
+import { useSortList } from "./hooks/sort-list";
 import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog";
 
 import styles from "./app.module.scss";
@@ -31,6 +32,13 @@ export function App() {
     handleCertificateViewerClose,
   } = useApp();
 
+  const {
+    list: sortedCertificates,
+    name: currentSortName,
+    derection: currentSortDir,
+    handleSort,
+  } = useSortList(certificates, "notAfter");
+
   const {
     open: handleCertificateImportDialogOpen,
     dialog: certificateImportDialog,
@@ -61,7 +69,11 @@ export function App() {
       ></CertificatesTopbar>
       {fetching.certificates ? (
         <CertificatesList
-          certificates={certificates}
+          currentSortName={currentSortName}
+          currentSortDir={currentSortDir}
+          onSort={handleSort}
+          className={styles.certificate_list}
+          certificates={sortedCertificates}
           onDelete={handleCertificateDeleteDialogOpen}
           onViewDetails={handleCertificateViewerOpen}
         />

diff --git a/src/components/certificates-list/CertificatesList.stories.tsx b/src/components/certificates-list/CertificatesList.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CertificatesList } from "./CertificatesList";
+import { faker } from "@faker-js/faker";
+
+const meta: Meta<typeof CertificatesList> = {
+  title: "Components/CertificatesList",
+  component: CertificatesList,
+};
+
+export default meta;
+type Story = StoryObj<typeof CertificatesList>;
+
+export const Default: Story = {
+  args: {
+    certificates: Array.from(Array(10)).map(() => ({
+      index: faker.string.uuid(),
+      issuerName: "",
+      notAfter: faker.date.future(),
+      notBefore: faker.date.past(),
+      providerID: faker.string.uuid(),
+      publicKey: "" as unknown as CryptoKey,
+      raw: new ArrayBuffer(0),
+      serialNumber: faker.string.uuid(),
+      subjectName: "",
+      type: "x509",
+      id: faker.string.uuid(),
+      label: faker.internet.domainName(),
+      privateKeyId: "",
+      subject: {
+        commonName: "",
+      },
+    })),
+  },
+};
diff --git a/src/components/certificates-list/CertificatesList.tsx b/src/components/certificates-list/CertificatesList.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { ComponentProps, useState } from "react";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { Button, IconButton, Typography } from "@peculiar/react-components";
@@ -18,6 +18,7 @@ import { CertificateSerialNumber } from "../certificate-serial-number";
 import { downloadCertificate } from "../../utils/download-certificate";
 import { CopyIconButton } from "../copy-icon-button";
 import { certificateRawToPem } from "../../utils/certificate";
+import { SortButton } from "../sort-button";
 
 import { CertificateProps } from "../../types";
 
@@ -26,16 +27,34 @@ import DownloadIcon from "../../icons/download-20.svg?react";
 
 import styles from "./styles/index.module.scss";
 
+type TSortColumnName = keyof Pick<
+  CertificateProps,
+  "label" | "serialNumber" | "notAfter"
+>;
+type TSortColumnDir = "asc" | "desc";
+
 interface CertificatesListProps {
   certificates: CertificateProps[];
+  currentSortName: TSortColumnName | string;
+  currentSortDir: TSortColumnDir;
+  onSort: (name: TSortColumnName, dir: TSortColumnDir) => void;
   onDelete: (id: string, name: string) => void;
   onViewDetails: (certificate: CertificateProps) => void;
+  className?: ComponentProps<"table">["className"];
 }
 
 export const CertificatesList: React.FunctionComponent<
   CertificatesListProps
 > = (props) => {
-  const { certificates, onViewDetails, onDelete } = props;
+  const {
+    certificates,
+    className,
+    currentSortName,
+    currentSortDir,
+    onSort,
+    onViewDetails,
+    onDelete,
+  } = props;
 
   const { t } = useTranslation();
 
@@ -54,15 +73,43 @@ export const CertificatesList: React.FunctionComponent<
     );
   }
 
+  const renderSortTitle = (name: TSortColumnName, title: string) => (
+    <SortButton
+      active={currentSortName === name}
+      order={currentSortName === name ? currentSortDir : "desc"}
+      onClick={() =>
+        onSort(
+          name,
+          currentSortName === name
+            ? currentSortDir === "asc"
+              ? "desc"
+              : "asc"
+            : "asc"
+        )
+      }
+    >
+      {t(title)}
+    </SortButton>
+  );
+
   return (
     <div className={styles.table_wrapper}>
-      <Table className={styles.list_table}>
+      <Table className={clsx(styles.list_table, className)}>
         <TableHeader>
           <TableRow>
             <TableHead>{t("certificates.list.header.type")}</TableHead>
-            <TableHead>{t("certificates.list.header.name")}</TableHead>
-            <TableHead>{t("certificates.list.header.serial-number")}</TableHead>
-            <TableHead>{t("certificates.list.header.expires")}</TableHead>
+            <TableHead>
+              {renderSortTitle("label", "certificates.list.header.name")}
+            </TableHead>
+            <TableHead>
+              {renderSortTitle(
+                "serialNumber",
+                "certificates.list.header.serial-number"
+              )}
+            </TableHead>
+            <TableHead>
+              {renderSortTitle("notAfter", "certificates.list.header.expires")}
+            </TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -112,13 +159,16 @@ export const CertificatesList: React.FunctionComponent<
                       {t("certificates.list.action.view-details")}
                     </Button>
                     <CopyIconButton
-                      value={certificateRawToPem(raw, type)}
+                      value={
+                        raw.byteLength ? certificateRawToPem(raw, type) : ""
+                      }
                       className={styles.action_icon_button}
                     />
                     <IconButton
                       tabIndex={0}
                       title={t("certificates.list.action.download")}
                       onClick={() =>
+                        raw.byteLength &&
                         downloadCertificate(label as string, raw, type)
                       }
                       size="small"

diff --git a/src/components/certificates-list/styles/index.module.scss b/src/components/certificates-list/styles/index.module.scss
@@ -1,18 +1,11 @@
 .list_table {
-  background-color: var(--pv-color-gray-2);
   table-layout: fixed;
 
   thead th,
   tbody {
     background-color: var(--pv-color-white);
   }
 
-  th {
-    position: sticky;
-    top: var(--pv-top-header-height);
-    z-index: 99;
-  }
-
   th:nth-child(1) {
     width: 30%;
   }

diff --git a/src/hooks/sort-list/index.ts b/src/hooks/sort-list/index.ts
@@ -0,0 +1 @@
+export * from "./useSortList";
diff --git a/src/hooks/sort-list/useSortList.tsx b/src/hooks/sort-list/useSortList.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import _orderBy from "lodash/orderBy";
+
+type TSortDir = "asc" | "desc";
+
+export function useSortList(
+  list: object,
+  name: string,
+  direction: TSortDir = "desc"
+) {
+  const [currentName, setCurrentName] = useState(name);
+  const [currentDerection, setCurrentDirection] = useState(direction);
+  const handleSort = (name: string, dir: TSortDir) => {
+    setCurrentName(name);
+    setCurrentDirection(dir);
+  };
+
+  const sortedList = _orderBy(list, [currentName], [currentDerection]);
+
+  return {
+    list: sortedList,
+    name: currentName,
+    derection: currentDerection,
+    handleSort,
+  };
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1330,6 +1330,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.2.0.tgz#b0a9123e8e91a3d9a2eed3a04a6ed44fdab639aa"
   integrity sha512-ESiIudvhoYni+MdsI8oD7skpprZ89qKocwRM2KEvhhBJ9nl5MRh7BXU5GTod7Mdygq+AUl+QzId6iWJKR/wABA==
 
+"@faker-js/faker@^8.4.1":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.4.1.tgz#5d5e8aee8fce48f5e189bf730ebd1f758f491451"
+  integrity sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
+
 "@fal-works/esbuild-plugin-global-externals@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"