refactor(ui): clean code

ui/.eslintrc.cjs

@@ -20,6 +20,7 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
+    "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/no-explicit-any": [
       "warn",
       {

ui/src/components/Show.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export type ShowProps = {
   when: boolean;
   children: React.ReactNode;

ui/src/components/core/DrawerForm.tsx

@@ -4,7 +4,7 @@ import { Button, Drawer, Form, Space, type DrawerProps, type FormProps, type Mod
 
 import { useAntdForm, useTriggerElement } from "@/hooks";
 
-export interface DrawerFormProps<T extends NonNullable<unknown> = any> extends Omit<FormProps<T>, "title" | "onFinish"> {
+export interface DrawerFormProps<T extends NonNullable<unknown> = NonNullable<unknown>> extends Omit<FormProps<T>, "title" | "onFinish"> {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -22,7 +22,7 @@ export interface DrawerFormProps<T extends NonNullable<unknown> = any> extends O
   onFinish?: (values: T) => void | Promise<unknown>;
 }
 
-const DrawerForm = <T extends NonNullable<unknown> = any>({
+const DrawerForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
   className,
   style,
   children,

ui/src/components/core/ModalForm.tsx

@@ -3,7 +3,7 @@ import { Form, Modal, type FormProps, type ModalProps } from "antd";
 
 import { useAntdForm, useTriggerElement } from "@/hooks";
 
-export interface ModalFormProps<T extends NonNullable<unknown> = any> extends Omit<FormProps<T>, "title" | "onFinish"> {
+export interface ModalFormProps<T extends NonNullable<unknown> = NonNullable<unknown>> extends Omit<FormProps<T>, "title" | "onFinish"> {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -35,7 +35,7 @@ export interface ModalFormProps<T extends NonNullable<unknown> = any> extends Om
   onFinish?: (values: T) => void | Promise<unknown>;
 }
 
-const ModalForm = <T extends NonNullable<unknown> = any>({
+const ModalForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
   className,
   style,
   children,

ui/src/components/workflow/AddNode.tsx

@@ -1,7 +1,7 @@
 import { PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons";
 import { Dropdown } from "antd";
 
-import { newWorkflowNode, workflowNodeDropdownList, WorkflowNodeType } from "@/domain/workflow";
+import { newWorkflowNode, workflowNodeDropdownList, type WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
 import { useWorkflowStore } from "@/stores/workflow";
 

ui/src/components/workflow/NodeRender.tsx

@@ -1,12 +1,12 @@
 import { memo } from "react";
 
-import { WorkflowBranchNode, WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
+import { type WorkflowBranchNode, type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 
 import BranchNode from "./BranchNode";
 import ConditionNode from "./ConditionNode";
 import End from "./End";
 import Node from "./Node";
-import { NodeProps } from "./types";
+import { type NodeProps } from "./types";
 
 const NodeRender = memo(({ data, branchId, branchIndex }: NodeProps) => {
   const render = () => {

ui/src/components/workflow/PanelBody.tsx

@@ -1,4 +1,4 @@
-import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
+import { type WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 
 import DeployPanelBody from "./DeployPanelBody";
 import ApplyNodeForm from "./node/ApplyNodeForm";

ui/src/hooks/useAntdForm.ts

@@ -2,17 +2,17 @@
 import { useDeepCompareEffect } from "ahooks";
 import { Form, type FormInstance, type FormProps } from "antd";
 
-export interface UseAntdFormOptions<T extends NonNullable<unknown> = any> {
+export interface UseAntdFormOptions<T extends NonNullable<unknown> = NonNullable<unknown>> {
   form?: FormInstance<T>;
   initialValues?: Partial<T> | (() => Partial<T> | Promise<Partial<T>>);
-  onSubmit?: (values: T) => any;
+  onSubmit?: (values: T) => unknown;
 }
 
-export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
+export interface UseAntdFormReturns<T extends NonNullable<unknown> = NonNullable<unknown>> {
   form: FormInstance<T>;
   formProps: Omit<FormProps<T>, "children">;
   formPending: boolean;
-  submit: (values?: T) => Promise<any>;
+  submit: (values?: T) => Promise<unknown>;
 }
 
 /**
@@ -20,7 +20,11 @@ export interface UseAntdFormReturns<T extends NonNullable<unknown> = any> {
  * @param {UseAntdFormOptions} options
  * @returns {UseAntdFormReturns}
  */
-const useAntdForm = <T extends NonNullable<unknown> = any>({ initialValues, form, onSubmit }: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
+const useAntdForm = <T extends NonNullable<unknown> = NonNullable<unknown>>({
+  initialValues,
+  form,
+  onSubmit,
+}: UseAntdFormOptions<T>): UseAntdFormReturns<T> => {
   const formInst = form ?? Form["useForm"]()[0];
   const [formInitialValues, setFormInitialValues] = useState<Partial<T>>();
   const [formPending, setFormPending] = useState(false);

ui/src/i18n/locales/index.ts

@@ -1,4 +1,4 @@
-import { Resource } from "i18next";
+import { type Resource } from "i18next";
 
 import en from "./en";
 import zh from "./zh";

ui/src/pages/certificates/CertificateList.tsx

@@ -9,7 +9,7 @@ import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
 import CertificateDetailDrawer from "@/components/certificate/CertificateDetailDrawer";
-import { CertificateModel } from "@/domain/certificate";
+import { type CertificateModel } from "@/domain/certificate";
 import { list as listCertificate, type ListCertificateRequest } from "@/repository/certificate";
 import { getErrMsg } from "@/utils/error";
 

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -2,9 +2,11 @@ import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import {
+  ApartmentOutlined as ApartmentOutlinedIcon,
   CaretRightOutlined as CaretRightOutlinedIcon,
   DeleteOutlined as DeleteOutlinedIcon,
   EllipsisOutlined as EllipsisOutlinedIcon,
+  HistoryOutlined as HistoryOutlinedIcon,
   UndoOutlined as UndoOutlinedIcon,
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-components";
@@ -121,9 +123,20 @@ const WorkflowDetail = () => {
       return;
     }
 
-    save();
+    modalApi.confirm({
+      title: t("workflow.action.release"),
+      content: t("workflow.action.release.confirm"),
+      onOk: async () => {
+        try {
+          await save();
 
-    messageApi.success(t("common.text.operation_succeeded"));
+          messageApi.success(t("common.text.operation_succeeded"));
+        } catch (err) {
+          console.error(err);
+          notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+        }
+      },
+    });
   };
 
   const handleRunClick = () => {
@@ -207,8 +220,8 @@ const WorkflowDetail = () => {
             activeKey={tabValue}
             defaultActiveKey="orchestration"
             items={[
-              { key: "orchestration", label: t("workflow.detail.orchestration.tab") },
-              { key: "runs", label: t("workflow.detail.runs.tab") },
+              { key: "orchestration", label: t("workflow.detail.orchestration.tab"), icon: <ApartmentOutlinedIcon /> },
+              { key: "runs", label: t("workflow.detail.runs.tab"), icon: <HistoryOutlinedIcon /> },
             ]}
             renderTabBar={(props, DefaultTabBar) => <DefaultTabBar {...props} style={{ margin: 0 }} />}
             tabBarStyle={{ border: "none" }}

ui/src/stores/workflow/index.ts

@@ -9,9 +9,9 @@ import {
   removeBranch,
   removeNode,
   updateNode,
-  WorkflowBranchNode,
-  WorkflowModel,
-  WorkflowNode,
+  type WorkflowBranchNode,
+  type WorkflowModel,
+  type WorkflowNode,
   WorkflowNodeType,
 } from "@/domain/workflow";
 import { get as getWorkflow, save as saveWorkflow } from "@/repository/workflow";