From 4e0134b70a330d6a784e1a28c09ac9e62c75a915 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Sat, 7 Dec 2024 17:11:36 +0800
Subject: [PATCH] feat(ui): new CertificateDetail UI using antd

---
 ui/package-lock.json                          |  23 ++++
 ui/package.json                               |   2 +
 .../certificate/CertificateDetail.tsx         | 100 ++++++++++--------
 .../certificate/CertificateDetailDrawer.tsx   |  26 +++++
 .../certificate/CertificateList.tsx           |   4 +-
 ui/src/i18n/locales/en/nls.certificate.json   |   2 +-
 ui/src/i18n/locales/zh/nls.certificate.json   |   2 +-
 ui/src/lib/file.ts                            |   7 +-
 ui/src/pages/ConsoleLayout.tsx                |   6 +-
 ui/src/pages/certificates/CertificateList.tsx |  23 +++-
 10 files changed, 134 insertions(+), 61 deletions(-)
 create mode 100644 ui/src/components/certificate/CertificateDetailDrawer.tsx

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 0045e7c8..1377450b 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -45,6 +45,7 @@
         "nanoid": "^5.0.7",
         "pocketbase": "^0.21.4",
         "react": "^18.3.1",
+        "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.52.1",
         "react-i18next": "^15.0.2",
@@ -59,6 +60,7 @@
         "@types/fs-extra": "^11.0.4",
         "@types/node": "^22.0.0",
         "@types/react": "^18.3.3",
+        "@types/react-copy-to-clipboard": "^5.0.7",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.15.0",
         "@typescript-eslint/parser": "^7.15.0",
@@ -3459,6 +3461,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz",
+      "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.3.0",
       "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.3.0.tgz",
@@ -6931,6 +6942,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.3.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index eda46449..022aff59 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -47,6 +47,7 @@
     "nanoid": "^5.0.7",
     "pocketbase": "^0.21.4",
     "react": "^18.3.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.1",
     "react-i18next": "^15.0.2",
@@ -61,6 +62,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.3",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
diff --git a/ui/src/components/certificate/CertificateDetail.tsx b/ui/src/components/certificate/CertificateDetail.tsx
index d58367ab..95864003 100644
--- a/ui/src/components/certificate/CertificateDetail.tsx
+++ b/ui/src/components/certificate/CertificateDetail.tsx
@@ -1,64 +1,74 @@
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
-
-import { Certificate } from "@/domain/certificate";
-import { Textarea } from "../ui/textarea";
-import { Button } from "../ui/button";
-import { Label } from "../ui/label";
-import { CustomFile, saveFiles2ZIP } from "@/lib/file";
 import { useTranslation } from "react-i18next";
+import { Button, Form, Input, Tooltip } from "antd";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Clipboard as ClipboardIcon } from "lucide-react";
 
-type WorkflowLogDetailProps = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  certificate?: Certificate;
+import { type Certificate } from "@/domain/certificate";
+import { saveFiles2Zip } from "@/lib/file";
+
+type CertificateDetailProps = {
+  data: Certificate;
 };
-const CertificateDetail = ({ open, onOpenChange, certificate }: WorkflowLogDetailProps) => {
+
+const CertificateDetail = ({ data }: CertificateDetailProps) => {
   const { t } = useTranslation();
+
   const handleDownloadClick = async () => {
-    const zipName = `${certificate?.id}-${certificate?.san}.zip`;
-    const files: CustomFile[] = [
+    // TODO: 支持下载多种格式
+    const zipName = `${data.id}-${data.san}.zip`;
+    const files = [
       {
-        name: `${certificate?.san}.pem`,
-        content: certificate?.certificate ? certificate?.certificate : "",
+        name: `${data.san}.pem`,
+        content: data.certificate ?? "",
       },
       {
-        name: `${certificate?.san}.key`,
-        content: certificate?.privateKey ? certificate?.privateKey : "",
+        name: `${data.san}.key`,
+        content: data.privateKey ?? "",
       },
     ];
 
-    await saveFiles2ZIP(zipName, files);
+    await saveFiles2Zip(zipName, files);
   };
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="sm:max-w-2xl dark:text-stone-200">
-        <SheetHeader>
-          <SheetTitle></SheetTitle>
-        </SheetHeader>
+    <div>
+      <Form layout="vertical">
+        <Form.Item>
+          <div className="flex items-center justify-between w-full mb-2">
+            <label className="font-medium">{t("certificate.props.certificate_chain")}</label>
+            <Tooltip title={t("common.copy")}>
+              <CopyToClipboard text={data.certificate}>
+                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+              </CopyToClipboard>
+            </Tooltip>
+          </div>
+          <Input.TextArea value={data.certificate} rows={10} autoSize={{ maxRows: 10 }} readOnly />
+        </Form.Item>
 
-        <div className="flex flex-col space-y-5 mt-9">
-          <div className="flex justify-end">
-            <Button
-              size={"sm"}
-              onClick={() => {
-                handleDownloadClick();
-              }}
-            >
-              {t("certificate.action.download")}
-            </Button>
+        <Form.Item>
+          <div className="flex items-center justify-between w-full mb-2">
+            <label className="font-medium">{t("certificate.props.private_key")}</label>
+            <Tooltip title={t("common.copy")}>
+              <CopyToClipboard text={data.privateKey}>
+                <Button type="text" icon={<ClipboardIcon size={14} />}></Button>
+              </CopyToClipboard>
+            </Tooltip>
           </div>
-          <div className="flex flex-col space-y-3">
-            <Label>{t("certificate.props.certificate")}</Label>
-            <Textarea value={certificate?.certificate} rows={10} readOnly={true} />
-          </div>
-          <div className="flex flex-col space-y-3">
-            <Label>{t("certificate.props.private_key")}</Label>
-            <Textarea value={certificate?.privateKey} rows={10} readOnly={true} />
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
+          <Input.TextArea value={data.privateKey} rows={10} autoSize={{ maxRows: 10 }} readOnly />
+        </Form.Item>
+      </Form>
+
+      <div className="flex items-center justify-end">
+        <Button
+          type="primary"
+          onClick={() => {
+            handleDownloadClick();
+          }}
+        >
+          {t("certificate.action.download")}
+        </Button>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/src/components/certificate/CertificateDetailDrawer.tsx b/ui/src/components/certificate/CertificateDetailDrawer.tsx
new file mode 100644
index 00000000..40fd5982
--- /dev/null
+++ b/ui/src/components/certificate/CertificateDetailDrawer.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+import { Drawer } from "antd";
+
+import { type Certificate } from "@/domain/certificate";
+import CertificateDetail from "./CertificateDetail";
+
+type CertificateDetailDrawerProps = {
+  data?: Certificate;
+  open?: boolean;
+  onClose?: () => void;
+};
+
+const CertificateDetailDrawer = ({ data, open, onClose }: CertificateDetailDrawerProps) => {
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setLoading(data == null);
+  }, [data]);
+
+  return (
+    <Drawer closable destroyOnClose open={open} loading={loading} placement="right" width={480} onClose={onClose}>
+      {data ? <CertificateDetail data={data} /> : <></>}
+    </Drawer>
+  );
+};
+
+export default CertificateDetailDrawer;
diff --git a/ui/src/components/certificate/CertificateList.tsx b/ui/src/components/certificate/CertificateList.tsx
index 681e51d4..a6a9a86a 100644
--- a/ui/src/components/certificate/CertificateList.tsx
+++ b/ui/src/components/certificate/CertificateList.tsx
@@ -1,4 +1,4 @@
-import CertificateDetail from "@/components/certificate/CertificateDetail";
+import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { Button } from "@/components/ui/button";
 import { DataTable } from "@/components/workflow/DataTable";
 import { Certificate as CertificateType } from "@/domain/certificate";
@@ -163,7 +163,7 @@ const CertificateList = ({ withPagination }: CertificateListProps) => {
         }
       />
 
-      <CertificateDetail open={open} onOpenChange={setOpen} certificate={selectedCertificate} />
+      <CertificateDetailDrawer data={selectedCertificate} open={open} onClose={() => setOpen(false)} />
     </>
   );
 };
diff --git a/ui/src/i18n/locales/en/nls.certificate.json b/ui/src/i18n/locales/en/nls.certificate.json
index ca083c6c..bbaf3786 100644
--- a/ui/src/i18n/locales/en/nls.certificate.json
+++ b/ui/src/i18n/locales/en/nls.certificate.json
@@ -13,6 +13,6 @@
   "certificate.props.expiry.text.expire": "Expire",
   "certificate.props.workflow": "Workflow",
   "certificate.props.source": "Source",
-  "certificate.props.certificate": "Certificate",
+  "certificate.props.certificate_chain": "Certificate Chain",
   "certificate.props.private_key": "Private Key"
 }
diff --git a/ui/src/i18n/locales/zh/nls.certificate.json b/ui/src/i18n/locales/zh/nls.certificate.json
index 9d956b1a..297a84a9 100644
--- a/ui/src/i18n/locales/zh/nls.certificate.json
+++ b/ui/src/i18n/locales/zh/nls.certificate.json
@@ -13,6 +13,6 @@
   "certificate.props.expiry.text.expire": "到期",
   "certificate.props.workflow": "所属工作流",
   "certificate.props.source": "来源",
-  "certificate.props.certificate": "证书内容",
+  "certificate.props.certificate_chain": "证书内容",
   "certificate.props.private_key": "私钥内容"
 }
diff --git a/ui/src/lib/file.ts b/ui/src/lib/file.ts
index 38764ed7..41283994 100644
--- a/ui/src/lib/file.ts
+++ b/ui/src/lib/file.ts
@@ -18,12 +18,7 @@ export function readFileContent(file: File): Promise<string> {
   });
 }
 
-export type CustomFile = {
-  name: string;
-  content: string;
-};
-
-export const saveFiles2ZIP = async (zipName: string, files: CustomFile[]) => {
+export const saveFiles2Zip = async (zipName: string, files: { name: string; content: string }[]) => {
   const zip = new JSZip();
 
   files.forEach((file) => {
diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx
index 4bc0cb30..3d96be9a 100644
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button, Dropdown, Layout, Menu, Tooltip, theme, type ButtonProps, type MenuProps } from "antd";
@@ -54,7 +54,7 @@ const ConsoleLayout = () => {
       onClick: () => navigate("/accesses"),
     },
   ];
-  const [menuSelectedKey, setMenuSelectedKey] = useState<string | null>(null);
+  const [menuSelectedKey, setMenuSelectedKey] = useState<string>();
 
   useEffect(() => {
     const item =
@@ -64,7 +64,7 @@ const ConsoleLayout = () => {
     if (item) {
       setMenuSelectedKey(item.key as string);
     } else {
-      setMenuSelectedKey(null);
+      setMenuSelectedKey(undefined);
     }
   }, [location.pathname]);
 
diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx
index facde851..7a927930 100644
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@@ -6,6 +6,7 @@ import { PageHeader } from "@ant-design/pro-components";
 import { Eye as EyeIcon } from "lucide-react";
 import moment from "moment";
 
+import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
 import { Certificate as CertificateType } from "@/domain/certificate";
 import { list as listCertificate, type CertificateListReq } from "@/repository/certificate";
 import { diffDays, getLeftDays } from "@/lib/time";
@@ -73,7 +74,7 @@ const CertificateList = () => {
             </Typography.Link>
           </Space>
         ) : (
-          <>TODO: 手动上传</>
+          <>TODO: 支持手动上传</>
         );
       },
     },
@@ -105,8 +106,7 @@ const CertificateList = () => {
               type="link"
               icon={<EyeIcon size={16} />}
               onClick={() => {
-                // TODO: 查看证书详情
-                alert("TODO");
+                handleViewClick(record);
               }}
             />
           </Tooltip>
@@ -146,6 +146,14 @@ const CertificateList = () => {
     fetchTableData();
   }, [page, pageSize]);
 
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<CertificateType>();
+
+  const handleViewClick = (certificate: CertificateType) => {
+    setDrawerOpen(true);
+    setCurrentRecord(certificate);
+  };
+
   // TODO: Empty 样式
   // TODO: 响应式表格
 
@@ -172,6 +180,15 @@ const CertificateList = () => {
         }}
         rowKey={(record) => record.id}
       />
+
+      <CertificateDetailDrawer
+        data={currentRecord}
+        open={drawerOpen}
+        onClose={() => {
+          setDrawerOpen(false);
+          setCurrentRecord(undefined);
+        }}
+      />
     </>
   );
 };