diff --git a/cyclops-ui/src/components/errors/FormValidationErrors.tsx b/cyclops-ui/src/components/errors/FormValidationErrors.tsx new file mode 100644 index 00000000..d2ad1887 --- /dev/null +++ b/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 = ({ + errors, +}) => { + let feedbackErrors: React.JSX.Element[] = []; + errors.forEach((err: FeedbackError) => { + let errorsForKey: React.JSX.Element[] = []; + for (let errorForKey of err.errors) { + errorsForKey.push({errorForKey}); + } + + feedbackErrors.push( +
+ + {err.key} + {errorsForKey} +
, + ); + }); + + return
{feedbackErrors}
; +}; diff --git a/cyclops-ui/src/components/pages/EditModule.tsx b/cyclops-ui/src/components/pages/EditModule.tsx index c7874435..32d1b81b 100644 --- a/cyclops-ui/src/components/pages/EditModule.tsx +++ b/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: , + 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} diff --git a/cyclops-ui/src/components/pages/NewModule.tsx b/cyclops-ui/src/components/pages/NewModule.tsx index da510c09..7956eee5 100644 --- a/cyclops-ui/src/components/pages/NewModule.tsx +++ b/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") {