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

package/src/components/modals/save-form-modal.component.tsx

@@ -1,6 +1,6 @@
-import React, { SyntheticEvent, useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
+import React, { type SyntheticEvent, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import {
   Button,
   ComposedModal,
@@ -15,8 +15,8 @@ import {
   Stack,
   TextArea,
   TextInput,
-} from "@carbon/react";
-import { navigate, showNotification, showToast } from "@openmrs/esm-framework";
+} from '@carbon/react';
+import { navigate, showNotification, showToast } from '@openmrs/esm-framework';
 
 import {
   deleteClobdata,
@@ -25,46 +25,44 @@ import {
   saveNewForm,
   updateForm,
   uploadSchema,
-} from "../../forms.resource";
-import type { EncounterType, Resource, RouteParams, Schema } from "../../types";
-import { useEncounterTypes } from "../../hooks/useEncounterTypes";
-import { useForm } from "../../hooks/useForm";
-import styles from "./save-form-modal.scss";
+} from '../../forms.resource';
+import type { EncounterType } from '../../types';
+import type { Resource, Schema } from '../../types';
+import { useEncounterTypes } from '../../hooks/useEncounterTypes';
+import { useForm } from '../../hooks/useForm';
+import styles from './save-form-modal.scss';
 
-type FormGroupData = {
+interface FormGroupData {
   name: string;
   uuid: string;
   version: string;
   encounterType: EncounterType;
   description: string;
   resources: Array<Resource>;
-};
+}
 
-type SaveFormModalProps = {
+interface SaveFormModalProps {
   form: FormGroupData;
   schema: Schema;
-};
+}
 
 const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
   const { t } = useTranslation();
-  const { formUuid } = useParams<RouteParams>();
+  const { encounterTypes } = useEncounterTypes();
+  const { formUuid } = useParams<{ formUuid: string }>();
   const { mutate } = useForm(formUuid);
   const isSavingNewForm = !formUuid;
-  const { encounterTypes } = useEncounterTypes();
-  const [openSaveFormModal, setOpenSaveFormModal] = useState(false);
-  const [openConfirmSaveModal, setOpenConfirmSaveModal] = useState(false);
-  const [saveState, setSaveState] = useState("");
-  const [isSavingForm, setIsSavingForm] = useState(false);
+  const [description, setDescription] = useState('');
+  const [encounterType, setEncounterType] = useState('');
   const [isInvalidVersion, setIsInvalidVersion] = useState(false);
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [encounterType, setEncounterType] = useState("");
-  const [version, setVersion] = useState("");
+  const [isSavingForm, setIsSavingForm] = useState(false);
+  const [name, setName] = useState('');
+  const [openConfirmSaveModal, setOpenConfirmSaveModal] = useState(false);
+  const [openSaveFormModal, setOpenSaveFormModal] = useState(false);
+  const [saveState, setSaveState] = useState('');
+  const [version, setVersion] = useState('');
 
-  const clearDraftFormSchema = useCallback(
-    () => localStorage.removeItem("formSchema"),
-    []
-  );
+  const clearDraftFormSchema = useCallback(() => localStorage.removeItem('formSchema'), []);
 
   useEffect(() => {
     if (schema) {
@@ -82,23 +80,21 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
   };
 
   const openModal = useCallback((option: string) => {
-    if (option === "newVersion") {
-      setSaveState("newVersion");
+    if (option === 'newVersion') {
+      setSaveState('newVersion');
       setOpenConfirmSaveModal(false);
       setOpenSaveFormModal(true);
-    } else if (option === "new") {
-      setSaveState("newVersion");
+    } else if (option === 'new') {
+      setSaveState('newVersion');
       setOpenSaveFormModal(true);
-    } else if (option === "update") {
-      setSaveState("update");
+    } else if (option === 'update') {
+      setSaveState('update');
       setOpenConfirmSaveModal(false);
       setOpenSaveFormModal(true);
     }
   }, []);
 
-  const handleSubmit = async (
-    event: SyntheticEvent<{ name: { value: string } }>
-  ) => {
+  const handleSubmit = async (event: SyntheticEvent<{ name: { value: string } }>) => {
     event.preventDefault();
     setIsSavingForm(true);
 
@@ -109,20 +105,14 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
       description: { value: string };
     };
 
-    if (saveState === "new" || saveState === "newVersion") {
+    if (saveState === 'new' || saveState === 'newVersion') {
       const name = target.name.value,
         version = target.version.value,
         encounterType = target.encounterType.value,
         description = target.description.value;
 
       try {
-        const newForm = await saveNewForm(
-          name,
-          version,
-          false,
-          description,
-          encounterType
-        );
+        const newForm = await saveNewForm(name, version, false, description, encounterType);
 
         const updatedSchema = {
           ...schema,
@@ -135,32 +125,32 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
 
         const newValueReference = await uploadSchema(updatedSchema);
         await getResourceUuid(newForm.uuid, newValueReference.toString());
+
         showToast({
-          title: t("formCreated", "New form created"),
-          kind: "success",
+          title: t('formCreated', 'New form created'),
+          kind: 'success',
           critical: true,
           description:
-            name +
-            " " +
-            t(
-              "saveSuccessMessage",
-              "was created successfully. It is now visible on the Forms dashboard."
-            ),
+            name + ' ' + t('saveSuccessMessage', 'was created successfully. It is now visible on the Forms dashboard.'),
         });
         clearDraftFormSchema();
         setOpenSaveFormModal(false);
-        mutate();
+        await mutate();
+
         navigate({
           to: `${window.spaBase}/form-builder/edit/${newForm.uuid}`,
         });
+
         setIsSavingForm(false);
       } catch (error) {
-        showNotification({
-          title: t("errorCreatingForm", "Error creating form"),
-          kind: "error",
-          critical: true,
-          description: error?.message,
-        });
+        if (error instanceof Error) {
+          showNotification({
+            title: t('errorCreatingForm', 'Error creating form'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+        }
         setIsSavingForm(false);
       }
     } else {
@@ -176,75 +166,59 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
         await updateForm(form.uuid, name, version, description, encounterType);
 
         if (form?.resources?.length !== 0) {
-          const existingValueReferenceUuid = form?.resources?.find(
-            ({ name }) => name === "JSON schema"
-          )?.valueReference;
+          const existingValueReferenceUuid =
+            form?.resources?.find(({ name }) => name === 'JSON schema')?.valueReference ?? '';
 
           await deleteClobdata(existingValueReferenceUuid)
-            .catch((error) =>
-              console.error("Unable to delete clobdata: ", error)
-            )
+            .catch((error) => console.error('Unable to delete clobdata: ', error))
             .then(() => {
-              const resourceUuidToDelete = form?.resources?.find(
-                ({ name }) => name === "JSON schema"
-              )?.uuid;
+              const resourceUuidToDelete = form?.resources?.find(({ name }) => name === 'JSON schema')?.uuid ?? '';
 
               deleteResource(form?.uuid, resourceUuidToDelete)
                 .then(() => {
                   uploadSchema(updatedSchema)
                     .then((result) => {
                       getResourceUuid(form?.uuid, result.toString())
-                        .then(() => {
+                        .then(async () => {
                           showToast({
-                            title: t("success", "Success!"),
-                            kind: "success",
+                            title: t('success', 'Success!'),
+                            kind: 'success',
                             critical: true,
-                            description:
-                              form?.name +
-                              " " +
-                              t("saveSuccess", "was updated successfully"),
+                            description: form?.name + ' ' + t('saveSuccess', 'was updated successfully'),
                           });
                           setOpenSaveFormModal(false);
-                          mutate();
+                          await mutate();
 
                           setIsSavingForm(false);
                         })
                         .catch((err) => {
-                          console.error(
-                            "Error associating form with new schema: ",
-                            err
-                          );
+                          console.error('Error associating form with new schema: ', err);
 
                           showNotification({
-                            title: t("errorSavingForm", "Unable to save form"),
-                            kind: "error",
+                            title: t('errorSavingForm', 'Unable to save form'),
+                            kind: 'error',
                             critical: true,
                             description: t(
-                              "saveError",
-                              "There was a problem saving your form. Try saving again. To ensure you don’t lose your changes, copy them, reload the page and then paste them back into the editor."
+                              'saveError',
+                              'There was a problem saving your form. Try saving again. To ensure you don’t lose your changes, copy them, reload the page and then paste them back into the editor.',
                             ),
                           });
                         });
                     })
-                    .catch((err) =>
-                      console.error("Error uploading new schema: ", err)
-                    );
+                    .catch((err) => console.error('Error uploading new schema: ', err));
                 })
-                .catch((error) =>
-                  console.error(
-                    "Unable to create new clobdata resource: ",
-                    error
-                  )
-                );
+                .catch((error) => console.error('Unable to create new clobdata resource: ', error));
             });
         }
       } catch (error) {
-        showNotification({
-          title: t("errorUpdatingForm", "Error updating form"),
-          kind: "error",
-          critical: true,
-          description: error?.message,
-        });
+        if (error instanceof Error) {
+          showNotification({
+            title: t('errorUpdatingForm', 'Error updating form'),
+            kind: 'error',
+            critical: true,
+            description: error?.message,
+          });
+        }
 
         setIsSavingForm(false);
       }
@@ -259,74 +233,62 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
           onClose={() => setOpenConfirmSaveModal(false)}
           preventCloseOnClickOutside
         >
-          <ModalHeader title={t("saveConfirmation", "Save or Update form")} />
+          <ModalHeader title={t('saveConfirmation', 'Save or Update form')} />
           <ModalBody>
             <p>
               {t(
-                "saveAsModal",
-                "A version of the form you're working on already exists on the server. Do you want to update the form or to save it as a new version?"
+                'saveAsModal',
+                "A version of the form you're working on already exists on the server. Do you want to update the form or to save it as a new version?",
               )}
             </p>
           </ModalBody>
           <ModalFooter>
-            <Button kind={"tertiary"} onClick={() => openModal("update")}>
-              {t("updateExistingForm", "Update existing version")}
+            <Button kind={'tertiary'} onClick={() => openModal('update')}>
+              {t('updateExistingForm', 'Update existing version')}
             </Button>
-            <Button kind={"primary"} onClick={() => openModal("newVersion")}>
-              {t("saveAsNewForm", "Save as a new")}
+            <Button kind={'primary'} onClick={() => openModal('newVersion')}>
+              {t('saveAsNewForm', 'Save as a new')}
             </Button>
-            <Button
-              kind={"secondary"}
-              onClick={() => setOpenConfirmSaveModal(false)}
-            >
-              {t("close", "Close")}
+            <Button kind={'secondary'} onClick={() => setOpenConfirmSaveModal(false)}>
+              {t('close', 'Close')}
             </Button>
           </ModalFooter>
         </ComposedModal>
       ) : null}
 
-      <ComposedModal
-        open={openSaveFormModal}
-        onClose={() => setOpenSaveFormModal(false)}
-        preventCloseOnClickOutside
-      >
-        <ModalHeader
-          title={t("saveFormToServer", "Save form to server")}
-        ></ModalHeader>
+      <ComposedModal open={openSaveFormModal} onClose={() => setOpenSaveFormModal(false)} preventCloseOnClickOutside>
+        <ModalHeader title={t('saveFormToServer', 'Save form to server')}></ModalHeader>
         <Form onSubmit={handleSubmit} className={styles.saveFormBody}>
           <ModalBody>
             <p>
               {t(
-                "saveExplainerText",
-                "Clicking the Save button saves your form schema to the database. To see your form in your frontend, you first need to publish it. Click the Publish button to publish your form."
+                'saveExplainerText',
+                'Clicking the Save button saves your form schema to the database. To see your form in your frontend, you first need to publish it. Click the Publish button to publish your form.',
               )}
             </p>
-            <FormGroup legendText={""}>
+            <FormGroup legendText={''}>
               <Stack gap={5}>
                 <TextInput
                   id="name"
-                  labelText={t("formName", "Form name")}
-                  onChange={(event) => setName(event.target.value)}
-                  placeholder={t(
-                    "formNamePlaceholder",
-                    "e.g. OHRI Express Care Patient Encounter Form"
-                  )}
+                  labelText={t('formName', 'Form name')}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setName(event.target.value)}
+                  placeholder={t('formNamePlaceholder', 'e.g. OHRI Express Care Patient Encounter Form')}
                   required
                   value={name}
                 />
-                {saveState === "update" ? (
+                {saveState === 'update' ? (
                   <TextInput
                     id="uuid"
-                    labelText={t("autogeneratedUuid", "UUID (auto-generated")}
+                    labelText={t('autogeneratedUuid', 'UUID (auto-generated')}
                     disabled
                     value={form?.uuid}
                   />
                 ) : null}
                 <TextInput
                   id="version"
-                  labelText={t("version", "Version")}
+                  labelText={t('version', 'Version')}
                   placeholder="e.g. 1.0"
-                  onChange={(event) => {
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                     checkVersionValidity(event.target.value);
 
                     if (!isInvalidVersion) {
@@ -334,49 +296,39 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
                     }
                   }}
                   invalid={isInvalidVersion}
-                  invalidText={t(
-                    "invalidVersionWarning",
-                    "Version can only start with with a number"
-                  )}
+                  invalidText={t('invalidVersionWarning', 'Version can only start with with a number')}
                   required
                   value={version}
                 />
                 <Select
                   id="encounterType"
-                  labelText={t("encounterType", "Encounter Type")}
-                  onChange={(event) => setEncounterType(event.target.value)}
+                  labelText={t('encounterType', 'Encounter Type')}
+                  onChange={(event: React.ChangeEvent<HTMLSelectElement>) => setEncounterType(event.target.value)}
                   required
                   value={encounterType}
                 >
                   {!encounterType ? (
                     <SelectItem
-                      text={t(
-                        "chooseEncounterType",
-                        "Choose an encounter type to link your form to"
-                      )}
+                      text={t('chooseEncounterType', 'Choose an encounter type to link your form to')}
                       value=""
                     />
                   ) : null}
                   {encounterTypes?.length > 0 &&
                     encounterTypes.map((encounterType) => (
-                      <SelectItem
-                        key={encounterType.uuid}
-                        value={encounterType.uuid}
-                        text={encounterType.name}
-                      >
+                      <SelectItem key={encounterType.uuid} value={encounterType.uuid} text={encounterType.name}>
                         {encounterType.name}
                       </SelectItem>
                     ))}
                 </Select>
                 <TextArea
-                  labelText={t("description", "Description")}
-                  onChange={(event) => setDescription(event.target.value)}
+                  labelText={t('description', 'Description')}
+                  onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(event.target.value)}
                   cols={6}
                   rows={3}
                   id="description"
                   placeholder={t(
-                    "descriptionPlaceholderText",
-                    "e.g. A form used to collect encounter data for clients in the Express Care program."
+                    'descriptionPlaceholderText',
+                    'e.g. A form used to collect encounter data for clients in the Express Care program.',
                   )}
                   required
                   value={description}
@@ -385,22 +337,19 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
             </FormGroup>
           </ModalBody>
           <ModalFooter>
-            <Button
-              kind={"secondary"}
-              onClick={() => setOpenSaveFormModal(false)}
-            >
-              {t("close", "Close")}
+            <Button kind={'secondary'} onClick={() => setOpenSaveFormModal(false)}>
+              {t('close', 'Close')}
             </Button>
             <Button
               disabled={isSavingForm || isInvalidVersion}
               className={styles.spinner}
-              type={"submit"}
-              kind={"primary"}
+              type={'submit'}
+              kind={'primary'}
             >
               {isSavingForm ? (
-                <InlineLoading description={t("saving", "Saving") + "..."} />
+                <InlineLoading description={t('saving', 'Saving') + '...'} />
               ) : (
-                <span>{t("save", "Save")}</span>
+                <span>{t('save', 'Save')}</span>
               )}
             </Button>
           </ModalFooter>
@@ -410,11 +359,9 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
       <Button
         disabled={!schema}
         kind="primary"
-        onClick={() =>
-          isSavingNewForm ? openModal("new") : setOpenConfirmSaveModal(true)
-        }
+        onClick={() => (isSavingNewForm ? openModal('new') : setOpenConfirmSaveModal(true))}
       >
-        {t("saveForm", "Save form")}
+        {t('saveForm', 'Save form')}
       </Button>
     </>
   );

package/src/components/pagination/index.ts

@@ -1,2 +1,2 @@
-export * from "./pagination.component";
-export * from "./usePaginationInfo";
+export * from './pagination.component';
+export * from './usePaginationInfo';

package/src/components/pagination/pagination.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Pagination } from "@carbon/react";
-import { useLayoutType } from "@openmrs/esm-framework";
-import { usePaginationInfo } from "./usePaginationInfo";
-import styles from "./pagination.scss";
+import React from 'react';
+import { Pagination } from '@carbon/react';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { usePaginationInfo } from './usePaginationInfo';
+import styles from './pagination.scss';
 
 interface FormBuilderPaginationProps {
   currentItems: number;
@@ -19,13 +19,8 @@ export const FormBuilderPagination: React.FC<FormBuilderPaginationProps> = ({
   pageNumber,
   currentItems,
 }) => {
-  const { itemsDisplayed, pageSizes } = usePaginationInfo(
-    pageSize,
-    totalItems,
-    pageNumber,
-    currentItems
-  );
-  const isTablet = useLayoutType() === "tablet";
+  const { itemsDisplayed, pageSizes } = usePaginationInfo(pageSize, totalItems, pageNumber, currentItems);
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <>
@@ -39,7 +34,7 @@ export const FormBuilderPagination: React.FC<FormBuilderPaginationProps> = ({
             pageSizes={pageSizes}
             totalItems={totalItems}
             onChange={onPageNumberChange}
-            size={isTablet ? "lg" : "sm"}
+            size={isTablet ? 'lg' : 'sm'}
           />
         </div>
       )}

package/src/components/pagination/usePaginationInfo.ts

@@ -1,12 +1,7 @@
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
-export function usePaginationInfo(
-  pageSize: number,
-  totalItems: number,
-  pageNumber: number,
-  currentItems: number
-) {
+export function usePaginationInfo(pageSize: number, totalItems: number, pageNumber: number, currentItems: number) {
   const { t } = useTranslation();
 
   const pageSizes = useMemo(() => {
@@ -32,6 +27,6 @@ export function usePaginationInfo(
 
   return {
     pageSizes,
-    itemsDisplayed: `${numberOfItemsDisplayed} ${t("items", " items")}`,
+    itemsDisplayed: `${numberOfItemsDisplayed} ${t('items', ' items')}`,
   };
 }

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

@@ -1,37 +1,31 @@
-import React from "react";
-import AceEditor from "react-ace";
-import "ace-builds/webpack-resolver";
-import "ace-builds/src-noconflict/ext-language_tools";
-import { useTranslation } from "react-i18next";
-import styles from "./schema-editor.scss";
+import React from 'react';
+import AceEditor from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import { useTranslation } from 'react-i18next';
+import styles from './schema-editor.scss';
 
-type SchemaEditorProps = {
+interface SchemaEditorProps {
   isLoading: boolean;
   invalidJsonErrorMessage: string;
   onSchemaChange: (stringifiedSchema: string) => void;
   stringifiedSchema: string;
-};
+}
 
-const SchemaEditor: React.FC<SchemaEditorProps> = ({
-  invalidJsonErrorMessage,
-  onSchemaChange,
-  stringifiedSchema,
-}) => {
+const SchemaEditor: React.FC<SchemaEditorProps> = ({ invalidJsonErrorMessage, onSchemaChange, stringifiedSchema }) => {
   const { t } = useTranslation();
 
   return (
     <>
       {invalidJsonErrorMessage ? (
         <div className={styles.errorContainer}>
-          <p className={styles.heading}>
-            {t("schemaError", "There's an error in your schema.")}
-          </p>
+          <p className={styles.heading}>{t('schemaError', "There's an error in your schema.")}</p>
           <p>{invalidJsonErrorMessage}</p>
         </div>
       ) : null}
 
       <AceEditor
-        style={{ height: "100vh", width: "100%" }}
+        style={{ height: '100vh', width: '100%' }}
         mode="json"
         theme="textmate"
         name="schemaEditor"