@openmrs/esm-form-builder-app 3.5.2-pre.3735 → 3.5.2-pre.3740

package/src/components/interactive-builder/modals/save-form/save-form.modal.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
 import {
   Button,
-  ComposedModal,
   Form,
   FormGroup,
   InlineLoading,
@@ -43,22 +41,21 @@ interface FormGroupData {
 interface SaveFormModalProps {
   form: FormGroupData;
   schema: Schema;
+  formUuid?: string;
+  closeModal: () => void;
+  onSavingChange?: (isSaving: boolean) => void;
 }
 
-const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
+const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema, formUuid, closeModal, onSavingChange }) => {
   const { t } = useTranslation();
   const { encounterTypes } = useEncounterTypes();
-  const { formUuid } = useParams<{ formUuid: string }>();
   const { mutate } = useForm(formUuid);
-  const isSavingNewForm = !formUuid;
   const [description, setDescription] = useState('');
   const [encounterType, setEncounterType] = useState('');
   const [isInvalidVersion, setIsInvalidVersion] = useState(false);
   const [isSavingForm, setIsSavingForm] = useState(false);
   const [name, setName] = useState('');
-  const [openConfirmSaveModal, setOpenConfirmSaveModal] = useState(false);
-  const [openSaveFormModal, setOpenSaveFormModal] = useState(false);
-  const [saveState, setSaveState] = useState('');
+  const [saveState, setSaveState] = useState<'update' | 'newVersion' | null>(formUuid ? null : 'newVersion');
   const [version, setVersion] = useState('');
 
   const clearDraftFormSchema = useCallback(() => localStorage.removeItem('formJSON'), []);
@@ -78,285 +75,248 @@ const SaveFormModal: React.FC<SaveFormModalProps> = ({ form, schema }) => {
     setIsInvalidVersion(!/^[0-9]/.test(version));
   };
 
-  const openModal = useCallback((option: string) => {
-    if (option === 'newVersion') {
-      setSaveState('newVersion');
-      setOpenConfirmSaveModal(false);
-      setOpenSaveFormModal(true);
-    } else if (option === 'new') {
-      setSaveState('newVersion');
-      setOpenSaveFormModal(true);
-    } else if (option === 'update') {
-      setSaveState('update');
-      setOpenConfirmSaveModal(false);
-      setOpenSaveFormModal(true);
-    }
-  }, []);
-
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsSavingForm(true);
+    onSavingChange?.(true);
+    try {
+      if (saveState === 'newVersion') {
+        try {
+          const newForm = await saveNewForm(name, version, false, description, encounterType);
 
-    const target = event.target as EventTarget & {
-      name: { value: string };
-      version: { value: string };
-      encounterType: { value: string };
-      description: { value: string };
-    };
-
-    if (saveState === 'new' || saveState === 'newVersion') {
-      const name = target.name.value,
-        version = target.version.value,
-        encounterType = target.encounterType.value,
-        description = target.description.value;
+          const updatedSchema = {
+            ...schema,
+            name: name,
+            version: version,
+            description: description,
+            encounterType: encounterType,
+            uuid: newForm.uuid,
+          };
 
-      try {
-        const newForm = await saveNewForm(name, version, false, description, encounterType);
+          let newValueReference: string | undefined;
+          try {
+            newValueReference = (await uploadSchema(updatedSchema)).toString();
+            await getResourceUuid(newForm.uuid, newValueReference);
+          } catch (error) {
+            // Clean up the orphaned clobdata and form since schema upload or linking failed
+            if (newValueReference) {
+              await deleteClobdata(newValueReference).catch(() => {});
+            }
+            await deleteForm(newForm.uuid).catch(() => {});
+            throw error;
+          }
 
-        const updatedSchema = {
-          ...schema,
-          name: name,
-          version: version,
-          description: description,
-          encounterType: encounterType,
-          uuid: newForm.uuid,
-        };
+          showSnackbar({
+            title: t('formCreated', 'New form created'),
+            kind: 'success',
+            isLowContrast: true,
+            subtitle:
+              name +
+              ' ' +
+              t('saveSuccessMessage', 'was created successfully. It is now visible on the Forms dashboard.'),
+          });
+          clearDraftFormSchema();
+          closeModal();
+          await mutate();
 
-        let newValueReference: string | undefined;
-        try {
-          newValueReference = (await uploadSchema(updatedSchema)).toString();
-          await getResourceUuid(newForm.uuid, newValueReference);
+          navigate({
+            to: `${window.spaBase}/form-builder/edit/${newForm.uuid}`,
+          });
         } catch (error) {
-          // Clean up the orphaned clobdata and form since schema upload or linking failed
-          if (newValueReference) {
-            await deleteClobdata(newValueReference).catch(() => {});
+          if (error instanceof Error) {
+            showSnackbar({
+              title: t('errorCreatingForm', 'Error creating form'),
+              kind: 'error',
+              subtitle: error?.message,
+            });
           }
-          await deleteForm(newForm.uuid).catch(() => {});
-          throw error;
         }
+      } else {
+        try {
+          const updatedSchema = {
+            ...schema,
+            name: name,
+            version: version,
+            description: description,
+            encounterType: encounterType,
+          };
 
-        showSnackbar({
-          title: t('formCreated', 'New form created'),
-          kind: 'success',
-          isLowContrast: true,
-          subtitle:
-            name + ' ' + t('saveSuccessMessage', 'was created successfully. It is now visible on the Forms dashboard.'),
-        });
-        clearDraftFormSchema();
-        setOpenSaveFormModal(false);
-        await mutate();
+          await updateForm(form.uuid, name, version, description, encounterType);
 
-        navigate({
-          to: `${window.spaBase}/form-builder/edit/${newForm.uuid}`,
-        });
+          const oldResource = form?.resources?.length
+            ? form.resources.find(({ name }) => name === 'JSON schema')
+            : undefined;
 
-        setIsSavingForm(false);
-      } catch (error) {
-        if (error instanceof Error) {
-          showSnackbar({
-            title: t('errorCreatingForm', 'Error creating form'),
-            kind: 'error',
-            subtitle: error?.message,
-          });
-        }
-        setIsSavingForm(false);
-      }
-    } else {
-      try {
-        const updatedSchema = {
-          ...schema,
-          name: name,
-          version: version,
-          description: description,
-          encounterType: encounterType,
-        };
+          // Upload the new clobdata first (doesn't affect the live form yet)
+          const newValueReference = (await uploadSchema(updatedSchema)).toString();
 
-        await updateForm(form.uuid, name, version, description, encounterType);
-
-        const oldResource = form?.resources?.length
-          ? form.resources.find(({ name }) => name === 'JSON schema')
-          : undefined;
-
-        // Upload the new clobdata first (doesn't affect the live form yet)
-        const newValueReference = (await uploadSchema(updatedSchema)).toString();
+          // Swap: remove old resource link, then link the new clobdata.
+          // If the swap fails, clean up the newly uploaded clobdata.
+          try {
+            if (oldResource) {
+              await deleteResource(form.uuid, oldResource.uuid);
+            }
+            await getResourceUuid(form.uuid, newValueReference);
+          } catch (error) {
+            await deleteClobdata(newValueReference).catch(() => {});
+            throw error;
+          }
 
-        // Swap: remove old resource link, then link the new clobdata.
-        // If the swap fails, clean up the newly uploaded clobdata.
-        try {
+          // Clean up old clobdata. If this fails, the form still works
+          // (just an orphaned clobdata row in the database).
           if (oldResource) {
-            await deleteResource(form.uuid, oldResource.uuid);
+            await deleteClobdata(oldResource.valueReference).catch(() => {});
           }
-          await getResourceUuid(form.uuid, newValueReference);
-        } catch (error) {
-          await deleteClobdata(newValueReference).catch(() => {});
-          throw error;
-        }
-
-        // Clean up old clobdata. If this fails, the form still works
-        // (just an orphaned clobdata row in the database).
-        if (oldResource) {
-          await deleteClobdata(oldResource.valueReference).catch(() => {});
-        }
 
-        showSnackbar({
-          title: t('success', 'Success!'),
-          kind: 'success',
-          isLowContrast: true,
-          subtitle: form?.name + ' ' + t('saveSuccess', 'was updated successfully'),
-        });
-        setOpenSaveFormModal(false);
-        await mutate();
-        setIsSavingForm(false);
-      } catch (error) {
-        if (error instanceof Error) {
           showSnackbar({
-            title: t('errorUpdatingForm', 'Error updating form'),
-            kind: 'error',
-            subtitle: error?.message,
+            title: t('success', 'Success!'),
+            kind: 'success',
+            isLowContrast: true,
+            subtitle: form?.name + ' ' + t('saveSuccess', 'was updated successfully'),
           });
+          closeModal();
+          await mutate();
+        } catch (error) {
+          if (error instanceof Error) {
+            showSnackbar({
+              title: t('errorUpdatingForm', 'Error updating form'),
+              kind: 'error',
+              subtitle: error?.message,
+            });
+          }
         }
-
-        setIsSavingForm(false);
       }
+    } finally {
+      setIsSavingForm(false);
+      onSavingChange?.(false);
     }
   };
 
+  if (saveState === null) {
+    return (
+      <>
+        <ModalHeader closeModal={closeModal} 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?",
+            )}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button kind={'tertiary'} onClick={() => setSaveState('update')}>
+            {t('updateExistingForm', 'Update existing version')}
+          </Button>
+          <Button kind={'primary'} onClick={() => setSaveState('newVersion')}>
+            {t('saveAsNewForm', 'Save as a new form')}
+          </Button>
+          <Button kind={'secondary'} onClick={closeModal}>
+            {t('close', 'Close')}
+          </Button>
+        </ModalFooter>
+      </>
+    );
+  }
+
   return (
     <>
-      {!isSavingNewForm ? (
-        <ComposedModal
-          open={openConfirmSaveModal}
-          onClose={() => setOpenConfirmSaveModal(false)}
-          preventCloseOnClickOutside
-        >
-          <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?",
-              )}
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button kind={'tertiary'} onClick={() => openModal('update')}>
-              {t('updateExistingForm', 'Update existing version')}
-            </Button>
-            <Button kind={'primary'} onClick={() => openModal('newVersion')}>
-              {t('saveAsNewForm', 'Save as a new form')}
-            </Button>
-            <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')} />
-        <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.',
-              )}
-            </p>
-            <FormGroup legendText={''}>
-              <Stack gap={5}>
+      <ModalHeader closeModal={closeModal} title={t('saveFormToServer', 'Save form to server')} />
+      <ModalBody>
+        <Form id="save-form" onSubmit={handleSubmit}>
+          <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.',
+            )}
+          </p>
+          <FormGroup legendText={''}>
+            <Stack gap={5}>
+              <TextInput
+                id="name"
+                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' ? (
                 <TextInput
-                  id="name"
-                  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}
+                  id="uuid"
+                  labelText={t('autogeneratedUuid', 'UUID (auto-generated)')}
+                  disabled
+                  value={form?.uuid}
                 />
-                {saveState === 'update' ? (
-                  <TextInput
-                    id="uuid"
-                    labelText={t('autogeneratedUuid', 'UUID (auto-generated)')}
-                    disabled
-                    value={form?.uuid}
+              ) : null}
+              <TextInput
+                id="version"
+                labelText={t('version', 'Version')}
+                placeholder={t('versionPlaceholder', 'e.g. 1.0')}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  checkVersionValidity(event.target.value);
+
+                  if (!isInvalidVersion) {
+                    setVersion(event.target.value);
+                  }
+                }}
+                invalid={isInvalidVersion}
+                invalidText={t('invalidVersionWarning', 'Version can only start with with a number')}
+                required
+                value={version}
+              />
+              <Select
+                id="encounterType"
+                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')}
+                    value=""
                   />
                 ) : null}
-                <TextInput
-                  id="version"
-                  labelText={t('version', 'Version')}
-                  placeholder={t('versionPlaceholder', 'e.g. 1.0')}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    checkVersionValidity(event.target.value);
-
-                    if (!isInvalidVersion) {
-                      setVersion(event.target.value);
-                    }
-                  }}
-                  invalid={isInvalidVersion}
-                  invalidText={t('invalidVersionWarning', 'Version can only start with with a number')}
-                  required
-                  value={version}
-                />
-                <Select
-                  id="encounterType"
-                  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')}
-                      value=""
-                    />
-                  ) : null}
-                  {encounterTypes?.length > 0 &&
-                    encounterTypes.map((encounterType) => (
-                      <SelectItem key={encounterType.uuid} value={encounterType.uuid} text={encounterType.name}>
-                        {encounterType.name}
-                      </SelectItem>
-                    ))}
-                </Select>
-                <TextArea
-                  labelText={t('description', 'Description')}
-                  onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(event.target.value)}
-                  id="description"
-                  placeholder={t(
-                    'descriptionPlaceholderText',
-                    'e.g. A form used to collect encounter data for clients in the Express Care program.',
-                  )}
-                  required
-                  value={description}
-                />
-              </Stack>
-            </FormGroup>
-          </ModalBody>
-          <ModalFooter>
-            <Button kind={'secondary'} onClick={() => setOpenSaveFormModal(false)}>
-              {t('close', 'Close')}
-            </Button>
-            <Button
-              disabled={isSavingForm || isInvalidVersion}
-              className={styles.spinner}
-              type={'submit'}
-              kind={'primary'}
-            >
-              {isSavingForm ? (
-                <InlineLoading description={t('saving', 'Saving') + '...'} />
-              ) : (
-                <span>{t('save', 'Save')}</span>
-              )}
-            </Button>
-          </ModalFooter>
+                {encounterTypes?.length > 0 &&
+                  encounterTypes.map((encounterType) => (
+                    <SelectItem key={encounterType.uuid} value={encounterType.uuid} text={encounterType.name}>
+                      {encounterType.name}
+                    </SelectItem>
+                  ))}
+              </Select>
+              <TextArea
+                labelText={t('description', 'Description')}
+                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(event.target.value)}
+                id="description"
+                placeholder={t(
+                  'descriptionPlaceholderText',
+                  'e.g. A form used to collect encounter data for clients in the Express Care program.',
+                )}
+                required
+                value={description}
+              />
+            </Stack>
+          </FormGroup>
         </Form>
-      </ComposedModal>
-
-      <Button
-        disabled={!schema}
-        kind="primary"
-        onClick={() => (isSavingNewForm ? openModal('new') : setOpenConfirmSaveModal(true))}
-      >
-        {t('saveForm', 'Save form')}
-      </Button>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind={'secondary'} onClick={closeModal}>
+          {t('close', 'Close')}
+        </Button>
+        <Button
+          disabled={isSavingForm || isInvalidVersion}
+          className={styles.spinner}
+          type={'submit'}
+          form="save-form"
+          kind={'primary'}
+        >
+          {isSavingForm ? (
+            <InlineLoading description={t('saving', 'Saving') + '...'} />
+          ) : (
+            <span>{t('save', 'Save')}</span>
+          )}
+        </Button>
+      </ModalFooter>
     </>
   );
 };

package/src/components/interactive-builder/modals/save-form/save-form.scss

@@ -9,8 +9,3 @@
     font-size: unset;
   }
 }
-
-.saveFormBody {
-  max-height: 75vh;
-  overflow-y: auto;
-}