feat: Disabled datasource selector in query pages (#36940)

## 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: appsmithorg/appsmith-ee#5382


Fixes #35534

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11512255262>
> Commit: ccdb522
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11512255262&attempt=3"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 25 Oct 2024 07:24:38 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/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 () {

app/client/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);
   }

app/client/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<string>();
 
   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 (
       <Flex alignItems="center" flex="1" height="100%" justifyContent="center">
@@ -73,7 +102,7 @@ const Schema = (props: Props) => {
   return (
     <Flex
       flexDirection="row"
-      gap="spaces-2"
+      gap="spaces-3"
       height={`${responseTabHeight - 45}px`}
       maxWidth="70rem"
       overflow="hidden"
@@ -82,14 +111,41 @@ const Schema = (props: Props) => {
         data-testId="datasource-schema-container"
         flex="1"
         flexDirection="column"
+        gap="spaces-3"
         overflow="hidden"
-        px="spaces-3"
+        padding="spaces-3"
+        paddingRight="spaces-0"
       >
+        <Flex
+          alignItems={"center"}
+          gap="spaces-2"
+          justifyContent={"space-between"}
+        >
+          <Link onClick={goToDatasource}>
+            <Flex
+              alignItems={"center"}
+              gap="spaces-1"
+              justifyContent={"center"}
+            >
+              <EntityIcon height={`16px`} width={`16px`}>
+                <img alt="entityIcon" src={getAssetUrl(datasourceIcon)} />
+              </EntityIcon>
+              {props.datasourceName}
+            </Flex>
+          </Link>
+          <Button
+            className="datasourceStructure-refresh"
+            isIconButton
+            kind="tertiary"
+            onClick={refreshStructure}
+            size="sm"
+            startIcon="refresh"
+          />
+        </Flex>
         <DatasourceStructureList
           context={DatasourceStructureContext.QUERY_EDITOR}
           datasourceStructure={datasourceStructure}
           onEntityTableClick={setSelectedTable}
-          showRefresh
           step={0}
           tableName={selectedTable}
           {...props}

app/client/src/ce/constants/messages.ts

@@ -794,7 +794,8 @@ export const EMPTY_ACTIVE_DATA_SOURCES = () => "No active datasources found.";
 
 // Datasource structure
 
-export const SCHEMA_NOT_AVAILABLE = () => "Schema not available";
+export const SCHEMA_NOT_AVAILABLE = () =>
+  "We can't show schema for this datasource";
 export const TABLE_NOT_FOUND = () => "Table not found.";
 export const DATASOURCE_STRUCTURE_INPUT_PLACEHOLDER_TEXT = (name: string) =>
   `Tables in ${name}`;

app/client/src/ce/entities/FeatureFlag.ts

@@ -39,6 +39,8 @@ export const FEATURE_FLAG = {
   release_anvil_toggle_enabled: "release_anvil_toggle_enabled",
   release_git_persist_branch_enabled: "release_git_persist_branch_enabled",
   release_ide_animations_enabled: "release_ide_animations_enabled",
+  release_ide_datasource_selector_enabled:
+    "release_ide_datasource_selector_enabled",
   release_table_custom_loading_state_enabled:
     "release_table_custom_loading_state_enabled",
 } as const;
@@ -76,6 +78,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_anvil_toggle_enabled: false,
   release_git_persist_branch_enabled: false,
   release_ide_animations_enabled: false,
+  release_ide_datasource_selector_enabled: false,
   release_table_custom_loading_state_enabled: false,
 };
 

app/client/src/pages/Editor/DatasourceInfo/DatasourceStructureContainer.tsx

@@ -7,18 +7,17 @@ import {
 import type { DatasourceStructure as DatasourceStructureType } from "entities/Datasource";
 import { DatasourceStructureContext } from "entities/Datasource";
 import type { ReactElement } from "react";
-import React, { memo, useCallback, useEffect, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import DatasourceStructure from "./DatasourceStructure";
-import { Button, Flex, SearchInput, Text } from "@appsmith/ads";
+import { Flex, SearchInput, Text } from "@appsmith/ads";
 import { getIsFetchingDatasourceStructure } from "ee/selectors/entitiesSelector";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import type { AppState } from "ee/reducers";
 import ItemLoadingIndicator from "./ItemLoadingIndicator";
 import DatasourceStructureNotFound from "./DatasourceStructureNotFound";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { PluginName } from "entities/Action";
 import { DatasourceStructureSearchContainer } from "./SchemaViewModeCSS";
-import { refreshDatasourceStructure } from "actions/datasourceActions";
 
 interface Props {
   datasourceId: string;
@@ -31,26 +30,15 @@ interface Props {
   onEntityTableClick?: (table: string) => void;
   tableName?: string;
   customEditDatasourceFn?: () => void;
-  showRefresh?: boolean;
 }
 
 // leaving out DynamoDB and Firestore because they have a schema but not templates
 export const SCHEMALESS_PLUGINS: Array<string> = [
-  PluginName.SMTP,
-  PluginName.TWILIO,
-  PluginName.HUBSPOT,
-  PluginName.ELASTIC_SEARCH,
-  PluginName.AIRTABLE,
   PluginName.GRAPHQL,
   PluginName.REST_API,
-  PluginName.REDIS,
-  PluginName.GOOGLE_SHEETS,
-  PluginName.OPEN_AI,
-  PluginName.APPSMITH_AI,
 ];
 
 const Container = (props: Props) => {
-  const dispatch = useDispatch();
   const isLoading = useSelector((state: AppState) =>
     getIsFetchingDatasourceStructure(state, props.datasourceId),
   );
@@ -60,10 +48,6 @@ const Container = (props: Props) => {
     DatasourceStructureType | undefined
   >(props.datasourceStructure);
 
-  const refreshStructure = useCallback(() => {
-    dispatch(refreshDatasourceStructure(props.datasourceId, props.context));
-  }, []);
-
   useEffect(() => {
     if (datasourceStructure !== props.datasourceStructure) {
       setDatasourceStructure(props.datasourceStructure);
@@ -145,16 +129,6 @@ const Container = (props: Props) => {
       <DatasourceStructureSearchContainer
         className={`t--search-container--${props.context.toLowerCase()}`}
       >
-        {props.showRefresh ? (
-          <Button
-            className="datasourceStructure-refresh"
-            isIconButton
-            kind="tertiary"
-            onClick={refreshStructure}
-            size="md"
-            startIcon="refresh"
-          />
-        ) : null}
         <SearchInput
           className="datasourceStructure-search"
           endIcon="close"

app/client/src/pages/Editor/DatasourceInfo/SchemaViewModeCSS.tsx

@@ -213,5 +213,6 @@ export const DatasourceStructureSearchContainer = styled.div`
   }
   &.t--search-container--query-editor {
     padding-right: 0;
+    margin: 0;
   }
 `;

app/client/src/pages/Editor/QueryEditor/QueryEditorHeader.tsx

@@ -72,6 +72,10 @@ const QueryEditorHeader = (props: Props) => {
     currentActionConfig?.userPermissions,
   );
 
+  const isDatasourceSelectorEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_ide_datasource_selector_enabled,
+  );
+
   const currentPlugin = useSelector((state: AppState) =>
     getPlugin(state, currentActionConfig?.pluginId || ""),
   );
@@ -97,13 +101,15 @@ const QueryEditorHeader = (props: Props) => {
       </NameWrapper>
       <ActionsWrapper>
         {moreActionsMenu}
-        <DatasourceSelector
-          currentActionConfig={currentActionConfig}
-          dataSources={dataSources}
-          formName={formName}
-          onCreateDatasourceClick={onCreateDatasourceClick}
-          plugin={plugin}
-        />
+        {isDatasourceSelectorEnabled && (
+          <DatasourceSelector
+            currentActionConfig={currentActionConfig}
+            dataSources={dataSources}
+            formName={formName}
+            onCreateDatasourceClick={onCreateDatasourceClick}
+            plugin={plugin}
+          />
+        )}
         <Button
           className="t--run-query"
           data-guided-tour-iid="run-query"