@openmrs/esm-form-builder-app 2.0.2-pre.574 → 2.0.2-pre.586

package/src/components/form-editor/form-editor.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   Column,
@@ -16,33 +16,33 @@ import {
   TabList,
   TabPanels,
   TabPanel,
-} from "@carbon/react";
-import { Download } from "@carbon/react/icons";
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { ExtensionSlot } from "@openmrs/esm-framework";
-import type { OHRIFormSchema } from "@openmrs/openmrs-form-engine-lib";
-import type { Schema, RouteParams } from "../../types";
-import { useClobdata } from "../../hooks/useClobdata";
-import { useForm } from "../../hooks/useForm";
-import ActionButtons from "../action-buttons/action-buttons.component";
-import FormRenderer from "../form-renderer/form-renderer.component";
-import InteractiveBuilder from "../interactive-builder/interactive-builder.component";
-import SchemaEditor from "../schema-editor/schema-editor.component";
-import styles from "./form-editor.scss";
+} from '@carbon/react';
+import { Download } from '@carbon/react/icons';
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import type { OHRIFormSchema } from '@openmrs/openmrs-form-engine-lib';
+import type { Schema } from '../../types';
+import { useClobdata } from '../../hooks/useClobdata';
+import { useForm } from '../../hooks/useForm';
+import ActionButtons from '../action-buttons/action-buttons.component';
+import FormRenderer from '../form-renderer/form-renderer.component';
+import InteractiveBuilder from '../interactive-builder/interactive-builder.component';
+import SchemaEditor from '../schema-editor/schema-editor.component';
+import styles from './form-editor.scss';
 
-type ErrorProps = {
+interface ErrorProps {
   error: Error;
   title: string;
-};
+}
 
-type Status = "idle" | "formLoaded" | "schemaLoaded";
+type Status = 'idle' | 'formLoaded' | 'schemaLoaded';
 
-const Error = ({ error, title }: ErrorProps) => {
+const ErrorNotification = ({ error, title }: ErrorProps) => {
   return (
     <InlineNotification
       className={styles.errorNotification}
-      kind={"error"}
+      kind={'error'}
       lowContrast
       subtitle={error?.message}
       title={title}
@@ -52,49 +52,34 @@ const Error = ({ error, title }: ErrorProps) => {
 
 const FormEditor: React.FC = () => {
   const { t } = useTranslation();
-  const { formUuid } = useParams<RouteParams>();
+  const { formUuid } = useParams<{ formUuid: string }>();
   const isNewSchema = !formUuid;
   const [schema, setSchema] = useState<Schema>();
   const [showDraftSchemaModal, setShowDraftSchemaModal] = useState(false);
   const { form, formError, isLoadingForm } = useForm(formUuid);
   const { clobdata, clobdataError, isLoadingClobdata } = useClobdata(form);
-  const [status, setStatus] = useState<Status>("idle");
-  const [stringifiedSchema, setStringifiedSchema] = useState(
-    schema ? JSON.stringify(schema, null, 2) : ""
-  );
-  const [copied, setCopied] = useState(false);
+  const [status, setStatus] = useState<Status>('idle');
+  const [stringifiedSchema, setStringifiedSchema] = useState(schema ? JSON.stringify(schema, null, 2) : '');
 
-  const isLoadingFormOrSchema =
-    formUuid && (isLoadingClobdata || isLoadingForm);
+  const isLoadingFormOrSchema = Boolean(formUuid) && (isLoadingClobdata || isLoadingForm);
 
   useEffect(() => {
     if (formUuid) {
       if (form && Object.keys(form).length > 0) {
-        setStatus("formLoaded");
+        setStatus('formLoaded');
       }
 
-      if (
-        status === "formLoaded" &&
-        !isLoadingClobdata &&
-        clobdata === undefined
-      ) {
+      if (status === 'formLoaded' && !isLoadingClobdata && clobdata === undefined) {
         setShowDraftSchemaModal(true);
       }
 
       if (clobdata && Object.keys(clobdata).length > 0) {
-        setStatus("schemaLoaded");
+        setStatus('schemaLoaded');
         setSchema(clobdata);
-        localStorage.setItem("formJSON", JSON.stringify(clobdata));
+        localStorage.setItem('formJSON', JSON.stringify(clobdata));
       }
     }
-  }, [
-    clobdata,
-    form,
-    formUuid,
-    isLoadingClobdata,
-    isLoadingFormOrSchema,
-    status,
-  ]);
+  }, [clobdata, form, formUuid, isLoadingClobdata, isLoadingFormOrSchema, status]);
 
   useEffect(() => {
     setStringifiedSchema(JSON.stringify(schema, null, 2));
@@ -102,76 +87,82 @@ const FormEditor: React.FC = () => {
 
   const handleLoadDraftSchema = useCallback(() => {
     setShowDraftSchemaModal(false);
-    const draftSchema = localStorage.getItem("formJSON");
-    setSchema(JSON.parse(draftSchema));
+
+    try {
+      const draftSchema = localStorage.getItem('formJSON');
+      if (draftSchema) {
+        setSchema(JSON.parse(draftSchema) as Schema);
+      }
+    } catch (e) {
+      console.error('Error fetching draft schema from localStorage: ', e?.message);
+    }
   }, []);
 
   const handleSchemaChange = useCallback((updatedSchema: string) => {
     setStringifiedSchema(updatedSchema);
   }, []);
 
-  const updateSchema = useCallback((updatedSchema) => {
+  const updateSchema = useCallback((updatedSchema: Schema) => {
     setSchema(updatedSchema);
-    localStorage.setItem("formJSON", JSON.stringify(updatedSchema));
+    localStorage.setItem('formJSON', JSON.stringify(updatedSchema));
   }, []);
 
   const inputDummySchema = useCallback(() => {
     const dummySchema: OHRIFormSchema = {
-      encounterType: "",
-      name: "Sample Form",
-      processor: "EncounterFormProcessor",
+      encounterType: '',
+      name: 'Sample Form',
+      processor: 'EncounterFormProcessor',
       referencedForms: [],
-      uuid: "",
-      version: "1.0",
+      uuid: '',
+      version: '1.0',
       pages: [
         {
-          label: "First Page",
+          label: 'First Page',
           sections: [
             {
-              label: "A Section",
-              isExpanded: "true",
+              label: 'A Section',
+              isExpanded: 'true',
               questions: [
                 {
-                  label: "A Question of type obs that renders a text input",
-                  type: "obs",
+                  id: 'sampleQuestion',
+                  label: 'A Question of type obs that renders a text input',
+                  type: 'obs',
                   questionOptions: {
-                    rendering: "text",
-                    concept: "a-system-defined-concept-uuid",
+                    rendering: 'text',
+                    concept: 'a-system-defined-concept-uuid',
                   },
-                  id: "sampleQuestion",
                 },
               ],
             },
             {
-              label: "Another Section",
-              isExpanded: "true",
+              label: 'Another Section',
+              isExpanded: 'true',
               questions: [
                 {
-                  label:
-                    "Another Question of type obs whose answers get rendered as radio inputs",
-                  type: "obs",
+                  id: 'anotherSampleQuestion',
+                  label: 'Another Question of type obs whose answers get rendered as radio inputs',
+                  type: 'obs',
                   questionOptions: {
-                    rendering: "radio",
-                    concept: "system-defined-concept-uuid",
+                    rendering: 'radio',
+                    concept: 'system-defined-concept-uuid',
                     answers: [
                       {
-                        concept: "another-system-defined-concept-uuid",
-                        label: "Choice 1",
+                        concept: 'another-system-defined-concept-uuid',
+                        label: 'Choice 1',
                         conceptMappings: [],
                       },
                       {
-                        concept: "yet-another-system-defined-concept-uuid",
-                        label: "Choice 2",
+                        concept: 'yet-another-system-defined-concept-uuid',
+                        label: 'Choice 2',
                         conceptMappings: [],
                       },
                       {
-                        concept: "yet-one-more-system-defined-concept-uuid",
-                        label: "Choice 3",
+                        concept: 'yet-one-more-system-defined-concept-uuid',
+                        label: 'Choice 3',
                         conceptMappings: [],
                       },
                     ],
                   },
-                  id: "anotherSampleQuestion",
                 },
               ],
             },
@@ -184,10 +175,10 @@ const FormEditor: React.FC = () => {
     updateSchema({ ...dummySchema });
   }, [updateSchema]);
 
-  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState("");
+  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState('');
 
   const resetErrorMessage = useCallback(() => {
-    setInvalidJsonErrorMessage("");
+    setInvalidJsonErrorMessage('');
   }, []);
 
   const renderSchemaChanges = useCallback(() => {
@@ -197,8 +188,10 @@ const FormEditor: React.FC = () => {
       const parsedJson: Schema = JSON.parse(stringifiedSchema);
       updateSchema(parsedJson);
       setStringifiedSchema(JSON.stringify(parsedJson, null, 2));
-    } catch (error) {
-      setInvalidJsonErrorMessage(error.message);
+    } catch (e) {
+      if (e instanceof Error) {
+        setInvalidJsonErrorMessage(e.message);
+      }
     }
   }, [stringifiedSchema, updateSchema, resetErrorMessage]);
 
@@ -209,26 +202,23 @@ const FormEditor: React.FC = () => {
         onClose={() => setShowDraftSchemaModal(false)}
         preventCloseOnClickOutside
       >
-        <ModalHeader title={t("schemaNotFound", "Schema not found")} />
-        <Form onSubmit={(event) => event.preventDefault()}>
+        <ModalHeader title={t('schemaNotFound', 'Schema not found')} />
+        <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
           <ModalBody>
             <p>
               {t(
-                "schemaNotFoundText",
-                "The schema originally associated with this form could not be found. A draft schema was found saved in your browser's local storage. Would you like to load it instead?"
+                'schemaNotFoundText',
+                "The schema originally associated with this form could not be found. A draft schema was found saved in your browser's local storage. Would you like to load it instead?",
               )}
             </p>
           </ModalBody>
         </Form>
         <ModalFooter>
-          <Button
-            onClick={() => setShowDraftSchemaModal(false)}
-            kind="secondary"
-          >
-            {t("cancel", "Cancel")}
+          <Button onClick={() => setShowDraftSchemaModal(false)} kind="secondary">
+            {t('cancel', 'Cancel')}
           </Button>
           <Button onClick={handleLoadDraftSchema}>
-            <span>{t("loadDraft", "Load draft")}</span>
+            <span>{t('loadDraft', 'Load draft')}</span>
           </Button>
         </ModalFooter>
       </ComposedModal>
@@ -238,14 +228,13 @@ const FormEditor: React.FC = () => {
   const downloadableSchema = useMemo(
     () =>
       new Blob([JSON.stringify(schema, null, 2)], {
-        type: "application/json",
+        type: 'application/json',
       }),
-    [schema]
+    [schema],
   );
 
-  const handleCopySchema = useCallback(() => {
-    navigator.clipboard.writeText(stringifiedSchema);
-    setCopied(true);
+  const handleCopySchema = useCallback(async () => {
+    await navigator.clipboard.writeText(stringifiedSchema);
   }, [stringifiedSchema]);
 
   return (
@@ -259,45 +248,38 @@ const FormEditor: React.FC = () => {
           <Column lg={8} md={8} className={styles.column}>
             <div className={styles.actionButtons}>
               {isLoadingFormOrSchema ? (
-                <InlineLoading
-                  description={t("loadingSchema", "Loading schema") + "..."}
-                />
+                <InlineLoading description={t('loadingSchema', 'Loading schema') + '...'} />
               ) : null}
 
               {isNewSchema && !schema ? (
                 <Button kind="ghost" onClick={inputDummySchema}>
-                  {t("inputDummySchema", "Input dummy schema")}
+                  {t('inputDummySchema', 'Input dummy schema')}
                 </Button>
               ) : null}
 
               <Button kind="ghost" onClick={renderSchemaChanges}>
-                <span>{t("renderChanges", "Render changes")}</span>
+                <span>{t('renderChanges', 'Render changes')}</span>
               </Button>
             </div>
             <div>
               <div className={styles.heading}>
-                <span className={styles.tabHeading}>
-                  {t("schemaEditor", "Schema editor")}
-                </span>
+                <span className={styles.tabHeading}>{t('schemaEditor', 'Schema editor')}</span>
                 {schema ? (
                   <>
                     <CopyButton
                       align="top"
                       className="cds--btn--md"
                       enterDelayMs={300}
-                      iconDescription={t("copySchema", "Copy schema")}
+                      iconDescription={t('copySchema', 'Copy schema')}
                       kind="ghost"
                       onClick={handleCopySchema}
                     />
-                    <a
-                      download={`${form?.name}.json`}
-                      href={window.URL.createObjectURL(downloadableSchema)}
-                    >
+                    <a download={`${form?.name}.json`} href={window.URL.createObjectURL(downloadableSchema)}>
                       <Button
                         enterDelayMs={300}
                         renderIcon={Download}
-                        kind={"ghost"}
-                        iconDescription={t("downloadSchema", "Download schema")}
+                        kind={'ghost'}
+                        iconDescription={t('downloadSchema', 'Download schema')}
                         hasIconOnly
                         size="md"
                         tooltipAlignment="start"
@@ -307,16 +289,10 @@ const FormEditor: React.FC = () => {
                 ) : null}
               </div>
               {formError ? (
-                <Error
-                  error={formError}
-                  title={t("formError", "Error loading form metadata")}
-                />
+                <ErrorNotification error={formError} title={t('formError', 'Error loading form metadata')} />
               ) : null}
               {clobdataError ? (
-                <Error
-                  error={clobdataError}
-                  title={t("schemaLoadError", "Error loading schema")}
-                />
+                <ErrorNotification error={clobdataError} title={t('schemaLoadError', 'Error loading schema')} />
               ) : null}
               <div className={styles.editorContainer}>
                 <SchemaEditor
@@ -332,22 +308,15 @@ const FormEditor: React.FC = () => {
             <ActionButtons schema={schema} t={t} />
             <Tabs>
               <TabList aria-label="Form previews">
-                <Tab>{t("preview", "Preview")}</Tab>
-                <Tab>{t("interactiveBuilder", "Interactive Builder")}</Tab>
+                <Tab>{t('preview', 'Preview')}</Tab>
+                <Tab>{t('interactiveBuilder', 'Interactive Builder')}</Tab>
               </TabList>
               <TabPanels>
                 <TabPanel>
-                  <FormRenderer
-                    schema={schema}
-                    isLoading={isLoadingFormOrSchema}
-                  />
+                  <FormRenderer schema={schema} isLoading={isLoadingFormOrSchema} />
                 </TabPanel>
                 <TabPanel>
-                  <InteractiveBuilder
-                    schema={schema}
-                    onSchemaChange={updateSchema}
-                    isLoading={isLoadingFormOrSchema}
-                  />
+                  <InteractiveBuilder schema={schema} onSchemaChange={updateSchema} isLoading={isLoadingFormOrSchema} />
                 </TabPanel>
               </TabPanels>
             </Tabs>

package/src/components/form-renderer/form-renderer.component.tsx

@@ -1,56 +1,55 @@
-import React, { useEffect, useState } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-import { useTranslation } from "react-i18next";
-import { Button, InlineLoading, Tile } from "@carbon/react";
-import { OHRIFormSchema, OHRIForm } from "@openmrs/openmrs-form-engine-lib";
-import styles from "./form-renderer.scss";
+import React, { useEffect, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading, Tile } from '@carbon/react';
+import { type OHRIFormSchema, OHRIForm } from '@openmrs/openmrs-form-engine-lib';
+import styles from './form-renderer.scss';
 
-type ErrorFallbackProps = {
+interface ErrorFallbackProps {
   error: Error;
   resetErrorBoundary: () => void;
-};
+}
 
-type FormRendererProps = {
+interface FormRendererProps {
   isLoading: boolean;
   onSchemaChange?: (schema: OHRIFormSchema) => void;
   schema: OHRIFormSchema;
-};
+}
 
 const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
   const { t } = useTranslation();
 
   const dummySchema: OHRIFormSchema = {
-    encounterType: "",
-    name: "Test Form",
+    encounterType: '',
+    name: 'Test Form',
     pages: [
       {
-        label: "Test Page",
+        label: 'Test Page',
         sections: [
           {
-            label: "Test Section",
-            isExpanded: "true",
+            label: 'Test Section',
+            isExpanded: 'true',
             questions: [
               {
-                label: "Test Question",
-                type: "obs",
+                label: 'Test Question',
+                type: 'obs',
                 questionOptions: {
-                  rendering: "text",
-                  concept: "xxxx",
+                  rendering: 'text',
+                  concept: 'xxxx',
                 },
-                id: "testQuestion",
+                id: 'testQuestion',
               },
             ],
           },
         ],
       },
     ],
-    processor: "EncounterFormProcessor",
+    processor: 'EncounterFormProcessor',
     referencedForms: [],
-    uuid: "xxx",
+    uuid: 'xxx',
   };
 
-  const [schemaToRender, setSchemaToRender] =
-    useState<OHRIFormSchema>(dummySchema);
+  const [schemaToRender, setSchemaToRender] = useState<OHRIFormSchema>(dummySchema);
 
   useEffect(() => {
     if (schema) {
@@ -61,10 +60,7 @@ const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
   if (isLoading) {
     return (
       <div className={styles.loadingContainer}>
-        <InlineLoading
-          className={styles.loader}
-          description={t("loading", "Loading") + "..."}
-        />
+        <InlineLoading className={styles.loader} description={t('loading', 'Loading') + '...'} />
       </div>
     );
   }
@@ -73,20 +69,18 @@ const FormRenderer: React.FC<FormRendererProps> = ({ isLoading, schema }) => {
     <div className={styles.container}>
       {!schema && (
         <Tile className={styles.emptyStateTile}>
-          <h4 className={styles.heading}>
-            {t("noSchemaLoaded", "No schema loaded")}
-          </h4>
+          <h4 className={styles.heading}>{t('noSchemaLoaded', 'No schema loaded')}</h4>
           <p className={styles.helperText}>
             {t(
-              "formRendererHelperText",
-              "Load a form schema in the Schema Editor to the left to see it rendered here by the Form Engine."
+              'formRendererHelperText',
+              'Load a form schema in the Schema Editor to the left to see it rendered here by the Form Engine.',
             )}
           </p>
         </Tile>
       )}
       {schema === schemaToRender && (
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <OHRIForm formJson={schemaToRender} mode={"enter"} patientUUID={""} />
+          <OHRIForm formJson={schemaToRender} mode={'enter'} patientUUID={''} />
         </ErrorBoundary>
       )}
     </div>
@@ -97,17 +91,12 @@ function ErrorFallback({ error, resetErrorBoundary }: ErrorFallbackProps) {
   const { t } = useTranslation();
   return (
     <Tile className={styles.errorStateTile}>
-      <h4 className={styles.heading}>
-        {t(
-          "problemLoadingPreview",
-          "There was a problem loading the schema preview"
-        )}
-      </h4>
+      <h4 className={styles.heading}>{t('problemLoadingPreview', 'There was a problem loading the form preview')}</h4>
       <p className={styles.helperText}>
         <pre>{error.message}</pre>
       </p>
       <Button kind="primary" onClick={resetErrorBoundary}>
-        {t("tryAgain", "Try again")}
+        {t('tryAgain', 'Try again')}
       </Button>
     </Tile>
   );