(feat) Filter forms list using multiple properties (openmrs#201)

e2e/specs/forms-dashboard.spec.ts

@@ -19,8 +19,8 @@ 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());

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<TypedForm> = 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: <ActionButtons form={form} mutate={mutate} responsiveSize={responsiveSize} t={t} />,
  }));
 
- 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}
  />
  </div>
  <div className={styles.backgroundDataFetchingIndicator}>

src/components/dashboard/dashboard.scss

@@ -27,7 +27,7 @@
  height: layout.$spacing-09;
  }
 }
- 
+
 :global(.omrs-breakpoint-gt-tablet) {
  .toolbarWrapper {
  height: layout.$spacing-07;
@@ -96,14 +96,19 @@
  :global(.cds--table-toolbar) {
  position: relative;
  height: 2rem;
- min-height: 0rem; 
+ min-height: 0rem;
  overflow: visible;
  top: 0;
  }
 
  &: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 {

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();

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",

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",

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",

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",

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",

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",