diff --git a/e2e/specs/forms-dashboard.spec.ts b/e2e/specs/forms-dashboard.spec.ts index ac521f4..acc1f71 100644 --- a/e2e/specs/forms-dashboard.spec.ts +++ b/e2e/specs/forms-dashboard.spec.ts @@ -19,14 +19,14 @@ test('Filter forms based on publish status', async ({ page }) => { }); // Test the filter functionality - await test.step('Then I click the publish filter dropdown', async () => { - await page.getByText('Filter by publish status:').click(); + await test.step('Then I click the filter dropdown', async () => { + await page.getByText('Filter by:').click(); }); await test.step('And I click the Unpublished option', async () => await page.getByText('Unpublished').click()); // Expect the publish status to be "No" - const tagElements = await page.$$('div[data-testid="no-tag"]'); + const tagElements = page.locator('div[data-testid="no-tag"]'); const firstTagElement = tagElements[0]; // Get the inner text of the tag element diff --git a/src/components/dashboard/dashboard.component.tsx b/src/components/dashboard/dashboard.component.tsx index 2d245fa..ab04c29 100644 --- a/src/components/dashboard/dashboard.component.tsx +++ b/src/components/dashboard/dashboard.component.tsx @@ -251,24 +251,37 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) { const config = useConfig(); const isTablet = useLayoutType() === 'tablet'; const responsiveSize = isTablet ? 'lg' : 'sm'; - const [, setFilter] = useState(''); + const [filter, setFilter] = useState(''); const [searchTerm, setSearchTerm] = useState(''); const debouncedSearchTerm = useDebounce(searchTerm); - const filteredForms = useMemo(() => { + const filteredForms: Array = useMemo(() => { if (!debouncedSearchTerm) { + if (filter === 'Retired') { + return forms.filter((form) => form.retired); + } + + if (filter === 'Published') { + return forms.filter((form) => form.published); + } + + if (filter === 'Unpublished') { + return forms.filter((form) => !form.published); + } + return forms; } + // eslint-disable-next-line @typescript-eslint/no-unsafe-return return debouncedSearchTerm ? fuzzy .filter(debouncedSearchTerm, forms, { extract: (form: TypedForm) => `${form.name} ${form.version}`, }) .sort((r1, r2) => r1.score - r2.score) - .map((result) => result.original) + .map((result) => result.original as unknown as TypedForm) : forms; - }, [forms, debouncedSearchTerm]); + }, [filter, forms, debouncedSearchTerm]); const tableHeaders = [ { @@ -303,7 +316,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) { actions: , })); - const handlePublishStatusChange = ({ selectedItem }: { selectedItem: string }) => setFilter(selectedItem); + const handleFilter = ({ selectedItem }: { selectedItem: string }) => setFilter(selectedItem); return ( <> @@ -324,11 +337,11 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) { id="publishStatusFilter" initialSelectedItem={'All'} label="" - titleText={t('filterByPublishedStatus', 'Filter by publish status') + ':'} + titleText={t('filterBy', 'Filter by') + ':'} size={responsiveSize} type="inline" - items={['All', 'Published', 'Unpublished']} - onChange={handlePublishStatusChange} + items={['All', 'Published', 'Unpublished', 'Retired']} + onChange={handleFilter} />
diff --git a/src/components/dashboard/dashboard.scss b/src/components/dashboard/dashboard.scss index e2547c9..890d028 100644 --- a/src/components/dashboard/dashboard.scss +++ b/src/components/dashboard/dashboard.scss @@ -27,7 +27,7 @@ height: layout.$spacing-09; } } - + :global(.omrs-breakpoint-gt-tablet) { .toolbarWrapper { height: layout.$spacing-07; @@ -96,7 +96,7 @@ :global(.cds--table-toolbar) { position: relative; height: 2rem; - min-height: 0rem; + min-height: 0rem; overflow: visible; top: 0; } @@ -104,6 +104,11 @@ &:global(.cds--data-table-container) { padding-top: 0rem; } + + // FIXME: This override should be moved to esm-styleguide + :global(.cds--btn--icon-only) { + padding-block-start: 0.5rem; + } } .filterContainer { diff --git a/src/components/dashboard/dashboard.test.tsx b/src/components/dashboard/dashboard.test.tsx index 4061520..f72e0b5 100644 --- a/src/components/dashboard/dashboard.test.tsx +++ b/src/components/dashboard/dashboard.test.tsx @@ -108,7 +108,7 @@ describe('Dashboard', () => { await waitForLoadingToFinish(); const publishStatusFilter = screen.getByRole('combobox', { - name: /filter by publish status/i, + name: /filter by/i, }); await waitFor(() => user.click(publishStatusFilter)); @@ -142,7 +142,7 @@ describe('Dashboard', () => { await waitForLoadingToFinish(); expect(screen.getByRole('heading', { name: /form builder/i })).toBeInTheDocument(); - expect(screen.getByRole('combobox', { name: /filter by publish status/i })).toBeInTheDocument(); + expect(screen.getByRole('combobox', { name: /filter by/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /create a new form/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /edit schema/i })).toBeInTheDocument(); expect(screen.getByRole('button', { name: /download schema/i })).toBeInTheDocument(); diff --git a/translations/am.json b/translations/am.json index 8eff69d..ebbd575 100644 --- a/translations/am.json +++ b/translations/am.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "New form created", diff --git a/translations/en.json b/translations/en.json index 2576b7e..b6f2fcf 100644 --- a/translations/en.json +++ b/translations/en.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "Form created", diff --git a/translations/es.json b/translations/es.json index 8eff69d..ebbd575 100644 --- a/translations/es.json +++ b/translations/es.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "New form created", diff --git a/translations/fr.json b/translations/fr.json index 8eff69d..ebbd575 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "New form created", diff --git a/translations/he.json b/translations/he.json index 8eff69d..ebbd575 100644 --- a/translations/he.json +++ b/translations/he.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "New form created", diff --git a/translations/km.json b/translations/km.json index 8eff69d..ebbd575 100644 --- a/translations/km.json +++ b/translations/km.json @@ -69,7 +69,7 @@ "errorUpdatingQuestion": "Error updating question", "expandSectionExplainer": "Below are the sections linked to this page. Expand each section to add questions to it.", "fieldType": "Field type", - "filterByPublishedStatus": "Filter by publish status", + "filterBy": "Filter by", "formBuilder": "Form Builder", "formBuilderDocs": "form builder documentation", "formCreated": "New form created",