@openmrs/esm-form-builder-app 2.5.0 → 2.5.1-pre.1001

package/src/components/dashboard/dashboard.component.tsx

@@ -1,18 +1,12 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import type { TFunction } from 'i18next';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, type TFunction } from 'react-i18next';
 import {
   Button,
-  ComposedModal,
   DataTable,
   DataTableSkeleton,
   Dropdown,
-  Form,
   InlineLoading,
   InlineNotification,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
   Table,
   TableBody,
   TableCell,
@@ -28,18 +22,19 @@ import {
 } from '@carbon/react';
 import { Add, DocumentImport, Download, Edit, TrashCan } from '@carbon/react/icons';
 import {
-  type FetchResponse,
   ConfigurableLink,
   navigate,
+  openmrsFetch,
+  restBaseUrl,
+  showModal,
   showSnackbar,
   useConfig,
   useLayoutType,
   usePagination,
-  openmrsFetch,
-  restBaseUrl,
+  type FetchResponse,
 } from '@openmrs/esm-framework';
 import { type KeyedMutator, preload } from 'swr';
-
+import type { ConfigObject } from '../../config-schema';
 import type { Form as TypedForm } from '../../types';
 import { deleteForm } from '../../forms.resource';
 import { FormBuilderPagination } from '../pagination';
@@ -91,8 +86,7 @@ function CustomTag({ condition }: { condition?: boolean }) {
 function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps) {
   const { clobdata } = useClobdata(form);
   const formResources = form?.resources;
-  const [showDeleteFormModal, setShowDeleteFormModal] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDeletingForm, setIsDeletingForm] = useState(false);
 
   const downloadableSchema = useMemo(
     () =>
@@ -115,7 +109,6 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
             });
 
             await mutate();
-            setShowDeleteFormModal(false);
           }
         })
         .catch((e: Error) =>
@@ -125,11 +118,19 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
             subtitle: e?.message,
           }),
         )
-        .finally(() => setIsDeleting(false));
+        .finally(() => setIsDeletingForm(false));
     },
     [form.name, mutate, t],
   );
 
+  const launchDeleteFormModal = useCallback(() => {
+    const dispose = showModal('delete-form-modal', {
+      closeModal: () => dispose(),
+      isDeletingForm,
+      onDeleteForm: () => handleDeleteForm(form.uuid),
+    });
+  }, [form.uuid, handleDeleteForm, isDeletingForm]);
+
   const ImportButton = () => {
     return (
       <Button
@@ -157,7 +158,7 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
         iconDescription={t('editSchema', 'Edit schema')}
         hasIconOnly
         size={responsiveSize}
-        tooltipAlignment="start"
+        tooltipAlignment="center"
       />
     );
   };
@@ -172,7 +173,7 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
           iconDescription={t('downloadSchema', 'Download schema')}
           hasIconOnly
           size={responsiveSize}
-          tooltipAlignment="start"
+          tooltipAlignment="center"
         />
       </a>
     );
@@ -183,53 +184,16 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
       <Button
         enterDelayMs={300}
         renderIcon={TrashCan}
-        onClick={() => setShowDeleteFormModal(true)}
+        onClick={launchDeleteFormModal}
         kind={'ghost'}
         iconDescription={t('deleteSchema', 'Delete schema')}
         hasIconOnly
         size={responsiveSize}
-        tooltipAlignment="start"
+        tooltipAlignment="center"
       />
     );
   };
 
-  const DeleteFormModal = () => {
-    return (
-      <ComposedModal
-        danger
-        open={showDeleteFormModal}
-        onClose={() => setShowDeleteFormModal(false)}
-        preventCloseOnClickOutside
-      >
-        <ModalHeader title={t('deleteForm', 'Delete form')} />
-        <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
-          <ModalBody>
-            <p>{t('deleteFormConfirmation', 'Are you sure you want to delete this form?')}</p>
-          </ModalBody>
-        </Form>
-        <ModalFooter>
-          <Button kind="secondary" onClick={() => setShowDeleteFormModal(false)}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button
-            disabled={isDeleting}
-            kind="danger"
-            onClick={() => {
-              setIsDeleting(true);
-              handleDeleteForm(form.uuid);
-            }}
-          >
-            {isDeleting ? (
-              <InlineLoading className={styles.spinner} description={t('deleting', 'Deleting') + '...'} />
-            ) : (
-              <span>{t('delete', 'Delete')}</span>
-            )}
-          </Button>
-        </ModalFooter>
-      </ComposedModal>
-    );
-  };
-
   return (
     <>
       {formResources.length == 0 || !form?.resources[0] ? (
@@ -241,14 +205,12 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
         </>
       )}
       <DeleteButton />
-      {showDeleteFormModal && <DeleteFormModal />}
     </>
   );
 }
 
 function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   const pageSize = 10;
-  const config = useConfig();
   const isTablet = useLayoutType() === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const [filter, setFilter] = useState('');
@@ -339,17 +301,6 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
 
   return (
     <>
-      {config.showSchemaSaveWarning && (
-        <InlineNotification
-          className={styles.warningMessage}
-          kind="info"
-          lowContrast
-          title={t(
-            'schemaSaveWarningMessage',
-            "The dev3 server is ephemeral at best and can't be relied upon to save your schemas permanently. To avoid losing your work, please save your schemas to your local machine. Alternatively, upload your schema to the distro repo to have it persisted across server resets.",
-          )}
-        />
-      )}
       <div className={styles.flexContainer}>
         <div className={styles.filterContainer}>
           <Dropdown
@@ -447,6 +398,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
   const { forms, error, isLoading, isValidating, mutate } = useForms();
+  const { showSchemaSaveWarning } = useConfig<ConfigObject>();
 
   return (
     <main>
@@ -465,7 +417,22 @@ const Dashboard: React.FC = () => {
             return <EmptyState />;
           }
 
-          return <FormsList forms={forms} isValidating={isValidating} mutate={mutate} t={t} />;
+          return (
+            <>
+              {showSchemaSaveWarning && (
+                <InlineNotification
+                  className={styles.warningMessage}
+                  kind="info"
+                  lowContrast
+                  title={t(
+                    'schemaSaveWarningMessage',
+                    "The dev3 server is ephemeral at best and can't be relied upon to save your schemas permanently. To avoid losing your work, please save your schemas to your local machine. Alternatively, upload your schema to the distro repo to have it persisted across server resets.",
+                  )}
+                />
+              )}
+              <FormsList forms={forms} isValidating={isValidating} mutate={mutate} t={t} />
+            </>
+          );
         })()}
       </div>
     </main>

package/src/components/dashboard/dashboard.scss

@@ -153,4 +153,9 @@
   &:global(.cds--inline-loading) {
     min-height: 1rem;
   }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
 }
+

package/src/components/dashboard/dashboard.test.tsx

@@ -1,32 +1,20 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { type FetchResponse, navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework';
+import { type FetchResponse, navigate, openmrsFetch, showModal } from '@openmrs/esm-framework';
 import { renderWithSwr, waitForLoadingToFinish } from '../../test-helpers';
 import { deleteForm } from '../../forms.resource';
 import Dashboard from './dashboard.component';
 
 type OpenmrsFetchResponse = Promise<
   FetchResponse<{
-    results: unknown[];
+    results: Array<unknown>;
   }>
 >;
 
-type PaginationData = {
-  currentPage: number;
-  goTo: (page: number) => void;
-  results: unknown[];
-  totalPages: number;
-  paginated: boolean;
-  showNextButton: boolean;
-  showPreviousButton: boolean;
-  goToNext: () => void;
-  goToPrevious: () => void;
-};
-
 const mockedOpenmrsFetch = jest.mocked(openmrsFetch);
 const mockedDeleteForm = jest.mocked(deleteForm);
-const mockUsePagination = jest.mocked(usePagination);
+const mockedShowModal = jest.mocked(showModal);
 
 const formsResponse = [
   {
@@ -54,20 +42,6 @@ jest.mock('../../forms.resource', () => ({
   deleteForm: jest.fn(),
 }));
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-
-  return {
-    ...originalModule,
-    usePagination: jest.fn().mockImplementation(() => ({
-      currentPage: 1,
-      goTo: () => {},
-      results: [],
-      paginated: true,
-    })),
-  };
-});
-
 global.window.URL.createObjectURL = jest.fn();
 
 describe('Dashboard', () => {
@@ -98,22 +72,13 @@ describe('Dashboard', () => {
 
     await waitForLoadingToFinish();
 
-    const searchbox = screen.getByRole('searchbox') as HTMLInputElement;
+    const searchbox: HTMLInputElement = screen.getByRole('searchbox');
 
     await user.type(searchbox, 'COVID');
 
     expect(searchbox.value).toBe('COVID');
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse.filter((form) => form.name === searchbox.value),
-        }) as unknown as PaginationData,
-    );
-
-    await expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
     expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument();
   });
 
@@ -137,15 +102,6 @@ describe('Dashboard', () => {
     await user.click(publishStatusFilter);
     await user.click(screen.getByRole('option', { name: /unpublished/i }));
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse.filter((form) => !form.published),
-        }) as unknown as PaginationData,
-    );
-
     expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
     expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument();
   });
@@ -157,15 +113,6 @@ describe('Dashboard', () => {
       },
     } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -189,15 +136,6 @@ describe('Dashboard', () => {
       },
     } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -209,7 +147,7 @@ describe('Dashboard', () => {
     await user.click(createFormButton);
 
     expect(navigate).toHaveBeenCalledWith({
-      to: expect.stringMatching(/form\-builder\/new/),
+      to: expect.stringMatching(/form-builder\/new/),
     });
   });
 
@@ -220,15 +158,6 @@ describe('Dashboard', () => {
       },
     } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -246,15 +175,6 @@ describe('Dashboard', () => {
       },
     } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -266,7 +186,7 @@ describe('Dashboard', () => {
     await user.click(editSchemaButton);
 
     expect(navigate).toHaveBeenCalledWith({
-      to: expect.stringMatching(/form\-builder\/edit/),
+      to: expect.stringMatching(/form-builder\/edit/),
     });
   });
 
@@ -279,15 +199,6 @@ describe('Dashboard', () => {
       },
     } as unknown as OpenmrsFetchResponse);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -312,15 +223,6 @@ describe('Dashboard', () => {
 
     mockedDeleteForm.mockResolvedValue({} as FetchResponse<Record<string, never>>);
 
-    mockUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: formsResponse,
-        }) as unknown as PaginationData,
-    );
-
     renderDashboard();
 
     await waitForLoadingToFinish();
@@ -330,14 +232,13 @@ describe('Dashboard', () => {
 
     await user.click(deleteButton);
 
-    const modal = screen.getByRole('presentation');
-    expect(modal).toBeInTheDocument();
-    expect(modal).toHaveTextContent(/delete form/i);
-    expect(modal).toHaveTextContent(/are you sure you want to delete this form?/i);
-    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /danger delete/i })).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /danger delete/i }));
+    expect(mockedShowModal).toHaveBeenCalledTimes(1);
+    expect(mockedShowModal).toHaveBeenCalledWith(
+      'delete-form-modal',
+      expect.objectContaining({
+        isDeletingForm: false,
+      }),
+    );
   });
 });
 

package/src/components/dashboard/delete-form.modal.tsx

@@ -0,0 +1,45 @@
+import React, { type SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import styles from './delete-form.scss';
+
+interface DeleteFormModalProps {
+  closeModal: () => void;
+  isDeletingForm: boolean;
+  onDeleteForm: () => void;
+}
+
+const DeleteFormModal: React.FC<DeleteFormModalProps> = ({ closeModal, isDeletingForm, onDeleteForm }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('deleteForm', 'Delete form')} />
+      <Form onSubmit={(event: SyntheticEvent) => event.preventDefault()}>
+        <ModalBody>
+          <p>{t('deleteFormConfirmation', 'Are you sure you want to delete this form?')}</p>
+        </ModalBody>
+      </Form>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          disabled={isDeletingForm}
+          kind="danger"
+          onClick={() => {
+            onDeleteForm();
+            closeModal();
+          }}
+        >
+          {isDeletingForm ? (
+            <InlineLoading className={styles.spinner} description={t('deleting', 'Deleting') + '...'} />
+          ) : (
+            <span>{t('delete', 'Delete')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default DeleteFormModal;

package/src/components/dashboard/delete-form.scss

@@ -0,0 +1,9 @@
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
+}