feat(story): add story for search component

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IEntity, SearchMenu } from "./SearchMenu";
+import { Label, MenuItem } from "@patternfly/react-core";
+import React from "react";
+
+const meta = {
+  title: "Components/Search/SearchMenu",
+  component: SearchMenu,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SearchMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function customFilterIncludes(list: IEntity[], searchString: string) {
+  let options: React.JSX.Element[] = list
+    .filter(
+      (option) =>
+        option.id.toLowerCase().includes(searchString.toLowerCase()) ||
+        option.title?.toLowerCase().includes(searchString.toLowerCase()) ||
+        option.description?.toLowerCase().includes(searchString.toLowerCase())
+    )
+    .map((option) => (
+      <MenuItem
+        itemId={option.id}
+        key={option.id}
+        description={option.description}
+        to={option.navLink}
+      >
+        {option.title} <Label color={option.typeColor}>{option.type}</Label>
+      </MenuItem>
+    ));
+
+  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((option: IEntity) => (
+          <MenuItem
+            itemId={option.id}
+            key={option.id}
+            description={option.description}
+            to={option.navLink}
+          >
+            {option.title} <Label color={option.typeColor}>{option.type}</Label>
+          </MenuItem>
+        )),
+    ].slice(0, 10);
+  }
+
+  return options;
+}
+
+export const DefaultState: Story = {
+  args: {
+    onChangeSearch: jest.fn(),
+  },
+};
+
+export const WithCustomFilter: Story = {
+  args: {
+    filterFunction: customFilterIncludes,
+    onChangeSearch: jest.fn(),
+  },
+};

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

@@ -193,10 +193,7 @@ export const SearchMenu: React.FC<ISearchMenu> = ({
     ) {
       setIsAutocompleteOpen(true);
 
-      console.table(entityList);
-      console.log(newValue);
       const options = filterFunction(entityList, newValue);
-      console.log(options);
 
       // The menu is hidden if there are no options
       setIsAutocompleteOpen(options.length > 0);