From 1588179bc9290ff85f30a41e5cc9cac733e565f9 Mon Sep 17 00:00:00 2001 From: Fu Diwei Date: Thu, 2 Jan 2025 10:28:18 +0800 Subject: [PATCH] refactor(ui): clean code --- ui/.eslintrc.cjs | 1 + ui/src/components/Show.tsx | 2 -- ui/src/components/core/DrawerForm.tsx | 4 ++-- ui/src/components/core/ModalForm.tsx | 4 ++-- ui/src/components/workflow/AddNode.tsx | 2 +- ui/src/components/workflow/NodeRender.tsx | 4 ++-- ui/src/components/workflow/PanelBody.tsx | 2 +- ui/src/hooks/useAntdForm.ts | 14 ++++++++----- ui/src/i18n/locales/index.ts | 2 +- ui/src/pages/certificates/CertificateList.tsx | 2 +- ui/src/pages/workflows/WorkflowDetail.tsx | 21 +++++++++++++++---- ui/src/stores/workflow/index.ts | 6 +++--- 12 files changed, 40 insertions(+), 24 deletions(-) diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs index 80e9610c..9b4cfc79 100644 --- a/ui/.eslintrc.cjs +++ b/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", { diff --git a/ui/src/components/Show.tsx b/ui/src/components/Show.tsx index 534fa26e..addd099c 100644 --- a/ui/src/components/Show.tsx +++ b/ui/src/components/Show.tsx @@ -1,5 +1,3 @@ -import React from "react"; - export type ShowProps = { when: boolean; children: React.ReactNode; diff --git a/ui/src/components/core/DrawerForm.tsx b/ui/src/components/core/DrawerForm.tsx index a561ef77..9720f4d7 100644 --- a/ui/src/components/core/DrawerForm.tsx +++ b/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 = any> extends Omit, "title" | "onFinish"> { +export interface DrawerFormProps = NonNullable> extends Omit, "title" | "onFinish"> { className?: string; style?: React.CSSProperties; children?: React.ReactNode; @@ -22,7 +22,7 @@ export interface DrawerFormProps = any> extends O onFinish?: (values: T) => void | Promise; } -const DrawerForm = = any>({ +const DrawerForm = = NonNullable>({ className, style, children, diff --git a/ui/src/components/core/ModalForm.tsx b/ui/src/components/core/ModalForm.tsx index 5b1586f3..f149c97b 100644 --- a/ui/src/components/core/ModalForm.tsx +++ b/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 = any> extends Omit, "title" | "onFinish"> { +export interface ModalFormProps = NonNullable> extends Omit, "title" | "onFinish"> { className?: string; style?: React.CSSProperties; children?: React.ReactNode; @@ -35,7 +35,7 @@ export interface ModalFormProps = any> extends Om onFinish?: (values: T) => void | Promise; } -const ModalForm = = any>({ +const ModalForm = = NonNullable>({ className, style, children, diff --git a/ui/src/components/workflow/AddNode.tsx b/ui/src/components/workflow/AddNode.tsx index 4cb29c34..758e9b3a 100644 --- a/ui/src/components/workflow/AddNode.tsx +++ b/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"; diff --git a/ui/src/components/workflow/NodeRender.tsx b/ui/src/components/workflow/NodeRender.tsx index 0d83f469..c208ab5b 100644 --- a/ui/src/components/workflow/NodeRender.tsx +++ b/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 = () => { diff --git a/ui/src/components/workflow/PanelBody.tsx b/ui/src/components/workflow/PanelBody.tsx index ed1a5cc6..e2add858 100644 --- a/ui/src/components/workflow/PanelBody.tsx +++ b/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"; diff --git a/ui/src/hooks/useAntdForm.ts b/ui/src/hooks/useAntdForm.ts index 9055381b..af59cfb8 100644 --- a/ui/src/hooks/useAntdForm.ts +++ b/ui/src/hooks/useAntdForm.ts @@ -2,17 +2,17 @@ import { useDeepCompareEffect } from "ahooks"; import { Form, type FormInstance, type FormProps } from "antd"; -export interface UseAntdFormOptions = any> { +export interface UseAntdFormOptions = NonNullable> { form?: FormInstance; initialValues?: Partial | (() => Partial | Promise>); - onSubmit?: (values: T) => any; + onSubmit?: (values: T) => unknown; } -export interface UseAntdFormReturns = any> { +export interface UseAntdFormReturns = NonNullable> { form: FormInstance; formProps: Omit, "children">; formPending: boolean; - submit: (values?: T) => Promise; + submit: (values?: T) => Promise; } /** @@ -20,7 +20,11 @@ export interface UseAntdFormReturns = any> { * @param {UseAntdFormOptions} options * @returns {UseAntdFormReturns} */ -const useAntdForm = = any>({ initialValues, form, onSubmit }: UseAntdFormOptions): UseAntdFormReturns => { +const useAntdForm = = NonNullable>({ + initialValues, + form, + onSubmit, +}: UseAntdFormOptions): UseAntdFormReturns => { const formInst = form ?? Form["useForm"]()[0]; const [formInitialValues, setFormInitialValues] = useState>(); const [formPending, setFormPending] = useState(false); diff --git a/ui/src/i18n/locales/index.ts b/ui/src/i18n/locales/index.ts index b26bdb06..ee33ef5b 100644 --- a/ui/src/i18n/locales/index.ts +++ b/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"; diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx index 6b9e55a6..04de9b32 100644 --- a/ui/src/pages/certificates/CertificateList.tsx +++ b/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"; diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx index c390c615..157e9e2a 100644 --- a/ui/src/pages/workflows/WorkflowDetail.tsx +++ b/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: }, + { key: "runs", label: t("workflow.detail.runs.tab"), icon: }, ]} renderTabBar={(props, DefaultTabBar) => } tabBarStyle={{ border: "none" }} diff --git a/ui/src/stores/workflow/index.ts b/ui/src/stores/workflow/index.ts index 21f59ff0..710dd06f 100644 --- a/ui/src/stores/workflow/index.ts +++ b/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";