diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index 07006699a0..ebf4f54769 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -86,7 +86,7 @@ export class CommonLocators { _anvilDnDHighlight = "[data-type=anvil-dnd-highlight]"; _editPage = "[data-testid=onboarding-tasks-datasource-text], .t--drop-target"; _crossBtn = "span.cancel-icon"; - _createNew = ".t--add-item"; + _createNew = "[data-testid='t--add-item']"; _uploadFiles = "div.uppy-Dashboard-AddFiles input"; _uploadBtn = "button.uppy-StatusBar-actionBtn--upload"; _errorTab = "[data-testid=t--tab-ERROR_TAB]"; diff --git a/app/client/cypress/support/Pages/IDE/ListView.ts b/app/client/cypress/support/Pages/IDE/ListView.ts index 0da47d2b26..f9f4352af5 100644 --- a/app/client/cypress/support/Pages/IDE/ListView.ts +++ b/app/client/cypress/support/Pages/IDE/ListView.ts @@ -4,7 +4,7 @@ class ListView { public locators = { list: "[data-testid='t--ide-list']", listItem: "[data-testid='t--ide-list-item']", - addItem: "button.t--add-item", + addItem: "[data-testid='t--add-item']", }; public assertListVisibility() { diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.stories.tsx new file mode 100644 index 0000000000..9d40d80145 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.stories.tsx @@ -0,0 +1,38 @@ +/* eslint-disable no-console */ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { SearchAndAdd, type SearchAndAddProps } from "."; + +const meta: Meta = { + title: "ADS/Templates/Entity Explorer/Search And Add", + component: SearchAndAdd, +}; + +export default meta; + +const Template = (props: SearchAndAddProps) => { + const { onAdd, onSearch, placeholder, showAddButton = true } = props; + + return ( +
+ +
+ ); +}; + +export const Basic = Template.bind({}) as StoryObj; + +Basic.args = { + onAdd: () => console.log("Add clicked"), + onSearch: (searchTerm: string) => console.log(searchTerm), + placeholder: "Search", + showAddButton: true, +}; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.styles.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.styles.tsx new file mode 100644 index 0000000000..cb734378ea --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.styles.tsx @@ -0,0 +1,16 @@ +import styled from "styled-components"; + +import { Button } from "@appsmith/ads"; + +export const Root = styled.div` + display: flex; + gap: var(--ads-v2-spaces-3); + width: 100%; +`; + +export const SquareButton = styled(Button)` + && { + max-width: 24px; + min-width: 24px; + } +`; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.tsx new file mode 100644 index 0000000000..e00766fc71 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.tsx @@ -0,0 +1,43 @@ +import React, { forwardRef } from "react"; + +import { SearchInput } from "@appsmith/ads"; +import * as Styles from "./SearchAndAdd.styles"; +import type { SearchAndAddProps } from "./SearchAndAdd.types"; + +export const SearchAndAdd = forwardRef( + (props, ref) => { + const { + onAdd, + onSearch, + placeholder, + searchTerm = "", + showAddButton, + } = props; + + return ( + + + {showAddButton && ( + + )} + + ); + }, +); + +SearchAndAdd.displayName = "SearchAndAdd"; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.types.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.types.ts new file mode 100644 index 0000000000..f1ab996028 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/SearchAndAdd.types.ts @@ -0,0 +1,12 @@ +export interface SearchAndAddProps { + /** Placeholder text for search input. */ + placeholder?: string; + /** Value for search input in controlled mode. */ + searchTerm?: string; + /** Callback to be called when add button is clicked. */ + onAdd?: () => void; + /** Callback to be called when search input value changes. */ + onSearch?: (searchTerm: string) => void; + /** Whether to show the add button. Allows to hide the button for users with insufficient access privileges. */ + showAddButton: boolean; +} diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/index.ts b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/index.ts new file mode 100644 index 0000000000..f1bd435494 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/SearchAndAdd/index.ts @@ -0,0 +1,2 @@ +export { SearchAndAdd } from "./SearchAndAdd"; +export * from "./SearchAndAdd.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 95639a0663..2c77164ada 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 @@ -1,3 +1,4 @@ export { ListItemContainer, ListHeaderContainer } from "./styles"; export { ListWithHeader } from "./ListWithHeader"; export { EditorSegments } from "./EditorSegments"; +export * from "./SearchAndAdd"; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx index bdfd8a15c9..7812572bc7 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { useSelector } from "react-redux"; -import { Flex, Text } from "@appsmith/ads"; +import { Flex, Text, SearchAndAdd } from "@appsmith/ads"; import styled from "styled-components"; import { selectJSSegmentEditorList } from "ee/selectors/appIDESelectors"; @@ -18,7 +18,6 @@ import { FilesContextProvider } from "pages/Editor/Explorer/Files/FilesContextPr 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 { EmptySearchResult } from "../components/EmptySearchResult"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; import { filterEntityGroupsBySearchTerm } from "IDE/utils"; @@ -64,10 +63,10 @@ const ListJSObjects = () => { py="spaces-3" > {itemGroups && itemGroups.length > 0 ? ( - ) : null} { py="spaces-3" > {itemGroups.length > 0 ? ( - ) : null} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx index e0e84b2974..491d89ce9a 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx @@ -63,6 +63,7 @@ const ListWidgets = (props: { /* If no widgets exist, show the blank state */