Notify push test

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;
+