(fix) Improvements to the search experience

package.json

@@ -15,7 +15,7 @@
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env.analyze=true",
     "lint": "TIMING=1 eslint src --ext js,jsx,ts,tsx --max-warnings=0",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx}\" --list-different",
     "typescript": "tsc",
     "test": "jest --config jest.config.js",
     "test-e2e": "playwright test",

src/components/dashboard/dashboard.component.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import fuzzy from 'fuzzy';
 import type { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import {
@@ -36,7 +35,6 @@ import {
   useConfig,
   useLayoutType,
   usePagination,
-  useDebounce,
   openmrsFetch,
   restBaseUrl,
 } from '@openmrs/esm-framework';
@@ -254,36 +252,27 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   const isTablet = useLayoutType() === 'tablet';
   const responsiveSize = isTablet ? 'lg' : 'sm';
   const [filter, setFilter] = useState('');
-  const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDebounce(searchTerm);
+  const [searchString, setSearchString] = useState('');
 
-  const filteredForms: Array<TypedForm> = useMemo(() => {
-    if (!debouncedSearchTerm) {
-      if (filter === 'Retired') {
-        return forms.filter((form) => form.retired);
-      }
+  const filteredRows = useMemo(() => {
+    if (!filter) {
+      return forms;
+    }
 
-      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;
+    if (filter === 'Retired') {
+      return forms.filter((form) => form.retired);
     }
 
-    // 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]);
+    return forms;
+  }, [filter, forms]);
 
   const tableHeaders = [
     {
@@ -309,7 +298,16 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
   ];
 
   const editSchemaUrl = '${openmrsSpaBase}/form-builder/edit/${formUuid}';
-  const { paginated, goTo, results, currentPage } = usePagination(filteredForms, pageSize);
+
+  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 tableRows = results?.map((form: TypedForm) => ({
     ...form,
@@ -331,6 +329,14 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
 
   const handleFilter = ({ selectedItem }: { selectedItem: string }) => setFilter(selectedItem);
 
+  const handleSearch = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
   return (
     <>
       {config.showSchemaSaveWarning && (
@@ -370,8 +376,9 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
                 <TableToolbar className={styles.tableToolbar} size={responsiveSize}>
                   <TableToolbarContent className={styles.headerContainer}>
                     <TableToolbarSearch
+                      expanded
                       className={styles.searchbox}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                      onChange={handleSearch}
                       placeholder={t('searchThisList', 'Search this list')}
                     />
                     <Button
@@ -425,7 +432,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
       {paginated && (
         <FormBuilderPagination
           currentItems={results.length}
-          totalItems={filteredForms.length}
+          totalItems={searchResults.length}
           onPageNumberChange={({ page }) => {
             goTo(page);
           }}
@@ -439,7 +446,7 @@ function FormsList({ forms, isValidating, mutate, t }: FormsListProps) {
 
 const Dashboard: React.FC = () => {
   const { t } = useTranslation();
-  const { error, forms, isLoading, isValidating, mutate } = useForms();
+  const { forms, error, isLoading, isValidating, mutate } = useForms();
 
   return (
     <main>

src/components/dashboard/dashboard.scss

@@ -119,7 +119,7 @@
 }
 
 .filterDropdown {
-  margin-left: layout.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .content {

src/components/empty-state/empty-state.scss

@@ -31,7 +31,7 @@
   text-align: left;
   text-transform: capitalize;
   margin-bottom: layout.$spacing-05;
-  
+
   h4:after {
     content: "";
     display: block;
@@ -51,5 +51,5 @@
 
 .tile {
   text-align: center;
-  border: 1px solid colors.$gray-70;
-}
+  border: 1px solid colors.$gray-20;
+}