From ff49b1cb70b26ce838ff617265e1e41408ca093f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 6 Feb 2025 17:47:33 +0530 Subject: [PATCH 1/2] chore: fix select mode (#39069) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /ok-to-test tags="@tag.Sanity" > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 08be9401ef828935f4082fb51906c75f6cf05399 > Cypress dashboard. > Tags: `@tag.Sanity` > Spec: >
Thu, 06 Feb 2025 12:10:29 UTC ## Summary by CodeRabbit - **Bug Fixes** - Updated the multi-selection dropdown behavior so that when multiple items are selected, they are displayed more clearly and managed more intuitively. - This change enhances the user experience by ensuring that dropdown selections are presented in a way that better aligns with user expectations. --- app/client/packages/design-system/ads/src/Select/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/design-system/ads/src/Select/Select.tsx b/app/client/packages/design-system/ads/src/Select/Select.tsx index 958624dceb2..c99cab90106 100644 --- a/app/client/packages/design-system/ads/src/Select/Select.tsx +++ b/app/client/packages/design-system/ads/src/Select/Select.tsx @@ -108,7 +108,7 @@ function Select(props: SelectProps) { maxTagCount={maxTagCount} maxTagPlaceholder={maxTagPlaceholder || getMaxTagPlaceholder} menuItemSelectedIcon="" - mode={isMultiSelect ? "tags" : undefined} + mode={isMultiSelect ? "multiple" : undefined} onDropdownVisibleChange={handleDropdownVisibleChange} placeholder={placeholder} searchValue={searchValue} From afe630a4afbae7f36a297fbba9b90233bacbf3d2 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Thu, 6 Feb 2025 17:59:30 +0530 Subject: [PATCH 2/2] chore: Updating data side pane component to get datasource usage map via props (#39066) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Updating data side pane component to get datasource usage map via props. Also, optimizing the logic to show the right border or divider next to left pane in an editor. Fixes [#39033](https://github.com/appsmithorg/appsmith/issues/39033) ## Automation /ok-to-test tags="@tag.Datasource, @tag.IDE" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 2a8a187620905cf4986e2ce0672a62fe2dd67789 > Cypress dashboard. > Tags: `@tag.Datasource, @tag.IDE` > Spec: >
Thu, 06 Feb 2025 12:26:21 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## Summary by CodeRabbit - **Style** - Removed redundant borders in side panels and the settings pane for a cleaner look. - Enhanced visual clarity in the context menu by adding a distinguishing icon. - **Refactor** - Streamlined layout and rendering logic in various editor components for consistent display. - Improved datasource usage presentation in the left pane, ensuring more direct and clear information delivery. - Simplified component structures by removing unnecessary wrappers and props. - Updated component logic to utilize props instead of selectors for datasource usage. --- .../src/IDE/Components/SidePaneWrapper.tsx | 1 - .../pages/Editor/IDE/EditorPane/Explorer.tsx | 31 +++++---- .../UI/UIEntityListTree/WidgetContextMenu.tsx | 6 +- .../src/pages/Editor/IDE/EditorPane/index.tsx | 7 +- .../src/pages/Editor/IDE/Header/index.tsx | 69 +++++++++---------- .../Editor/IDE/LeftPane/DataSidePane.test.tsx | 45 ++---------- .../Editor/IDE/LeftPane/DataSidePane.tsx | 17 +---- .../src/pages/Editor/IDE/LeftPane/index.tsx | 22 ++++-- .../commons/EditorSettingsPaneContainer.tsx | 2 - 9 files changed, 82 insertions(+), 118 deletions(-) diff --git a/app/client/src/IDE/Components/SidePaneWrapper.tsx b/app/client/src/IDE/Components/SidePaneWrapper.tsx index 5c1eaf1d88f..a9883e96c84 100644 --- a/app/client/src/IDE/Components/SidePaneWrapper.tsx +++ b/app/client/src/IDE/Components/SidePaneWrapper.tsx @@ -15,7 +15,6 @@ const StyledContainer = styled(Flex)>` function SidePaneWrapper({ children, padded = false }: SidePaneContainerProps) { return ( { const { path } = useRouteMatch(); const ideViewMode = useSelector(getIDEViewMode); + const { segment } = useCurrentEditorState(); + + const widgetSegmentPaths = useMemo( + () => [ + BUILDER_PATH, + BUILDER_CUSTOM_PATH, + BUILDER_PATH_DEPRECATED, + ...widgetSegmentRoutes.map((route) => `${path}${route}`), + ], + [path], + ); return ( { component={QueryExplorer} path={querySegmentRoutes.map((route) => `${path}${route}`)} /> - `${path}${route}`), - ]} - /> + ); diff --git a/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx b/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx index 94793e04216..d96a524ed0d 100644 --- a/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx +++ b/app/client/src/pages/Editor/IDE/EditorPane/UI/UIEntityListTree/WidgetContextMenu.tsx @@ -55,9 +55,6 @@ export const WidgetContextMenu = (props: { const menuContent = useMemo(() => { return ( <> - - {createMessage(CONTEXT_SHOW_BINDING)} - {createMessage(CONTEXT_RENAME)} + + {createMessage(CONTEXT_SHOW_BINDING)} + { return ( { - - {currentWorkspace.name && ( - <> - - {currentWorkspace.name} - - {"/"} - el.id === applicationId) - .length > 0 - } - isPopoverOpen={isPopoverOpen} - onBlur={(value: string) => - updateApplicationDispatch(applicationId || "", { - name: value, - currentApp: true, - }) - } - setIsPopoverOpen={setIsPopoverOpen} - /> - - )} - + {currentWorkspace.name && ( + <> + + {currentWorkspace.name} + + {"/"} + el.id === applicationId) + .length > 0 + } + isPopoverOpen={isPopoverOpen} + onBlur={(value: string) => + updateApplicationDispatch(applicationId || "", { + name: value, + currentApp: true, + }) + } + setIsPopoverOpen={setIsPopoverOpen} + /> + + )} diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx index 42a994c05c7..6d040c9a2fc 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.test.tsx @@ -7,6 +7,8 @@ import { getIDETestState } from "test/factories/AppIDEFactoryUtils"; import { PostgresFactory } from "test/factories/Actions/Postgres"; import type { AppState } from "ee/reducers"; import { render } from "test/testUtils"; +import { getDatasourceUsageCountForApp } from "ee/selectors/entitiesSelector"; +import { IDE_TYPE } from "ee/entities/IDE/constants"; const productsDS = datasourceFactory().build({ name: "Products", @@ -34,13 +36,15 @@ const ordersAction1 = PostgresFactory.build({ }); describe("DataSidePane", () => { - it("renders the ds and count by using the default selector if dsUsageSelector not passed as a props", () => { + it("renders the ds and count by using the dsUsageMap passed as props", () => { const state = getIDETestState({ actions: [usersAction1, usersAction2, ordersAction1], datasources: [productsDS, usersDS, ordersDS], }) as AppState; - render(, { + const dsUsageMap = getDatasourceUsageCountForApp(state, IDE_TYPE.App); + + render(, { url: "/app/untitled-application-1/page1-678a356f18346f618bc2c80a/edit/datasource/users-ds-id", initialState: state, }); @@ -66,41 +70,4 @@ describe("DataSidePane", () => { "1 queries in this app", ); }); - - it("it uses the selector dsUsageSelector passed as prop", () => { - const state = getIDETestState({ - datasources: [productsDS, usersDS, ordersDS], - }) as AppState; - - const usageSelector = () => { - return { - [usersDS.id]: "Rendering description for users", - [productsDS.id]: "Rendering description for products", - }; - }; - - render(, { - url: "/app/untitled-application-1/page1-2/edit/datasource/users-ds-id", - initialState: state, - }); - - expect(screen.getByText("Databases")).toBeInTheDocument(); - - expect(screen.getAllByRole("listitem")).toHaveLength(3); - - expect(screen.getAllByRole("listitem")[0].textContent).toContain( - "Products", - ); - expect(screen.getAllByRole("listitem")[0].textContent).toContain( - "Rendering description for products", - ); - - expect(screen.getAllByRole("listitem")[1].textContent).toContain("Users"); - expect(screen.getAllByRole("listitem")[1].textContent).toContain( - "Rendering description for users", - ); - - // No description for orders as not passed in by the selector - expect(screen.getAllByRole("listitem")[2].textContent).toEqual("Orders"); - }); }); diff --git a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx index fe1fd09a857..5c32f24131a 100644 --- a/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx +++ b/app/client/src/pages/Editor/IDE/LeftPane/DataSidePane.tsx @@ -3,7 +3,6 @@ import styled from "styled-components"; import { EntityGroupsList, Flex } from "@appsmith/ads"; import { useSelector } from "react-redux"; import { - getDatasourceUsageCountForApp, getDatasources, getDatasourcesGroupedByPluginCategory, getPlugins, @@ -30,7 +29,6 @@ import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/perm import { EmptyState } from "@appsmith/ads"; import { getAssetUrl } from "ee/utils/airgapHelpers"; import { getCurrentBasePageId } from "selectors/editorSelectors"; -import { getIDETypeByUrl } from "ee/entities/IDE/utils"; const PaneBody = styled.div` padding: var(--ads-v2-spaces-3) 0; @@ -44,13 +42,11 @@ const DatasourceIcon = styled.img` `; interface DataSidePaneProps { - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - dsUsageSelector?: (...args: any[]) => Record; + dsUsageMap: Record; } const DataSidePane = (props: DataSidePaneProps) => { - const { dsUsageSelector = getDatasourceUsageCountForApp } = props; + const { dsUsageMap } = props; const basePageId = useSelector(getCurrentBasePageId) as string; const [currentSelectedDatasource, setCurrentSelectedDatasource] = useState< string | undefined @@ -60,8 +56,6 @@ const DataSidePane = (props: DataSidePaneProps) => { const plugins = useSelector(getPlugins); const groupedPlugins = keyBy(plugins, "id"); const location = useLocation(); - const ideType = getIDETypeByUrl(location.pathname); - const dsUsageMap = useSelector((state) => dsUsageSelector(state, ideType)); const goToDatasource = useCallback((id: string) => { history.push(datasourcesEditorIdURL({ datasourceId: id })); }, []); @@ -101,12 +95,7 @@ const DataSidePane = (props: DataSidePaneProps) => { ); return ( - + ` +export const LeftPaneContainer = styled.div` height: 100%; - border-right: ${({ showRightBorder = true }) => - showRightBorder ? "1px solid var(--ads-v2-color-border)" : "none"}; + border-right: 1px solid var(--ads-v2-color-border); background: var(--ads-v2-color-bg); overflow: hidden; `; @@ -45,10 +47,20 @@ const LeftPane = () => { [path], ); + const dsUsageMap = useSelector((state) => + getDatasourceUsageCountForApp(state, IDE_TYPE.App), + ); + return ( - + - + ( + + )} + />