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/';