jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): new WorkflowDetail using antd

Browse Source
This commit is contained in:
Fu Diwei
2024-12-24 20:39:01 +08:00
parent 8b1ae309fb
commit 4e5373de73
38 changed files with 293 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/components/Show.tsx
View File

@@ -1,6 +1,12 @@
import React from "react";
const Show = ({ when, children, fallback }: { when: boolean; children: React.ReactNode; fallback?: React.ReactNode }) => {
export type ShowProps = {
when: boolean;
children: React.ReactNode;
fallback?: React.ReactNode;
};
const Show = ({ when, children, fallback }: ShowProps) => {
return when ? children : fallback;
};

8
ui/src/components/access/AccessEditForm.tsx
View File

@@ -27,14 +27,14 @@ import AccessEditFormVolcEngineConfig from "./AccessEditFormVolcEngineConfig";
import AccessEditFormWebhookConfig from "./AccessEditFormWebhookConfig";
type AccessEditFormModelType = Partial<MaybeModelRecord<AccessModel>>;
type AccessEditFormModes = "add" | "edit";
type AccessEditFormPresets = "add" | "edit";
export type AccessEditFormProps = {
className?: string;
style?: React.CSSProperties;
disabled?: boolean;
mode: AccessEditFormModes;
model?: AccessEditFormModelType;
preset: AccessEditFormPresets;
onModelChange?: (model: AccessEditFormModelType) => void;
};
@@ -44,7 +44,7 @@ export type AccessEditFormInstance = {
validateFields: () => Promise<AccessEditFormModelType>;
};
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, mode, model, onModelChange }, ref) => {
const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>(({ className, style, disabled, model, preset, onModelChange }, ref) => {
const { t } = useTranslation();
const formSchema = z.object({
@@ -160,7 +160,7 @@ const AccessEditForm = forwardRef<AccessEditFormInstance, AccessEditFormProps>((
rules={[formRule]}
tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.type.tooltip") }}></span>}
>
<AccessTypeSelect disabled={mode !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
<AccessTypeSelect disabled={preset !== "add"} placeholder={t("access.form.type.placeholder")} showSearch={!disabled} />
</Form.Item>
</Form>

15
ui/src/components/access/AccessEditModal.tsx
View File

@@ -11,13 +11,13 @@ import AccessEditForm, { type AccessEditFormInstance, type AccessEditFormProps }
export type AccessEditModalProps = {
data?: AccessEditFormProps["model"];
loading?: boolean;
mode: AccessEditFormProps["mode"];
open?: boolean;
preset: AccessEditFormProps["preset"];
trigger?: React.ReactElement;
onOpenChange?: (open: boolean) => void;
};
const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditModalProps) => {
const AccessEditModal = ({ data, loading, trigger, preset, ...props }: AccessEditModalProps) => {
const { t } = useTranslation();
const [notificationApi, NotificationContextHolder] = notification.useNotification();
@@ -57,13 +57,13 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
}
try {
if (mode === "add") {
if (preset === "add") {
if (data?.id) {
throw "Invalid props: `data`";
}
await createAccess(formRef.current!.getFieldsValue() as AccessModel);
} else if (mode === "edit") {
} else if (preset === "edit") {
if (!data?.id) {
throw "Invalid props: `data`";
}
@@ -100,14 +100,15 @@ const AccessEditModal = ({ data, loading, mode, trigger, ...props }: AccessEditM
confirmLoading={formPending}
destroyOnClose
loading={loading}
okText={mode === "edit" ? t("common.button.save") : t("common.button.submit")}
okText={preset === "edit" ? t("common.button.save") : t("common.button.submit")}
open={open}
title={t(`access.action.${mode}`)}
title={t(`access.action.${preset}`)}
width={480}
onOk={handleClickOk}
onCancel={handleClickCancel}
>
<div className="pt-4 pb-2">
<AccessEditForm ref={formRef} mode={mode === "add" ? "add" : "edit"} model={data} />
<AccessEditForm ref={formRef} preset={preset === "add" ? "add" : "edit"} model={data} />
</div>
</Modal>
</>

7
ui/src/components/notification/NotifyChannels.tsx
View File

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
import { useDeepCompareMemo } from "@ant-design/pro-components";
import { Button, Collapse, message, notification, Skeleton, Space, Switch, type CollapseProps } from "antd";
import Show from "@/components/Show";
import NotifyChannelEditForm, { type NotifyChannelEditFormInstance } from "./NotifyChannelEditForm";
import NotifyTestButton from "./NotifyTestButton";
import { notifyChannelsMap } from "@/domain/settings";
@@ -105,11 +106,9 @@ const NotifyChannels = ({ className, classNames, style, styles }: NotifyChannels
return (
<div className={className} style={style}>
{!loadedAtOnce ? (
<Skeleton active />
) : (
<Show when={loadedAtOnce} fallback={<Skeleton active />}>
<Collapse className={classNames?.collapse} style={styles?.collapse} accordion={true} bordered={false} items={channelCollapseItems} />
)}
</Show>
</div>
);
};

7
ui/src/components/notification/NotifyTemplate.tsx
View File

@@ -6,6 +6,7 @@ import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import { ClientResponseError } from "pocketbase";
import Show from "@/components/Show";
import { defaultNotifyTemplate, SETTINGS_NAMES, type NotifyTemplatesSettingsContent } from "@/domain/settings";
import { get as getSettings, save as saveSettings } from "@/repository/settings";
import { getErrMsg } from "@/utils/error";
@@ -88,9 +89,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
{MessageContextHolder}
{NotificationContextHolder}
{loading ? (
<Skeleton active />
) : (
<Show when={!loading} fallback={<Skeleton active />}>
<Form form={form} disabled={formPending} initialValues={initialValues} layout="vertical" onFinish={handleFormFinish}>
<Form.Item
name="subject"
@@ -120,7 +119,7 @@ const NotifyTemplateForm = ({ className, style }: NotifyTemplateFormProps) => {
</Button>
</Form.Item>
</Form>
)}
</Show>
</div>
);
};

0
ui/src/components/Version.tsx → ui/src/components/ui/Version.tsx
View File

2
ui/src/components/workflow/ApplyForm.tsx
View File

@@ -161,7 +161,7 @@ const ApplyForm = ({ data }: ApplyFormProps) => {
<FormLabel className="flex justify-between w-full">
<div>{t("domain.application.form.access.label")}</div>
<AccessEditModal
mode="add"
preset="add"
trigger={
<div className="flex items-center font-normal cursor-pointer text-primary hover:underline">
<PlusIcon size={14} />

2
ui/src/components/workflow/DeployToAliyunALB.tsx
View File

@@ -103,7 +103,7 @@ const DeployToAliyunALB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToAliyunCDN.tsx
View File

@@ -84,7 +84,7 @@ const DeployToAliyunCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToAliyunCLB.tsx
View File

@@ -103,7 +103,7 @@ const DeployToAliyunCLB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToAliyunOss.tsx
View File

@@ -93,7 +93,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "aliyun" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToBaiduCloudCDN.tsx
View File

@@ -83,7 +83,7 @@ const DeployToBaiduCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "baiducloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToByteplusCDN.tsx
View File

@@ -83,7 +83,7 @@ const DeployToByteplusCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "byteplus" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToDogeCloudCDN.tsx
View File

@@ -85,7 +85,7 @@ const DeployToDogeCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "dogecloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToHuaweiCloudCDN.tsx
View File

@@ -90,7 +90,7 @@ const DeployToHuaweiCloudCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "huaweicloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToHuaweiCloudELB.tsx
View File

@@ -112,7 +112,7 @@ const DeployToHuaweiCloudELB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "huaweicloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToKubernetesSecret.tsx
View File

@@ -99,7 +99,7 @@ const DeployToKubernetesSecret = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "k8s" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

6
ui/src/components/workflow/DeployToLocal.tsx
View File

@@ -32,11 +32,11 @@ const formSchema = z
certPath: z
.string()
.min(1, t("domain.deployment.form.file_cert_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 })),
.max(256, t("common.errmsg.string_max", { max: 256 })),
keyPath: z
.string()
.min(0, t("domain.deployment.form.file_key_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 }))
.max(256, t("common.errmsg.string_max", { max: 256 }))
.nullish(),
pfxPassword: z.string().nullish(),
jksAlias: z.string().nullish(),
@@ -209,7 +209,7 @@ Remove-Item -Path "$pfxPath" -Force
<AccessEditModal
data={{ configType: "local" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToQiniuCDN.tsx
View File

@@ -85,7 +85,7 @@ const DeployToQiniuCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "qiniu" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

6
ui/src/components/workflow/DeployToSSH.tsx
View File

@@ -31,11 +31,11 @@ const formSchema = z
certPath: z
.string()
.min(1, t("domain.deployment.form.file_cert_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 })),
.max(256, t("common.errmsg.string_max", { max: 256 })),
keyPath: z
.string()
.min(0, t("domain.deployment.form.file_key_path.placeholder"))
.max(255, t("common.errmsg.string_max", { max: 255 }))
.max(256, t("common.errmsg.string_max", { max: 256 }))
.nullish(),
pfxPassword: z.string().nullish(),
jksAlias: z.string().nullish(),
@@ -127,7 +127,7 @@ const DeployToSSH = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "ssh" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToTencentCDN.tsx
View File

@@ -83,7 +83,7 @@ const DeployToTencentCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToTencentCLB.tsx
View File

@@ -123,7 +123,7 @@ const DeployToTencentCLB = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToTencentCOS.tsx
View File

@@ -89,7 +89,7 @@ const DeployToTencentCOS = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToTencentTEO.tsx
View File

@@ -86,7 +86,7 @@ const DeployToTencentTEO = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "tencentcloud" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToVolcengineCDN.tsx
View File

@@ -83,7 +83,7 @@ const DeployToVolcengineCDN = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "volcengine" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToVolcengineLive.tsx
View File

@@ -83,7 +83,7 @@ const DeployToVolcengineLive = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "volcengine" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

2
ui/src/components/workflow/DeployToWebhook.tsx
View File

@@ -86,7 +86,7 @@ const DeployToWebhook = ({ data }: DeployFormProps) => {
<AccessEditModal
data={{ configType: "webhook" }}
mode="add"
preset="add"
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />

125
ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx
View File

@@ -1,125 +0,0 @@
import { z } from "zod";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
import { useWorkflowStore } from "@/stores/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useTranslation } from "react-i18next";
import { memo, useEffect, useMemo, useState } from "react";
import { Textarea } from "../ui/textarea";
type WorkflowNameEditDialogProps = {
trigger: React.ReactNode;
};
const formSchema = z.object({
name: z.string(),
description: z.string(),
});
const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) => {
const { setBaseInfo, workflow } = useWorkflowStore(useZustandShallowSelector(["setBaseInfo", "workflow"]));
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
});
const memoWorkflow = useMemo(() => workflow, [workflow]);
useEffect(() => {
form.reset({ name: workflow.name, description: workflow.description });
}, [memoWorkflow]);
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const onSubmit = async (config: z.infer<typeof formSchema>) => {
await setBaseInfo(config.name, config.description);
setOpen(false);
};
return (
<>
<Dialog
open={open}
onOpenChange={(val) => {
setOpen(val);
}}
>
<DialogTrigger>{trigger}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className="dark:text-stone-200">{t("workflow.baseinfo.title")}</DialogTitle>
</DialogHeader>
<div>
<Form {...form}>
<form
onSubmit={(e) => {
e.stopPropagation();
form.handleSubmit(onSubmit)(e);
}}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("workflow.props.name")}</FormLabel>
<FormControl>
<Input
placeholder={t("workflow.props.name.placeholder")}
{...field}
value={field.value}
defaultValue={workflow.name}
onChange={(e) => {
form.setValue("name", e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="description"
render={({ field }) => (
<FormItem>
<FormLabel>{t("workflow.props.description")}</FormLabel>
<FormControl>
<Textarea
placeholder={t("workflow.props.description.placeholder")}
{...field}
value={field.value}
defaultValue={workflow.description}
onChange={(e) => {
form.setValue("description", e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit">{t("common.button.save")}</Button>
</div>
</form>
</Form>
</div>
</DialogContent>
</Dialog>
</>
);
};
export default memo(WorkflowNameBaseInfoDialog);