worklfow

ui/src/components/notify/Mail.tsx

@@ -43,13 +43,13 @@ const Mail = () => {
     id: config.id ?? "",
     name: "notifyChannels",
     data: {
-        senderAddress: "",
-        receiverAddresses: "",
-        smtpHostAddr: "",
-        smtpHostPort: "25",
-        username: "",
-        password: "",
-        enabled: false,
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
     },
   });
 
@@ -79,13 +79,13 @@ const Mail = () => {
 
   const getDetailMail = () => {
     const df: NotifyChannelMail = {
-        senderAddress: "",
-        receiverAddresses: "",
-        smtpHostAddr: "",
-        smtpHostPort: "25",
-        username: "",
-        password: "",
-        enabled: false,
+      senderAddress: "",
+      receiverAddresses: "",
+      smtpHostAddr: "",
+      smtpHostPort: "25",
+      username: "",
+      password: "",
+      enabled: false,
     };
     if (!config.content) {
       return df;
@@ -99,7 +99,14 @@ const Mail = () => {
   };
 
   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) {
+    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);
@@ -236,55 +243,55 @@ const Mail = () => {
           checkChanged(newData.data);
           setmail(newData);
         }}
-        />
-    <Input
+      />
+      <Input
         placeholder={t("settings.notification.mail.smtp_port.placeholder")}
         className="mt-2"
         value={mail.data.smtpHostPort}
         onChange={(e) => {
-        const newData = {
+          const newData = {
             ...mail,
             data: {
-            ...mail.data,
-            smtpHostPort: e.target.value,
+              ...mail.data,
+              smtpHostPort: e.target.value,
             },
-        };
-        checkChanged(newData.data);
-        setmail(newData);
+          };
+          checkChanged(newData.data);
+          setmail(newData);
         }}
-    />
-    <Input
+      />
+      <Input
         placeholder={t("settings.notification.mail.username.placeholder")}
         className="mt-2"
         value={mail.data.username}
         onChange={(e) => {
-        const newData = {
+          const newData = {
             ...mail,
             data: {
-            ...mail.data,
-            username: e.target.value,
+              ...mail.data,
+              username: e.target.value,
             },
-        };
-        checkChanged(newData.data);
-        setmail(newData);
+          };
+          checkChanged(newData.data);
+          setmail(newData);
         }}
-        />
-    <Input
+      />
+      <Input
         placeholder={t("settings.notification.mail.password.placeholder")}
         className="mt-2"
         value={mail.data.password}
         onChange={(e) => {
-        const newData = {
+          const newData = {
             ...mail,
             data: {
-            ...mail.data,
-            password: e.target.value,
+              ...mail.data,
+              password: e.target.value,
             },
-        };
-        checkChanged(newData.data);
-        setmail(newData);
+          };
+          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>

ui/src/components/workflow/DeployForm.tsx

@@ -4,15 +4,17 @@ import DeployToAliyunOSS from "./DeployToAliyunOss";
 
 export type DeployFormProps = {
   data: WorkflowNode;
+  defaultProivder?: string;
 };
-const DeployForm = ({ data }: DeployFormProps) => {
-  return getForm(data);
+const DeployForm = ({ data, defaultProivder }: DeployFormProps) => {
+  return getForm(data, defaultProivder);
 };
 
 export default memo(DeployForm);
 
-const getForm = (data: WorkflowNode) => {
-  switch (data.config?.providerType) {
+const getForm = (data: WorkflowNode, defaultProivder?: string) => {
+  const provider = defaultProivder || data.config?.providerType;
+  switch (provider) {
     case "aliyun-oss":
       return <DeployToAliyunOSS data={data} />;
     case "tencent":

ui/src/components/workflow/DeployPanelBody.tsx

@@ -22,7 +22,7 @@ const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
   return (
     <>
       {/* 默认展示服务商列表 */}
-      <Show when={!providerType} fallback={<DeployForm data={data} />}>
+      <Show when={!providerType} fallback={<DeployForm data={data} defaultProivder={providerType} />}>
         <div className="text-lg font-semibold text-gray-700">选择服务商</div>
         {deployTargets
           .reduce((acc: DeployTarget[][], provider, index) => {

ui/src/components/workflow/DeployToAliyunOss.tsx

@@ -105,7 +105,7 @@ const DeployToAliyunOSS = ({ data }: DeployFormProps) => {
                           <SelectGroup key={item.id}>
                             <SelectLabel>{item.name}</SelectLabel>
                             {item.output?.map((output) => (
-                              <SelectItem key={output.name} value={`${item.id}-${output.name}`}>
+                              <SelectItem key={output.name} value={`${item.id}#${output.name}`}>
                                 <div>
                                   {item.name}-{output.label}
                                 </div>

ui/src/components/workflow/NotifyForm.tsx

@@ -0,0 +1,181 @@
+import { WorkflowNode, WorkflowNodeConfig } from "@/domain/workflow";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "../ui/select";
+import { Input } from "../ui/input";
+import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
+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 { useEffect, useState } from "react";
+import { NotifyChannels, channels as supportedChannels } from "@/domain/settings";
+import { SelectValue } from "@radix-ui/react-select";
+import { Textarea } from "../ui/textarea";
+import { RefreshCw, Settings } from "lucide-react";
+
+type NotifyFormProps = {
+  data: WorkflowNode;
+};
+
+const selectState = (state: WorkflowState) => ({
+  updateNode: state.updateNode,
+});
+type ChannelName = {
+  name: string;
+  label: string;
+};
+const NotifyForm = ({ data }: NotifyFormProps) => {
+  const { updateNode } = useWorkflowStore(useShallow(selectState));
+  const { hidePanel } = usePanel();
+  const { t } = useTranslation();
+  const { config: notifyConfig, initChannels } = useNotifyContext();
+
+  const [chanels, setChanels] = useState<ChannelName[]>([]);
+
+  useEffect(() => {
+    setChanels(getChannels());
+  }, [notifyConfig]);
+
+  const getChannels = () => {
+    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);
+      }
+    }
+    return rs;
+  };
+
+  const formSchema = z.object({
+    channel: z.string(),
+    title: z.string().min(1),
+    content: z.string().min(1),
+  });
+
+  let config: WorkflowNodeConfig = {
+    channel: "",
+    title: "",
+    content: "",
+  };
+
+  if (data) config = data.config ?? config;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      channel: config.channel as string,
+      title: config.title as string,
+      content: config.content as string,
+    },
+  });
+
+  const onSubmit = (config: z.infer<typeof formSchema>) => {
+    updateNode({ ...data, config });
+    hidePanel();
+  };
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={(e) => {
+            e.stopPropagation();
+            form.handleSubmit(onSubmit)(e);
+          }}
+          className="space-y-8"
+        >
+          <FormField
+            control={form.control}
+            name="channel"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="flex justify-between items-center">
+                  <div className="flex space-x-2 items-center">
+                    <div>推送渠道</div>
+                    <RefreshCw size={16} className="cursor-pointer" onClick={() => initChannels()} />
+                  </div>
+                  <a
+                    href="#/setting/notify"
+                    target="_blank"
+                    className="flex justify-between items-center space-x-1 font-normal text-primary hover:underline cursor-pointer"
+                  >
+                    <Settings size={16} /> <div>设置推送渠道</div>
+                  </a>
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={(value) => {
+                      form.setValue("channel", value);
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="选择推送渠道" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        {chanels.map((item) => (
+                          <SelectItem key={item.name} value={item.name}>
+                            <div>{t(item.label)}</div>
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>标题</FormLabel>
+                <FormControl>
+                  <Input placeholder="请输入消息标题" {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="content"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>内容</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="请输入消息内容" {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit">{t("common.save")}</Button>
+          </div>
+        </form>
+      </Form>
+    </>
+  );
+};
+
+export default NotifyForm;
+

ui/src/components/workflow/PanelBody.tsx

@@ -2,6 +2,7 @@ import { WorkflowNode, WorkflowNodeType } from "@/domain/workflow";
 import StartForm from "./StartForm";
 import DeployPanelBody from "./DeployPanelBody";
 import ApplyForm from "./ApplyForm";
+import NotifyForm from "./NotifyForm";
 
 type PanelBodyProps = {
   data: WorkflowNode;
@@ -16,7 +17,7 @@ const PanelBody = ({ data }: PanelBodyProps) => {
       case WorkflowNodeType.Deploy:
         return <DeployPanelBody data={data} />;
       case WorkflowNodeType.Notify:
-        return <DeployPanelBody data={data} />;
+        return <NotifyForm data={data} />;
       case WorkflowNodeType.Branch:
         return <div>分支节点</div>;
       case WorkflowNodeType.Condition:

ui/src/components/workflow/WorkflowProvider.tsx

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

ui/src/domain/settings.ts

@@ -18,13 +18,7 @@ export type NotifyTemplate = {
 };
 
 export type NotifyChannels = {
-  dingtalk?: NotifyChannel;
-  lark?: NotifyChannel;
-  telegram?: NotifyChannel;
-  webhook?: NotifyChannel;
-  serverchan?: NotifyChannel;
-  mail?: NotifyChannelMail;
-  bark?: NotifyChannelBark;
+  [key: string]: NotifyChannel;
 };
 
 export type NotifyChannel =
@@ -36,6 +30,37 @@ export type NotifyChannel =
   | NotifyChannelMail
   | NotifyChannelBark;
 
+export const channels = [
+  {
+    name: "dingtalk",
+    label: "common.provider.dingtalk",
+  },
+  {
+    name: "lark",
+    label: "common.provider.lark",
+  },
+  {
+    name: "telegram",
+    label: "common.provider.telegram",
+  },
+  {
+    name: "webhook",
+    label: "common.provider.webhook",
+  },
+  {
+    name: "serverchan",
+    label: "common.provider.serverchan",
+  },
+  {
+    name: "mail",
+    label: "common.provider.mail",
+  },
+  {
+    name: "bark",
+    label: "common.provider.bark",
+  },
+];
+
 export type NotifyChannelDingTalk = {
   accessToken: string;
   secret: string;
@@ -94,3 +119,4 @@ export type SSLProviderSetting = {
     };
   };
 };
+

ui/src/providers/notify/index.tsx

@@ -8,6 +8,7 @@ export type NotifyContext = {
   config: Setting<NotifyChannels>;
   setChannel: (data: { channel: string; data: NotifyChannel }) => void;
   setChannels: (data: Setting<NotifyChannels>) => void;
+  initChannels: () => void;
 };
 
 const Context = createContext({} as NotifyContext);
@@ -22,13 +23,18 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
   const [notify, dispatchNotify] = useReducer(notifyReducer, {});
 
   useEffect(() => {
-    const featchData = async () => {
-      const chanels = await getSetting<NotifyChannels>("notifyChannels");
-      dispatchNotify({
-        type: "SET_CHANNELS",
-        payload: chanels,
-      });
-    };
+    featchData();
+  }, []);
+
+  const featchData = async () => {
+    const chanels = await getSetting<NotifyChannels>("notifyChannels");
+    dispatchNotify({
+      type: "SET_CHANNELS",
+      payload: chanels,
+    });
+  };
+
+  const initChannels = useCallback(() => {
     featchData();
   }, []);
 
@@ -52,6 +58,7 @@ export const NotifyProvider = ({ children }: NotifyProviderProps) => {
         config: notify,
         setChannel,
         setChannels,
+        initChannels,
       }}
     >
       {children}