extract error notifiction into a component

cyclops-ui/src/components/errors/FormValidationErrors.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Divider, Row } from "antd";
+
+export interface FeedbackError {
+  key: string;
+  errors: string[];
+}
+
+interface FormValidationErrorsProps {
+  errors: FeedbackError[];
+}
+
+export const FormValidationErrors: React.FC<FormValidationErrorsProps> = ({
+  errors,
+}) => {
+  let feedbackErrors: React.JSX.Element[] = [];
+  errors.forEach((err: FeedbackError) => {
+    let errorsForKey: React.JSX.Element[] = [];
+    for (let errorForKey of err.errors) {
+      errorsForKey.push(<Row>{errorForKey}</Row>);
+    }
+
+    feedbackErrors.push(
+      <div>
+        <Divider style={{ margin: "10px 0px" }} />
+        <Row style={{ fontWeight: "bold" }}>{err.key}</Row>
+        <Row>{errorsForKey}</Row>
+      </div>,
+    );
+  });
+
+  return <div>{feedbackErrors}</div>;
+};

cyclops-ui/src/components/pages/EditModule.tsx

@@ -11,6 +11,7 @@ import {
   InputNumber,
   message,
   Modal,
+  notification,
   Row,
   Select,
   Space,
@@ -44,6 +45,10 @@ import { fileExtension, findMaps, flattenObjectKeys } from "../../utils/form";
 import "./custom.css";
 import { numberInputValidators } from "../../utils/validators/number";
 import { stringInputValidators } from "../../utils/validators/string";
+import {
+  FeedbackError,
+  FormValidationErrors,
+} from "../errors/FormValidationErrors";
 
 const { TextArea } = Input;
 
@@ -83,6 +88,16 @@ const EditModule = () => {
     description: "",
   });
 
+  const [notificationApi, contextHolder] = notification.useNotification();
+  const openNotification = (errors: FeedbackError[]) => {
+    notificationApi.error({
+      message: "Submit failed!",
+      description: <FormValidationErrors errors={errors} />,
+      placement: "topRight",
+      duration: 0,
+    });
+  };
+
   const [loadValues, setLoadValues] = useState(false);
   const [loadTemplate, setLoadTemplate] = useState(false);
 
@@ -826,8 +841,16 @@ const EditModule = () => {
     }
   };
 
-  const onFinishFailed = () => {
-    message.error("Submit failed!");
+  const onFinishFailed = (errors: any) => {
+    let errorMessages: FeedbackError[] = [];
+    errors.errorFields.forEach(function (error: any) {
+      errorMessages.push({
+        key: error.name.join("."),
+        errors: error.errors,
+      });
+    });
+
+    openNotification(errorMessages);
   };
 
   return (
@@ -847,6 +870,7 @@ const EditModule = () => {
           style={{ marginBottom: "20px" }}
         />
       )}
+      {contextHolder}
       <Row gutter={[40, 0]}>
         <Col span={23}>
           <Title style={{ textAlign: "center" }} level={2}>

cyclops-ui/src/components/pages/NewModule.tsx

@@ -42,6 +42,10 @@ import "ace-builds/src-noconflict/snippets/yaml";
 import { numberInputValidators } from "../../utils/validators/number";
 import { stringInputValidators } from "../../utils/validators/string";
 import { Option } from "antd/es/mentions";
+import {
+  FeedbackError,
+  FormValidationErrors,
+} from "../errors/FormValidationErrors";
 
 const { Title } = Typography;
 const layout = {
@@ -57,11 +61,6 @@ interface templateStoreOption {
   };
 }
 
-interface feedbackError {
-  key: string;
-  errors: string[];
-}
-
 const NewModule = () => {
   const [loading, setLoading] = useState(false);
   const [config, setConfig] = useState({
@@ -112,26 +111,10 @@ const NewModule = () => {
   const history = useNavigate();
 
   const [notificationApi, contextHolder] = notification.useNotification();
-  const openNotification = (errors: feedbackError[]) => {
-    let feedbackErrors: React.JSX.Element[] = [];
-    errors.forEach((err: feedbackError) => {
-      let errorsForKey: React.JSX.Element[] = [];
-      for (let errorForKey of err.errors) {
-        errorsForKey.push(<Row>{errorForKey}</Row>);
-      }
-
-      feedbackErrors.push(
-        <div>
-          <Row style={{ fontWeight: "bold" }}>{err.key}</Row>
-          <Row>{errorsForKey}</Row>
-          <Divider style={{ margin: "10px 0px" }} />
-        </div>,
-      );
-    });
-
+  const openNotification = (errors: FeedbackError[]) => {
     notificationApi.error({
       message: "Submit failed!",
-      description: <div>{feedbackErrors}</div>,
+      description: <FormValidationErrors errors={errors} />,
       placement: "topRight",
       duration: 0,
     });
@@ -1061,7 +1044,7 @@ const NewModule = () => {
   };
 
   const onFinishFailed = (errors: any) => {
-    let errorMessages: feedbackError[] = [];
+    let errorMessages: FeedbackError[] = [];
     errors.errorFields.forEach(function (error: any) {
       let key = error.name.join(".");
       if (error.name.length === 1 && error.name[0] === "cyclops_module_name") {