feat: IDE tab list search view

app/client/cypress/support/Pages/JSEditor.ts

@@ -105,7 +105,7 @@ export class JSEditor {
     this.agHelper.ClickOutside(); //to enable click of below!
     AppSidebar.navigate(AppSidebarButton.Editor);
     PageLeftPane.switchSegment(PagePaneSegment.JS);
-    cy.get(this._newJSobj).eq(0).click({ force: true });
+    PageLeftPane.switchToAddNew();
 
     this.agHelper.RemoveUIElement(
       "Tooltip",

app/client/package.json

@@ -119,7 +119,7 @@
     "d3-geo": "^3.1.0",
     "dayjs": "^1.10.6",
     "deep-diff": "^1.0.2",
-    "design-system": "npm:@appsmithorg/[email protected].42",
+    "design-system": "npm:@appsmithorg/[email protected].43",
     "design-system-old": "npm:@appsmithorg/[email protected]",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",

app/client/src/ce/constants/messages.ts

@@ -2315,6 +2315,7 @@ export const EDITOR_PANE_TEXTS = {
   queries_create_from_existing: () => "From existing datasource",
   queries_create_new: () => "New API",
   loading_building_blocks: () => "Loading building blocks",
+  empty_search_result: (type: string) => `No ${type} match your search`,
 };
 
 export const PARTIAL_IMPORT_EXPORT = {

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

@@ -21,6 +21,7 @@ const BlankState: React.FC = () => {
   return (
     <EmptyState
       buttonClassName="t--add-item"
+      buttonTestId="t--add-item"
       buttonText={createMessage(EDITOR_PANE_TEXTS.js_add_button)}
       description={createMessage(EDITOR_PANE_TEXTS.js_blank_state_description)}
       icon={"js-square-v3"}

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

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
-import { Button, Flex, Text } from "design-system";
+import { Flex, Text } from "design-system";
 import styled from "styled-components";
 
 import { selectJSSegmentEditorList } from "@appsmith/selectors/appIDESelectors";
@@ -13,12 +13,14 @@ import {
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
-import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { ActionParentEntityType } from "@appsmith/entities/Engine/actionHelpers";
 import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider";
 import { useJSAdd } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import { JSListItem } from "@appsmith/pages/Editor/IDE/EditorPane/JS/ListItem";
 import { BlankState } from "./BlankState";
+import { AddAndSearchbar } from "../components/AddAndSearchbar";
+import { fuzzySearchInFiles } from "../utils";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 
 const JSContainer = styled(Flex)`
   & .t--entity-item {
@@ -32,15 +34,18 @@ const JSContainer = styled(Flex)`
 `;
 
 const ListJSObjects = () => {
+  const [searchTerm, setSearchTerm] = useState("");
   const pageId = useSelector(getCurrentPageId);
-  const jsList = useSelector(selectJSSegmentEditorList);
+  const files = useSelector(selectJSSegmentEditorList);
   const activeActionId = useActiveAction();
   const applicationId = useSelector(getCurrentApplicationId);
 
   const pagePermissions = useSelector(getPagePermissions);
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
+  const localFiles = fuzzySearchInFiles(searchTerm, files);
+
   const canCreateActions = getHasCreateActionPermission(
     isFeatureEnabled,
     pagePermissions,
@@ -57,19 +62,13 @@ const ListJSObjects = () => {
       overflow="hidden"
       py="spaces-3"
     >
-      {jsList && jsList.length > 0 && canCreateActions && (
-        <Flex flexDirection="column" px="spaces-3">
-          <Button
-            className="t--add-item"
-            kind={"secondary"}
-            onClick={openAddJS}
-            size={"sm"}
-            startIcon={"add-line"}
-          >
-            {createMessage(EDITOR_PANE_TEXTS.js_add_button)}
-          </Button>
-        </Flex>
-      )}
+      {files && files.length > 0 ? (
+        <AddAndSearchbar
+          hasAddPermission={canCreateActions}
+          onAddClick={openAddJS}
+          onSearch={setSearchTerm}
+        />
+      ) : null}
       <FilesContextProvider
         canCreateActions={canCreateActions}
         editorId={applicationId}
@@ -83,7 +82,7 @@ const ListJSObjects = () => {
           overflowY="auto"
           px="spaces-3"
         >
-          {jsList.map(({ group, items }) => {
+          {localFiles.map(({ group, items }) => {
             return (
               <Flex flexDirection={"column"} key={group}>
                 {group !== "NA" ? (
@@ -112,10 +111,19 @@ const ListJSObjects = () => {
               </Flex>
             );
           })}
+          {localFiles.length === 0 && searchTerm !== "" ? (
+            <Text
+              className="font-normal text-center"
+              color="var(--ads-v2-color-fg-muted)"
+              kind="body-s"
+            >
+              {createMessage(EDITOR_PANE_TEXTS.empty_search_result, "JS")}
+            </Text>
+          ) : null}
         </Flex>
       </FilesContextProvider>
 
-      {(!jsList || jsList.length === 0) && <BlankState />}
+      {(!files || files.length === 0) && <BlankState />}
     </JSContainer>
   );
 };

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

@@ -21,6 +21,7 @@ const BlankState: React.FC = () => {
   return (
     <EmptyState
       buttonClassName="t--add-item"
+      buttonTestId="t--add-item"
       buttonText={createMessage(EDITOR_PANE_TEXTS.query_add_button)}
       description={createMessage(
         EDITOR_PANE_TEXTS.query_blank_state_description,

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { Button, Flex, Text } from "design-system";
+import React, { useState } from "react";
+import { Flex, Text } from "design-system";
 import { useSelector } from "react-redux";
 
 import { getHasCreateActionPermission } from "@appsmith/utils/BusinessFeatures/permissionPageHelpers";
@@ -14,19 +14,24 @@ import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
 import { selectQuerySegmentEditorList } from "@appsmith/selectors/appIDESelectors";
 import { ActionParentEntityType } from "@appsmith/entities/Engine/actionHelpers";
 import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider";
-import { createMessage, EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
 import { useQueryAdd } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
 import { QueryListItem } from "@appsmith/pages/Editor/IDE/EditorPane/Query/ListItem";
 import { getShowWorkflowFeature } from "@appsmith/selectors/workflowSelectors";
 import { BlankState } from "./BlankState";
+import { AddAndSearchbar } from "../components/AddAndSearchbar";
+import { fuzzySearchInFiles } from "../utils";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 
 const ListQuery = () => {
+  const [searchTerm, setSearchTerm] = useState("");
   const pageId = useSelector(getCurrentPageId) as string;
   const files = useSelector(selectQuerySegmentEditorList);
   const activeActionId = useActiveAction();
   const pagePermissions = useSelector(getPagePermissions);
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
+  const localFiles = fuzzySearchInFiles(searchTerm, files);
+
   const canCreateActions = getHasCreateActionPermission(
     isFeatureEnabled,
     pagePermissions,
@@ -44,26 +49,20 @@ const ListQuery = () => {
       overflow="hidden"
       py="spaces-3"
     >
-      {files.length > 0 && canCreateActions && (
-        <Flex flexDirection={"column"} px="spaces-3">
-          <Button
-            className="t--add-item"
-            kind={"secondary"}
-            onClick={openAddQuery}
-            size={"sm"}
-            startIcon={"add-line"}
-          >
-            {createMessage(EDITOR_PANE_TEXTS.query_add_button)}
-          </Button>
-        </Flex>
-      )}
+      {files.length > 0 ? (
+        <AddAndSearchbar
+          hasAddPermission={canCreateActions}
+          onAddClick={openAddQuery}
+          onSearch={setSearchTerm}
+        />
+      ) : null}
       <Flex
         flexDirection={"column"}
         gap="spaces-4"
         overflowY="auto"
         px="spaces-3"
       >
-        {files.map(({ group, items }) => {
+        {localFiles.map(({ group, items }) => {
           return (
             <Flex flexDirection={"column"} key={group}>
               <Flex px="spaces-3" py="spaces-1">
@@ -96,6 +95,15 @@ const ListQuery = () => {
             </Flex>
           );
         })}
+        {localFiles.length === 0 && searchTerm !== "" ? (
+          <Text
+            className="font-normal text-center"
+            color="var(--ads-v2-color-fg-muted)"
+            kind="body-s"
+          >
+            {createMessage(EDITOR_PANE_TEXTS.empty_search_result, "queries")}
+          </Text>
+        ) : null}
       </Flex>
 
       {Object.keys(files).length === 0 && <BlankState />}

app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx

@@ -171,7 +171,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByRole("button", { name: "New query / API" });
+      getByTestId("t--add-item");
     });
 
     it("Renders Api routes in Split Screen", async () => {
@@ -346,7 +346,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByRole("button", { name: "New query / API" });
+      getByTestId("t--add-item");
     });
     it("Renders Postgres routes in Split screen", async () => {
       const page = PageFactory.build();
@@ -537,7 +537,7 @@ describe("IDE URL rendering of Queries", () => {
       // Check if run button is visible
       getByRole("button", { name: /run/i });
       // Check if the Add new button is shown
-      getByRole("button", { name: "New query / API" });
+      getByTestId("t--add-item");
     });
     it("Renders Google Sheets routes in Split screen", async () => {
       const page = PageFactory.build();

app/client/src/pages/Editor/IDE/EditorPane/components/AddAndSearchbar.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Flex, Button, SearchInput } from "design-system";
+
+interface Props {
+  onAddClick: () => void;
+  hasAddPermission: boolean;
+  onSearch: (value: string) => void;
+}
+
+const AddAndSearchbar = ({ hasAddPermission, onAddClick, onSearch }: Props) => {
+  return (
+    <Flex alignItems="center" flexDirection="row" gap="spaces-3" px="spaces-3">
+      <SearchInput onChange={onSearch} size="sm" />
+      {hasAddPermission ? (
+        <Button
+          className="t--add-item !min-w-[24px]"
+          data-testid="t--add-item"
+          isIconButton
+          kind={"secondary"}
+          onClick={onAddClick}
+          size={"sm"}
+          startIcon={"add-line"}
+        />
+      ) : null}
+    </Flex>
+  );
+};
+
+export { AddAndSearchbar };

app/client/src/pages/Editor/IDE/EditorPane/components/EmptyState.tsx

@@ -7,10 +7,12 @@ interface EmptyStateProps {
   buttonText: string;
   onClick?: () => void;
   buttonClassName?: string;
+  buttonTestId?: string;
 }
 
 const EmptyState = ({
   buttonClassName,
+  buttonTestId,
   buttonText,
   description,
   icon,
@@ -46,6 +48,7 @@ const EmptyState = ({
       {onClick && (
         <Button
           className={buttonClassName}
+          data-testid={buttonTestId}
           kind={"secondary"}
           onClick={onClick}
           size={"sm"}

app/client/src/pages/Editor/IDE/EditorPane/fuzzySearchInFiles.test.ts

@@ -0,0 +1,47 @@
+import type { EditorSegmentList } from "@appsmith/selectors/appIDESelectors";
+import { fuzzySearchInFiles } from "./utils";
+import { PluginType } from "entities/Action";
+
+const sampleFiles: EditorSegmentList = [
+  {
+    group: "Group 1",
+    items: [
+      { title: "file1.js", type: PluginType.API, key: "file1" },
+      { title: "file2.js", type: PluginType.API, key: "file2" },
+    ],
+  },
+  {
+    group: "Group 2",
+    items: [
+      { title: "file3.js", type: PluginType.API, key: "file3" },
+      { title: "file4.js", type: PluginType.API, key: "file4" },
+    ],
+  },
+];
+
+describe("fuzzySearchInFiles", () => {
+  it("should return all files when the search string is empty", () => {
+    const result = fuzzySearchInFiles("", sampleFiles);
+    expect(result).toEqual(sampleFiles);
+  });
+
+  it("should return the correct file when the search string exactly matches a file title", () => {
+    const result = fuzzySearchInFiles("file1", sampleFiles);
+    expect(result).toEqual([
+      {
+        group: "Group 1",
+        items: [{ title: "file1.js", type: PluginType.API, key: "file1" }],
+      },
+    ]);
+  });
+
+  it("should return an empty array when no files match the search string", () => {
+    const result = fuzzySearchInFiles("nonexistentfile", sampleFiles);
+    expect(result).toEqual([]);
+  });
+
+  it("should return all files containing the common substring in their titles", () => {
+    const result = fuzzySearchInFiles("file", sampleFiles);
+    expect(result).toEqual(sampleFiles);
+  });
+});

app/client/src/pages/Editor/IDE/EditorPane/utils.ts

@@ -1,3 +1,30 @@
+import Fuse from "fuse.js";
+import type { EditorSegmentList } from "@appsmith/selectors/appIDESelectors";
+
 export const createAddClassName = (name: string) => {
   return "t--datasoucre-create-option-" + name.toLowerCase().replace(/ /g, "_");
 };
+
+const FUSE_OPTIONS = {
+  shouldSort: true,
+  threshold: 0.1,
+  keys: ["title"],
+};
+
+export const fuzzySearchInFiles = (
+  searchStr: string,
+  files: EditorSegmentList,
+) => {
+  if (searchStr && searchStr !== "") {
+    const newFiles = files
+      .map((group) => {
+        const fuse = new Fuse(group.items, FUSE_OPTIONS);
+        const resultItems = fuse.search(searchStr);
+        return { ...group, items: resultItems };
+      })
+      .filter((group) => group.items.length > 0);
+    return newFiles;
+  }
+
+  return files;
+};