From e38bcfb3fe348e76d8364467d3d5503dc5c2c0c3 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Fri, 25 Oct 2024 21:52:41 +0530 Subject: [PATCH] feat: Disabled datasource selector in query pages (#36940) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This PR disable the datasource selector inside query editor. This change is behind feature flag to ensure that if this is needed, we can revert back using feature flag toggling. EE PR: https://github.com/appsmithorg/appsmith-ee/pull/5382 Fixes #35534 ## Automation /ok-to-test tags="@tag.All" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: ccdb5227464882e1d135a0eb42d1ed1b931a2680 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Fri, 25 Oct 2024 07:24:38 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Introduced a new feature flag: `release_ide_datasource_selector_enabled`, allowing for future enhancements to the `DatasourceSelector` component. - Conditional rendering of the `DatasourceSelector` in the `QueryEditorHeader` based on the new feature flag. - **Bug Fixes** - Disabled the test suite for the "Switch datasource" functionality as it is currently under a feature flag. These changes enhance the flexibility of the application and improve the user experience by controlling the visibility of features based on their activation status. --- .../QueryPane/SwitchDatasource_spec.js | 2 +- cypress/support/Pages/AggregateHelper.ts | 5 +- .../components/Schema.tsx | 68 +++++++++++++++++-- src/ce/constants/messages.ts | 3 +- src/ce/entities/FeatureFlag.ts | 3 + .../DatasourceStructureContainer.tsx | 32 +-------- .../DatasourceInfo/SchemaViewModeCSS.tsx | 1 + .../Editor/QueryEditor/QueryEditorHeader.tsx | 20 ++++-- 8 files changed, 88 insertions(+), 46 deletions(-) diff --git a/cypress/e2e/Regression/ServerSide/QueryPane/SwitchDatasource_spec.js b/cypress/e2e/Regression/ServerSide/QueryPane/SwitchDatasource_spec.js index 90e058e2c562..720a31dd23ef 100644 --- a/cypress/e2e/Regression/ServerSide/QueryPane/SwitchDatasource_spec.js +++ b/cypress/e2e/Regression/ServerSide/QueryPane/SwitchDatasource_spec.js @@ -1,5 +1,5 @@ import { dataSources, agHelper } from "../../../../support/Objects/ObjectsCore"; -describe( +describe.skip( "Switch datasource", { tags: ["@tag.Datasource", "@tag.Git", "@tag.AccessControl"] }, function () { diff --git a/cypress/support/Pages/AggregateHelper.ts b/cypress/support/Pages/AggregateHelper.ts index 82fe2481fbdd..ad5965191c25 100644 --- a/cypress/support/Pages/AggregateHelper.ts +++ b/cypress/support/Pages/AggregateHelper.ts @@ -1191,11 +1191,12 @@ export class AggregateHelper { public ActionContextMenuSubItem({ force = false, - index = 0, subAction, toastToValidate = "", }: SubActionParams) { - this.GetNClick(this.locator._contextMenuItem(subAction), index, force); + cy.xpath(this.locator._contextMenuItem(subAction)).trigger("click", { + force: force, + }); this.Sleep(500); toastToValidate && this.AssertContains(toastToValidate); } diff --git a/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx b/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx index cc29f5a715c3..e9eb2fcde3da 100644 --- a/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx +++ b/src/PluginActionEditor/components/PluginActionResponse/components/Schema.tsx @@ -1,21 +1,28 @@ -import { Flex } from "@appsmith/ads"; -import React, { useEffect, useState } from "react"; +import { Button, Flex, Link } from "@appsmith/ads"; +import React, { useCallback, useEffect, useState } from "react"; import { DatasourceStructureContext, type DatasourceColumns, type DatasourceKeys, } from "entities/Datasource"; import { DatasourceStructureContainer as DatasourceStructureList } from "pages/Editor/DatasourceInfo/DatasourceStructureContainer"; -import { useSelector } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { getDatasourceStructureById, getIsFetchingDatasourceStructure, + getPluginImages, + getPluginIdFromDatasourceId, } from "ee/selectors/entitiesSelector"; import DatasourceField from "pages/Editor/DatasourceInfo/DatasourceField"; import { find } from "lodash"; import type { AppState } from "ee/reducers"; import RenderInterimDataState from "pages/Editor/DatasourceInfo/RenderInterimDataState"; import { getPluginActionDebuggerState } from "../../../store"; +import { refreshDatasourceStructure } from "actions/datasourceActions"; +import history from "utils/history"; +import { datasourcesEditorIdURL } from "ee/RouteBuilder"; +import { EntityIcon } from "pages/Editor/Explorer/ExplorerIcons"; +import { getAssetUrl } from "ee/utils/airgapHelpers"; interface Props { datasourceId: string; @@ -24,10 +31,19 @@ interface Props { } const Schema = (props: Props) => { + const dispatch = useDispatch(); + const datasourceStructure = useSelector((state) => getDatasourceStructureById(state, props.datasourceId), ); const { responseTabHeight } = useSelector(getPluginActionDebuggerState); + + const pluginId = useSelector((state) => + getPluginIdFromDatasourceId(state, props.datasourceId), + ); + const pluginImages = useSelector((state) => getPluginImages(state)); + const datasourceIcon = pluginId ? pluginImages[pluginId] : undefined; + const [selectedTable, setSelectedTable] = useState(); const selectedTableItems = find(datasourceStructure?.tables, [ @@ -58,6 +74,19 @@ const Schema = (props: Props) => { } }, [selectedTable, props.datasourceId, isLoading, datasourceStructure]); + const refreshStructure = useCallback(() => { + dispatch( + refreshDatasourceStructure( + props.datasourceId, + DatasourceStructureContext.QUERY_EDITOR, + ), + ); + }, [dispatch, props.datasourceId]); + + const goToDatasource = useCallback(() => { + history.push(datasourcesEditorIdURL({ datasourceId: props.datasourceId })); + }, [props.datasourceId]); + if (!datasourceStructure) { return ( @@ -73,7 +102,7 @@ const Schema = (props: Props) => { return ( { data-testId="datasource-schema-container" flex="1" flexDirection="column" + gap="spaces-3" overflow="hidden" - px="spaces-3" + padding="spaces-3" + paddingRight="spaces-0" > + + + + + entityIcon + + {props.datasourceName} + + +