fix :added datasource link in schema tab

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/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;
   }
 `;