perf: entity group items filter utility refactor

app/client/src/IDE/utils/filterEntityGroupsBySearchTerm.test.ts

@@ -0,0 +1,31 @@
+import { filterEntityGroupsBySearchTerm } from ".";
+
+const groups = [
+  {
+    name: "Group 1",
+    items: [{ title: "file1" }, { title: "file2" }],
+  },
+  {
+    title: "Group 2",
+    items: [{ title: "file3" }, { title: "file4" }],
+  },
+];
+
+describe("filterEntityGroupsBySearchTerm", () => {
+  test.each([
+    ["", groups],
+    [
+      "file1",
+      [
+        {
+          name: "Group 1",
+          items: [{ title: "file1" }],
+        },
+      ],
+    ],
+    ["notfound", []],
+    ["file", groups],
+  ])("%s -> %j", (searchTerm, output) => {
+    expect(filterEntityGroupsBySearchTerm(searchTerm, groups)).toEqual(output);
+  });
+});

app/client/src/IDE/utils/filterEntityGroupsBySearchTerm.ts

@@ -0,0 +1,43 @@
+import Fuse, { type FuseOptions } from "fuse.js";
+
+/** Searchable properties. Must be defined in this way to be able to derive union type and satisfy FuseOptions  */
+const keys: ["title"] = ["title"];
+
+/** Union type to make sure these particular keys are present in collection that's being passed in for search. */
+type Keys = (typeof keys)[number];
+
+type BaseGroup = Record<PropertyKey, unknown>;
+type BaseItem = Record<Keys, string | number>;
+type Group<G extends BaseGroup, T extends BaseItem> = G & {
+  items: T[];
+};
+
+const FUSE_OPTIONS: FuseOptions<BaseItem> = {
+  shouldSort: true,
+  threshold: 0.1,
+  keys,
+};
+
+/** Filter entity groups by search term using fuse.js */
+export const filterEntityGroupsBySearchTerm = <
+  G extends BaseGroup,
+  T extends BaseItem,
+>(
+  searchTerm: string,
+  groups: Array<Group<G, T>>,
+): Array<Group<G, T>> => {
+  if (!searchTerm) {
+    return groups;
+  }
+
+  return groups.reduce((result: Array<Group<G, T>>, group) => {
+    const { items, ...rest } = group;
+    const searchResults = new Fuse(items, FUSE_OPTIONS).search(searchTerm);
+
+    if (searchResults.length) {
+      result.push({ ...rest, items: searchResults } as Group<G, T>);
+    }
+
+    return result;
+  }, []);
+};

app/client/src/IDE/utils/index.ts

@@ -0,0 +1 @@
+export { filterEntityGroupsBySearchTerm } from "./filterEntityGroupsBySearchTerm";

app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx

@@ -11,13 +11,13 @@ import {
   useJSAdd,
 } from "ee/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
-import { createAddClassName, fuzzySearchInObjectItems } from "../utils";
+import { createAddClassName } from "../utils";
 import { FocusEntity } from "navigation/FocusEntity";
-import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import type { FlexProps } from "@appsmith/ads";
 import { EditorViewMode } from "ee/entities/IDE/constants";
+import { filterEntityGroupsBySearchTerm } from "IDE/utils";
 
 const AddJS = () => {
   const dispatch = useDispatch();
@@ -53,17 +53,17 @@ const AddJS = () => {
     } as ListItemProps;
   };
 
-  const groups = groupedJsOperations.map(
+  const itemGroups = groupedJsOperations.map(
     ({ className, operations, title }) => ({
       groupTitle: title,
       className: className,
       items: operations.map(getListItems),
     }),
   );
 
-  const localGroups = fuzzySearchInObjectItems<GroupedListProps[]>(
+  const filteredItemGroups = filterEntityGroupsBySearchTerm(
     searchTerm,
-    groups,
+    itemGroups,
   );
 
   const extraPadding: FlexProps =
@@ -94,8 +94,10 @@ const AddJS = () => {
           titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
         />
         <SearchInput onChange={setSearchTerm} value={searchTerm} />
-        {localGroups.length > 0 ? <GroupedList groups={localGroups} /> : null}
-        {localGroups.length === 0 && searchTerm !== "" ? (
+        {filteredItemGroups.length > 0 ? (
+          <GroupedList groups={filteredItemGroups} />
+        ) : null}
+        {filteredItemGroups.length === 0 && searchTerm !== "" ? (
           <EmptySearchResult
             type={createMessage(EDITOR_PANE_TEXTS.search_objects.jsObject)}
           />

app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx

@@ -3,7 +3,6 @@ import { useSelector } from "react-redux";
 import { Flex, Text } from "@appsmith/ads";
 import styled from "styled-components";
 
-import type { EditorSegmentList } from "ee/selectors/appIDESelectors";
 import { selectJSSegmentEditorList } from "ee/selectors/appIDESelectors";
 import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks";
 import {
@@ -20,9 +19,9 @@ import { useJSAdd } from "ee/pages/Editor/IDE/EditorPane/JS/hooks";
 import { JSListItem } from "ee/pages/Editor/IDE/EditorPane/JS/ListItem";
 import { BlankState } from "./BlankState";
 import { AddAndSearchbar } from "../components/AddAndSearchbar";
-import { fuzzySearchInObjectItems } from "../utils";
 import { EmptySearchResult } from "../components/EmptySearchResult";
 import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages";
+import { filterEntityGroupsBySearchTerm } from "IDE/utils";
 
 const JSContainer = styled(Flex)`
   & .t--entity-item {
@@ -34,17 +33,17 @@ const JSContainer = styled(Flex)`
 const ListJSObjects = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const pageId = useSelector(getCurrentPageId);
-  const files = useSelector(selectJSSegmentEditorList);
+  const itemGroups = useSelector(selectJSSegmentEditorList);
   const activeActionBaseId = useActiveActionBaseId();
   const applicationId = useSelector(getCurrentApplicationId);
 
   const pagePermissions = useSelector(getPagePermissions);
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
-  const localFiles = fuzzySearchInObjectItems<EditorSegmentList>(
+  const filteredItemGroups = filterEntityGroupsBySearchTerm(
     searchTerm,
-    files,
+    itemGroups,
   );
 
   const canCreateActions = getHasCreateActionPermission(
@@ -64,7 +63,7 @@ const ListJSObjects = () => {
       px="spaces-3"
       py="spaces-3"
     >
-      {files && files.length > 0 ? (
+      {itemGroups && itemGroups.length > 0 ? (
         <AddAndSearchbar
           hasAddPermission={canCreateActions}
           onAddClick={openAddJS}
@@ -83,7 +82,7 @@ const ListJSObjects = () => {
           gap="spaces-4"
           overflowY="auto"
         >
-          {localFiles.map(({ group, items }) => {
+          {filteredItemGroups.map(({ group, items }) => {
             return (
               <Flex flexDirection={"column"} key={group}>
                 {group !== "NA" ? (
@@ -112,15 +111,15 @@ const ListJSObjects = () => {
               </Flex>
             );
           })}
-          {localFiles.length === 0 && searchTerm !== "" ? (
+          {filteredItemGroups.length === 0 && searchTerm !== "" ? (
             <EmptySearchResult
               type={createMessage(EDITOR_PANE_TEXTS.search_objects.jsObject)}
             />
           ) : null}
         </Flex>
       </FilesContextProvider>
 
-      {(!files || files.length === 0) && <BlankState />}
+      {(!itemGroups || itemGroups.length === 0) && <BlankState />}
     </JSContainer>
   );
 };

app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx

@@ -9,13 +9,12 @@ import {
   useGroupedAddQueryOperations,
   useQueryAdd,
 } from "ee/pages/Editor/IDE/EditorPane/Query/hooks";
-import { fuzzySearchInObjectItems } from "../utils";
-import type { GroupedListProps } from "../components/types";
 import { EmptySearchResult } from "../components/EmptySearchResult";
 import { useSelector } from "react-redux";
 import { getIDEViewMode } from "selectors/ideSelectors";
 import type { FlexProps } from "@appsmith/ads";
 import { EditorViewMode } from "ee/entities/IDE/constants";
+import { filterEntityGroupsBySearchTerm } from "IDE/utils";
 
 const AddQuery = () => {
   const [searchTerm, setSearchTerm] = useState("");
@@ -24,15 +23,15 @@ const AddQuery = () => {
   const { closeAddQuery } = useQueryAdd();
   const ideViewMode = useSelector(getIDEViewMode);
 
-  const groups = groupedActionOperations.map((group) => ({
+  const itemGroups = groupedActionOperations.map((group) => ({
     groupTitle: group.title,
     className: group.className,
     items: getListItems(group.operations),
   }));
 
-  const localGroups = fuzzySearchInObjectItems<GroupedListProps[]>(
+  const filteredItemGroups = filterEntityGroupsBySearchTerm(
     searchTerm,
-    groups,
+    itemGroups,
   );
 
   const extraPadding: FlexProps =
@@ -63,8 +62,10 @@ const AddQuery = () => {
           titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
         />
         <SearchInput autoFocus onChange={setSearchTerm} value={searchTerm} />
-        {localGroups.length > 0 ? <GroupedList groups={localGroups} /> : null}
-        {localGroups.length === 0 && searchTerm !== "" ? (
+        {filteredItemGroups.length > 0 ? (
+          <GroupedList groups={filteredItemGroups} />
+        ) : null}
+        {filteredItemGroups.length === 0 && searchTerm !== "" ? (
           <EmptySearchResult
             type={createMessage(EDITOR_PANE_TEXTS.search_objects.datasources)}
           />

app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx

@@ -11,7 +11,6 @@ import {
 } from "selectors/editorSelectors";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import type { EditorSegmentList } from "ee/selectors/appIDESelectors";
 import { selectQuerySegmentEditorList } from "ee/selectors/appIDESelectors";
 import { ActionParentEntityType } from "ee/entities/Engine/actionHelpers";
 import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider";
@@ -20,21 +19,21 @@ import { QueryListItem } from "ee/pages/Editor/IDE/EditorPane/Query/ListItem";
 import { getShowWorkflowFeature } from "ee/selectors/workflowSelectors";
 import { BlankState } from "./BlankState";
 import { AddAndSearchbar } from "../components/AddAndSearchbar";
-import { fuzzySearchInObjectItems } from "../utils";
 import { EmptySearchResult } from "../components/EmptySearchResult";
 import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages";
+import { filterEntityGroupsBySearchTerm } from "IDE/utils";
 
 const ListQuery = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const pageId = useSelector(getCurrentPageId) as string;
-  const files = useSelector(selectQuerySegmentEditorList);
+  const itemGroups = useSelector(selectQuerySegmentEditorList);
   const activeActionBaseId = useActiveActionBaseId();
   const pagePermissions = useSelector(getPagePermissions);
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
-  const localFiles = fuzzySearchInObjectItems<EditorSegmentList>(
+  const filteredItemGroups = filterEntityGroupsBySearchTerm(
     searchTerm,
-    files,
+    itemGroups,
   );
 
   const canCreateActions = getHasCreateActionPermission(
@@ -55,15 +54,15 @@ const ListQuery = () => {
       px="spaces-3"
       py="spaces-3"
     >
-      {files.length > 0 ? (
+      {itemGroups.length > 0 ? (
         <AddAndSearchbar
           hasAddPermission={canCreateActions}
           onAddClick={openAddQuery}
           onSearch={setSearchTerm}
         />
       ) : null}
       <Flex flexDirection={"column"} gap="spaces-4" overflowY="auto">
-        {localFiles.map(({ group, items }) => {
+        {filteredItemGroups.map(({ group, items }) => {
           return (
             <Flex flexDirection={"column"} key={group}>
               <Flex py="spaces-1">
@@ -96,14 +95,14 @@ const ListQuery = () => {
             </Flex>
           );
         })}
-        {localFiles.length === 0 && searchTerm !== "" ? (
+        {filteredItemGroups.length === 0 && searchTerm !== "" ? (
           <EmptySearchResult
             type={createMessage(EDITOR_PANE_TEXTS.search_objects.queries)}
           />
         ) : null}
       </Flex>
 
-      {Object.keys(files).length === 0 && <BlankState />}
+      {Object.keys(itemGroups).length === 0 && <BlankState />}
     </Flex>
   );
 };