diff --git a/app/client/packages/design-system/ads/src/List/List.stories.tsx b/app/client/packages/design-system/ads/src/List/List.stories.tsx
index 2b86c011a0..fbeb7039c0 100644
--- a/app/client/packages/design-system/ads/src/List/List.stories.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.stories.tsx
@@ -26,39 +26,47 @@ const ListTemplate = (args: ListProps) => {
return
;
};
+const items = [
+ {
+ startIcon: ,
+ title: "Action item 1",
+ },
+ {
+ startIcon: ,
+ title: "Action item 2",
+ },
+ {
+ startIcon: ,
+ title: "Action item 3",
+ },
+ {
+ startIcon: ,
+ title: "Action item 4",
+ },
+ {
+ startIcon: ,
+ title: "Action item 5",
+ },
+ {
+ startIcon: ,
+ title: "Action item 6",
+ },
+ {
+ startIcon: ,
+ title: "Action item 7",
+ },
+];
+
export const ListStory = ListTemplate.bind({}) as StoryObj;
ListStory.storyName = "List";
ListStory.args = {
- items: [
- {
- startIcon: ,
- title: "Action item 1",
- },
- {
- startIcon: ,
- title: "Action item 2",
- },
- {
- startIcon: ,
- title: "Action item 3",
- },
- {
- startIcon: ,
- title: "Action item 4",
- },
- {
- startIcon: ,
- title: "Action item 5",
- },
- {
- startIcon: ,
- title: "Action item 6",
- },
- {
- startIcon: ,
- title: "Action item 7",
- },
- ],
+ children: items.map((item) => (
+ alert("Clicked")}
+ />
+ )),
};
const ListItemArgTypes = {
diff --git a/app/client/packages/design-system/ads/src/List/List.styles.tsx b/app/client/packages/design-system/ads/src/List/List.styles.tsx
index adb2867559..15efd1bf33 100644
--- a/app/client/packages/design-system/ads/src/List/List.styles.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.styles.tsx
@@ -6,6 +6,8 @@ import {
ListItemTextOverflowClassName,
ListItemTitleClassName,
} from "./List.constants";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
const Variables = css`
--listitem-title-font-size: var(--ads-v2-font-size-4);
@@ -71,7 +73,6 @@ export const StyledList = styled.div`
padding: var(--ads-v2-spaces-1);
display: flex;
flex-direction: column;
- gap: var(--ads-v2-spaces-2);
`;
export const StyledListItem = styled.div<{
@@ -159,3 +160,22 @@ export const StyledListItem = styled.div<{
padding-right: var(--ads-v2-spaces-2);
}
`;
+
+export const StyledGroup = styled(Flex)`
+ & .ads-v2-listitem .ads-v2-listitem__idesc {
+ opacity: 0;
+ }
+
+ & .ads-v2-listitem:hover .ads-v2-listitem__idesc {
+ opacity: 1;
+ }
+`;
+
+export const GroupedList = styled(StyledList)`
+ padding: 0;
+`;
+
+export const GroupTitle = styled(Text)`
+ padding: var(--ads-v2-spaces-1) 0;
+ color: var(--ads-v2-color-fg-muted);
+`;
diff --git a/app/client/packages/design-system/ads/src/List/List.tsx b/app/client/packages/design-system/ads/src/List/List.tsx
index 95b905e7e6..18240c8a78 100644
--- a/app/client/packages/design-system/ads/src/List/List.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.tsx
@@ -4,8 +4,11 @@ import clsx from "classnames";
import type { ListItemProps, ListProps } from "./List.types";
import {
BottomContentWrapper,
+ GroupedList,
+ GroupTitle,
InlineDescriptionWrapper,
RightControlWrapper,
+ StyledGroup,
StyledList,
StyledListItem,
TooltipTextWrapper,
@@ -24,12 +27,15 @@ import {
} from "./List.constants";
import { useEventCallback } from "usehooks-ts";
-function List({ className, items, ...rest }: ListProps) {
- return (
+function List({ children, className, groupTitle, ...rest }: ListProps) {
+ return groupTitle ? (
+
+ {groupTitle}
+ {children}
+
+ ) : (
- {items.map((item) => {
- return ;
- })}
+ {children}
);
}
diff --git a/app/client/packages/design-system/ads/src/List/List.types.tsx b/app/client/packages/design-system/ads/src/List/List.types.tsx
index 282d463f7b..e48ab57b19 100644
--- a/app/client/packages/design-system/ads/src/List/List.types.tsx
+++ b/app/client/packages/design-system/ads/src/List/List.types.tsx
@@ -39,7 +39,8 @@ export interface ListItemProps {
}
export interface ListProps {
- items: ListItemProps[];
className?: string;
id?: string;
+ children: ReactNode | ReactNode[];
+ groupTitle?: string;
}
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.stories.tsx
new file mode 100644
index 0000000000..0f0f6ad5ba
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.stories.tsx
@@ -0,0 +1,185 @@
+/* eslint-disable no-console */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { EntityGroupsList, EntityGroup } from "./EntityGroupsList";
+import type {
+ EntityGroupsListProps,
+ EntityGroupProps,
+} from "./EntityGroupsList.types";
+import { Icon } from "../../../Icon";
+
+const meta: Meta = {
+ title: "ADS/Templates/Entity Explorer/Entity Groups List",
+ component: EntityGroupsList,
+};
+
+export default meta;
+
+const EntityGroupTemplate = (props: EntityGroupProps) => {
+ const { addConfig, className, groupTitle, items } = props;
+
+ return ;
+};
+
+export const SingleGroupWithAddNLazyLoad = EntityGroupTemplate.bind(
+ {},
+) as StoryObj;
+
+SingleGroupWithAddNLazyLoad.args = {
+ groupTitle: "Datasources",
+ className: "t--from-source-list",
+ items: [
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-users",
+ title: "Users",
+ onClick: () => console.log("Users clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-movies",
+ title: "Movies",
+ onClick: () => console.log("Movies clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_1",
+ title: "Untitled datasource 1",
+ onClick: () => console.log("Untitled datasource 1 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_2",
+ title: "Untitled datasource 2",
+ onClick: () => console.log("Untitled datasource 2 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_3",
+ title: "Untitled datasource 3",
+ onClick: () => console.log("Untitled datasource 3 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_4",
+ title: "Untitled datasource 4",
+ onClick: () => console.log("Untitled datasource 4 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-users_(1)",
+ title: "Users (1)",
+ onClick: () => console.log("Users(1) clicked"),
+ },
+ ],
+ addConfig: {
+ icon: ,
+ title: "New datasource",
+ onClick: () => console.log("New datasource clicked"),
+ },
+};
+
+const EntityGroupsListTemplate = (props: EntityGroupsListProps) => {
+ const { groups } = props;
+
+ return ;
+};
+
+export const MultipleGroupsWithAddNLazyLoad = EntityGroupsListTemplate.bind(
+ {},
+) as StoryObj;
+
+MultipleGroupsWithAddNLazyLoad.args = {
+ groups: [
+ {
+ groupTitle: "Datasources",
+ className: "t--from-source-list",
+ items: [
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-users",
+ title: "Users",
+ onClick: () => console.log("Users clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-movies",
+ title: "Movies",
+ onClick: () => console.log("Movies clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_1",
+ title: "Untitled datasource 1",
+ onClick: () => console.log("Untitled datasource 1 clicked"),
+ },
+ ],
+ addConfig: {
+ icon: ,
+ title: "New datasource",
+ onClick: () => console.log("New datasource clicked"),
+ },
+ },
+ {
+ groupTitle: "Apis",
+ className: "t--from-source-list",
+ items: [
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-users",
+ title: "Users",
+ onClick: () => console.log("Users clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-movies",
+ title: "Movies",
+ onClick: () => console.log("Movies clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_1",
+ title: "Untitled datasource 1",
+ onClick: () => console.log("Untitled datasource 1 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_2",
+ title: "Untitled datasource 2",
+ onClick: () => console.log("Untitled datasource 2 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_3",
+ title: "Untitled datasource 3",
+ onClick: () => console.log("Untitled datasource 3 clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-untitled_datasource_4",
+ title: "Untitled datasource 4",
+ onClick: () => console.log("Untitled datasource 4 clicked"),
+ },
+ ],
+ },
+ {
+ groupTitle: "Apis",
+ className: "t--from-source-list",
+ items: [
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-users",
+ title: "Users",
+ onClick: () => console.log("Users clicked"),
+ },
+ {
+ startIcon: ,
+ className: "t--datasource-create-option-movies",
+ title: "Movies",
+ onClick: () => console.log("Movies clicked"),
+ },
+ ],
+ },
+ ],
+};
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.styles.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.styles.ts
new file mode 100644
index 0000000000..6e6e06b316
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.styles.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { ListItem } from "../../../List";
+
+export const LoadMore = styled(ListItem)`
+ .ads-v2-listitem__title {
+ color: var(--ads-v2-color-fg-subtle);
+ }
+`;
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx
new file mode 100644
index 0000000000..9493867fa5
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.tsx
@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import { LoadMore } from "./EntityGroupsList.styles";
+import type {
+ EntityGroupProps,
+ EntityGroupsListProps,
+} from "./EntityGroupsList.types";
+import { Flex } from "../../../Flex";
+import { List, ListItem, type ListItemProps } from "../../../List";
+import { Divider } from "../../../Divider";
+
+const EntityGroupsList = (props: EntityGroupsListProps) => {
+ const { flexProps, groups, showDivider } = props;
+
+ return (
+
+ {groups.map((group, index) => (
+
+
+ {showDivider && index < groups.length - 1 && (
+
+ )}
+
+ ))}
+
+ );
+};
+
+const EntityGroup = ({ group }: { group: EntityGroupProps }) => {
+ const [visibleItemsCount, setVisibleItemsCount] = React.useState(5);
+
+ const lazyLoading = useMemo(() => {
+ return {
+ visibleItemsCount,
+ hasMore: visibleItemsCount < group.items.length,
+ handleLoadMore: () => setVisibleItemsCount(group.items.length),
+ };
+ }, [visibleItemsCount, group.items.length]);
+
+ const updatedGroup = lazyLoading.hasMore
+ ? {
+ ...group,
+ items: group.items.slice(0, lazyLoading.visibleItemsCount),
+ }
+ : group;
+
+ return (
+
+
+ {updatedGroup.items.map((item: T, index) =>
+ group.renderList ? (
+ group.renderList(item)
+ ) : (
+
+ ),
+ )}
+
+ {lazyLoading?.hasMore && (
+
+ )}
+ {group.addConfig && (
+
+ )}
+
+ );
+};
+
+export { EntityGroup, EntityGroupsList };
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts
new file mode 100644
index 0000000000..84fdad7103
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/EntityGroupsList.types.ts
@@ -0,0 +1,19 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { FlexProps } from "../../../Flex";
+export interface EntityGroupProps {
+ groupTitle: string;
+ className: string;
+ items: T[];
+ addConfig?: {
+ icon: ReactNode;
+ title: string;
+ onClick: (e: MouseEvent) => void;
+ };
+ renderList?: (item: T) => React.ReactNode;
+}
+
+export interface EntityGroupsListProps {
+ groups: EntityGroupProps[];
+ flexProps?: FlexProps;
+ showDivider?: boolean;
+}
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/index.ts
new file mode 100644
index 0000000000..abd7595e14
--- /dev/null
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityGroupsList/index.ts
@@ -0,0 +1,5 @@
+export { EntityGroup, EntityGroupsList } from "./EntityGroupsList";
+export type {
+ EntityGroupProps,
+ EntityGroupsListProps,
+} from "./EntityGroupsList.types";
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts
index 7f3dc03d3f..b857f670eb 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EntityItem/index.ts
@@ -1 +1,2 @@
export { EntityItem } from "./EntityItem";
+export type { EntityItemProps } from "./EntityItem.types";
diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
index 51c3e9097e..d4ea2b6409 100644
--- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
+++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/index.ts
@@ -7,3 +7,4 @@ export { NoSearchResults } from "./NoSearchResults";
export * from "./ExplorerContainer";
export * from "./EntityItem";
export { useEditableText } from "./Editable";
+export * from "./EntityGroupsList";
diff --git a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
index c58c1d8776..9afd4a4666 100644
--- a/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
+++ b/app/client/packages/design-system/ads/src/Templates/IDEHeader/IDEHeader.stories.tsx
@@ -6,7 +6,7 @@ import { IDEHeaderSwitcher } from "./HeaderSwitcher";
import { noop } from "lodash";
import { Icon } from "../../Icon";
import { Button } from "../../Button";
-import { List } from "../../List";
+import { List, ListItem } from "../../List";
import { Flex } from "../../Flex";
import { Text } from "../../Text";
import { ListHeaderContainer } from "../EntityExplorer/styles";
@@ -58,6 +58,16 @@ export const WithHeaderTitle = () => {
export const WithHeaderDropdown = () => {
const [open, setOpen] = React.useState(false);
+ const items = [
+ {
+ title: "Page1",
+ onClick: noop,
+ },
+ {
+ title: "Page2",
+ onClick: noop,
+ },
+ ];
return (
@@ -79,18 +89,11 @@ export const WithHeaderDropdown = () => {
Pages
-
+
+ {items.map((item) => (
+
+ ))}
+
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
index 55246514bd..dfd6dc18c8 100644
--- a/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
+++ b/app/client/src/ce/pages/Editor/IDE/EditorPane/Query/hooks.tsx
@@ -28,7 +28,11 @@ import type { UseRoutes } from "ee/entities/IDE/constants";
import type { AppState } from "ee/reducers";
import keyBy from "lodash/keyBy";
import { getPluginEntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
-import type { ListItemProps } from "@appsmith/ads";
+import {
+ type EntityGroupProps,
+ type ListItemProps,
+ type EntityItemProps,
+} from "@appsmith/ads";
import { createAddClassName } from "pages/Editor/IDE/EditorPane/utils";
import { getIDEViewMode } from "selectors/ideSelectors";
import { EditorViewMode } from "ee/entities/IDE/constants";
@@ -71,9 +75,10 @@ export type GroupedAddOperations = Array<{
operations: ActionOperation[];
}>;
-export const useGroupedAddQueryOperations = (): GroupedAddOperations => {
+export const useGroupedAddQueryOperations = () => {
const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
const pagePermissions = useSelector(getPagePermissions);
+ const { getListItems } = useAddQueryListItems();
const canCreateActions = getHasCreateActionPermission(
isFeatureEnabled,
@@ -91,6 +96,7 @@ export const useGroupedAddQueryOperations = (): GroupedAddOperations => {
);
const groups: GroupedAddOperations = [];
+ const groupedItems: EntityGroupProps[] = [];
/** From existing Datasource **/
@@ -108,7 +114,35 @@ export const useGroupedAddQueryOperations = (): GroupedAddOperations => {
operations: fromNewBlankAPI,
});
- return groups;
+ groups.map((group) => {
+ const items = getListItems(group.operations);
+ const lastItem = items[items.length - 1];
+
+ if (group.title === "Datasources" && lastItem?.title === "New datasource") {
+ items.splice(items.length - 1);
+
+ const addConfig = {
+ icon: lastItem.startIcon,
+ onClick: lastItem.onClick,
+ title: lastItem.title,
+ };
+
+ groupedItems.push({
+ groupTitle: group.title,
+ className: group.className,
+ items,
+ addConfig,
+ });
+ } else {
+ groupedItems.push({
+ groupTitle: group.title || "",
+ className: group.className,
+ items,
+ });
+ }
+ });
+
+ return groupedItems;
};
const PluginActionEditor = lazy(async () =>
diff --git a/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx b/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx
index 9586104e53..6ef98d4043 100644
--- a/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx
+++ b/app/client/src/components/editorComponents/Debugger/StateInspector/StateInspector.tsx
@@ -3,6 +3,7 @@ import ReactJson from "react-json-view";
import {
Flex,
List,
+ ListItem,
type ListItemProps,
SearchInput,
Text,
@@ -69,7 +70,11 @@ export const StateInspector = () => {
>
{item.group}
-
+
+ {item.items.map((eachItem) => (
+
+ ))}
+
))}
diff --git a/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx b/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
index 6396ce115a..9104dd91f5 100644
--- a/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
+++ b/app/client/src/pages/Editor/CustomWidgetBuilder/Preview/Debugger/helpDropdown.tsx
@@ -6,6 +6,7 @@ import {
PopoverTrigger,
PopoverContent,
List,
+ ListItem,
} from "@appsmith/ads";
import styles from "./styles.module.css";
import type { DebuggerLog } from "../../types";
@@ -17,6 +18,41 @@ export default function HelpDropdown(props: DebuggerLog) {
const errorMessage = args?.[0]?.message;
+ const items = [
+ {
+ startIcon: ,
+ title: "Documentation",
+ onClick: () => {
+ window.open(CUSTOM_WIDGET_DOC_URL, "_blank");
+ },
+ },
+ // {
+ // startIcon: ,
+ // title: "Troubleshoot with AI",
+ // onClick: noop,
+ // },
+ {
+ startIcon: ,
+ title: createMessage(
+ CUSTOM_WIDGET_FEATURE.debugger.helpDropdown.stackoverflow,
+ ),
+ onClick: () => {
+ args[0] &&
+ window.open(
+ `https://stackoverflow.com/search?q=${
+ "[javascript] " + encodeURIComponent(errorMessage as string)
+ }}`,
+ "_blank",
+ );
+ },
+ },
+ // {
+ // startIcon: ,
+ // title: "Appsmith Support",
+ // onClick: noop,
+ // },
+ ];
+
return (
@@ -28,43 +64,11 @@ export default function HelpDropdown(props: DebuggerLog) {
/>
-
,
- title: "Documentation",
- onClick: () => {
- window.open(CUSTOM_WIDGET_DOC_URL, "_blank");
- },
- },
- // {
- // startIcon: ,
- // title: "Troubleshoot with AI",
- // onClick: noop,
- // },
- {
- startIcon: ,
- title: createMessage(
- CUSTOM_WIDGET_FEATURE.debugger.helpDropdown.stackoverflow,
- ),
- onClick: () => {
- args[0] &&
- window.open(
- `https://stackoverflow.com/search?q=${
- "[javascript] " +
- encodeURIComponent(errorMessage as string)
- }}`,
- "_blank",
- );
- },
- },
- // {
- // startIcon: ,
- // title: "Appsmith Support",
- // onClick: noop,
- // },
- ]}
- />
+
+ {items.map((item) => (
+
+ ))}
+
);
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
index 8663ca11d1..ccfb10b9c7 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx
@@ -2,10 +2,14 @@ import React, { useCallback, useState } from "react";
import SegmentAddHeader from "../components/SegmentAddHeader";
import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages";
import type { ListItemProps } from "@appsmith/ads";
-import { Flex, SearchInput, NoSearchResults } from "@appsmith/ads";
+import {
+ EntityGroupsList,
+ Flex,
+ SearchInput,
+ NoSearchResults,
+} from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { getCurrentPageId } from "selectors/editorSelectors";
-import GroupedList from "../components/GroupedList";
import {
useGroupedAddJsOperations,
useJSAdd,
@@ -54,7 +58,7 @@ const AddJS = () => {
const itemGroups = groupedJsOperations.map(
({ className, operations, title }) => ({
- groupTitle: title,
+ groupTitle: title || "",
className: className,
items: operations.map(getListItems),
}),
@@ -94,7 +98,7 @@ const AddJS = () => {
/>
{filteredItemGroups.length > 0 ? (
-
+
) : null}
{filteredItemGroups.length === 0 && searchTerm !== "" ? (
{
const [searchTerm, setSearchTerm] = useState("");
- const { getListItems } = useAddQueryListItems();
- const groupedActionOperations = useGroupedAddQueryOperations();
+ const itemGroups = useGroupedAddQueryOperations();
const { closeAddQuery } = useQueryAdd();
const ideViewMode = useSelector(getIDEViewMode);
- const itemGroups = groupedActionOperations.map((group) => ({
- groupTitle: group.title,
- className: group.className,
- items: getListItems(group.operations),
- }));
-
- const filteredItemGroups = filterEntityGroupsBySearchTerm(
- searchTerm,
- itemGroups,
- );
+ const filteredItemGroups = filterEntityGroupsBySearchTerm<
+ { groupTitle: string; className: string },
+ ListItemProps
+ >(searchTerm, itemGroups);
const extraPadding: FlexProps =
ideViewMode === EditorViewMode.FullScreen
@@ -66,7 +59,7 @@ const AddQuery = () => {
/>
{filteredItemGroups.length > 0 ? (
-
+
) : null}
{filteredItemGroups.length === 0 && searchTerm !== "" ? (
= ({ group }) => {
- const [visibleItemsCount, setVisibleItemsCount] = useState(
- DEFAULT_GROUP_LIST_SIZE,
- );
- const { className, groupTitle, items: groupItems } = group;
-
- const items = useMemo(() => {
- const items = groupItems.slice(0, visibleItemsCount);
- const hasMoreItems = groupItems.length > visibleItemsCount;
-
- const handleLoadMore = () => {
- setVisibleItemsCount(groupItems.length);
- };
-
- if (hasMoreItems) {
- items.push({
- title: "Load more...",
- onClick: handleLoadMore,
- className: "ds-load-more",
- });
- }
-
- // TODO: try to avoid this
- if (hasMoreItems && groupTitle === "Datasources") {
- items.push(groupItems[groupItems.length - 1]);
- }
-
- return items;
- }, [groupItems, visibleItemsCount, groupTitle]);
-
- return (
-
- {groupTitle ? (
-
- {groupTitle}
-
- ) : null}
-
-
- );
-};
-
-export { Group };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx
deleted file mode 100644
index 1436f378d5..0000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/GroupedList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from "react";
-import type { FlexProps } from "@appsmith/ads";
-import { Flex } from "@appsmith/ads";
-import styled from "styled-components";
-import type { GroupedListProps } from "./types";
-import { Group } from "./Group";
-
-interface Props {
- groups: GroupedListProps[];
- flexProps?: FlexProps;
-}
-
-const StyledFlex = styled(Flex)`
- & .groups-list-group:last-child {
- border-bottom: none;
- }
-`;
-
-const GroupedList = (props: Props) => {
- return (
-
- {props.groups.map((group) => (
-
- ))}
-
- );
-};
-
-export default GroupedList;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/constants.ts b/app/client/src/pages/Editor/IDE/EditorPane/components/constants.ts
deleted file mode 100644
index 3f7096e37f..0000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const DEFAULT_GROUP_LIST_SIZE = 5;
diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
index a2101d0242..f787b141dd 100644
--- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
+++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx
@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import styled from "styled-components";
-import { Flex, List, Text } from "@appsmith/ads";
+import { Flex, List, ListItem, Text } from "@appsmith/ads";
import { useSelector } from "react-redux";
import {
getDatasourceUsageCountForApp,
@@ -144,23 +144,26 @@ const DataSidePane = (props: DataSidePaneProps) => {
{key}
- ({
- className: "t--datasource",
- title: data.name,
- onClick: () => goToDatasource(data.id),
- description: get(dsUsageMap, data.id, ""),
- descriptionType: "block",
- isSelected: currentSelectedDatasource === data.id,
- startIcon: (
-
- ),
- }))}
- />
+
+ {value.map((data) => (
+ goToDatasource(data.id)}
+ startIcon={
+
+ }
+ title={data.name}
+ />
+ ))}
+
))}
diff --git a/app/client/src/pages/Editor/IDE/RightPane/components/CreateNewQueryModal.tsx b/app/client/src/pages/Editor/IDE/RightPane/components/CreateNewQueryModal.tsx
index 08b7b5cc13..78d09fdaa0 100644
--- a/app/client/src/pages/Editor/IDE/RightPane/components/CreateNewQueryModal.tsx
+++ b/app/client/src/pages/Editor/IDE/RightPane/components/CreateNewQueryModal.tsx
@@ -1,20 +1,21 @@
import React, { useEffect } from "react";
-import { Modal, ModalContent, ModalHeader, ModalBody } from "@appsmith/ads";
+import {
+ EntityGroupsList,
+ Modal,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+} from "@appsmith/ads";
import { useDispatch, useSelector } from "react-redux";
import { CREATE_A_NEW_ITEM, createMessage } from "ee/constants/messages";
-import GroupedList from "pages/Editor/IDE/EditorPane/components/GroupedList";
-import {
- useAddQueryListItems,
- useGroupedAddQueryOperations,
-} from "ee/pages/Editor/IDE/EditorPane/Query/hooks";
+import { useGroupedAddQueryOperations } from "ee/pages/Editor/IDE/EditorPane/Query/hooks";
import { getShowCreateNewModal } from "selectors/ideSelectors";
import { setShowQueryCreateNewModal } from "actions/ideActions";
const CreateNewQueryModal: React.FC = () => {
const dispatch = useDispatch();
- const groupedActionOperations = useGroupedAddQueryOperations();
- const { getListItems } = useAddQueryListItems();
+ const itemGroups = useGroupedAddQueryOperations();
const showCreateNewModal = useSelector(getShowCreateNewModal);
const onCloseHandler = (open: boolean) => {
@@ -35,13 +36,7 @@ const CreateNewQueryModal: React.FC = () => {
{createMessage(CREATE_A_NEW_ITEM, "query")}
- ({
- groupTitle: group.title,
- className: group.className,
- items: getListItems(group.operations),
- }))}
- />
+