From 9565d859a604d842c1b195f96ff5ae883c077486 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 23 Dec 2024 14:26:20 +0530 Subject: [PATCH 1/8] chore: Move Entity Empty state into ADS --- .../Templates/EntityExplorer/EmptyState.tsx | 67 +++++++++++++++++++ .../ads/src/Templates/EntityExplorer/index.ts | 1 + .../Editor/IDE/EditorPane/JS/BlankState.tsx | 19 ++++-- .../IDE/EditorPane/Query/BlankState.tsx | 19 ++++-- .../pages/Editor/IDE/EditorPane/UI/List.tsx | 31 ++++++--- .../IDE/EditorPane/components/EmptyState.tsx | 63 ----------------- .../Editor/IDE/LeftPane/DataSidePane.tsx | 21 ++++-- 7 files changed, 130 insertions(+), 91 deletions(-) create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx delete mode 100644 app/client/src/pages/Editor/IDE/EditorPane/components/EmptyState.tsx diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx new file mode 100644 index 00000000000..af5b254b9c6 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx @@ -0,0 +1,67 @@ +import React from "react"; +import { + Flex, + Icon, + Text, + Button, + type IconNames, + type ButtonKind, +} from "../.."; + +interface EmptyStateProps { + icon: IconNames; + description: string; + button?: { + text: string; + onClick?: () => void; + kind?: ButtonKind; + className?: string; + testId?: string; + }; +} + +const EmptyState = ({ button, description, icon }: EmptyStateProps) => { + return ( + + + + + + {description} + + {button ? ( + + ) : null} + + ); +}; + +export { EmptyState }; 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 2c77164adab..554fd638a4e 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 @@ -2,3 +2,4 @@ export { ListItemContainer, ListHeaderContainer } from "./styles"; export { ListWithHeader } from "./ListWithHeader"; export { EditorSegments } from "./EditorSegments"; export * from "./SearchAndAdd"; +export { EmptyState } from "./EmptyState"; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx index f1858a8f66d..7aa6667e02a 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/BlankState.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import { useSelector } from "react-redux"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; @@ -7,7 +7,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { getHasCreateActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { useJSAdd } from "ee/pages/Editor/IDE/EditorPane/JS/hooks"; -import { EmptyState } from "../components/EmptyState"; +import { EmptyState } from "@appsmith/ads"; const BlankState: React.FC = () => { const pagePermissions = useSelector(getPagePermissions); @@ -18,14 +18,21 @@ const BlankState: React.FC = () => { ); const { openAddJS } = useJSAdd(); + const buttonProps = useMemo( + () => ({ + className: "t--add-item", + testId: "t--add-item", + text: createMessage(EDITOR_PANE_TEXTS.js_add_button), + onClick: canCreateActions ? openAddJS : undefined, + }), + [canCreateActions, openAddJS], + ); + return ( ); }; diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx index 06fff7e028a..623b0fafeda 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/BlankState.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useMemo } from "react"; import { useSelector } from "react-redux"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; @@ -6,7 +6,7 @@ import { getHasCreateActionPermission } from "ee/utils/BusinessFeatures/permissi import { getPagePermissions } from "selectors/editorSelectors"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; -import { EmptyState } from "../components/EmptyState"; +import { EmptyState } from "@appsmith/ads"; import { useQueryAdd } from "ee/pages/Editor/IDE/EditorPane/Query/hooks"; const BlankState: React.FC = () => { @@ -18,16 +18,23 @@ const BlankState: React.FC = () => { ); const { openAddQuery } = useQueryAdd(); + const buttonProps = useMemo( + () => ({ + className: "t--add-item", + testId: "t--add-item", + text: createMessage(EDITOR_PANE_TEXTS.query_add_button), + onClick: canCreateActions ? openAddQuery : undefined, + }), + [canCreateActions, openAddQuery], + ); + return ( ); }; 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 491d89ce9ac..7bd081a473e 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/List.tsx @@ -12,7 +12,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { getHasManagePagePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { createMessage, EDITOR_PANE_TEXTS } from "ee/constants/messages"; -import { EmptyState } from "../components/EmptyState"; +import { EmptyState } from "@appsmith/ads"; import history from "utils/history"; import { builderURL } from "ee/RouteBuilder"; import styled from "styled-components"; @@ -26,6 +26,7 @@ const ListContainer = styled(Flex)` const ListWidgets = (props: { setFocusSearchInput: (focusSearchInput: boolean) => void; }) => { + const { setFocusSearchInput } = props; const basePageId = useSelector(getCurrentBasePageId) as string; const widgets = useSelector(selectWidgetsForCurrentPage); const pagePermissions = useSelector(getPagePermissions); @@ -41,16 +42,29 @@ const ListWidgets = (props: { }, [widgets?.children]); const addButtonClickHandler = useCallback(() => { - props.setFocusSearchInput(true); + setFocusSearchInput(true); history.push(builderURL({})); - }, []); + }, [setFocusSearchInput]); const widgetsExist = widgets && widgets.children && widgets.children.length > 0; - useEffect(() => { - props.setFocusSearchInput(false); - }, []); + useEffect( + function resetFocusOnSearch() { + setFocusSearchInput(false); + }, + [setFocusSearchInput], + ); + + const blankStateButtonProps = useMemo( + () => ({ + className: "t--add-item", + testId: "t--add-item", + text: createMessage(EDITOR_PANE_TEXTS.widget_add_button), + onClick: canManagePages ? addButtonClickHandler : undefined, + }), + [addButtonClickHandler, canManagePages], + ); return ( ) : canManagePages ? ( /* We show the List Add button when side by side is not enabled */ diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/EmptyState.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/EmptyState.tsx deleted file mode 100644 index 8347215b938..00000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/EmptyState.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React from "react"; -import { Button, Flex, Text, Icon } from "@appsmith/ads"; - -interface EmptyStateProps { - icon: string; - description: string; - buttonText: string; - onClick?: () => void; - buttonClassName?: string; - buttonTestId?: string; -} - -const EmptyState = ({ - buttonClassName, - buttonTestId, - buttonText, - description, - icon, - onClick, -}: EmptyStateProps) => { - return ( - - - - - - {description} - - {onClick && ( - - )} - - ); -}; - -export { EmptyState }; diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx index 6f590fea208..914f070f812 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import styled from "styled-components"; import { Flex, List, Text } from "@appsmith/ads"; import { useSelector } from "react-redux"; @@ -27,7 +27,7 @@ import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors" import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; -import { EmptyState } from "../EditorPane/components/EmptyState"; +import { EmptyState } from "@appsmith/ads"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getCurrentBasePageId } from "selectors/editorSelectors"; @@ -86,13 +86,24 @@ const DataSidePane = (props: DataSidePaneProps) => { userWorkspacePermissions, ); - const addButtonClickHandler = () => + const addButtonClickHandler = useCallback(() => { history.push( integrationEditorURL({ basePageId, selectedTab: INTEGRATION_TABS.NEW, }), ); + }, [basePageId]); + + const blankStateButtonProps = useMemo( + () => ({ + className: "t--add-datasource-button-blank-screen", + testId: "t--add-datasource-button-blank-screen", + text: createMessage(DATA_PANE_TITLE), + onClick: canCreateDatasource ? addButtonClickHandler : undefined, + }), + [addButtonClickHandler, canCreateDatasource], + ); return ( { {datasources.length === 0 ? ( ) : null} Date: Mon, 23 Dec 2024 14:51:43 +0530 Subject: [PATCH 2/8] chore: Move Search no results state into ADS --- .../EntityExplorer/EmptySearchResult.tsx | 20 +++++++++++++++++++ .../ads/src/Templates/EntityExplorer/index.ts | 1 + .../pages/Editor/IDE/EditorPane/JS/Add.tsx | 8 +++++--- .../pages/Editor/IDE/EditorPane/JS/List.tsx | 8 +++++--- .../pages/Editor/IDE/EditorPane/Query/Add.tsx | 14 +++++++++---- .../Editor/IDE/EditorPane/Query/List.tsx | 8 +++++--- .../components/EmptySearchResult.tsx | 17 ---------------- 7 files changed, 46 insertions(+), 30 deletions(-) create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptySearchResult.tsx delete mode 100644 app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptySearchResult.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptySearchResult.tsx new file mode 100644 index 00000000000..33de6a0ad40 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptySearchResult.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Text } from "../.."; + +interface EmptySearchResultProps { + text: string; +} + +const EmptySearchResult = ({ text }: EmptySearchResultProps) => { + return ( + + {text} + + ); +}; + +export { EmptySearchResult }; 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 554fd638a4e..3a6c147e619 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 @@ -3,3 +3,4 @@ export { ListWithHeader } from "./ListWithHeader"; export { EditorSegments } from "./EditorSegments"; export * from "./SearchAndAdd"; export { EmptyState } from "./EmptyState"; +export { EmptySearchResult } from "./EmptySearchResult"; 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 077100ed564..41a0eb32e77 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/Add.tsx @@ -2,7 +2,7 @@ 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 } from "@appsmith/ads"; +import { Flex, SearchInput, EmptySearchResult } from "@appsmith/ads"; import { useDispatch, useSelector } from "react-redux"; import { getCurrentPageId } from "selectors/editorSelectors"; import GroupedList from "../components/GroupedList"; @@ -13,7 +13,6 @@ import { import type { ActionOperation } from "components/editorComponents/GlobalSearch/utils"; import { createAddClassName } from "../utils"; import { FocusEntity } from "navigation/FocusEntity"; -import { EmptySearchResult } from "../components/EmptySearchResult"; import { getIDEViewMode } from "selectors/ideSelectors"; import type { FlexProps } from "@appsmith/ads"; import { EditorViewMode } from "ee/entities/IDE/constants"; @@ -99,7 +98,10 @@ const AddJS = () => { ) : null} {filteredItemGroups.length === 0 && searchTerm !== "" ? ( ) : null} 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 7812572bc7a..f74e2fdea1a 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, SearchAndAdd } from "@appsmith/ads"; +import { Flex, Text, SearchAndAdd, EmptySearchResult } 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 { EmptySearchResult } from "../components/EmptySearchResult"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; import { filterEntityGroupsBySearchTerm } from "IDE/utils"; @@ -112,7 +111,10 @@ const ListJSObjects = () => { })} {filteredItemGroups.length === 0 && searchTerm !== "" ? ( ) : null} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx index b28548f1267..4c632504b1b 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/Add.tsx @@ -1,5 +1,10 @@ import React, { useState } from "react"; -import { Flex, SearchInput } from "@appsmith/ads"; +import { + Flex, + SearchInput, + EmptySearchResult, + type FlexProps, +} from "@appsmith/ads"; import { createMessage, EDITOR_PANE_TEXTS } from "ee/constants/messages"; import SegmentAddHeader from "../components/SegmentAddHeader"; @@ -9,10 +14,8 @@ import { useGroupedAddQueryOperations, useQueryAdd, } from "ee/pages/Editor/IDE/EditorPane/Query/hooks"; -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"; @@ -67,7 +70,10 @@ const AddQuery = () => { ) : null} {filteredItemGroups.length === 0 && searchTerm !== "" ? ( ) : null} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx index 789711f8734..ed5db1ea236 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Flex, Text, SearchAndAdd } from "@appsmith/ads"; +import { Flex, Text, SearchAndAdd, EmptySearchResult } from "@appsmith/ads"; import { useSelector } from "react-redux"; import { getHasCreateActionPermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; @@ -18,7 +18,6 @@ import { useQueryAdd } from "ee/pages/Editor/IDE/EditorPane/Query/hooks"; import { QueryListItem } from "ee/pages/Editor/IDE/EditorPane/Query/ListItem"; import { getShowWorkflowFeature } from "ee/selectors/workflowSelectors"; import { BlankState } from "./BlankState"; -import { EmptySearchResult } from "../components/EmptySearchResult"; import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; import { filterEntityGroupsBySearchTerm } from "IDE/utils"; @@ -96,7 +95,10 @@ const ListQuery = () => { })} {filteredItemGroups.length === 0 && searchTerm !== "" ? ( ) : null} diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx deleted file mode 100644 index 007aee2e144..00000000000 --- a/app/client/src/pages/Editor/IDE/EditorPane/components/EmptySearchResult.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import { Text } from "@appsmith/ads"; -import { EDITOR_PANE_TEXTS, createMessage } from "ee/constants/messages"; - -const EmptySearchResult = ({ type }: { type: string }) => { - return ( - - {createMessage(EDITOR_PANE_TEXTS.empty_search_result, type)} - - ); -}; - -export { EmptySearchResult }; From 9234f903b906e59a4d1df2e203a4dd59c5655210 Mon Sep 17 00:00:00 2001 From: Hetu Nandu Date: Mon, 23 Dec 2024 15:29:23 +0530 Subject: [PATCH 3/8] Add Empty state stories --- .../EntityExplorer/EmptyState/EmptyState.mdx | 35 ++++++++++++ .../EmptyState/EmptyState.stories.tsx | 54 +++++++++++++++++++ .../{ => EmptyState}/EmptyState.tsx | 25 ++------- .../EmptyState/EmptyState.types.ts | 13 +++++ .../EntityExplorer/EmptyState/index.ts | 2 + 5 files changed, 107 insertions(+), 22 deletions(-) create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.mdx create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.stories.tsx rename app/client/packages/design-system/ads/src/Templates/EntityExplorer/{ => EmptyState}/EmptyState.tsx (74%) create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.types.ts create mode 100644 app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/index.ts diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.mdx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.mdx new file mode 100644 index 00000000000..3eef0d1cb29 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.mdx @@ -0,0 +1,35 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as EmptyStateStories from "./EmptyState.stories"; + + + +# Empty State + +A placeholder for when there is no data to display. It can be used to guide users on what to do next. + +## Anatomy + +icon: The icon of the file type or the entity type that is being displayed. + +description: The details of the empty state. It should be a short and clear message. + +button: A button that can be used to trigger an action. This is optional. + +### Default implementation + +Below is the default implementation of the Empty State component. It does not have a button. + + + +### With Button + +Button kind can be supplied. If no kind is supplied, default is "secondary". + + + +### With Button but no onClick is supplied + +onClick is optional. If not supplied, the button will not be shown. + + diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.stories.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.stories.tsx new file mode 100644 index 00000000000..9b756418db5 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.stories.tsx @@ -0,0 +1,54 @@ +/* eslint-disable no-console */ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; + +import { EmptyState, type EmptyStateProps } from "."; + +const meta: Meta = { + title: "ADS/Templates/Entity Explorer/Empty State", + component: EmptyState, +}; + +export default meta; + +const Template = (props: EmptyStateProps) => { + const { button, description, icon } = props; + + return ( + + ); +}; + +export const Basic = Template.bind({}) as StoryObj; + +Basic.args = { + description: "No data available", + icon: "folder-line", +}; + +export const WithButton = Template.bind({}) as StoryObj; + +WithButton.args = { + description: "No data available", + icon: "file-line", + button: { + text: "Add new", + onClick: () => console.log("Add clicked"), + }, +}; + +export const WithButtonWithoutOnClick = Template.bind({}) as StoryObj; + +WithButtonWithoutOnClick.args = { + description: "No data available", + icon: "file-line", + button: { + text: "Add new", + }, +}; diff --git a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.tsx similarity index 74% rename from app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx rename to app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.tsx index af5b254b9c6..4e84bede129 100644 --- a/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState.tsx +++ b/app/client/packages/design-system/ads/src/Templates/EntityExplorer/EmptyState/EmptyState.tsx @@ -1,24 +1,6 @@ import React from "react"; -import { - Flex, - Icon, - Text, - Button, - type IconNames, - type ButtonKind, -} from "../.."; - -interface EmptyStateProps { - icon: IconNames; - description: string; - button?: { - text: string; - onClick?: () => void; - kind?: ButtonKind; - className?: string; - testId?: string; - }; -} +import { Button, Flex, Icon, Text } from "../../.."; +import type { EmptyStateProps } from "./EmptyState.types"; const EmptyState = ({ button, description, icon }: EmptyStateProps) => { return ( @@ -48,11 +30,10 @@ const EmptyState = ({ button, description, icon }: EmptyStateProps) => { > {description} - {button ? ( + {button && button.onClick ? (