diff --git a/e2e/specs/forms-dashboard.spec.ts b/e2e/specs/forms-dashboard.spec.ts index d09cb0d8..2ec7a186 100644 --- a/e2e/specs/forms-dashboard.spec.ts +++ b/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); diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx index 1afb2f04..1fa69098 100644 --- a/src/components/dashboard/dashboard.component.tsx +++ b/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: ( + + {form.name} + + ), published: , retired: , actions: , @@ -332,6 +341,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
({ 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(); diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx index 5db2c9f4..30ce78b3 100644 --- a/src/components/form-editor/form-editor.component.tsx +++ b/src/components/form-editor/form-editor.component.tsx @@ -250,17 +250,21 @@ const FormEditor: React.FC = () => {
{isLoadingFormOrSchema ? ( - ) : null} + ) : ( +

{form?.name}

+ )} - {isNewSchema && !schema ? ( - - ) : null} +
+ {isNewSchema && !schema ? ( + + ) : null} - + +
diff --git a/src/components/form-editor/form-editor.scss b/src/components/form-editor/form-editor.scss index abd7a8a0..b1324582 100644 --- a/src/components/form-editor/form-editor.scss +++ b/src/components/form-editor/form-editor.scss @@ -41,7 +41,7 @@ .actionButtons { display: flex; align-items: center; - justify-content: flex-end; + justify-content: space-between; margin: 1rem 0; button { @@ -49,6 +49,10 @@ } } +.formName { + @include type.type-style('heading-03'); +} + .editorContainer { padding: 1rem; } @@ -67,3 +71,4 @@ width: 100%; padding: 0.75rem; } + diff --git a/src/setup-tests.ts b/src/setup-tests.ts index 84159b40..08387d41 100644 --- a/src/setup-tests.ts +++ b/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/';