feat(ui): optimize table UI

ui/src/i18n/locales/en/nls.access.json

@@ -1,7 +1,7 @@
 {
   "access.page.title": "Authorization",
 
-  "access.nodata": "Please add authorization to start deploying certificate.",
+  "access.nodata": "No accesses. Please create an authorization first.",
 
   "access.action.add": "Create Authorization",
   "access.action.edit": "Edit Authorization",

ui/src/i18n/locales/en/nls.certificate.json

@@ -1,7 +1,7 @@
 {
   "certificate.page.title": "Certificates",
 
-  "certificate.nodata": "No certificates yet, create a workflow to generate certificates! 😀",
+  "certificate.nodata": "No certificates. Please create a workflow to generate certificates! 😀",
 
   "certificate.action.view": "View Certificate",
   "certificate.action.download": "Download Certificate",

ui/src/i18n/locales/en/nls.workflow.json

@@ -1,8 +1,10 @@
 {
   "workflow.page.title": "Workflows",
+
+  "workflow.nodata": "No workflows. Please create a workflow to generate certificates! 😀",
+
   "workflow.detail.title": "Workflow",
   "workflow.detail.history": "History",
-
   "workflow.detail.action.save": "Save updates",
   "workflow.detail.action.save.failed": "Save failed",
   "workflow.detail.action.save.failed.uncompleted": "Save failed, please complete all node settings",

ui/src/i18n/locales/zh/nls.access.json

@@ -1,7 +1,7 @@
 {
   "access.page.title": "授权管理",
 
-  "access.nodata": "请添加授权开始部署证书吧。",
+  "access.nodata": "暂无授权信息，请先创建。",
 
   "access.action.add": "新建授权",
   "access.action.edit": "编辑授权",

ui/src/i18n/locales/zh/nls.certificate.json

@@ -1,7 +1,7 @@
 {
   "certificate.page.title": "证书管理",
 
-  "certificate.nodata": "暂无证书，创建一个工作流去生成证书吧 😀",
+  "certificate.nodata": "暂无证书，创建一个工作流去生成证书吧～ 😀",
 
   "certificate.action.view": "查看证书",
   "certificate.action.download": "下载证书",

ui/src/i18n/locales/zh/nls.workflow.json

@@ -1,8 +1,12 @@
 {
   "workflow.page.title": "工作流",
+
+  "certificate.nodata": "暂无证书，创建一个工作流去生成证书吧～ 😀",
+
+  "workflow.nodata": "No workflows yet. Try to create a workflow to generate certificates! 😀",
+
   "workflow.detail.title": "流程",
   "workflow.detail.history": "历史",
-
   "workflow.detail.action.save": "保存变更",
   "workflow.detail.action.save.failed": "保存失败",
   "workflow.detail.action.save.failed.uncompleted": "保存失败，请完成所有节点设置",

ui/src/pages/ConsoleLayout.tsx

@@ -60,7 +60,6 @@ const ConsoleLayout = () => {
     const item =
       menuItems.find((item) => item!.key === location.pathname) ??
       menuItems.find((item) => item!.key !== "/" && location.pathname.startsWith(item!.key as string));
-    console.log(item);
     if (item) {
       setMenuSelectedKey(item.key as string);
     } else {

ui/src/pages/accesses/AccessList.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Avatar, Button, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
+import { Avatar, Button, Empty, Modal, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
 import moment from "moment";
@@ -13,6 +13,9 @@ import { useConfigContext } from "@/providers/config";
 const AccessList = () => {
   const { t } = useTranslation();
 
+  // a flag to fix the twice-rendering issue in strict mode
+  const mountRef = useRef(true);
+
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
@@ -111,7 +114,7 @@ const AccessList = () => {
 
   const configContext = useConfigContext();
 
-  const fetchTableData = async () => {
+  const fetchTableData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
 
@@ -124,14 +127,20 @@ const AccessList = () => {
       setTableTotal(configContext.config.accesses.length);
     } catch (err) {
       console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }
-  };
+  }, [page, pageSize, configContext.config.accesses]);
 
   useEffect(() => {
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+
     fetchTableData();
-  }, [page, pageSize, configContext.config.accesses]);
+  }, [fetchTableData]);
 
   const handleDeleteClick = async (data: AccessType) => {
     modalApi.confirm({
@@ -143,13 +152,13 @@ const AccessList = () => {
           const res = await removeAccess(data);
           configContext.deleteAccess(res.id);
         } catch (err) {
+          console.error(err);
           notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
         }
       },
     });
   };
 
-  // TODO: Empty 样式
   // TODO: 响应式表格
 
   return (
@@ -176,6 +185,9 @@ const AccessList = () => {
         columns={tableColumns}
         dataSource={tableData}
         loading={loading}
+        locale={{
+          emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("access.nodata")} />,
+        }}
         pagination={{
           current: page,
           pageSize: pageSize,

ui/src/pages/certificates/CertificateList.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, Space, Table, Tooltip, Typography, type TableProps } from "antd";
+import { Button, Empty, notification, Space, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import { Eye as EyeIcon } from "lucide-react";
 import moment from "moment";
@@ -17,6 +17,11 @@ const CertificateList = () => {
 
   const { t } = useTranslation();
 
+  // a flag to fix the twice-rendering issue in strict mode
+  const mountRef = useRef(true);
+
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
   const [loading, setLoading] = useState<boolean>(false);
 
   const tableColumns: TableProps<CertificateType>["columns"] = [
@@ -120,7 +125,7 @@ const CertificateList = () => {
   const [page, setPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
 
-  const fetchTableData = async () => {
+  const fetchTableData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
 
@@ -137,14 +142,20 @@ const CertificateList = () => {
       setTableTotal(resp.totalItems);
     } catch (err) {
       console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }
-  };
+  }, [page, pageSize]);
 
   useEffect(() => {
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+
     fetchTableData();
-  }, [page, pageSize]);
+  }, [fetchTableData]);
 
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [currentRecord, setCurrentRecord] = useState<CertificateType>();
@@ -154,17 +165,21 @@ const CertificateList = () => {
     setCurrentRecord(certificate);
   };
 
-  // TODO: Empty 样式
   // TODO: 响应式表格
 
   return (
     <>
+      {NotificationContextHolder}
+
       <PageHeader title={t("certificate.page.title")} />
 
       <Table<CertificateType>
         columns={tableColumns}
         dataSource={tableData}
         loading={loading}
+        locale={{
+          emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("certificate.nodata")} />,
+        }}
         pagination={{
           current: page,
           pageSize: pageSize,

ui/src/pages/workflows/WorkflowList.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Button, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
+import { Button, Empty, Modal, notification, Space, Switch, Table, Tooltip, Typography, type TableProps } from "antd";
 import { PageHeader } from "@ant-design/pro-components";
 import { Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Trash2Icon } from "lucide-react";
 import moment from "moment";
@@ -15,6 +15,9 @@ const WorkflowList = () => {
 
   const { t } = useTranslation();
 
+  // a flag to fix the twice-rendering issue in strict mode
+  const mountRef = useRef(true);
+
   const [modalApi, ModelContextHolder] = Modal.useModal();
   const [notificationApi, NotificationContextHolder] = notification.useNotification();
 
@@ -137,7 +140,7 @@ const WorkflowList = () => {
   const [pageSize, setPageSize] = useState<number>(10);
 
   // TODO: 表头筛选
-  const fetchTableData = async () => {
+  const fetchTableData = useCallback(async () => {
     if (loading) return;
     setLoading(true);
 
@@ -154,14 +157,20 @@ const WorkflowList = () => {
       setTableTotal(resp.totalItems);
     } catch (err) {
       console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
       setLoading(false);
     }
-  };
+  }, [searchParams, page, pageSize]);
 
   useEffect(() => {
+    if (mountRef.current) {
+      mountRef.current = false;
+      return;
+    }
+
     fetchTableData();
-  }, [page, pageSize]);
+  }, [fetchTableData]);
 
   const handleEnabledChange = async (workflow: WorkflowType) => {
     try {
@@ -180,6 +189,7 @@ const WorkflowList = () => {
         });
       }
     } catch (err) {
+      console.error(err);
       notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     }
   };
@@ -195,6 +205,7 @@ const WorkflowList = () => {
             setTableData((prev) => prev.filter((item) => item.id !== workflow.id));
           }
         } catch (err) {
+          console.error(err);
           notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
         }
       },
@@ -205,7 +216,6 @@ const WorkflowList = () => {
     navigate("/workflows/detail");
   };
 
-  // TODO: Empty 样式
   // TODO: 响应式表格
 
   return (
@@ -233,6 +243,9 @@ const WorkflowList = () => {
         columns={tableColumns}
         dataSource={tableData}
         loading={loading}
+        locale={{
+          emptyText: <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t("workflow.nodata")} />,
+        }}
         pagination={{
           current: page,
           pageSize: pageSize,

ui/src/repository/access.ts

@@ -10,14 +10,15 @@ export const list = async () => {
   });
 };
 
-export const save = async (data: Access) => {
-  if (data.id) {
-    return await getPocketBase().collection("access").update(data.id, data);
+export const save = async (record: Access) => {
+  if (record.id) {
+    return await getPocketBase().collection("access").update(record.id, record);
   }
-  return await getPocketBase().collection("access").create(data);
+
+  return await getPocketBase().collection("access").create(record);
 };
 
-export const remove = async (data: Access) => {
-  data.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
-  return await getPocketBase().collection("access").update(data.id, data);
+export const remove = async (record: Access) => {
+  record.deleted = moment.utc().format("YYYY-MM-DD HH:mm:ss");
+  return await getPocketBase().collection("access").update(record.id, record);
 };

ui/src/repository/deployment.ts

@@ -1,25 +0,0 @@
-import { Deployment, DeploymentListReq } from "@/domain/deployment";
-import { getPocketBase } from "./pocketbase";
-
-export const list = async (req: DeploymentListReq) => {
-  let page = 1;
-  if (req.page) {
-    page = req.page;
-  }
-
-  let perPage = 50;
-  if (req.perPage) {
-    perPage = req.perPage;
-  }
-
-  let filter = "domain!=null";
-  if (req.domain) {
-    filter = `domain="${req.domain}"`;
-  }
-
-  return await getPocketBase().collection("deployments").getList<Deployment>(page, perPage, {
-    filter: filter,
-    sort: "-deployedAt",
-    expand: "domain",
-  });
-};

ui/src/repository/domains.ts

@@ -1,80 +0,0 @@
-import { getTimeAfter } from "@/lib/time";
-import { Domain } from "@/domain/domain";
-import { getPocketBase } from "./pocketbase";
-
-type DomainListReq = {
-  domain?: string;
-  page?: number;
-  perPage?: number;
-  state?: string;
-};
-
-export const list = async (req: DomainListReq) => {
-  const pb = getPocketBase();
-
-  let page = 1;
-  if (req.page) {
-    page = req.page;
-  }
-
-  let perPage = 2;
-  if (req.perPage) {
-    perPage = req.perPage;
-  }
-
-  let filter = "";
-  if (req.state === "enabled") {
-    filter = "enabled=true";
-  } else if (req.state === "disabled") {
-    filter = "enabled=false";
-  } else if (req.state === "expired") {
-    filter = pb.filter("expiredAt<{:expiredAt}", {
-      expiredAt: getTimeAfter(15),
-    });
-  }
-
-  const response = pb.collection("domains").getList<Domain>(page, perPage, {
-    sort: "-created",
-    expand: "lastDeployment",
-    filter: filter,
-  });
-
-  return response;
-};
-
-export const get = async (id: string) => {
-  const response = await getPocketBase().collection("domains").getOne<Domain>(id);
-  return response;
-};
-
-export const save = async (data: Domain) => {
-  if (data.id) {
-    return await getPocketBase().collection("domains").update<Domain>(data.id, data);
-  }
-  return await getPocketBase().collection("domains").create<Domain>(data);
-};
-
-export const remove = async (id: string) => {
-  return await getPocketBase().collection("domains").delete(id);
-};
-
-type Callback = (data: Domain) => void;
-export const subscribeId = (id: string, callback: Callback) => {
-  return getPocketBase()
-    .collection("domains")
-    .subscribe<Domain>(
-      id,
-      (e) => {
-        if (e.action === "update") {
-          callback(e.record);
-        }
-      },
-      {
-        expand: "lastDeployment",
-      }
-    );
-};
-
-export const unsubscribeId = (id: string) => {
-  getPocketBase().collection("domains").unsubscribe(id);
-};

ui/src/repository/workflow.ts

@@ -27,18 +27,18 @@ export const get = async (id: string) => {
   return await getPocketBase().collection("workflow").getOne<Workflow>(id);
 };
 
-export const save = async (data: Record<string, string | boolean | WorkflowNode>) => {
-  if (data.id) {
+export const save = async (record: Record<string, string | boolean | WorkflowNode>) => {
+  if (record.id) {
     return await getPocketBase()
       .collection("workflow")
-      .update<Workflow>(data.id as string, data);
+      .update<Workflow>(record.id as string, record);
   }
 
-  return await getPocketBase().collection("workflow").create<Workflow>(data);
+  return await getPocketBase().collection("workflow").create<Workflow>(record);
 };
 
-export const remove = async (workflow: Workflow) => {
-  return await getPocketBase().collection("workflow").delete(workflow.id);
+export const remove = async (record: Workflow) => {
+  return await getPocketBase().collection("workflow").delete(record.id);
 };
 
 type WorkflowLogsReq = {