feat: Updated new tab ui with search and load more (#34981)

## Description Updated new tab ui with search, load more and updated titles. Fixes #34809, #34530 ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10036807357> > Commit: 2d37c01 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10036807357&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Mon, 22 Jul 2024 08:46:24 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No  ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Added search functionality in the JS and Query Editor Panes to filter and display grouped items based on search terms. - Introduced a new component to render grouped lists with dynamic load more functionality. - **Enhancements** - Improved text and terminology for clearer user understanding in various modules. - Enhanced layout alignment by adjusting component heights to account for editor tabs. - **Refactor** - Improved type safety and refined logic in multiple functions for better performance and maintainability. - Replaced hardcoded values with constants for consistent and easier management.
appsmithorg · Jul 23, 2024 · 5127005 · 5127005
1 parent a38ef9a
commit 5127005
Show file tree

Hide file tree

Showing 18 changed files with 238 additions and 97 deletions.
diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts
@@ -2312,10 +2312,17 @@ export const EDITOR_PANE_TEXTS = {
   query_create_tab_title: () => "Create new query from",
   widgets_create_tab_title: () => "Drag & drop UI elements",
   js_create_tab_title: () => "Create JS object from",
-  queries_create_from_existing: () => "From existing datasource",
-  queries_create_new: () => "New API",
+  js_create_modules: () => "JS modules (Beta)",
+  queries_create_from_existing: () => "Datasources",
+  queries_create_new: () => "Quick actions",
+  queries_create_modules: () => "Query modules (Beta)",
   loading_building_blocks: () => "Loading building blocks",
   empty_search_result: (type: string) => `No ${type} match your search`,
+  search_objects: {
+    jsObject: () => "JS object",
+    queries: () => "queries",
+    datasources: () => "datasources",
+  },
 };
 
 export const PARTIAL_IMPORT_EXPORT = {

diff --git a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import history from "utils/history";
 import { useLocation } from "react-router";
 import { FocusEntity, identifyEntityFromPath } from "navigation/FocusEntity";
@@ -33,7 +33,7 @@ import ListQuery from "pages/Editor/IDE/EditorPane/Query/List";
 import type { AppState } from "@appsmith/reducers";
 import keyBy from "lodash/keyBy";
 import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
-import { Tag, type ListItemProps } from "design-system";
+import type { ListItemProps } from "design-system";
 import { useCurrentEditorState } from "pages/Editor/IDE/hooks";
 import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
 import { QueriesBlankState } from "pages/Editor/QueryEditor/QueriesBlankState";
@@ -182,12 +182,16 @@ export const useAddQueryListItems = () => {
     [pageId, dispatch],
   );
 
-  const getListItems = (data: any[]) => {
+  const getListItems = (data: ActionOperation[]) => {
     return data.map((fileOperation) => {
-      const title =
+      let title =
         fileOperation.entityExplorerTitle ||
         fileOperation.dsName ||
         fileOperation.title;
+      title =
+        fileOperation.focusEntityType === FocusEntity.QUERY_MODULE_INSTANCE
+          ? fileOperation.title
+          : title;
       const className = createAddClassName(title);
       const icon =
         fileOperation.icon ||
@@ -197,11 +201,10 @@ export const useAddQueryListItems = () => {
         startIcon: icon,
         wrapperClassName: className,
         title,
-        description: !!fileOperation.isBeta ? (
-          <Tag isClosable={false}>Beta</Tag>
-        ) : (
-          ""
-        ),
+        description:
+          fileOperation.focusEntityType === FocusEntity.QUERY_MODULE_INSTANCE
+            ? fileOperation.dsName
+            : "",
         descriptionType: "inline",
         onClick: onCreateItemClick.bind(null, fileOperation),
       } as ListItemProps;

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import SegmentAddHeader from "../components/SegmentAddHeader";
-import { EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 import type { ListItemProps } from "design-system";
-import { Flex, Tag } from "design-system";
+import { Flex, SearchInput } from "design-system";
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import GroupedList from "../components/GroupedList";
@@ -12,11 +12,15 @@ import {
 } from "@appsmith/pages/Editor/IDE/EditorPane/JS/hooks";
 import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils";
 import type { AddProps } from "../types/AddProps";
-import { createAddClassName } from "../utils";
+import { createAddClassName, fuzzySearchInObjectItems } from "../utils";
+import { FocusEntity } from "navigation/FocusEntity";
+import type { GroupedListProps } from "../components/types";
+import { EmptySearchResult } from "../components/EmptySearchResult";
 
 const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
   const dispatch = useDispatch();
   const pageId = useSelector(getCurrentPageId);
+  const [searchTerm, setSearchTerm] = useState("");
 
   const groupedJsOperations = useGroupedAddJsOperations();
 
@@ -35,13 +39,29 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
     return {
       startIcon: data.icon,
       title,
-      description: !!data.isBeta ? <Tag isClosable={false}>Beta</Tag> : "",
+      description:
+        data.focusEntityType === FocusEntity.JS_MODULE_INSTANCE
+          ? data.dsName
+          : "",
       descriptionType: "inline",
       onClick: onCreateItemClick.bind(null, data),
       wrapperClassName: createAddClassName(title),
     } as ListItemProps;
   };
 
+  const groups = groupedJsOperations.map(
+    ({ className, operations, title }) => ({
+      groupTitle: title,
+      className: className,
+      items: operations.map(getListItems),
+    }),
+  );
+
+  const localGroups = fuzzySearchInObjectItems<GroupedListProps[]>(
+    searchTerm,
+    groups,
+  );
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
@@ -61,14 +81,13 @@ const AddJS = ({ containerProps, innerContainerProps }: AddProps) => {
           onCloseClick={closeAddJS}
           titleMessage={EDITOR_PANE_TEXTS.js_create_tab_title}
         />
-
-        <GroupedList
-          groups={groupedJsOperations.map((op) => ({
-            groupTitle: op.title,
-            className: op.className,
-            items: op.operations.map(getListItems),
-          }))}
-        />
+        <SearchInput onChange={setSearchTerm} value={searchTerm} />
+        {localGroups.length > 0 ? <GroupedList groups={localGroups} /> : null}
+        {localGroups.length === 0 && searchTerm !== "" ? (
+          <EmptySearchResult
+            type={createMessage(EDITOR_PANE_TEXTS.search_objects.jsObject)}
+          />
+        ) : null}
       </Flex>
     </Flex>
   );

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
@@ -3,6 +3,7 @@ import { useSelector } from "react-redux";
 import { Flex, Text } from "design-system";
 import styled from "styled-components";
 
+import type { EditorSegmentList } from "@appsmith/selectors/appIDESelectors";
 import { selectJSSegmentEditorList } from "@appsmith/selectors/appIDESelectors";
 import { useActiveAction } from "@appsmith/pages/Editor/Explorer/hooks";
 import {
@@ -19,7 +20,8 @@ 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 { fuzzySearchInObjectItems } from "../utils";
+import { EmptySearchResult } from "../components/EmptySearchResult";
 import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 
 const JSContainer = styled(Flex)`
@@ -44,7 +46,10 @@ const ListJSObjects = () => {
 
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
-  const localFiles = fuzzySearchInFiles(searchTerm, files);
+  const localFiles = fuzzySearchInObjectItems<EditorSegmentList>(
+    searchTerm,
+    files,
+  );
 
   const canCreateActions = getHasCreateActionPermission(
     isFeatureEnabled,
@@ -112,13 +117,9 @@ const ListJSObjects = () => {
             );
           })}
           {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>
+            <EmptySearchResult
+              type={createMessage(EDITOR_PANE_TEXTS.search_objects.jsObject)}
+            />
           ) : null}
         </Flex>
       </FilesContextProvider>

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import { Flex } from "design-system";
+import React, { useState } from "react";
+import { Flex, SearchInput } from "design-system";
 
-import { EDITOR_PANE_TEXTS } from "@appsmith/constants/messages";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 import SegmentAddHeader from "../components/SegmentAddHeader";
 import GroupedList from "../components/GroupedList";
 import {
@@ -10,12 +10,27 @@ import {
   useQueryAdd,
 } from "@appsmith/pages/Editor/IDE/EditorPane/Query/hooks";
 import type { AddProps } from "../types/AddProps";
+import { fuzzySearchInObjectItems } from "../utils";
+import type { GroupedListProps } from "../components/types";
+import { EmptySearchResult } from "../components/EmptySearchResult";
 
 const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
+  const [searchTerm, setSearchTerm] = useState("");
   const { getListItems } = useAddQueryListItems();
   const groupedActionOperations = useGroupedAddQueryOperations();
   const { closeAddQuery } = useQueryAdd();
 
+  const groups = groupedActionOperations.map((group) => ({
+    groupTitle: group.title,
+    className: group.className,
+    items: getListItems(group.operations),
+  }));
+
+  const localGroups = fuzzySearchInObjectItems<GroupedListProps[]>(
+    searchTerm,
+    groups,
+  );
+
   return (
     <Flex
       data-testid="t--ide-add-pane"
@@ -35,13 +50,13 @@ const AddQuery = ({ containerProps, innerContainerProps }: AddProps) => {
           onCloseClick={closeAddQuery}
           titleMessage={EDITOR_PANE_TEXTS.query_create_tab_title}
         />
-        <GroupedList
-          groups={groupedActionOperations.map((group) => ({
-            groupTitle: group.title,
-            className: group.className,
-            items: getListItems(group.operations),
-          }))}
-        />
+        <SearchInput autofocus onChange={setSearchTerm} value={searchTerm} />
+        {localGroups.length > 0 ? <GroupedList groups={localGroups} /> : null}
+        {localGroups.length === 0 && searchTerm !== "" ? (
+          <EmptySearchResult
+            type={createMessage(EDITOR_PANE_TEXTS.search_objects.datasources)}
+          />
+        ) : null}
       </Flex>
     </Flex>
   );

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
@@ -11,6 +11,7 @@ import {
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { getCurrentPageId } from "@appsmith/selectors/entitiesSelector";
+import type { EditorSegmentList } from "@appsmith/selectors/appIDESelectors";
 import { selectQuerySegmentEditorList } from "@appsmith/selectors/appIDESelectors";
 import { ActionParentEntityType } from "@appsmith/entities/Engine/actionHelpers";
 import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextProvider";
@@ -19,7 +20,8 @@ import { QueryListItem } from "@appsmith/pages/Editor/IDE/EditorPane/Query/ListI
 import { getShowWorkflowFeature } from "@appsmith/selectors/workflowSelectors";
 import { BlankState } from "./BlankState";
 import { AddAndSearchbar } from "../components/AddAndSearchbar";
-import { fuzzySearchInFiles } from "../utils";
+import { fuzzySearchInObjectItems } from "../utils";
+import { EmptySearchResult } from "../components/EmptySearchResult";
 import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
 
 const ListQuery = () => {
@@ -30,7 +32,10 @@ const ListQuery = () => {
   const pagePermissions = useSelector(getPagePermissions);
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
 
-  const localFiles = fuzzySearchInFiles(searchTerm, files);
+  const localFiles = fuzzySearchInObjectItems<EditorSegmentList>(
+    searchTerm,
+    files,
+  );
 
   const canCreateActions = getHasCreateActionPermission(
     isFeatureEnabled,
@@ -92,13 +97,9 @@ const ListQuery = () => {
           );
         })}
         {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>
+          <EmptySearchResult
+            type={createMessage(EDITOR_PANE_TEXTS.search_objects.jsObject)}
+          />
         ) : null}
       </Flex>
 

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Text } from "design-system";
+import { EDITOR_PANE_TEXTS, createMessage } from "@appsmith/constants/messages";
+
+const EmptySearchResult = ({ type }: { type: string }) => {
+  return (
+    <Text
+      className="font-normal text-center"
+      color="var(--ads-v2-color-fg-muted)"
+      kind="body-s"
+    >
+      {createMessage(EDITOR_PANE_TEXTS.empty_search_result, type)}
+    </Text>
+  );
+};
+
+export { EmptySearchResult };