workflow data save

ui/src/components/notify/Bark.tsx

@@ -123,22 +123,29 @@ const Bark = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("bark");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -177,67 +184,76 @@ const Bark = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder={t("settings.notification.bark.serverUrl.placeholder")}
-        value={bark.data.serverUrl}
-        onChange={(e) => {
-          const newData = {
-            ...bark,
-            data: {
-              ...bark.data,
-              serverUrl: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.bark.server_url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.bark.server_url.placeholder")}
+          value={bark.data.serverUrl}
+          onChange={(e) => {
+            const newData = {
+              ...bark,
+              data: {
+                ...bark.data,
+                serverUrl: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setBark(newData);
-        }}
-      />
-
-      <Input
-        placeholder={t("settings.notification.bark.deviceKey.placeholder")}
-        value={bark.data.deviceKey}
-        onChange={(e) => {
-          const newData = {
-            ...bark,
-            data: {
-              ...bark.data,
-              deviceKey: e.target.value,
-            },
-          };
-
-          checkChanged(newData.data);
-          setBark(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={bark.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setBark(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.bark.device_key.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.bark.device_key.placeholder")}
+          value={bark.data.deviceKey}
+          onChange={(e) => {
+            const newData = {
+              ...bark,
+              data: {
+                ...bark.data,
+                deviceKey: e.target.value,
+              },
+            };
 
-        <Show when={!changed && bark.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+            checkChanged(newData.data);
+            setBark(newData);
+          }}
+        />
+      </div>
+
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={bark.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && bark.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/notify/DingTalk.tsx

@@ -120,23 +120,30 @@ const DingTalk = () => {
         description: `${t("settings.notification.config.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("dingtalk");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
     }
@@ -177,64 +184,74 @@ const DingTalk = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="AccessToken"
-        value={dingtalk.data.accessToken}
-        onChange={(e) => {
-          const newData = {
-            ...dingtalk,
-            data: {
-              ...dingtalk.data,
-              accessToken: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setDingtalk(newData);
-        }}
-      />
-      <Input
-        placeholder={t("settings.notification.dingtalk.secret.placeholder")}
-        className="mt-2"
-        value={dingtalk.data.secret}
-        onChange={(e) => {
-          const newData = {
-            ...dingtalk,
-            data: {
-              ...dingtalk.data,
-              secret: e.target.value,
-            },
-          };
-          checkChanged(newData.data);
-          setDingtalk(newData);
-        }}
-      />
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.dingtalk.access_token.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.dingtalk.access_token.placeholder")}
+          value={dingtalk.data.accessToken}
+          onChange={(e) => {
+            const newData = {
+              ...dingtalk,
+              data: {
+                ...dingtalk.data,
+                accessToken: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setDingtalk(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.dingtalk.secret.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.dingtalk.secret.placeholder")}
+          value={dingtalk.data.secret}
+          onChange={(e) => {
+            const newData = {
+              ...dingtalk,
+              data: {
+                ...dingtalk.data,
+                secret: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setDingtalk(newData);
+          }}
+        />
+      </div>
 
-        <Show when={!changed && dingtalk.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && dingtalk.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/notify/Email.tsx

@@ -0,0 +1,384 @@
+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 EmailSetting = {
+  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<EmailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      smtpHost: "",
+      smtpPort: 465,
+      smtpTLS: true,
+      username: "",
+      password: "",
+      senderAddress: "",
+      receiverAddress: "",
+      enabled: false,
+    },
+  });
+
+  const [originMail, setOriginMail] = useState<EmailSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      smtpHost: "",
+      smtpPort: 465,
+      smtpTLS: true,
+      username: "",
+      password: "",
+      senderAddress: "",
+      receiverAddress: "",
+      enabled: false,
+    },
+  });
+
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setOriginMail({
+      id: config.id ?? "",
+      name: "email",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailMail();
+    setMail({
+      id: config.id ?? "",
+      name: "email",
+      data,
+    });
+  }, [config]);
+
+  const { toast } = useToast();
+
+  const getDetailMail = () => {
+    const df: NotifyChannelEmail = {
+      smtpHost: "smtp.example.com",
+      smtpPort: 465,
+      smtpTLS: true,
+      username: "",
+      password: "",
+      senderAddress: "",
+      receiverAddress: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.email) {
+      return df;
+    }
+
+    return chanels.email as NotifyChannelEmail;
+  };
+
+  const checkChanged = (data: NotifyChannelEmail) => {
+    if (
+      data.smtpHost !== originMail.data.smtpHost ||
+      data.smtpPort !== originMail.data.smtpPort ||
+      data.smtpTLS !== originMail.data.smtpTLS ||
+      data.username !== originMail.data.username ||
+      data.password !== originMail.data.password ||
+      data.senderAddress !== originMail.data.senderAddress ||
+      data.receiverAddress !== originMail.data.receiverAddress
+    ) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const handleSaveClick = async () => {
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          email: {
+            ...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 [testing, setTesting] = useState<boolean>(false);
+  const handlePushTestClick = async () => {
+    if (testing) return;
+
+    try {
+      setTesting(true);
+
+      await notifyTest("email");
+
+      toast({
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.message"),
+      });
+    } catch (e) {
+      const msg = getErrMessage(e);
+
+      toast({
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  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,
+          email: {
+            ...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 className="flex flex-col space-y-4">
+      <div className="flex space-x-4">
+        <div className="w-2/5">
+          <Label>{t("settings.notification.email.smtp_host.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.smtp_host.placeholder")}
+            value={mail.data.smtpHost}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpHost: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+
+        <div className="w-2/5">
+          <Label>{t("settings.notification.email.smtp_port.label")}</Label>
+          <Input
+            type="number"
+            placeholder={t("settings.notification.email.smtp_port.placeholder")}
+            value={mail.data.smtpPort}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpPort: +e.target.value || 0,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+
+        <div className="w-1/5">
+          <Label>{t("settings.notification.email.smtp_tls.label")}</Label>
+          <Switch
+            className="block mt-2"
+            checked={mail.data.smtpTLS}
+            onCheckedChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  smtpPort: e && mail.data.smtpPort === 25 ? 465 : !e && mail.data.smtpPort === 465 ? 25 : mail.data.smtpPort,
+                  smtpTLS: e,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="flex space-x-4">
+        <div className="w-1/2">
+          <Label>{t("settings.notification.email.username.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.username.placeholder")}
+            value={mail.data.username}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  username: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+
+        <div className="w-1/2">
+          <Label>{t("settings.notification.email.password.label")}</Label>
+          <Input
+            placeholder={t("settings.notification.email.password.placeholder")}
+            value={mail.data.password}
+            onChange={(e) => {
+              const newData = {
+                ...mail,
+                data: {
+                  ...mail.data,
+                  password: e.target.value,
+                },
+              };
+              checkChanged(newData.data);
+              setMail(newData);
+            }}
+          />
+        </div>
+      </div>
+
+      <div>
+        <Label>{t("settings.notification.email.sender_address.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.email.sender_address.placeholder")}
+          value={mail.data.senderAddress}
+          onChange={(e) => {
+            const newData = {
+              ...mail,
+              data: {
+                ...mail.data,
+                senderAddress: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setMail(newData);
+          }}
+        />
+      </div>
+
+      <div>
+        <Label>{t("settings.notification.email.receiver_address.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.email.receiver_address.placeholder")}
+          value={mail.data.receiverAddress}
+          onChange={(e) => {
+            const newData = {
+              ...mail,
+              data: {
+                ...mail.data,
+                receiverAddress: e.target.value,
+              },
+            };
+            checkChanged(newData.data);
+            setMail(newData);
+          }}
+        />
+      </div>
+
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={mail.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && mail.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Mail;

ui/src/components/notify/Lark.tsx

@@ -116,23 +116,30 @@ const Lark = () => {
         description: `${t("settings.notification.config.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("lark");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
     }
@@ -173,49 +180,56 @@ const Lark = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="Webhook Url"
-        value={lark.data.webhookUrl}
-        onChange={(e) => {
-          const newData = {
-            ...lark,
-            data: {
-              ...lark.data,
-              webhookUrl: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.lark.webhook_url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.lark.webhook_url.placeholder")}
+          value={lark.data.webhookUrl}
+          onChange={(e) => {
+            const newData = {
+              ...lark,
+              data: {
+                ...lark.data,
+                webhookUrl: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setLark(newData);
-        }}
-      />
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setLark(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && lark.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && lark.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/notify/ServerChan.tsx

@@ -97,7 +97,7 @@ const ServerChan = () => {
       if (!isValidURL(serverchan.data.url)) {
         toast({
           title: t("common.save.failed.message"),
-          description: t("settings.notification.url.errmsg.invalid"),
+          description: t("common.errmsg.url_invalid"),
           variant: "destructive",
         });
         return;
@@ -130,22 +130,29 @@ const ServerChan = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("serverchan");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -184,50 +191,56 @@ const ServerChan = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder={t("settings.notification.serverchan.url.placeholder")}
-        value={serverchan.data.url}
-        onChange={(e) => {
-          const newData = {
-            ...serverchan,
-            data: {
-              ...serverchan.data,
-              url: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.serverchan.url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.serverchan.url.placeholder")}
+          value={serverchan.data.url}
+          onChange={(e) => {
+            const newData = {
+              ...serverchan,
+              data: {
+                ...serverchan.data,
+                url: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setServerChan(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={serverchan.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setServerChan(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={serverchan.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && serverchan.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && serverchan.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/notify/Telegram.tsx

@@ -123,22 +123,29 @@ const Telegram = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("telegram");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -177,67 +184,76 @@ const Telegram = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="ApiToken"
-        value={telegram.data.apiToken}
-        onChange={(e) => {
-          const newData = {
-            ...telegram,
-            data: {
-              ...telegram.data,
-              apiToken: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.telegram.api_token.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.telegram.api_token.placeholder")}
+          value={telegram.data.apiToken}
+          onChange={(e) => {
+            const newData = {
+              ...telegram,
+              data: {
+                ...telegram.data,
+                apiToken: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setTelegram(newData);
-        }}
-      />
-
-      <Input
-        placeholder="ChatId"
-        value={telegram.data.chatId}
-        onChange={(e) => {
-          const newData = {
-            ...telegram,
-            data: {
-              ...telegram.data,
-              chatId: e.target.value,
-            },
-          };
-
-          checkChanged(newData.data);
-          setTelegram(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setTelegram(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div>
+        <Label>{t("settings.notification.telegram.chat_id.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.telegram.chat_id.placeholder")}
+          value={telegram.data.chatId}
+          onChange={(e) => {
+            const newData = {
+              ...telegram,
+              data: {
+                ...telegram.data,
+                chatId: e.target.value,
+              },
+            };
 
-        <Show when={!changed && telegram.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+            checkChanged(newData.data);
+            setTelegram(newData);
+          }}
+        />
+      </div>
+
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && telegram.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/notify/Webhook.tsx

@@ -97,7 +97,7 @@ const Webhook = () => {
       if (!isValidURL(webhook.data.url)) {
         toast({
           title: t("common.save.failed.message"),
-          description: t("settings.notification.url.errmsg.invalid"),
+          description: t("common.errmsg.url_invalid"),
           variant: "destructive",
         });
         return;
@@ -130,22 +130,29 @@ const Webhook = () => {
     }
   };
 
+  const [testing, setTesting] = useState<boolean>(false);
   const handlePushTestClick = async () => {
+    if (testing) return;
+
     try {
+      setTesting(true);
+
       await notifyTest("webhook");
 
       toast({
-        title: t("settings.notification.config.push.test.message.success.message"),
-        description: t("settings.notification.config.push.test.message.success.message"),
+        title: t("settings.notification.push_test_message.succeeded.message"),
+        description: t("settings.notification.push_test_message.succeeded.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}`,
+        title: t("settings.notification.push_test_message.failed.message"),
+        description: `${t("settings.notification.push_test_message.failed.message")}: ${msg}`,
         variant: "destructive",
       });
+    } finally {
+      setTesting(false);
     }
   };
 
@@ -184,50 +191,56 @@ const Webhook = () => {
   };
 
   return (
-    <div>
-      <Input
-        placeholder="Url"
-        value={webhook.data.url}
-        onChange={(e) => {
-          const newData = {
-            ...webhook,
-            data: {
-              ...webhook.data,
-              url: e.target.value,
-            },
-          };
+    <div className="flex flex-col space-y-4">
+      <div>
+        <Label>{t("settings.notification.webhook.url.label")}</Label>
+        <Input
+          placeholder={t("settings.notification.webhook.url.placeholder")}
+          value={webhook.data.url}
+          onChange={(e) => {
+            const newData = {
+              ...webhook,
+              data: {
+                ...webhook.data,
+                url: e.target.value,
+              },
+            };
 
-          checkChanged(newData.data);
-          setWebhook(newData);
-        }}
-      />
-
-      <div className="flex items-center space-x-1 mt-2">
-        <Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
-        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+            checkChanged(newData.data);
+            setWebhook(newData);
+          }}
+        />
       </div>
 
-      <div className="flex justify-end mt-2">
-        <Show when={changed}>
-          <Button
-            onClick={() => {
-              handleSaveClick();
-            }}
-          >
-            {t("common.save")}
-          </Button>
-        </Show>
+      <div className="flex justify-between gap-4">
+        <div className="flex items-center space-x-1">
+          <Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
+          <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
+        </div>
 
-        <Show when={!changed && webhook.id != ""}>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              handlePushTestClick();
-            }}
-          >
-            {t("settings.notification.config.push.test.message")}
-          </Button>
-        </Show>
+        <div className="flex items-center space-x-1">
+          <Show when={changed}>
+            <Button
+              onClick={() => {
+                handleSaveClick();
+              }}
+            >
+              {t("common.save")}
+            </Button>
+          </Show>
+
+          <Show when={!changed && webhook.id != ""}>
+            <Button
+              variant="secondary"
+              loading={testing}
+              onClick={() => {
+                handlePushTestClick();
+              }}
+            >
+              {t("settings.notification.push_test_message")}
+            </Button>
+          </Show>
+        </div>
       </div>
     </div>
   );

ui/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -32,11 +33,38 @@ const buttonVariants = cva(
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button";
-  return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, loading, asChild = false, children, ...props }, ref) => {
+  if (asChild) {
+    return (
+      <Slot ref={ref} {...props}>
+        <>
+          {React.Children.map(children as React.ReactElement, (child: React.ReactElement) => {
+            return React.cloneElement(child, {
+              className: cn(buttonVariants({ variant, size }), className),
+              children: (
+                <>
+                  {loading && <Loader2 className={cn("h-4 w-4 animate-spin", children && "mr-2")} />}
+                  {child.props.children}
+                </>
+              ),
+            });
+          })}
+        </>
+      </Slot>
+    );
+  }
+
+  return (
+    <button className={cn(buttonVariants({ variant, size, className }))} disabled={loading} ref={ref} {...props}>
+      <>
+        {loading && <Loader2 className={cn("h-4 w-4 animate-spin", children && "mr-2")} />}
+        {children}
+      </>
+    </button>
+  );
 });
 Button.displayName = "Button";
 

ui/src/components/workflow/BranchNode.tsx

@@ -35,7 +35,7 @@ const BranchNode = memo(({ data }: BrandNodeProps) => {
           }}
           size={"sm"}
           variant={"outline"}
-          className="text-xs px-2 h-6 rounded-full absolute  -top-3 left-[50%] -translate-x-1/2 z-10"
+          className="text-xs px-2 h-6 rounded-full absolute  -top-3 left-[50%] -translate-x-1/2 z-10 dark:text-stone-200"
         >
           {t("workflow.node.addBranch.label")}
         </Button>

ui/src/components/workflow/ConditionNode.tsx

@@ -34,7 +34,7 @@ const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
         </DropdownMenu>
 
         <div className="w-[261px]  flex flex-col justify-center text-foreground rounded-md bg-white px-5 py-5">
-          <div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200">
+          <div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200 dark:text-stone-600">
             {data.name}
           </div>
         </div>

ui/src/components/workflow/DeployForm.tsx

@@ -24,7 +24,7 @@ export type DeployFormProps = {
   defaultProivder?: string;
 };
 const DeployForm = ({ data, defaultProivder }: DeployFormProps) => {
-  return getForm(data, defaultProivder);
+  return <div className="dark:text-stone-200">{getForm(data, defaultProivder)}</div>;
 };
 
 export default memo(DeployForm);

ui/src/components/workflow/Node.tsx

@@ -39,7 +39,6 @@ const Node = ({ data }: NodeProps) => {
   };
 
   const getSetting = () => {
-    console.log(data);
     if (!data.validated) {
       return <>{t(`${i18nPrefix}.setting.label`)}</>;
     }

ui/src/components/workflow/NotifyForm.tsx

@@ -93,7 +93,7 @@ const NotifyForm = ({ data }: NotifyFormProps) => {
             e.stopPropagation();
             form.handleSubmit(onSubmit)(e);
           }}
-          className="space-y-8"
+          className="space-y-8 dark:text-stone-200"
         >
           <FormField
             control={form.control}