Notify push test

2024-10-19 18:12:45 +08:00
parent 4382474449
commit 7fa6ea1797
19 changed files with 929 additions and 254 deletions
--- a/ui/src/components/notify/DingTalk.tsx
+++ b/ui/src/components/notify/DingTalk.tsx
@@ -10,6 +10,8 @@ import { getErrMessage } from "@/lib/error";
 import { NotifyChannelDingTalk, NotifyChannels } from "@/domain/settings";
 import { useNotify } from "@/providers/notify";
 import { update } from "@/repository/settings";
+import Show from "@/components/Show";
+import { notifyTest } from "@/api/notify";

 type DingTalkSetting = {
  id: string;
@@ -21,6 +23,8 @@ const DingTalk = () => {
  const { config, setChannels } = useNotify();
  const { t } = useTranslation();

+  const [changed, setChanged] = useState<boolean>(false);
+
  const [dingtalk, setDingtalk] = useState<DingTalkSetting>({
    id: config.id ?? "",
    name: "notifyChannels",
@@ -31,23 +35,30 @@ const DingTalk = () => {
    },
  });

-  useEffect(() => {
-    const getDetailDingTalk = () => {
-      const df: NotifyChannelDingTalk = {
-        accessToken: "",
-        secret: "",
-        enabled: false,
-      };
-      if (!config.content) {
-        return df;
-      }
-      const chanels = config.content as NotifyChannels;
-      if (!chanels.dingtalk) {
-        return df;
-      }
+  const [originDingtalk, setOriginDingtalk] = useState<DingTalkSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      accessToken: "",
+      secret: "",
+      enabled: false,
+    },
+  });

-      return chanels.dingtalk as NotifyChannelDingTalk;
-    };
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailDingTalk();
+    setOriginDingtalk({
+      id: config.id ?? "",
+      name: "dingtalk",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
    const data = getDetailDingTalk();
    setDingtalk({
      id: config.id ?? "",
@@ -58,6 +69,31 @@ const DingTalk = () => {

  const { toast } = useToast();

+  const getDetailDingTalk = () => {
+    const df: NotifyChannelDingTalk = {
+      accessToken: "",
+      secret: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.dingtalk) {
+      return df;
+    }
+
+    return chanels.dingtalk as NotifyChannelDingTalk;
+  };
+
+  const checkChanged = (data: NotifyChannelDingTalk) => {
+    if (data.accessToken !== originDingtalk.data.accessToken || data.secret !== originDingtalk.data.secret) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
  const handleSaveClick = async () => {
    try {
      const resp = await update({
@@ -87,19 +123,74 @@ const DingTalk = () => {
    }
  };

+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("dingtalk");
+
+      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 = {
+      ...dingtalk,
+      data: {
+        ...dingtalk.data,
+        enabled: !dingtalk.data.enabled,
+      },
+    };
+    setDingtalk(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          dingtalk: {
+            ...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="AccessToken"
        value={dingtalk.data.accessToken}
        onChange={(e) => {
-          setDingtalk({
+          const newData = {
            ...dingtalk,
            data: {
              ...dingtalk.data,
              accessToken: e.target.value,
            },
-          });
+          };
+          checkChanged(newData.data);
+          setDingtalk(newData);
        }}
      />
      <Input
@@ -107,43 +198,47 @@ const DingTalk = () => {
        className="mt-2"
        value={dingtalk.data.secret}
        onChange={(e) => {
-          setDingtalk({
+          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={() => {
-            setDingtalk({
-              ...dingtalk,
-              data: {
-                ...dingtalk.data,
-                enabled: !dingtalk.data.enabled,
-              },
-            });
-          }}
-        />
+        <Switch id="airplane-mode" checked={dingtalk.data.enabled} onCheckedChange={handleSwitchChange} />
        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
      </div>

      <div className="flex justify-end mt-2">
-        <Button
-          onClick={() => {
-            handleSaveClick();
-          }}
-        >
-          {t("common.save")}
-        </Button>
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && dingtalk.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
      </div>
    </div>
  );
 };

 export default DingTalk;
+
--- a/ui/src/components/notify/Lark.tsx
+++ b/ui/src/components/notify/Lark.tsx
@@ -1,14 +1,16 @@
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
-import { Switch } from "../ui/switch";
-import { Label } from "../ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 import { useNotify } from "@/providers/notify";
 import { NotifyChannelLark, NotifyChannels } from "@/domain/settings";
 import { useEffect, useState } from "react";
 import { update } from "@/repository/settings";
 import { getErrMessage } from "@/lib/error";
-import { useToast } from "../ui/use-toast";
+import { useToast } from "@/components/ui/use-toast";
 import { useTranslation } from "react-i18next";
+import { notifyTest } from "@/api/notify";
+import Show from "@/components/Show";

 type LarkSetting = {
  id: string;
@@ -20,6 +22,8 @@ const Lark = () => {
  const { config, setChannels } = useNotify();
  const { t } = useTranslation();

+  const [changed, setChanged] = useState<boolean>(false);
+
  const [lark, setLark] = useState<LarkSetting>({
    id: config.id ?? "",
    name: "notifyChannels",
@@ -29,22 +33,29 @@ const Lark = () => {
    },
  });

-  useEffect(() => {
-    const getDetailLark = () => {
-      const df: NotifyChannelLark = {
-        webhookUrl: "",
-        enabled: false,
-      };
-      if (!config.content) {
-        return df;
-      }
-      const chanels = config.content as NotifyChannels;
-      if (!chanels.lark) {
-        return df;
-      }
+  const [originLark, setOriginLark] = useState<LarkSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      webhookUrl: "",
+      enabled: false,
+    },
+  });

-      return chanels.lark as NotifyChannelLark;
-    };
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailLark();
+    setOriginLark({
+      id: config.id ?? "",
+      name: "lark",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
    const data = getDetailLark();
    setLark({
      id: config.id ?? "",
@@ -55,6 +66,30 @@ const Lark = () => {

  const { toast } = useToast();

+  const checkChanged = (data: NotifyChannelLark) => {
+    if (data.webhookUrl !== originLark.data.webhookUrl) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const getDetailLark = () => {
+    const df: NotifyChannelLark = {
+      webhookUrl: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.lark) {
+      return df;
+    }
+
+    return chanels.lark as NotifyChannelLark;
+  };
+
  const handleSaveClick = async () => {
    try {
      const resp = await update({
@@ -78,9 +113,60 @@ const Lark = () => {

      toast({
        title: t("common.save.failed.message"),
-        description: `${t(
-          "settings.notification.config.failed.message"
-        )}: ${msg}`,
+        description: `${t("settings.notification.config.failed.message")}: ${msg}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("lark");
+
+      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 = {
+      ...lark,
+      data: {
+        ...lark.data,
+        enabled: !lark.data.enabled,
+      },
+    };
+    setLark(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          lark: {
+            ...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",
      });
    }
@@ -92,45 +178,48 @@ const Lark = () => {
        placeholder="Webhook Url"
        value={lark.data.webhookUrl}
        onChange={(e) => {
-          setLark({
+          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={() => {
-            setLark({
-              ...lark,
-              data: {
-                ...lark.data,
-                enabled: !lark.data.enabled,
-              },
-            });
-          }}
-        />
-        <Label htmlFor="airplane-mode">
-          {t("settings.notification.config.enable")}
-        </Label>
+        <Switch id="airplane-mode" checked={lark.data.enabled} onCheckedChange={handleSwitchChange} />
+        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
      </div>

      <div className="flex justify-end mt-2">
-        <Button
-          onClick={() => {
-            handleSaveClick();
-          }}
-        >
-          {t("common.save")}
-        </Button>
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && lark.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
      </div>
    </div>
  );
 };

 export default Lark;
+
--- a/ui/src/components/notify/Telegram.tsx
+++ b/ui/src/components/notify/Telegram.tsx
@@ -10,6 +10,8 @@ import { getErrMessage } from "@/lib/error";
 import { NotifyChannels, NotifyChannelTelegram } from "@/domain/settings";
 import { update } from "@/repository/settings";
 import { useNotify } from "@/providers/notify";
+import { notifyTest } from "@/api/notify";
+import Show from "@/components/Show";

 type TelegramSetting = {
  id: string;
@@ -21,6 +23,8 @@ const Telegram = () => {
  const { config, setChannels } = useNotify();
  const { t } = useTranslation();

+  const [changed, setChanged] = useState<boolean>(false);
+
  const [telegram, setTelegram] = useState<TelegramSetting>({
    id: config.id ?? "",
    name: "notifyChannels",
@@ -31,23 +35,30 @@ const Telegram = () => {
    },
  });

-  useEffect(() => {
-    const getDetailTelegram = () => {
-      const df: NotifyChannelTelegram = {
-        apiToken: "",
-        chatId: "",
-        enabled: false,
-      };
-      if (!config.content) {
-        return df;
-      }
-      const chanels = config.content as NotifyChannels;
-      if (!chanels.telegram) {
-        return df;
-      }
+  const [originTelegram, setOriginTelegram] = useState<TelegramSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      apiToken: "",
+      chatId: "",
+      enabled: false,
+    },
+  });

-      return chanels.telegram as NotifyChannelTelegram;
-    };
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailTelegram();
+    setOriginTelegram({
+      id: config.id ?? "",
+      name: "common.provider.telegram",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
    const data = getDetailTelegram();
    setTelegram({
      id: config.id ?? "",
@@ -58,6 +69,31 @@ const Telegram = () => {

  const { toast } = useToast();

+  const checkChanged = (data: NotifyChannelTelegram) => {
+    if (data.apiToken !== originTelegram.data.apiToken || data.chatId !== originTelegram.data.chatId) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const getDetailTelegram = () => {
+    const df: NotifyChannelTelegram = {
+      apiToken: "",
+      chatId: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.telegram) {
+      return df;
+    }
+
+    return chanels.telegram as NotifyChannelTelegram;
+  };
+
  const handleSaveClick = async () => {
    try {
      const resp = await update({
@@ -87,19 +123,75 @@ const Telegram = () => {
    }
  };

+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("telegram");
+
+      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 = {
+      ...telegram,
+      data: {
+        ...telegram.data,
+        enabled: !telegram.data.enabled,
+      },
+    };
+    setTelegram(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          telegram: {
+            ...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="ApiToken"
        value={telegram.data.apiToken}
        onChange={(e) => {
-          setTelegram({
+          const newData = {
            ...telegram,
            data: {
              ...telegram.data,
              apiToken: e.target.value,
            },
-          });
+          };
+
+          checkChanged(newData.data);
+          setTelegram(newData);
        }}
      />

@@ -107,44 +199,49 @@ const Telegram = () => {
        placeholder="ChatId"
        value={telegram.data.chatId}
        onChange={(e) => {
-          setTelegram({
+          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={() => {
-            setTelegram({
-              ...telegram,
-              data: {
-                ...telegram.data,
-                enabled: !telegram.data.enabled,
-              },
-            });
-          }}
-        />
+        <Switch id="airplane-mode" checked={telegram.data.enabled} onCheckedChange={handleSwitchChange} />
        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
      </div>

      <div className="flex justify-end mt-2">
-        <Button
-          onClick={() => {
-            handleSaveClick();
-          }}
-        >
-          {t("common.save")}
-        </Button>
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && telegram.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
      </div>
    </div>
  );
 };

 export default Telegram;
+
--- a/ui/src/components/notify/Webhook.tsx
+++ b/ui/src/components/notify/Webhook.tsx
@@ -11,6 +11,8 @@ import { isValidURL } from "@/lib/url";
 import { NotifyChannels, NotifyChannelWebhook } from "@/domain/settings";
 import { update } from "@/repository/settings";
 import { useNotify } from "@/providers/notify";
+import { notifyTest } from "@/api/notify";
+import Show from "@/components/Show";

 type WebhookSetting = {
  id: string;
@@ -21,6 +23,7 @@ type WebhookSetting = {
 const Webhook = () => {
  const { config, setChannels } = useNotify();
  const { t } = useTranslation();
+  const [changed, setChanged] = useState<boolean>(false);

  const [webhook, setWebhook] = useState<WebhookSetting>({
    id: config.id ?? "",
@@ -31,22 +34,29 @@ const Webhook = () => {
    },
  });

-  useEffect(() => {
-    const getDetailWebhook = () => {
-      const df: NotifyChannelWebhook = {
-        url: "",
-        enabled: false,
-      };
-      if (!config.content) {
-        return df;
-      }
-      const chanels = config.content as NotifyChannels;
-      if (!chanels.webhook) {
-        return df;
-      }
+  const [originWebhook, setOriginWebhook] = useState<WebhookSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      url: "",
+      enabled: false,
+    },
+  });

-      return chanels.webhook as NotifyChannelWebhook;
-    };
+  useEffect(() => {
+    setChanged(false);
+  }, [config]);
+
+  useEffect(() => {
+    const data = getDetailWebhook();
+    setOriginWebhook({
+      id: config.id ?? "",
+      name: "webhook",
+      data,
+    });
+  }, [config]);
+
+  useEffect(() => {
    const data = getDetailWebhook();
    setWebhook({
      id: config.id ?? "",
@@ -57,6 +67,30 @@ const Webhook = () => {

  const { toast } = useToast();

+  const checkChanged = (data: NotifyChannelWebhook) => {
+    if (data.url !== originWebhook.data.url) {
+      setChanged(true);
+    } else {
+      setChanged(false);
+    }
+  };
+
+  const getDetailWebhook = () => {
+    const df: NotifyChannelWebhook = {
+      url: "",
+      enabled: false,
+    };
+    if (!config.content) {
+      return df;
+    }
+    const chanels = config.content as NotifyChannels;
+    if (!chanels.webhook) {
+      return df;
+    }
+
+    return chanels.webhook as NotifyChannelWebhook;
+  };
+
  const handleSaveClick = async () => {
    try {
      webhook.data.url = webhook.data.url.trim();
@@ -96,50 +130,108 @@ const Webhook = () => {
    }
  };

+  const handlePushTestClick = async () => {
+    try {
+      await notifyTest("webhook");
+
+      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 = {
+      ...webhook,
+      data: {
+        ...webhook.data,
+        enabled: !webhook.data.enabled,
+      },
+    };
+    setWebhook(newData);
+
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          webhook: {
+            ...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="Url"
        value={webhook.data.url}
        onChange={(e) => {
-          setWebhook({
+          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={() => {
-            setWebhook({
-              ...webhook,
-              data: {
-                ...webhook.data,
-                enabled: !webhook.data.enabled,
-              },
-            });
-          }}
-        />
+        <Switch id="airplane-mode" checked={webhook.data.enabled} onCheckedChange={handleSwitchChange} />
        <Label htmlFor="airplane-mode">{t("settings.notification.config.enable")}</Label>
      </div>

      <div className="flex justify-end mt-2">
-        <Button
-          onClick={() => {
-            handleSaveClick();
-          }}
-        >
-          {t("common.save")}
-        </Button>
+        <Show when={changed}>
+          <Button
+            onClick={() => {
+              handleSaveClick();
+            }}
+          >
+            {t("common.save")}
+          </Button>
+        </Show>
+
+        <Show when={!changed && webhook.id != ""}>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handlePushTestClick();
+            }}
+          >
+            {t("settings.notification.config.push.test.message")}
+          </Button>
+        </Show>
      </div>
    </div>
  );
 };

 export default Webhook;
+