Squashed commit of the following:

commit 3315b3a Author: arodidev <[email protected]> Date: Mon Aug 14 13:32:46 2023 +0300 Moved validation state to parent component
openmrs · Aug 14, 2023 · ffb8e1c · ffb8e1c
1 parent fb3a72b
commit ffb8e1c
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 32 deletions.
diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx
@@ -54,6 +54,7 @@ const FormEditor: React.FC = () => {
   const { form, formError, isLoadingForm } = useForm(formUuid);
   const { clobdata, clobdataError, isLoadingClobdata } = useClobdata(form);
   const [status, setStatus] = useState<Status>("idle");
+  const [isValidating, setIsValidating] = useState<boolean>(false)
 
   const isLoadingFormOrSchema =
     formUuid && (isLoadingClobdata || isLoadingForm);
@@ -98,6 +99,10 @@ const FormEditor: React.FC = () => {
     localStorage.setItem("formJSON", JSON.stringify(updatedSchema));
   }, []);
 
+  const validationSetter = ()=>{
+    setIsValidating(prevState => !prevState)
+  }
+
   const DraftSchemaModal = () => {
     return (
       <ComposedModal
@@ -163,6 +168,7 @@ const FormEditor: React.FC = () => {
                       schema={schema}
                       onSchemaChange={updateSchema}
                       isLoading={isLoadingFormOrSchema}
+                      validateStateSetter={validationSetter}
                     />
                   </>
                 </TabPanel>
@@ -187,6 +193,8 @@ const FormEditor: React.FC = () => {
                     schema={schema}
                     onSchemaChange={updateSchema}
                     isLoading={isLoadingFormOrSchema}
+                    isFormValidating={isValidating}
+                    setIsFormValidating={validationSetter}
                   />
                 </TabPanel>
               </TabPanels>

diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -40,12 +40,16 @@ type InteractiveBuilderProps = {
   isLoading: boolean;
   onSchemaChange: (schema: Schema) => void;
   schema: Schema;
+  isFormValidating;
+  setIsFormValidating;
 };
 
 const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
   isLoading,
   onSchemaChange,
   schema,
+  isFormValidating,
+  setIsFormValidating
 }) => {
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
@@ -74,24 +78,26 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
   const [responses, setResponses] = useState([]);
 
   const validateForm = () => {
-    handleFormValidation(schema, dataTypeToRenderingMap).then((response) => {
-      const [errorsArray] = response;
-      setResponses(errorsArray);
-      errorsArray.length
-        ? showToast({
-            title: "Validation completed",
-            kind: "error",
-            critical: true,
-            description: "Errors found during validation",
-          })
-        : showToast({
-            title: "Validation completed",
-            kind: "success",
-            critical: true,
-            description: "No errors found during form validation",
-          });
-    });
-  };
+    handleFormValidation(schema, dataTypeToRenderingMap).then(response => {
+      const [errorsArray] = response
+      setResponses(errorsArray)
+      errorsArray.length 
+      ? showToast({
+          title: "Validation completed",
+          kind: "error",
+          critical: true,
+          description: "Errors found during validation",
+        }) 
+      : showToast({
+          title: "Validation completed",
+          kind: "success",
+          critical: true,
+          description: "No errors found during form validation",
+        });
+    }).then(
+      setIsFormValidating()
+    )
+  }
 
   const initializeSchema = useCallback(() => {
     const dummySchema: OHRIFormSchema = {
@@ -322,6 +328,9 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
       allQuestions={section.questions}
     />
   );
+
+  isFormValidating && validateForm()
+
   return (
     <div className={styles.container}>
       {isLoading ? (
@@ -331,13 +340,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
       ) : null}
       <div className={styles.validator}>
         <ActionButtons schema={schema} t={t} />
-        <Button
-          className = {styles.validateButton}
-          onClick={validateForm}
-          disabled={schema? false : true}
-          >
-            Validate Form
-        </Button>
+
       </div>
 
       {showNewFormModal ? (

diff --git a/src/components/interactive-builder/interactive-builder.scss b/src/components/interactive-builder/interactive-builder.scss
@@ -115,8 +115,3 @@
   font-size: 13px !important;
   margin-left: 20px !important;
 }
-
-.validateButton{
-  position: absolute;
-  top: 202px;
-}
diff --git a/src/components/schema-editor/schema-editor.component.tsx b/src/components/schema-editor/schema-editor.component.tsx
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import AceEditor from "react-ace";
 import "ace-builds/webpack-resolver";
 import "ace-builds/src-noconflict/ext-language_tools";
-import { Button, InlineLoading } from "@carbon/react";
+import { Button, InlineLoading, ButtonSet } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import { OHRIFormSchema } from "@openmrs/openmrs-form-engine-lib";
 
@@ -14,12 +14,14 @@ type SchemaEditorProps = {
   isLoading: boolean;
   onSchemaChange: (schema: Schema) => void;
   schema: Schema;
+  validateStateSetter;
 };
 
 const SchemaEditor: React.FC<SchemaEditorProps> = ({
   isLoading,
   onSchemaChange,
   schema,
+  validateStateSetter
 }) => {
   const { t } = useTranslation();
   const { formUuid } = useParams<RouteParams>();
@@ -142,7 +144,14 @@ const SchemaEditor: React.FC<SchemaEditorProps> = ({
         ) : null}
 
         {schema ? (
-          <Button
+          <ButtonSet>
+              <Button
+              onClick={()=> validateStateSetter()}
+              disabled={schema? false : true}
+              >
+                Validate Form
+            </Button>
+             <Button
             disabled={isRendering}
             kind="primary"
             onClick={renderSchemaChanges}
@@ -156,6 +165,8 @@ const SchemaEditor: React.FC<SchemaEditorProps> = ({
               <span>{t("renderChanges", "Render changes")}</span>
             )}
           </Button>
+          </ButtonSet>
+
         ) : null}
       </div>
 

diff --git a/src/components/schema-editor/schema-editor.scss b/src/components/schema-editor/schema-editor.scss
@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: flex-end;
   margin: 1rem 0;
+  margin-right: 2.9rem;
 
   button {
     margin-left: 1rem