(feat) Form names in the forms table should contain links to the edit…

…or (#211)

* (feat) Form names in the forms table should contain links to the editor

* Update tests

e2e/specs/forms-dashboard.spec.ts

@@ -57,6 +57,22 @@ test('Search forms by name', async ({ page }) => {
   });
 });
 
+test('Clicking on a form should navigate me to the editor', async ({ page }) => {
+  const formBuilderPage = new FormBuilderPage(page);
+
+  await test.step('When I visit the form builder', async () => {
+    await formBuilderPage.gotoFormBuilder();
+  });
+
+  await test.step('And I click the `A sample test form` form', async () => {
+    await page.getByText('A sample test form').click();
+  });
+
+  await test.step('Then I should be navigated to the editor page', async () => {
+    await expect(page).toHaveURL(new RegExp('form-builder/edit/' + form.uuid));
+  });
+});
+
 test.afterEach(async ({ api }) => {
   if (form) {
     await deleteForm(api, form.uuid);

src/components/dashboard/dashboard.component.tsx

@@ -30,6 +30,7 @@ import {
 import { Add, DocumentImport, Download, Edit, TrashCan } from '@carbon/react/icons';
 import {
   type FetchResponse,
+  ConfigurableLink,
   navigate,
   showSnackbar,
   useConfig,
@@ -309,6 +310,14 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   const tableRows = results?.map((form: TypedForm) => ({
     ...form,
     id: form?.uuid,
+    name: (
+      <ConfigurableLink
+        className={styles.link}
+        to={`${window.getOpenmrsSpaBase() + `form-builder/edit/` + form?.uuid}`}
+      >
+        {form.name}
+      </ConfigurableLink>
+    ),
     published: <CustomTag condition={form.published} />,
     retired: <CustomTag condition={form.retired} />,
     actions: <ActionButtons form={form} mutate={mutate} responsiveSize={responsiveSize} t={t} />,
@@ -332,6 +341,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
       <div className={styles.flexContainer}>
         <div className={styles.filterContainer}>
           <Dropdown
+            className={styles.filterDropdown}
             id="publishStatusFilter"
             initialSelectedItem={'All'}
             label=""

src/components/dashboard/dashboard.scss

@@ -49,6 +49,9 @@
   }
 }
 
+.link {
+  text-decoration: none;
+}
 
 .table {
   tr {
@@ -105,10 +108,6 @@
     padding-top: 0rem;
   }
 
-  // FIXME: This override should be moved to esm-styleguide
-  :global(.cds--btn--icon-only) {
-    padding-block-start: 0.5rem;
-  }
 }
 
 .filterContainer {
@@ -123,6 +122,10 @@
   }
 }
 
+.filterDropdown {
+  margin-left: layout.$spacing-03;
+}
+
 .content {
   @include type.type-style('heading-compact-02');
   color: colors.$gray-70;

src/components/dashboard/dashboard.test.tsx

@@ -8,6 +8,7 @@ import Dashboard from './dashboard.component';
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockedDeleteForm = deleteForm as jest.Mock;
+global.window.URL.createObjectURL = jest.fn();
 
 jest.mock('../../forms.resource', () => ({
   deleteForm: jest.fn(),
@@ -148,7 +149,7 @@ describe('Dashboard', () => {
     expect(screen.getByRole('button', { name: /download schema/i })).toBeInTheDocument();
     expect(screen.getByRole('searchbox', { name: /filter table/i })).toBeInTheDocument();
     expect(screen.queryByRole('table')).toBeInTheDocument();
-    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+    expect(screen.getByText(formsResponse[0].name)).toBeInTheDocument();
   });
 
   it('clicking on "create a new form" button navigates to the "create form" page', async () => {
@@ -181,6 +182,27 @@ describe('Dashboard', () => {
     });
   });
 
+  it("clicking the form name navigates to the form's edit page", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    mockUsePagination.mockImplementation(() => ({
+      currentPage: 1,
+      goTo: () => {},
+      results: formsResponse,
+    }));
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const link = screen.getByRole('link', { name: formsResponse[0].name });
+    expect(link).toBeInTheDocument();
+  });
+
   it('clicking on "edit schema" button navigates to the "edit schema" page', async () => {
     const user = userEvent.setup();
 

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

@@ -250,17 +250,21 @@ const FormEditor: React.FC = () => {
             <div className={styles.actionButtons}>
               {isLoadingFormOrSchema ? (
                 <InlineLoading description={t('loadingSchema', 'Loading schema') + '...'} />
-              ) : null}
+              ) : (
+                <h1 className={styles.formName}>{form?.name}</h1>
+              )}
 
-              {isNewSchema && !schema ? (
-                <Button kind="ghost" onClick={inputDummySchema}>
-                  {t('inputDummySchema', 'Input dummy schema')}
-                </Button>
-              ) : null}
+              <div>
+                {isNewSchema && !schema ? (
+                  <Button kind="ghost" onClick={inputDummySchema}>
+                    {t('inputDummySchema', 'Input dummy schema')}
+                  </Button>
+                ) : null}
 
-              <Button kind="ghost" onClick={renderSchemaChanges}>
-                <span>{t('renderChanges', 'Render changes')}</span>
-              </Button>
+                <Button kind="ghost" onClick={renderSchemaChanges}>
+                  <span>{t('renderChanges', 'Render changes')}</span>
+                </Button>
+              </div>
             </div>
             <div>
               <div className={styles.heading}>

src/components/form-editor/form-editor.scss

@@ -41,14 +41,18 @@
 .actionButtons {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   margin: 1rem 0;
 
   button {
     margin-left: 1rem
   }
 }
 
+.formName {
+  @include type.type-style('heading-03');
+}
+
 .editorContainer {
   padding: 1rem;
 }
@@ -67,3 +71,4 @@
   width: 100%;
   padding: 0.75rem;
 }
+

src/setup-tests.ts

@@ -1,3 +1,6 @@
 import '@testing-library/jest-dom';
 
 window.URL.createObjectURL = jest.fn();
+window.openmrsBase = '/openmrs';
+window.spaBase = '/spa';
+window.getOpenmrsSpaBase = () => '/openmrs/spa/';