spark editor validation

www/src/components/Table/TableHeader/Sparks/SparkModal.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 import _isEqual from "lodash/isEqual";
+import useStateRef from "react-usestateref";
 import { ISpark, triggerTypes } from "./utils";
 import Modal from "components/Modal";
 import CodeEditorHelper from "components/CodeEditorHelper";
+import { useConfirmation } from "components/ConfirmationDialog";
 import CodeEditor from "../../editors/CodeEditor";
 import { useFiretableContext } from "contexts/FiretableContext";
 import BackIcon from "@material-ui/icons/ArrowBack";
@@ -134,8 +136,23 @@ export default function SparkModal({
   mode,
   sparkObject: initialObject,
 }: ISparkModalProps) {
+  const { requestConfirmation } = useConfirmation();
   const [sparkObject, setSparkObject] = useState<ISpark>(initialObject);
   const [tabIndex, setTabIndex] = useState(0);
+  const [validation, setValidation, validationRef] = useStateRef({
+    condition: true,
+    sparkBody: true,
+  });
+  const [
+    conditionEditorActive,
+    setConditionEditorActive,
+    conditionEditorActiveRef,
+  ] = useStateRef(false);
+  const [
+    bodyEditorActive,
+    setBodyEditorActive,
+    bodyEditorActiveRef,
+  ] = useStateRef(false);
   const classes = useStyles();
   const { tableState } = useFiretableContext();
   const columns = Object.keys(tableState?.columns ?? {});
@@ -145,6 +162,17 @@ export default function SparkModal({
     setTabIndex(newValue);
   };
 
+  const handleAddOrUpdate = () => {
+    switch (mode) {
+      case "add":
+        handleAdd(sparkObject);
+        return;
+      case "update":
+        handleUpdate(sparkObject);
+        return;
+    }
+  };
+
   return (
     <Modal
       onClose={handleClose}
@@ -401,13 +429,26 @@ export default function SparkModal({
                     });
                   }}
                   onValideStatusUpdate={({ isValid }) => {
-                    // setIsSparksValid(isValid);
+                    if (!conditionEditorActiveRef.current) {
+                      return;
+                    }
+                    setValidation({
+                      ...validationRef.current,
+                      condition: isValid,
+                    });
+                    console.log(validationRef.current);
                   }}
                   diagnosticsOptions={{
                     noSemanticValidation: false,
                     noSyntaxValidation: false,
                     noSuggestionDiagnostics: true,
                   }}
+                  onMount={() => {
+                    setConditionEditorActive(true);
+                  }}
+                  onUnmount={() => {
+                    setConditionEditorActive(false);
+                  }}
                 />
               </Box>
               <CodeEditorHelper
@@ -430,13 +471,26 @@ export default function SparkModal({
                     });
                   }}
                   onValideStatusUpdate={({ isValid }) => {
-                    // setIsSparksValid(isValid);
+                    if (!bodyEditorActiveRef.current) {
+                      return;
+                    }
+                    setValidation({
+                      ...validationRef.current,
+                      sparkBody: isValid,
+                    });
+                    console.log(validationRef.current);
                   }}
                   diagnosticsOptions={{
                     noSemanticValidation: false,
                     noSyntaxValidation: false,
                     noSuggestionDiagnostics: true,
                   }}
+                  onMount={() => {
+                    setBodyEditorActive(true);
+                  }}
+                  onUnmount={() => {
+                    setBodyEditorActive(false);
+                  }}
                 />
               </Box>
               <CodeEditorHelper
@@ -452,13 +506,25 @@ export default function SparkModal({
           children: mode === "add" ? "Add" : "Update",
           disabled: !edited || !sparkObject.name.length,
           onClick: () => {
-            switch (mode) {
-              case "add":
-                handleAdd(sparkObject);
-                return;
-              case "update":
-                handleUpdate(sparkObject);
-                return;
+            let warningMessage;
+            if (!validation.condition && !validation.sparkBody) {
+              warningMessage = "Condition and spark body are not valid";
+            } else if (!validation.condition) {
+              warningMessage = "Condition is not valid";
+            } else if (!validation.sparkBody) {
+              warningMessage = "Spark body is not valid";
+            }
+
+            if (warningMessage) {
+              requestConfirmation({
+                title: "Validation failed",
+                body: `${warningMessage}, do you want to continue?`,
+                confirm: "Yes, I know what I am doing",
+                cancel: "No, I'll fix the errors",
+                handleConfirm: handleAddOrUpdate,
+              });
+            } else {
+              handleAddOrUpdate();
             }
           },
         },

www/src/components/Table/editors/CodeEditor.tsx

@@ -3,6 +3,7 @@ import { useTheme, createStyles, makeStyles } from "@material-ui/core/styles";
 import Editor, { useMonaco } from "@monaco-editor/react";
 import { useFiretableContext } from "contexts/FiretableContext";
 import { FieldType } from "constants/fields";
+import { useEffect } from "react";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -33,6 +34,8 @@ export default function CodeEditor(props: any) {
     script,
     onValideStatusUpdate,
     diagnosticsOptions,
+    onUnmount,
+    onMount,
   } = props;
   const theme = useTheme();
   const monacoInstance = useMonaco();
@@ -43,8 +46,15 @@ export default function CodeEditor(props: any) {
 
   const editorRef = useRef<any>();
 
+  useEffect(() => {
+    return () => {
+      onUnmount?.();
+    };
+  }, []);
+
   function handleEditorDidMount(_, editor) {
     editorRef.current = editor;
+    onMount?.();
   }
 
   const themeTransformer = (theme: string) => {