From 440ce8a12bdca1c6e0df1c6613fd5087a6b71468 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 18 Jun 2025 14:42:26 +0800 Subject: [PATCH] simplify creatign notifications --- .../src/Pages/Notifications/create/index.jsx | 311 ++---------------- client/src/Pages/Notifications/index.jsx | 18 +- client/src/Pages/Notifications/utils.js | 32 ++ client/src/locales/en.json | 4 +- 4 files changed, 67 insertions(+), 298 deletions(-) diff --git a/client/src/Pages/Notifications/create/index.jsx b/client/src/Pages/Notifications/create/index.jsx index 2fd83e4e1..fba30185f 100644 --- a/client/src/Pages/Notifications/create/index.jsx +++ b/client/src/Pages/Notifications/create/index.jsx @@ -17,15 +17,17 @@ import { useEditNotification, useTestNotification, } from "../../../Hooks/useNotifications"; -import { - notificationEmailValidation, - notificationWebhookValidation, - notificationPagerDutyValidation, -} from "../../../Validation/validation"; +import { notificationValidation } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import { useTranslation } from "react-i18next"; import { useParams } from "react-router-dom"; -import { NOTIFICATION_TYPES } from "../utils"; +import { + NOTIFICATION_TYPES, + TITLE_MAP, + DESCRIPTION_MAP, + LABEL_MAP, + PLACEHOLDER_MAP, +} from "../utils"; // Setup @@ -49,11 +51,6 @@ const CreateNotifications = () => { notificationName: "", address: "", type: NOTIFICATION_TYPES[0]._id, - config: { - webhookUrl: "", - platform: "", - routingKey: "", - }, }); const [errors, setErrors] = useState({}); const { t } = useTranslation(); @@ -71,42 +68,17 @@ const CreateNotifications = () => { type: NOTIFICATION_TYPES.find((type) => type._id === notification.type).value, }; - if (form.type === "slack" || form.type === "discord") { - form.type = "webhook"; - } - let error = null; - if (form.type === "email") { - error = notificationEmailValidation.validate( - { notificationName: form.notificationName, address: form.address }, - { abortEarly: false } - ).error; - } else if (form.type === "webhook") { - form.config = { - platform: form.config.platform, - webhookUrl: form.config.webhookUrl, - }; - error = notificationWebhookValidation.validate( - { notificationName: form.notificationName, config: form.config }, - { abortEarly: false } - ).error; - } else if (form.type === "pager_duty") { - form.config = { - platform: form.config.platform, - routingKey: form.config.routingKey, - }; - error = notificationPagerDutyValidation.validate( - { notificationName: form.notificationName, config: form.config }, - { abortEarly: false } - ).error; - } + error = notificationValidation.validate(form, { abortEarly: false }).error; if (error) { const newErrors = {}; error.details.forEach((err) => { newErrors[err.path[0]] = err.message; }); + console.log(JSON.stringify(newErrors)); + console.log(JSON.stringify(form, null, 2)); createToast({ body: "Please check the form for errors." }); setErrors(newErrors); return; @@ -124,63 +96,10 @@ const CreateNotifications = () => { const newNotification = { ...notification, [name]: value }; - // Handle config/platform initialization if type is webhook - - const type = NOTIFICATION_TYPES.find( - (type) => type._id === newNotification.type - ).value; - - if (type === "email") { - newNotification.config = null; - } else if (type === "slack" || type === "webhook" || type === "discord") { - newNotification.address = ""; - newNotification.config = newNotification.config || {}; - if (name === "config") { - newNotification.config = value; - } - if (type === "webhook") { - newNotification.config.platform = "webhook"; - } - if (type === "slack") { - newNotification.config.platform = "slack"; - } - if (type === "discord") { - newNotification.config.platform = "discord"; - } - } else if (type === "pager_duty") { - newNotification.config = newNotification.config || {}; - if (name === "config") { - newNotification.config = value; - } - newNotification.config.platform = "pager_duty"; - } - - // Field-level validation - let fieldError; - - if (name === "notificationName") { - const { error } = notificationEmailValidation.extract(name).validate(value); - fieldError = error?.message; - } - - if (type === "email" && name === "address") { - const { error } = notificationEmailValidation.extract(name).validate(value); - fieldError = error?.message; - } - - if ( - (type === "slack" || type === "webhook" || type === "discord") && - name === "config" - ) { - // Validate only webhookUrl inside config - const { error } = notificationWebhookValidation.extract("config").validate(value); - fieldError = error?.message; - } - - // Set field-level error + const { error } = notificationValidation.extract(name).validate(value); setErrors((prev) => ({ ...prev, - [name]: fieldError, + [name]: error?.message, })); setNotification(newNotification); @@ -192,36 +111,9 @@ const CreateNotifications = () => { type: NOTIFICATION_TYPES.find((type) => type._id === notification.type).value, }; - if (form.type === "slack" || form.type === "discord") { - form.type = "webhook"; - } - let error = null; - if (form.type === "email") { - error = notificationEmailValidation.validate( - { notificationName: form.notificationName, address: form.address }, - { abortEarly: false } - ).error; - } else if (form.type === "webhook") { - form.config = { - platform: form.config.platform, - webhookUrl: form.config.webhookUrl, - }; - error = notificationWebhookValidation.validate( - { notificationName: form.notificationName, config: form.config }, - { abortEarly: false } - ).error; - } else if (form.type === "pager_duty") { - form.config = { - platform: form.config.platform, - routingKey: form.config.routingKey, - }; - error = notificationPagerDutyValidation.validate( - { notificationName: form.notificationName, config: form.config }, - { abortEarly: false } - ).error; - } + error = notificationValidation.validate(form, { abortEarly: false }).error; if (error) { const newErrors = {}; @@ -236,6 +128,7 @@ const CreateNotifications = () => { testNotification(form); }; + const type = NOTIFICATION_TYPES.find((type) => type._id === notification.type).value; return ( @@ -287,164 +180,24 @@ const CreateNotifications = () => { /> - {notification.type === 1 && ( - - - - {t("createNotifications.emailSettings.title")} - - - {t("createNotifications.emailSettings.description")} - - - - - - - )} - {notification.type === 2 && ( - - - - {t("createNotifications.slackSettings.title")} - - - {t("createNotifications.slackSettings.description")} - - - - { - const updatedConfig = { - ...notification.config, - webhookUrl: e.target.value, - }; + + + {t(TITLE_MAP[type])} + {t(DESCRIPTION_MAP[type])} + + + + + - onChange({ - target: { - name: "config", - value: updatedConfig, - }, - }); - }} - /> - - - )} - {notification.type === 3 && ( - - - - {t("createNotifications.pagerdutySettings.title")} - - - {t("createNotifications.pagerdutySettings.description")} - - - - { - const updatedConfig = { - ...notification.config, - routingKey: e.target.value, - }; - - onChange({ - target: { - name: "config", - value: updatedConfig, - }, - }); - }} - /> - - - )} - {notification.type === 4 && ( - - - - {t("createNotifications.genericWebhookSettings.title")} - - - {t("createNotifications.genericWebhookSettings.description")} - - - - { - const updatedConfig = { - ...notification.config, - webhookUrl: e.target.value, - }; - - onChange({ - target: { - name: "config", - value: updatedConfig, - }, - }); - }} - /> - - - )} - {notification.type === 5 && ( - - - - {t("createNotifications.discordSettings.title")} - - - {t("createNotifications.discordSettings.description")} - - - - { - const updatedConfig = { - ...notification.config, - webhookUrl: e.target.value, - }; - - onChange({ - target: { - name: "config", - value: updatedConfig, - }, - }); - }} - /> - - - )} { return row.notificationName; }, }, - { - id: "type", - content: "Type", - render: (row) => { - return row.type; - }, - }, { id: "target", content: "Target", render: (row) => { - const type = row.type; - if (type === "email") { - return row.address; - } - if (type === "webhook") { - return row.config?.webhookUrl; - } - if (type === "pager_duty") { - return row.config?.routingKey; - } + return row.address; }, }, { diff --git a/client/src/Pages/Notifications/utils.js b/client/src/Pages/Notifications/utils.js index 545791246..7ef6e5a60 100644 --- a/client/src/Pages/Notifications/utils.js +++ b/client/src/Pages/Notifications/utils.js @@ -5,3 +5,35 @@ export const NOTIFICATION_TYPES = [ { _id: 4, name: "Webhook", value: "webhook" }, { _id: 5, name: "Discord", value: "discord" }, ]; + +export const TITLE_MAP = { + email: "createNotifications.emailSettings.title", + slack: "createNotifications.slackSettings.title", + pager_duty: "createNotifications.pagerDutySettings.title", + webhook: "createNotifications.webhookSettings.title", + discord: "createNotifications.discordSettings.title", +}; + +export const DESCRIPTION_MAP = { + email: "createNotifications.emailSettings.description", + slack: "createNotifications.slackSettings.description", + pager_duty: "createNotifications.pagerDutySettings.description", + webhook: "createNotifications.webhookSettings.description", + discord: "createNotifications.discordSettings.description", +}; + +export const LABEL_MAP = { + email: "createNotifications.emailSettings.emailLabel", + slack: "createNotifications.slackSettings.webhookLabel", + pager_duty: "createNotifications.pagerDutySettings.integrationKeyLabel", + webhook: "createNotifications.webhookSettings.webhookLabel", + discord: "createNotifications.discordSettings.webhookLabel", +}; + +export const PLACEHOLDER_MAP = { + email: "createNotifications.emailSettings.emailPlaceholder", + slack: "createNotifications.slackSettings.webhookPlaceholder", + pager_duty: "createNotifications.pagerDutySettings.integrationKeyPlaceholder", + webhook: "createNotifications.webhookSettings.webhookPlaceholder", + discord: "createNotifications.discordSettings.webhookPlaceholder", +}; diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 7d2cdbfa7..5649f3de7 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -707,13 +707,13 @@ "webhookLabel": "Slack webhook URL", "webhookPlaceholder": "https://hooks.slack.com/services/..." }, - "pagerdutySettings": { + "pagerDutySettings": { "title": "PagerDuty", "description": "Configure your PagerDuty integration here", "integrationKeyLabel": "Integration key", "integrationKeyPlaceholder": "1234567890" }, - "genericWebhookSettings": { + "webhookSettings": { "title": "Webhook", "description": "Configure your webhook here", "webhookLabel": "Webhook URL",