improve data display

ui/src/components/certimate/DeployEditDialog.tsx

@@ -27,7 +27,7 @@ import DeployToLocal from "./DeployToLocal";
 import DeployToSSH from "./DeployToSSH";
 import DeployToWebhook from "./DeployToWebhook";
 import DeployToKubernetesSecret from "./DeployToKubernetesSecret";
-import DeployToVolcengineLive from "./DeployToVolcengineLive"
+import DeployToVolcengineLive from "./DeployToVolcengineLive";
 import { deployTargetsMap, type DeployConfig } from "@/domain/domain";
 import { accessProvidersMap } from "@/domain/access";
 import { useConfigContext } from "@/providers/config";

ui/src/components/notify/Mail.tsx

@@ -0,0 +1,327 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { getErrMessage } from "@/lib/error";
+import { NotifyChannelEmail, NotifyChannels } from "@/domain/settings";
+import { useNotifyContext } from "@/providers/notify";
+import { update } from "@/repository/settings";
+import Show from "@/components/Show";
+import { notifyTest } from "@/api/notify";
+
+type MailSetting = {
+  id: string;
+  name: string;
+  data: NotifyChannelEmail;
+};
+
+const Mail = () => {
+  const { config, setChannels } = useNotifyContext();
+  const { t } = useTranslation();
+
+  const [changed, setChanged] = useState<boolean>(false);
+
+  const [mail, setmail] = useState<MailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    },
+  });
+
+  const [originMail, setoriginMail] = useState<MailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    },
+  });
+
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setoriginMail({
+      id: config.id ?? "",
+      name: "mail",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setmail({
+      id: config.id ?? "",
+      name: "mail",
+      data,
+    });
+  }, [config]);
+
+  const { toast } = useToast();
+
+  const getDetailMail = () => {
+    const df: NotifyChannelMail = {
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.mail) {
+      return df;
+    }
+
+    return chanels.mail as NotifyChannelMail;
+  };
+
+  const checkChanged = (data: NotifyChannelMail) => {
+    if (
+      data.senderAddress !== originMail.data.senderAddress ||
+      data.receiverAddresses !== originMail.data.receiverAddresses ||
+      data.smtpHostAddr !== originMail.data.smtpHostAddr ||
+      data.smtpHostPort !== originMail.data.smtpHostPort ||
+      data.username !== originMail.data.username ||
+      data.password !== originMail.data.password
+    ) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const handleSaveClick = async () => {
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          mail: {
+            ...mail.data,
+          },
+        },
+      });
+
+      setChannels(resp);
+      toast({
+        title: t("common.save.succeeded.message"),
+        description: t("settings.notification.config.saved.message"),
+      });
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("common.save.failed.message"),
+        description: `${t("settings.notification.config.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("mail");
+
+      toast({
+        title: t("settings.notification.config.push.test.message.success.message"),
+        description: t("settings.notification.config.push.test.message.success.message"),
+      });
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("settings.notification.config.push.test.message.failed.message"),
+        description: `${t("settings.notification.config.push.test.message.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleSwitchChange = async () => {
+    const newData = {
+      ...mail,
+      data: {
+        ...mail.data,
+        enabled: !mail.data.enabled,
+      },
+    };
+    setmail(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          mail: {
+            ...newData.data,
+          },
+        },
+      });
+
+      setChannels(resp);
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("common.save.failed.message"),
+        description: `${t("settings.notification.config.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Input
+        placeholder={t("settings.notification.mail.sender_address.placeholder")}
+        value={mail.data.senderAddress}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              senderAddress: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.receiver_address.placeholder")}
+        className="mt-2"
+        value={mail.data.receiverAddresses}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              receiverAddresses: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.smtp_host.placeholder")}
+        className="mt-2"
+        value={mail.data.smtpHostAddr}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              smtpHostAddr: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.smtp_port.placeholder")}
+        className="mt-2"
+        value={mail.data.smtpHostPort}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              smtpHostPort: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.username.placeholder")}
+        className="mt-2"
+        value={mail.data.username}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              username: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <Input
+        placeholder={t("settings.notification.mail.password.placeholder")}
+        className="mt-2"
+        value={mail.data.password}
+        onChange={(e) => {
+          const newData = {
+            ...mail,
+            data: {
+              ...mail.data,
+              password: e.target.value,
+            },
+          };
+          checkChanged(newData.data);
+          setmail(newData);
+        }}
+      />
+      <div className="flex items-center space-x-1 mt-2">
+        <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
+        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+      </div>
+
+      <div className="flex justify-end mt-2">
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && mail.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
+      </div>
+    </div>
+  );
+};
+
+export default Mail;
+

ui/src/components/workflow/CustomAlertDialog.tsx

@@ -24,12 +24,12 @@ const CustomAlertDialog = ({ open, title, description, confirm, onOpenChange }:
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
-        <AlertDialogHeader>
+        <AlertDialogHeader className="dark:text-stone-200">
           <AlertDialogTitle>{title}</AlertDialogTitle>
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+          <AlertDialogCancel className="dark:text-stone-200">{t("common.cancel")}</AlertDialogCancel>
           <AlertDialogAction
             onClick={() => {
               confirm && confirm();

ui/src/components/workflow/DataTable.tsx

@@ -3,20 +3,23 @@ import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, Paginati
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Button } from "../ui/button";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 
-interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData extends { id: string }, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   pageCount: number;
   onPageChange?: (pageIndex: number, pageSize?: number) => Promise<void>;
 }
 
-export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
+export function DataTable<TData extends { id: string }, TValue>({ columns, data, onPageChange, pageCount }: DataTableProps<TData, TValue>) {
   const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
 
+  const navigate = useNavigate();
+
   const pagination = {
     pageIndex,
     pageSize,
@@ -39,13 +42,17 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
     onPageChange?.(pageIndex, pageSize);
   }, [pageIndex]);
 
+  const handleRowClick = (id: string) => {
+    navigate(`/workflow/detail?id=${id}`);
+  };
+
   return (
     <>
       <div className="rounded-md">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id} className="border-muted-foreground">
+              <TableRow key={headerGroup.id} className="dark:border-muted-foreground">
                 {headerGroup.headers.map((header) => {
                   return <TableHead key={header.id}>{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}</TableHead>;
                 })}
@@ -55,7 +62,15 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
           <TableBody className="dark:text-stone-200">
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => (
-                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className="border-muted-foreground">
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className="dark:border-muted-foreground"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleRowClick(row.original.id);
+                  }}
+                >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                   ))}
@@ -84,4 +99,3 @@ export function DataTable<TData, TValue>({ columns, data, onPageChange, pageCoun
     </>
   );
 }
-

ui/src/components/workflow/WorkflowBaseInfoEditDialog.tsx

@@ -8,7 +8,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "
 import { Input } from "../ui/input";
 import { Button } from "../ui/button";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
+import { memo, useState } from "react";
 
 type WorkflowNameEditDialogProps = {
   trigger: React.ReactNode;
@@ -28,10 +28,6 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: workflow.name,
-      description: workflow.description,
-    },
   });
 
   const { t } = useTranslation();
@@ -72,7 +68,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
                     <FormItem>
                       <FormLabel>名称</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入流程名称" {...field} />
+                        <Input
+                          placeholder="请输入流程名称"
+                          {...field}
+                          defaultValue={workflow.name}
+                          onChange={(e) => {
+                            form.setValue("name", e.target.value);
+                          }}
+                        />
                       </FormControl>
 
                       <FormMessage />
@@ -87,7 +90,14 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
                     <FormItem>
                       <FormLabel>说明</FormLabel>
                       <FormControl>
-                        <Input placeholder="请输入流程说明" {...field} />
+                        <Input
+                          placeholder="请输入流程说明"
+                          {...field}
+                          defaultValue={workflow.description}
+                          onChange={(e) => {
+                            form.setValue("description", e.target.value);
+                          }}
+                        />
                       </FormControl>
 
                       <FormMessage />
@@ -107,4 +117,4 @@ const WorkflowNameBaseInfoDialog = ({ trigger }: WorkflowNameEditDialogProps) =>
   );
 };
 
-export default WorkflowNameBaseInfoDialog;
+export default memo(WorkflowNameBaseInfoDialog);

ui/src/domain/workflow.ts

@@ -4,7 +4,7 @@ import i18n from "@/i18n";
 import { deployTargets, KVType } from "./domain";
 
 export type Workflow = {
-  id?: string;
+  id: string;
   name: string;
   description?: string;
   type: string;
@@ -125,6 +125,7 @@ export const initWorkflow = (): Workflow => {
   root.next = newWorkflowNode(WorkflowNodeType.Notify, {});
 
   return {
+    id: "",
     name: i18n.t("workflow.default.name"),
     type: "auto",
     crontab: "0 0 * * *",

ui/src/pages/workflow/index.tsx

@@ -90,6 +90,9 @@ const Workflow = () => {
               onCheckedChange={() => {
                 handleCheckedChange(row.original.id ?? "");
               }}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
             />
           </>
         );
@@ -127,7 +130,8 @@ const Workflow = () => {
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>操作</DropdownMenuLabel>
               <DropdownMenuItem
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   navigate(`/workflow/detail?id=${workflow.id}`);
                 }}
               >
@@ -135,7 +139,8 @@ const Workflow = () => {
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-red-500"
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   handleDeleteClick(workflow.id ?? "");
                 }}
               >

ui/src/providers/workflow/index.ts

@@ -31,20 +31,20 @@ export type WorkflowState = {
 
 export const useWorkflowStore = create<WorkflowState>((set, get) => ({
   workflow: {
-    id: "root",
+    id: "",
     name: "placeholder",
     type: WorkflowNodeType.Start,
   },
   initialized: false,
   init: async (id?: string) => {
     let data = {
+      id: "",
       name: "placeholder",
       type: "auto",
     };
 
     if (!id) {
       data = initWorkflow();
-      data = await save(data);
     } else {
       data = await getWrokflow(id);
     }
@@ -55,11 +55,15 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
     });
   },
   setBaseInfo: async (name: string, description: string) => {
-    const resp = await save({
+    const data: Record<string, string | boolean | WorkflowNode> = {
       id: (get().workflow.id as string) ?? "",
       name: name,
       description: description,
-    });
+    };
+    if (!data.id) {
+      data.draft = get().workflow.draft as WorkflowNode;
+    }
+    const resp = await save(data);
     set((state: WorkflowState) => {
       return {
         workflow: {
@@ -201,3 +205,4 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
     return getWorkflowOutputBeforeId(get().workflow.draft as WorkflowNode, id, type);
   },
 }));
+