feat: deprecate old notification module and introduce new notifier module

ui/src/components/workflow/node/NotifyNode.tsx

@@ -1,8 +1,9 @@
 import { memo, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Flex, Typography } from "antd";
+import { Avatar, Flex, Typography } from "antd";
 import { produce } from "immer";
 
+import { notifyProvidersMap } from "@/domain/provider";
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNodeConfigForNotify, WorkflowNodeType } from "@/domain/workflow";
 import { useZustandShallowSelector } from "@/hooks";
@@ -39,9 +40,11 @@ const NotifyNode = ({ node, disabled }: NotifyNodeProps) => {
 
     const config = (node.config as WorkflowNodeConfigForNotify) ?? {};
     const channel = notifyChannelsMap.get(config.channel as string);
+    const provider = notifyProvidersMap.get(config.provider);
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
-        <Typography.Text className="flex-1 truncate">{t(channel?.name ?? "　")}</Typography.Text>
+        <Avatar src={provider?.icon} size="small" />
+        <Typography.Text className="flex-1 truncate">{t(channel?.name ?? provider?.name ?? "　")}</Typography.Text>
         <Typography.Text className="truncate" type="secondary">
           {config.subject ?? ""}
         </Typography.Text>

ui/src/components/workflow/node/NotifyNodeConfigForm.tsx

@@ -1,14 +1,19 @@
-import { forwardRef, memo, useEffect, useImperativeHandle } from "react";
+import { forwardRef, memo, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import { RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
-import { Button, Form, type FormInstance, Input, Select } from "antd";
+import { PlusOutlined as PlusOutlinedIcon, RightOutlined as RightOutlinedIcon } from "@ant-design/icons";
+import { Alert, Button, Form, type FormInstance, Input, Select } from "antd";
 import { createSchemaFieldRule } from "antd-zod";
 import { z } from "zod";
 
+import AccessEditModal from "@/components/access/AccessEditModal";
+import AccessSelect from "@/components/access/AccessSelect";
+import NotifyProviderSelect from "@/components/provider/NotifyProviderSelect";
+import { ACCESS_USAGES, accessProvidersMap, notifyProvidersMap } from "@/domain/provider";
 import { notifyChannelsMap } from "@/domain/settings";
 import { type WorkflowNodeConfigForNotify } from "@/domain/workflow";
 import { useAntdForm, useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
 import { useNotifyChannelsStore } from "@/stores/notify";
 
 type NotifyNodeConfigFormFieldValues = Partial<WorkflowNodeConfigForNotify>;
@@ -35,6 +40,8 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
   ({ className, style, disabled, initialValues, onValuesChange }, ref) => {
     const { t } = useTranslation();
 
+    const { accesses } = useAccessesStore(useZustandShallowSelector("accesses"));
+
     const {
       channels,
       loadedAtOnce: channelsLoadedAtOnce,
@@ -53,7 +60,11 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
         .string({ message: t("workflow_node.notify.form.message.placeholder") })
         .min(1, t("workflow_node.notify.form.message.placeholder"))
         .max(1000, t("common.errmsg.string_max", { max: 1000 })),
-      channel: z.string({ message: t("workflow_node.notify.form.channel.placeholder") }).min(1, t("workflow_node.notify.form.channel.placeholder")),
+      channel: z.string().nullish(),
+      provider: z.string({ message: t("workflow_node.notify.form.provider.placeholder") }).nonempty(t("workflow_node.notify.form.provider.placeholder")),
+      providerAccessId: z
+        .string({ message: t("workflow_node.notify.form.provider_access.placeholder") })
+        .nonempty(t("workflow_node.notify.form.provider_access.placeholder")),
     });
     const formRule = createSchemaFieldRule(formSchema);
     const { form: formInst, formProps } = useAntdForm({
@@ -61,6 +72,49 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
       initialValues: initialValues ?? initFormModel(),
     });
 
+    const fieldProvider = Form.useWatch<string>("provider", { form: formInst, preserve: true });
+    const fieldProviderAccessId = Form.useWatch<string>("providerAccessId", formInst);
+
+    const [showProvider, setShowProvider] = useState(false);
+    useEffect(() => {
+      // 通常情况下每个授权信息只对应一个消息通知提供商，此时无需显示消息通知提供商字段；
+      // 如果对应多个，则显示。
+      if (fieldProviderAccessId) {
+        const access = accesses.find((e) => e.id === fieldProviderAccessId);
+        const providers = Array.from(notifyProvidersMap.values()).filter((e) => e.provider === access?.provider);
+        setShowProvider(providers.length > 1);
+      } else {
+        setShowProvider(false);
+      }
+    }, [accesses, fieldProviderAccessId]);
+
+    const handleProviderSelect = (value: string) => {
+      if (fieldProvider === value) return;
+
+      // 切换消息通知提供商时联动授权信息
+      if (initialValues?.provider === value) {
+        formInst.setFieldValue("providerAccessId", initialValues?.providerAccessId);
+        onValuesChange?.(formInst.getFieldsValue(true));
+      } else {
+        if (notifyProvidersMap.get(fieldProvider)?.provider !== notifyProvidersMap.get(value)?.provider) {
+          formInst.setFieldValue("providerAccessId", undefined);
+          onValuesChange?.(formInst.getFieldsValue(true));
+        }
+      }
+    };
+
+    const handleProviderAccessSelect = (value: string) => {
+      if (fieldProviderAccessId === value) return;
+
+      // 切换授权信息时联动消息通知提供商
+      const access = accesses.find((access) => access.id === value);
+      const provider = Array.from(notifyProvidersMap.values()).find((provider) => provider.provider === access?.provider);
+      if (fieldProvider !== provider?.type) {
+        formInst.setFieldValue("provider", provider?.type);
+        onValuesChange?.(formInst.getFieldsValue(true));
+      }
+    };
+
     const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
       onValuesChange?.(values as NotifyNodeConfigFormFieldValues);
     };
@@ -92,7 +146,7 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
         <Form.Item className="mb-0">
           <label className="mb-1 block">
             <div className="flex w-full items-center justify-between gap-4">
-              <div className="max-w-full grow truncate">{t("workflow_node.notify.form.channel.label")}</div>
+              <div className="max-w-full grow truncate line-through">{t("workflow_node.notify.form.channel.label")}</div>
               <div className="text-right">
                 <Link className="ant-typography" to="/settings/notification" target="_blank">
                   <Button size="small" type="link">
@@ -116,6 +170,60 @@ const NotifyNodeConfigForm = forwardRef<NotifyNodeConfigFormInstance, NotifyNode
             />
           </Form.Item>
         </Form.Item>
+
+        <Form.Item name="provider" label={t("workflow_node.notify.form.provider.label")} hidden={!showProvider} rules={[formRule]}>
+          <NotifyProviderSelect
+            disabled={!showProvider}
+            filter={(record) => {
+              if (fieldProviderAccessId) {
+                return accesses.find((e) => e.id === fieldProviderAccessId)?.provider === record.provider;
+              }
+
+              return true;
+            }}
+            placeholder={t("workflow_node.notify.form.provider.placeholder")}
+            showSearch
+            onSelect={handleProviderSelect}
+          />
+        </Form.Item>
+
+        <Form.Item className="mb-0">
+          <label className="mb-1 block">
+            <div className="flex w-full items-center justify-between gap-4">
+              <div className="max-w-full grow truncate">
+                <span>{t("workflow_node.notify.form.provider_access.label")}</span>
+              </div>
+              <div className="text-right">
+                <AccessEditModal
+                  range="notify-only"
+                  scene="add"
+                  trigger={
+                    <Button size="small" type="link">
+                      {t("workflow_node.notify.form.provider_access.button")}
+                      <PlusOutlinedIcon className="text-xs" />
+                    </Button>
+                  }
+                  afterSubmit={(record) => {
+                    const provider = accessProvidersMap.get(record.provider);
+                    if (provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION)) {
+                      formInst.setFieldValue("providerAccessId", record.id);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+          </label>
+          <Form.Item name="providerAccessId" rules={[formRule]}>
+            <AccessSelect
+              filter={(record) => {
+                const provider = accessProvidersMap.get(record.provider);
+                return !!provider?.usages?.includes(ACCESS_USAGES.NOTIFICATION);
+              }}
+              placeholder={t("workflow_node.notify.form.provider_access.placeholder")}
+              onChange={handleProviderAccessSelect}
+            />
+          </Form.Item>
+        </Form.Item>
       </Form>
     );
   }