Notify Add Lark

ui/src/components/notify/Lark.tsx

@@ -0,0 +1,136 @@
+import { Input } from "../ui/input";
+import { Button } from "../ui/button";
+import { Switch } from "../ui/switch";
+import { Label } from "../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 { useTranslation } from "react-i18next";
+
+type LarkSetting = {
+  id: string;
+  name: string;
+  data: NotifyChannelLark;
+};
+
+const Lark = () => {
+  const { config, setChannels } = useNotify();
+  const { t } = useTranslation();
+
+  const [lark, setLark] = useState<LarkSetting>({
+    id: config.id ?? "",
+    name: "notifyChannels",
+    data: {
+      webhookUrl: "",
+      enabled: false,
+    },
+  });
+
+  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;
+      }
+
+      return chanels.lark as NotifyChannelLark;
+    };
+    const data = getDetailLark();
+    setLark({
+      id: config.id ?? "",
+      name: "lark",
+      data,
+    });
+  }, [config]);
+
+  const { toast } = useToast();
+
+  const handleSaveClick = async () => {
+    try {
+      const resp = await update({
+        ...config,
+        name: "notifyChannels",
+        content: {
+          ...config.content,
+          lark: {
+            ...lark.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",
+      });
+    }
+  };
+
+  return (
+    <div>
+      <Input
+        placeholder="Webhook Url"
+        value={lark.data.webhookUrl}
+        onChange={(e) => {
+          setLark({
+            ...lark,
+            data: {
+              ...lark.data,
+              webhookUrl: e.target.value,
+            },
+          });
+        }}
+      />
+      <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>
+      </div>
+
+      <div className="flex justify-end mt-2">
+        <Button
+          onClick={() => {
+            handleSaveClick();
+          }}
+        >
+          {t("common.save")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Lark;

ui/src/domain/settings.ts

@@ -19,11 +19,12 @@ export type NotifyTemplate = {
 
 export type NotifyChannels = {
   dingtalk?: NotifyChannel;
+  lark?: NotifyChannel;
   telegram?: NotifyChannel;
   webhook?: NotifyChannel;
 };
 
-export type NotifyChannel = NotifyChannelDingTalk | NotifyChannelTelegram | NotifyChannelWebhook;
+export type NotifyChannel = NotifyChannelDingTalk | NotifyChannelLark | NotifyChannelTelegram | NotifyChannelWebhook;
 
 export type NotifyChannelDingTalk = {
   accessToken: string;
@@ -31,6 +32,11 @@ export type NotifyChannelDingTalk = {
   enabled: boolean;
 };
 
+export type NotifyChannelLark = {
+  webhookUrl: string;
+  enabled: boolean;
+};
+
 export type NotifyChannelTelegram = {
   apiToken: string;
   chatId: string;

ui/src/i18n/locales/en/nls.common.json

@@ -68,5 +68,6 @@
   "common.provider.ssh": "SSH Deployment",
   "common.provider.webhook": "Webhook",
   "common.provider.dingtalk": "DingTalk",
-  "common.provider.telegram": "Telegram"
+  "common.provider.telegram": "Telegram",
+  "common.provider.lark": "Lark"
 }

ui/src/i18n/locales/zh/nls.common.json

@@ -68,5 +68,6 @@
   "common.provider.ssh": "SSH 部署",
   "common.provider.webhook": "Webhook",
   "common.provider.dingtalk": "钉钉",
-  "common.provider.telegram": "Telegram"
+  "common.provider.telegram": "Telegram",
+  "common.provider.lark": "飞书"
 }

ui/src/pages/setting/Notify.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import DingTalk from "@/components/notify/DingTalk";
+import Lark from "@/components/notify/Lark";
 import NotifyTemplate from "@/components/notify/NotifyTemplate";
 import Telegram from "@/components/notify/Telegram";
 import Webhook from "@/components/notify/Webhook";
@@ -32,6 +33,13 @@ const Notify = () => {
               </AccordionContent>
             </AccordionItem>
 
+            <AccordionItem value="item-3" className="dark:border-stone-200">
+              <AccordionTrigger>{t("common.provider.lark")}</AccordionTrigger>
+              <AccordionContent>
+                <Lark />
+              </AccordionContent>
+            </AccordionItem>
+
             <AccordionItem value="item-4" className="dark:border-stone-200">
               <AccordionTrigger>{t("common.provider.telegram")}</AccordionTrigger>
               <AccordionContent>