@openmrs/esm-form-builder-app 2.1.1-pre.621 → 2.1.1-pre.626

package/dist/openmrs-esm-form-builder-app.js.buildmanifest.json

@@ -69,7 +69,7 @@
       "auxiliaryFiles": [
         "153.js.map"
       ],
-      "hash": "9b32a76f7b416600",
+      "hash": "1feb363b8fb039cb",
       "childrenByOrder": {}
     },
     {
@@ -124,153 +124,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "df47081479a0e060",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 3602,
-      "sizes": {
-        "javascript": 3602
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "256.js"
-      ],
-      "auxiliaryFiles": [
-        "256.js.map"
-      ],
-      "hash": "d4d5b35efe1d8ede",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 311791,
-      "sizes": {
-        "javascript": 311749,
-        "consume-shared": 42
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "259.js"
-      ],
-      "auxiliaryFiles": [
-        "259.js.map"
-      ],
-      "hash": "bed10a78d6da8766",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 7103,
-      "sizes": {
-        "javascript": 7103
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "294.js"
-      ],
-      "auxiliaryFiles": [
-        "294.js.map"
-      ],
-      "hash": "b314e60f1c149ba9",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 9323,
-      "sizes": {
-        "javascript": 9323
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "319.js"
-      ],
-      "auxiliaryFiles": [],
-      "hash": "791ee4cd0cc89d0b",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "size": 984,
-      "sizes": {
-        "javascript": 984
-      },
-      "names": [],
-      "idHints": [],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "447.js"
-      ],
-      "auxiliaryFiles": [
-        "447.js.map"
-      ],
-      "hash": "40f540e9c6d5d988",
-      "childrenByOrder": {}
-    },
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 2552869,
-      "sizes": {
-        "javascript": 2552869
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-form-builder-app",
-        "main"
-      ],
-      "files": [
-        "501.js"
-      ],
-      "auxiliaryFiles": [
-        "501.js.map"
-      ],
-      "hash": "6fda22fd27ff1fcc",
+      "hash": "b01cd6507e5262b4",
       "childrenByOrder": {}
     },
     {
@@ -279,9 +133,9 @@
       "entry": false,
       "recorded": false,
       "reason": "split chunk (cache group: defaultVendors)",
-      "size": 2966594,
+      "size": 2970520,
       "sizes": {
-        "javascript": 2966594
+        "javascript": 2970520
       },
       "names": [],
       "idHints": [
@@ -292,7 +146,7 @@
         "main"
       ],
       "files": [
-        "515.js"
+        "223.js"
       ],
       "auxiliaryFiles": [
         "002a2ac7b7d3b3b807ddcb210cfc91eb.js",
@@ -358,6 +212,7 @@
         "2091e4c01015d7dda392116f3ae59801.js",
         "211511e7b374f57ad31acaf49dbdccb1.js",
         "2184bcd361a0e38d249bc49439d994cb.js",
+        "223.js.map",
         "2272c6632c52c3e402ab27b8045ab8f1.js",
         "23602ad4c88f0f19e7a0a12454ebf556.js",
         "23bb1a9f279e7a732bfd405350aab114.js",
@@ -457,7 +312,6 @@
         "4f89e8c1a691faf5f1bfe3987ddf108a.js",
         "5061ac5e99882b9f26051a5d73c75271.js",
         "50bd9a652785963a5d7d24bda4dee4ca.js",
-        "515.js.map",
         "51f903c5ce5284a63196247cffb5ca40.js",
         "52c9726f9e52ed3a57c0634718366029.js",
         "52ee9d28ed4c3389951a46084343a993.js",
@@ -740,7 +594,153 @@
         "ffb6d262efb0718a20d60b5fecb76ea6.js",
         "ffd3b83e8b5878f4785591ff54b1dfff.js"
       ],
-      "hash": "3331e578ed1045e2",
+      "hash": "bb6a01952667b7a9",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 3602,
+      "sizes": {
+        "javascript": 3602
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "256.js"
+      ],
+      "auxiliaryFiles": [
+        "256.js.map"
+      ],
+      "hash": "d4d5b35efe1d8ede",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 312184,
+      "sizes": {
+        "javascript": 312142,
+        "consume-shared": 42
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "259.js"
+      ],
+      "auxiliaryFiles": [
+        "259.js.map"
+      ],
+      "hash": "5e836aeeece80092",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 7103,
+      "sizes": {
+        "javascript": 7103
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "294.js"
+      ],
+      "auxiliaryFiles": [
+        "294.js.map"
+      ],
+      "hash": "b314e60f1c149ba9",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 9293,
+      "sizes": {
+        "javascript": 9293
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "319.js"
+      ],
+      "auxiliaryFiles": [],
+      "hash": "5636b451deeba091",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "size": 984,
+      "sizes": {
+        "javascript": 984
+      },
+      "names": [],
+      "idHints": [],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "447.js"
+      ],
+      "auxiliaryFiles": [
+        "447.js.map"
+      ],
+      "hash": "40f540e9c6d5d988",
+      "childrenByOrder": {}
+    },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 2552869,
+      "sizes": {
+        "javascript": 2552869
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-form-builder-app",
+        "main"
+      ],
+      "files": [
+        "501.js"
+      ],
+      "auxiliaryFiles": [
+        "501.js.map"
+      ],
+      "hash": "6fda22fd27ff1fcc",
       "childrenByOrder": {}
     },
     {
@@ -775,9 +775,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9238,
+      "size": 9208,
       "sizes": {
-        "javascript": 9238
+        "javascript": 9208
       },
       "names": [],
       "idHints": [],
@@ -789,7 +789,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "524559e653f471f5",
+      "hash": "f7fb7d49cfc0d124",
       "childrenByOrder": {}
     },
     {
@@ -818,9 +818,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9323,
+      "size": 9293,
       "sizes": {
-        "javascript": 9323
+        "javascript": 9293
       },
       "names": [],
       "idHints": [],
@@ -832,7 +832,7 @@
         "757.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "d1c5b8f9c53012a6",
+      "hash": "dc0b6206faa09706",
       "childrenByOrder": {}
     },
     {
@@ -840,9 +840,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9323,
+      "size": 9293,
       "sizes": {
-        "javascript": 9323
+        "javascript": 9293
       },
       "names": [],
       "idHints": [],
@@ -854,7 +854,7 @@
         "788.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "70dc49c1a5135689",
+      "hash": "99d9c4c64629db69",
       "childrenByOrder": {}
     },
     {
@@ -889,9 +889,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9323,
+      "size": 9293,
       "sizes": {
-        "javascript": 9323
+        "javascript": 9293
       },
       "names": [],
       "idHints": [],
@@ -903,7 +903,7 @@
         "807.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "fc9feae6d4b64b5e",
+      "hash": "72cccdd76e06f658",
       "childrenByOrder": {}
     },
     {
@@ -911,9 +911,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 9323,
+      "size": 9293,
       "sizes": {
-        "javascript": 9323
+        "javascript": 9293
       },
       "names": [],
       "idHints": [],
@@ -925,7 +925,7 @@
         "833.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "f5a0df4d38d517f6",
+      "hash": "08f084e1a4c42962",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":"^1.2.0","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"version":"2.1.1-pre.621"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":"^1.2.0","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"version":"2.1.1-pre.626"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "2.1.1-pre.621",
+  "version": "2.1.1-pre.626",
   "license": "MPL-2.0",
   "description": "OpenMRS ESM Form Builder App",
   "browser": "dist/openmrs-esm-form-builder-app.js",
@@ -53,6 +53,7 @@
     "@openmrs/openmrs-form-engine-lib": "next",
     "dotenv": "^16.3.1",
     "file-loader": "^6.2.0",
+    "fuzzy": "^0.1.3",
     "lodash-es": "^4.17.21",
     "react-ace": "^10.1.0",
     "sass": "^1.67.0"

package/src/components/dashboard/dashboard.component.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import fuzzy from 'fuzzy';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import {
@@ -35,10 +36,11 @@ import {
   useConfig,
   useLayoutType,
   usePagination,
+  useDebounce,
 } from '@openmrs/esm-framework';
 import type { KeyedMutator } from 'swr';
 
-import type { Form as FormType } from '../../types';
+import type { Form as TypedForm } from '../../types';
 import { deleteForm } from '../../forms.resource';
 import { FormBuilderPagination } from '../pagination';
 import { useClobdata } from '../../hooks/useClobdata';
@@ -49,19 +51,19 @@ import styles from './dashboard.scss';
 
 type Mutator = KeyedMutator<{
   data: {
-    results: Array<FormType>;
+    results: Array<TypedForm>;
   };
 }>;
 
 interface ActionButtonsProps {
-  form: FormType;
+  form: TypedForm;
   mutate: Mutator;
   responsiveSize: string;
   t: TFunction;
 }
 
 interface FormsListProps {
-  forms: Array<FormType>;
+  forms: Array<TypedForm>;
   isValidating: boolean;
   mutate: Mutator;
   t: TFunction;
@@ -245,28 +247,41 @@ function ActionButtons({ form, mutate, responsiveSize, t }: ActionButtonsProps)
 }
 
 function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
+  const pageSize = 10;
   const config = useConfig();
   const isTablet = useLayoutType() === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const [filter, setFilter] = useState('');
-  const [searchString, setSearchString] = useState('');
-  const pageSize = 10;
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
 
-  const filteredRows = useMemo(() => {
-    if (!filter) {
-      return forms;
-    }
+  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 === 'Published') {
+        return forms.filter((form) => form.published);
+      }
+
+      if (filter === 'Unpublished') {
+        return forms.filter((form) => !form.published);
+      }
 
-    if (filter === 'Unpublished') {
-      return forms.filter((form) => !form.published);
+      return forms;
     }
 
-    return forms;
-  }, [filter, 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 as unknown as TypedForm)
+      : forms;
+  }, [filter, forms, debouncedSearchTerm]);
 
   const tableHeaders = [
     {
@@ -291,17 +306,9 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
     },
   ];
 
-  const searchResults = useMemo(() => {
-    if (searchString && searchString.trim() !== '') {
-      return filteredRows.filter((form) => form.name.toLowerCase().includes(searchString.toLowerCase()));
-    }
-
-    return filteredRows;
-  }, [searchString, filteredRows]);
-
-  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+  const { paginated, goTo, results, currentPage } = usePagination(filteredForms, pageSize);
 
-  const tableRows = results?.map((form: FormType) => ({
+  const tableRows = results?.map((form: TypedForm) => ({
     ...form,
     id: form?.uuid,
     published: <CustomTag condition={form.published} />,
@@ -309,15 +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 handleSearch = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      goTo(1);
-      setSearchString(e.target.value);
-    },
-    [goTo, setSearchString],
-  );
+  const handleFilter = ({ selectedItem }: { selectedItem: string }) => setFilter(selectedItem);
 
   return (
     <>
@@ -338,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}>
@@ -358,7 +357,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
                   <TableToolbarContent className={styles.headerContainer}>
                     <TableToolbarSearch
                       className={styles.searchbox}
-                      onChange={handleSearch}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
                       placeholder={t('searchThisList', 'Search this list')}
                     />
                     <Button
@@ -412,7 +411,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
       {paginated && (
         <FormBuilderPagination
           currentItems={results.length}
-          totalItems={searchResults.length}
+          totalItems={filteredForms.length}
           onPageNumberChange={({ page }) => {
             goTo(page);
           }}

package/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 {

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