feat(notify): test media configs and preview templates without saving - #2232

src/pages/notificationChannels/pages/Form/index.tsx (1)

172-196: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Extract the shared validation-error handler.

The same error branch appears in the save catch and in onBeforeOpen. Extract one helper and use it in both places.

♻️ Proposed refactor

+  // 校验失败带 errorFields，由 antd 自行标红；其余异常才是真错误
+  const handleValidateError = (err: any) => {
+    if (!err?.errorFields) {
+      console.error(err);
+    }
+    scrollToFirstError();
+  };

-                        .catch((err) => {
-                          // 校验失败带 errorFields，由 antd 自行标红；其余异常才是真错误，
-                          // 一并 console.error 会让真异常淹没在日常的校验失败里
-                          if (!err?.errorFields) {
-                            console.error(err);
-                          }
-                          scrollToFirstError();
-                        });
+                        .catch(handleValidateError);

                     onBeforeOpen={() =>
-                      form.validateFields().catch((err) => {
-                        if (!err?.errorFields) {
-                          console.error(err);
-                        }
-                        scrollToFirstError();
-                        throw err;
-                      })
+                      form.validateFields().catch((err) => {
+                        handleValidateError(err);
+                        throw err;
+                      })
                     }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/notificationChannels/pages/Form/index.tsx` around lines 172 - 196,
Extract the duplicated validation-error handling from the save promise catch and
TestModal’s onBeforeOpen into a shared helper near the surrounding component
logic. The helper should conditionally console.error non-validation errors, call
scrollToFirstError, and be reused by both handlers while preserving the existing
rethrow behavior in onBeforeOpen.

src/pages/notificationChannels/pages/Form/TestModal/index.tsx (1)

140-157: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Show the blocked reason with a Tooltip.

The native title attribute is unreliable on a disabled button and is not reachable by keyboard. Wrap the button in an antd Tooltip so the test.script_blocked reason is always visible.

♻️ Proposed change

-      <Button
-        ghost
-        type='primary'
-        icon={<ExperimentOutlined />}
-        disabled={scriptBlocked}
-        title={scriptBlocked ? t('test.script_blocked') : undefined}
-        onClick={() => {
+      <Tooltip title={scriptBlocked ? t('test.script_blocked') : undefined}>
+        <Button
+          ghost
+          type='primary'
+          icon={<ExperimentOutlined />}
+          disabled={scriptBlocked}
+          onClick={() => {

Close the Tooltip after the button and import Tooltip from antd.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/notificationChannels/pages/Form/TestModal/index.tsx` around lines
140 - 157, Update the test button rendering in TestModal to import and wrap the
disabled Button with an antd Tooltip, using t('test.script_blocked') as its
content when scriptBlocked. Remove the native title attribute and ensure the
Tooltip remains available for the blocked-state reason, while preserving the
existing click and disabled behavior.

src/pages/notificationTemplates/pages/List/index.tsx (1)

208-222: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Express the height cap with a Tailwind class.

Line 214 sets maxHeight through an inline style while the same element controls layout with Tailwind classes. The repository convention is to express layout, spacing, and sizing with Tailwind and to avoid splitting one visual property between systems.

♻️ Proposed change

-                <div className='flex min-h-0 flex-none flex-col' style={{ maxHeight: '62%' }}>
+                <div className='flex min-h-0 max-h-[62%] flex-none flex-col'>
                   <FieldsPanel />
                 </div>

As per coding guidelines: "能直接用 Tailwind 表达的布局、间距、排版、圆角和常见交互态应使用 Tailwind。"

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/notificationTemplates/pages/List/index.tsx` around lines 208 - 222,
Replace the inline maxHeight styling on the FieldsPanel container with the
equivalent Tailwind arbitrary-value class, keeping the existing flex layout and
62% height cap unchanged.

Source: Coding guidelines

src/pages/notificationTemplates/pages/List/Form/PreviewModal/index.tsx (1)

40-59: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

Add a loading state for the preview request.

The effect clears previewData on close and does not track the request state. Between opening the result modal and the response, every field renders with an empty string. The user sees empty editors that later fill in.

Track a loading flag and render a spinner in the result modal body.

♻️ Proposed change

+  const [previewLoading, setPreviewLoading] = useState(false);
+
   useEffect(() => {
     if (!resultModalVisible || !content) return;
     if (mode === 'history' && _.isEmpty(selectedEventIds)) return;
 
+    setPreviewLoading(true);
     preview({
@@
       .catch((err) => {
         console.error(err);
         setPreviewData(undefined);
-      });
+      })
+      .finally(() => {
+        setPreviewLoading(false);
+      });
   }, [resultModalVisible, mode, _.join(selectedEventIds), mockEvent.severity, mockEvent.isRecovered]);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/notificationTemplates/pages/List/Form/PreviewModal/index.tsx`
around lines 40 - 59, Update the preview request flow in the useEffect to track
a loading state, setting it before preview starts and clearing it after success
or failure; reset preview data when the modal closes as needed. Pass this state
into the result modal body and render a spinner while the request is pending
instead of showing empty editors.

src/pages/notificationTemplates/utils/tplKeys.test.ts (1)

159-181: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace as any in the test fixture with a typed value.

The coding guidelines forbid as any in test data. Type formValues with the channel form type that normalizeFormValues accepts, or validate the literal with satisfies. This keeps the fixture aligned with the source contract if the channel type changes.

♻️ Proposed change

-    const formValues = {
+    const formValues: ChannelItem = {
       name: 'dingtalk',
       ident: 'dingtalk',
@@
-    const normalized = normalizeFormValues(formValues as any);
+    const normalized = normalizeFormValues(formValues);

Add the import:

import { ChannelItem } from '`@/pages/notificationChannels/services`';

If ChannelItem requires more fields, use Partial<ChannelItem> plus the narrower parameter type instead of any.

As per coding guidelines: "Avoid as any in test data; when data does not match a function signature, prefer satisfies to validate its structure."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/notificationTemplates/utils/tplKeys.test.ts` around lines 159 -
181, Replace the `formValues as any` cast in the test fixture with a typed value
accepted by `normalizeFormValues`. Import and use `ChannelItem`, or apply
`satisfies` with the appropriate channel form type, preserving the fixture’s
existing fields and ensuring it remains aligned with the function’s contract.

Source: Coding guidelines

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes