feat: Disabled datasource selector in query pages

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"