feat(ui): new SettingsNotification using antd

ui/src/components/workflow/DeployToLocal.tsx

@@ -41,13 +41,14 @@ const formSchema = z
     keyPath: z
       .string()
       .min(0, t("domain.deployment.form.file_key_path.placeholder"))
-      .max(255, t("common.errmsg.string_max", { max: 255 })),
-    pfxPassword: z.string().optional(),
-    jksAlias: z.string().optional(),
-    jksKeypass: z.string().optional(),
-    jksStorepass: z.string().optional(),
-    preCommand: z.string().optional(),
-    command: z.string().optional(),
+      .max(255, t("common.errmsg.string_max", { max: 255 }))
+      .nullish(),
+    pfxPassword: z.string().nullish(),
+    jksAlias: z.string().nullish(),
+    jksKeypass: z.string().nullish(),
+    jksStorepass: z.string().nullish(),
+    preCommand: z.string().nullish(),
+    command: z.string().nullish(),
     shell: z.union([z.literal("sh"), z.literal("cmd"), z.literal("powershell")], {
       message: t("domain.deployment.form.shell.placeholder"),
     }),

ui/src/components/workflow/DeployToSSH.tsx

@@ -40,13 +40,14 @@ const formSchema = z
     keyPath: z
       .string()
       .min(0, t("domain.deployment.form.file_key_path.placeholder"))
-      .max(255, t("common.errmsg.string_max", { max: 255 })),
-    pfxPassword: z.string().optional(),
-    jksAlias: z.string().optional(),
-    jksKeypass: z.string().optional(),
-    jksStorepass: z.string().optional(),
-    preCommand: z.string().optional(),
-    command: z.string().optional(),
+      .max(255, t("common.errmsg.string_max", { max: 255 }))
+      .nullish(),
+    pfxPassword: z.string().nullish(),
+    jksAlias: z.string().nullish(),
+    jksKeypass: z.string().nullish(),
+    jksStorepass: z.string().nullish(),
+    preCommand: z.string().nullish(),
+    command: z.string().nullish(),
   })
   .refine((data) => (data.format === "pem" ? !!data.keyPath?.trim() : true), {
     message: t("domain.deployment.form.file_key_path.placeholder"),

ui/src/components/workflow/Node.tsx

@@ -9,7 +9,7 @@ import PanelBody from "./PanelBody";
 import { useTranslation } from "react-i18next";
 import Show from "../Show";
 import { deployTargetsMap } from "@/domain/domain";
-import { channelLabelMap } from "@/domain/settings";
+import { notifyChannelsMap } from "@/domain/settings";
 
 type NodeProps = {
   data: WorkflowNode;
@@ -69,10 +69,10 @@ const Node = ({ data }: NodeProps) => {
         );
       }
       case WorkflowNodeType.Notify: {
-        const channelLabel = channelLabelMap.get(data.config?.channel as string);
+        const channelLabel = notifyChannelsMap.get(data.config?.channel as string);
         return (
           <div className="flex space-x-2 items-baseline">
-            <div className="text-stone-700 w-12 truncate">{t(channelLabel?.label ?? "")}</div>
+            <div className="text-stone-700 w-12 truncate">{t(channelLabel?.name ?? "")}</div>
             <div className="text-muted-foreground truncate">{(data.config?.title as string) ?? ""}</div>
           </div>
         );

ui/src/components/workflow/NotifyForm.tsx

@@ -10,9 +10,9 @@ import { useShallow } from "zustand/shallow";
 import { usePanel } from "./PanelProvider";
 import { useTranslation } from "react-i18next";
 import { Button } from "../ui/button";
-import { useNotifyContext } from "@/providers/notify";
+import { useNotifyChannelStore } from "@/stores/notify";
 import { useEffect, useState } from "react";
-import { NotifyChannels, channels as supportedChannels } from "@/domain/settings";
+import { notifyChannelsMap } from "@/domain/settings";
 import { SelectValue } from "@radix-ui/react-select";
 import { Textarea } from "../ui/textarea";
 import { RefreshCw, Settings } from "lucide-react";
@@ -25,7 +25,7 @@ const selectState = (state: WorkflowState) => ({
   updateNode: state.updateNode,
 });
 type ChannelName = {
-  name: string;
+  key: string;
   label: string;
 };
 
@@ -34,28 +34,23 @@ const NotifyForm = ({ data }: NotifyFormProps) => {
   const { updateNode } = useWorkflowStore(useShallow(selectState));
   const { hidePanel } = usePanel();
   const { t } = useTranslation();
-  const { config: notifyConfig, initChannels } = useNotifyContext();
+  const { channels: supportedChannels, fetchChannels } = useNotifyChannelStore();
 
-  const [chanels, setChanels] = useState<ChannelName[]>([]);
+  const [channels, setChannels] = useState<ChannelName[]>([]);
 
   useEffect(() => {
-    setChanels(getChannels());
-  }, [notifyConfig]);
+    fetchChannels();
+  }, [fetchChannels]);
 
-  const getChannels = () => {
+  useEffect(() => {
     const rs: ChannelName[] = [];
-    if (!notifyConfig.content) {
-      return rs;
-    }
-
-    const chanels = notifyConfig.content as NotifyChannels;
-    for (const channel of supportedChannels) {
-      if (chanels[channel.name] && chanels[channel.name].enabled) {
-        rs.push(channel);
+    for (const channel of notifyChannelsMap.values()) {
+      if (supportedChannels[channel.type]?.enabled) {
+        rs.push({ key: channel.type, label: channel.name });
       }
     }
-    return rs;
-  };
+    setChannels(rs);
+  }, [supportedChannels]);
 
   const formSchema = z.object({
     channel: z.string(),
@@ -103,10 +98,10 @@ const NotifyForm = ({ data }: NotifyFormProps) => {
                 <FormLabel className="flex justify-between items-center">
                   <div className="flex space-x-2 items-center">
                     <div>{t(`${i18nPrefix}.channel.label`)}</div>
-                    <RefreshCw size={16} className="cursor-pointer" onClick={() => initChannels()} />
+                    <RefreshCw size={16} className="cursor-pointer" onClick={() => fetchChannels()} />
                   </div>
                   <a
-                    href="#/setting/notify"
+                    href="#/settings/notification"
                     target="_blank"
                     className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
                   >
@@ -126,8 +121,8 @@ const NotifyForm = ({ data }: NotifyFormProps) => {
                     </SelectTrigger>
                     <SelectContent>
                       <SelectGroup>
-                        {chanels.map((item) => (
-                          <SelectItem key={item.name} value={item.name}>
+                        {channels.map((item) => (
+                          <SelectItem key={item.key} value={item.key}>
                             <div>{t(item.label)}</div>
                           </SelectItem>
                         ))}

ui/src/components/workflow/WorkflowProvider.tsx

@@ -1,14 +1,9 @@
 import React from "react";
 
-import { NotifyProvider } from "@/providers/notify";
 import { PanelProvider } from "./PanelProvider";
 
 const WorkflowProvider = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <NotifyProvider>
-      <PanelProvider>{children}</PanelProvider>
-    </NotifyProvider>
-  );
+  return <PanelProvider>{children}</PanelProvider>;
 };
 
 export default WorkflowProvider;