[Backport release/0.2.z] fix: Search Page does not search on the backend while typing (#348)

Co-authored-by: Carlos Feria <carlosthe19916@gmail.com>

Author: github-actions[bot]

client/src/app/pages/search/components/SearchMenu.tsx

@@ -1,9 +1,6 @@
-import { HubRequestParams } from "@app/api/models";
-import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
-import { useFetchAdvisories } from "@app/queries/advisories";
-import { useFetchPackages } from "@app/queries/packages";
-import { useFetchSBOMs } from "@app/queries/sboms";
-import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
+import React from "react";
+import { Link } from "react-router-dom";
+
 import {
   Label,
   Menu,
@@ -12,9 +9,18 @@ import {
   MenuList,
   Popper,
   SearchInput,
+  Spinner,
 } from "@patternfly/react-core";
-import React from "react";
-import { Link } from "react-router-dom";
+
+import { useDebounceValue } from "usehooks-ts";
+
+import { HubRequestParams } from "@app/api/models";
+import { FILTER_TEXT_CATEGORY_KEY } from "@app/Constants";
+import { SbomSearchContext } from "@app/pages/sbom-list/sbom-context";
+import { useFetchAdvisories } from "@app/queries/advisories";
+import { useFetchPackages } from "@app/queries/packages";
+import { useFetchSBOMs } from "@app/queries/sboms";
+import { useFetchVulnerabilities } from "@app/queries/vulnerabilities";
 
 export interface IEntity {
   id: string;
@@ -48,66 +54,36 @@ const entityToMenu = (option: IEntity) => {
   );
 };
 
-// Filter function
-export function filterEntityListByValue(list: IEntity[], searchString: string) {
-  // When the value of the search input changes, build a list of no more than 10 autocomplete options.
-  // Options which start with the search input value are listed first, followed by options which contain
-  // the search input value.
-  let options: React.JSX.Element[] = list
-    .filter(
-      (option) =>
-        option.id.toLowerCase().startsWith(searchString.toLowerCase()) ||
-        option.title?.toLowerCase().startsWith(searchString.toLowerCase()) ||
-        option.description?.toLowerCase().startsWith(searchString.toLowerCase())
-    )
-    .map(entityToMenu);
-
-  if (options.length > 10) {
-    options = options.slice(0, 10);
-  } else {
-    options = [
-      ...options,
-      ...list
-        .filter(
-          (option: IEntity) =>
-            !option.id.startsWith(searchString.toLowerCase()) &&
-            option.id.includes(searchString.toLowerCase())
-        )
-        .map(entityToMenu),
-    ].slice(0, 10);
-  }
-
-  return options;
-}
-
-function useAllEntities(filterText: string) {
+function useAllEntities(filterText: string, disableSearch: boolean) {
   const params: HubRequestParams = {
     filters: [
       { field: FILTER_TEXT_CATEGORY_KEY, operator: "~", value: filterText },
     ],
-    page: { pageNumber: 1, itemsPerPage: 10 },
+    page: { pageNumber: 1, itemsPerPage: 5 },
   };
 
   const {
+    isFetching: isFetchingAdvisories,
     result: { data: advisories },
-  } = useFetchAdvisories({ ...params });
+  } = useFetchAdvisories({ ...params }, true, disableSearch);
 
   const {
+    isFetching: isFetchingPackages,
     result: { data: packages },
-  } = useFetchPackages({ ...params });
+  } = useFetchPackages({ ...params }, true, disableSearch);
 
   const {
+    isFetching: isFetchingSBOMs,
     result: { data: sboms },
-  } = useFetchSBOMs({ ...params });
+  } = useFetchSBOMs({ ...params }, true, disableSearch);
 
   const {
+    isFetching: isFetchingVulnerabilities,
     result: { data: vulnerabilities },
-  } = useFetchVulnerabilities({ ...params });
-
-  const tmpArray: IEntity[] = [];
+  } = useFetchVulnerabilities({ ...params }, true, disableSearch);
 
   const transformedAdvisories: IEntity[] = advisories.map((item) => ({
-    id: item.document_id,
+    id: `advisory-${item.uuid}`,
     title: item.document_id,
     description: item.title?.substring(0, 75),
     navLink: `/advisories/${item.uuid}`,
@@ -116,15 +92,15 @@ function useAllEntities(filterText: string) {
   }));
 
   const transformedPackages: IEntity[] = packages.map((item) => ({
-    id: item.uuid,
+    id: `package-${item.uuid}`,
     title: item.purl,
     navLink: `/packages/${item.uuid}`,
     type: "Package",
     typeColor: "cyan",
   }));
 
   const transformedSboms: IEntity[] = sboms.map((item) => ({
-    id: item.id,
+    id: `sbom-${item.id}`,
     title: item.name,
     description: item.authors.join(", "),
     navLink: `/sboms/${item.id}`,
@@ -133,24 +109,44 @@ function useAllEntities(filterText: string) {
   }));
 
   const transformedVulnerabilities: IEntity[] = vulnerabilities.map((item) => ({
-    id: item.identifier,
+    id: `vulnerability-${item.identifier}`,
     title: item.identifier,
     description: item.description?.substring(0, 75),
     navLink: `/vulnerabilities/${item.identifier}`,
     type: "Vulnerability",
     typeColor: "orange",
   }));
 
-  tmpArray.push(
+  const filterTextLowerCase = filterText.toLowerCase();
+
+  const list = [
+    ...transformedVulnerabilities,
+    ...transformedSboms,
     ...transformedAdvisories,
     ...transformedPackages,
-    ...transformedSboms,
-    ...transformedVulnerabilities
-  );
+  ].sort((a, b) => {
+    if (a.title?.includes(filterTextLowerCase)) {
+      return -1;
+    } else if (b.title?.includes(filterTextLowerCase)) {
+      return 1;
+    } else {
+      const aIndex = (a.description || "")
+        .toLowerCase()
+        .indexOf(filterTextLowerCase);
+      const bIndex = (b.description || "")
+        .toLowerCase()
+        .indexOf(filterTextLowerCase);
+      return aIndex - bIndex;
+    }
+  });
 
   return {
-    list: tmpArray,
-    defaultValue: "",
+    isFetching:
+      isFetchingAdvisories ||
+      isFetchingPackages ||
+      isFetchingSBOMs ||
+      isFetchingVulnerabilities,
+    list,
   };
 }
 
@@ -162,18 +158,34 @@ export interface ISearchMenu {
   onChangeSearch: (searchValue: string | undefined) => void;
 }
 
-export const SearchMenu: React.FC<ISearchMenu> = ({
-  filterFunction = filterEntityListByValue,
-  onChangeSearch,
-}) => {
-  const { list: entityList, defaultValue } = useAllEntities("");
+export const SearchMenu: React.FC<ISearchMenu> = ({ onChangeSearch }) => {
+  // Search value initial value
+  const { tableControls: sbomTableControls } =
+    React.useContext(SbomSearchContext);
+  const initialSearchValue =
+    sbomTableControls.filterState.filterValues[FILTER_TEXT_CATEGORY_KEY]?.[0] ||
+    "";
+
+  // Search value
+  const [searchValue, setSearchValue] = React.useState(initialSearchValue);
+  const [isSearchValueDirty, setIsSearchValueDirty] = React.useState(false);
+
+  // Debounce Search value
+  const [debouncedSearchValue, setDebouncedSearchValue] = useDebounceValue(
+    searchValue,
+    500
+  );
 
-  const [searchValue, setSearchValue] = React.useState<string | undefined>(
-    defaultValue
+  React.useEffect(() => {
+    setDebouncedSearchValue(searchValue);
+  }, [setDebouncedSearchValue, searchValue]);
+
+  // Fetch all entities
+  const { isFetching, list: entityList } = useAllEntities(
+    debouncedSearchValue,
+    !isSearchValueDirty
   );
-  const [autocompleteOptions, setAutocompleteOptions] = React.useState<
-    React.JSX.Element[]
-  >([]);
+
   const [isAutocompleteOpen, setIsAutocompleteOpen] =
     React.useState<boolean>(false);
 
@@ -188,17 +200,12 @@ export const SearchMenu: React.FC<ISearchMenu> = ({
       searchInputRef.current.contains(document.activeElement)
     ) {
       setIsAutocompleteOpen(true);
-
-      const options = filterFunction(entityList, newValue);
-
-      // The menu is hidden if there are no options
-      setIsAutocompleteOpen(options.length > 0);
-      setAutocompleteOptions(options);
     } else {
       setIsAutocompleteOpen(false);
     }
 
     setSearchValue(newValue);
+    setIsSearchValueDirty(true);
   };
 
   const onClearSearchValue = () => {
@@ -273,9 +280,26 @@ export const SearchMenu: React.FC<ISearchMenu> = ({
   }, [isAutocompleteOpen]);
 
   const autocomplete = (
-    <Menu ref={autocompleteRef} style={{ maxWidth: "450px" }}>
+    <Menu
+      ref={autocompleteRef}
+      style={{
+        maxWidth: "450px",
+        maxHeight: "450px",
+        overflow: "scroll",
+        overflowX: "hidden",
+        overflowY: "auto",
+      }}
+    >
       <MenuContent>
-        <MenuList>{autocompleteOptions}</MenuList>
+        <MenuList>
+          {isFetching ? (
+            <MenuItem itemId="loading">
+              <Spinner size="sm" />
+            </MenuItem>
+          ) : (
+            entityList.map(entityToMenu)
+          )}
+        </MenuList>
       </MenuContent>
     </Menu>
   );
@@ -301,7 +325,7 @@ export const SearchMenu: React.FC<ISearchMenu> = ({
       triggerRef={searchInputRef}
       popper={autocomplete}
       popperRef={autocompleteRef}
-      isVisible={isAutocompleteOpen}
+      isVisible={(isAutocompleteOpen && entityList.length > 0) || isFetching}
       enableFlip={false}
       // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience
       appendTo={() =>

client/src/app/pages/search/components/SearchTabs.tsx

@@ -106,6 +106,7 @@ export const SearchTabs: React.FC<SearchTabsProps> = ({
       </SplitItem>
       <SplitItem isFilled>
         <Tabs
+          mountOnEnter
           isBox
           activeKey={activeTabKey}
           onSelect={handleTabClick}