feat: Schema tab UI update

app/client/cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts

@@ -79,7 +79,7 @@ describe(
           "public.users",
         );
         dataSources.SelectTableFromPreviewSchemaList("public.users");
-        dataSources.VerifyColumnSchemaOnQueryEditor("id", 1);
+        dataSources.VerifyColumnSchemaOnQueryEditor("id", 0);
       },
     );
 

app/client/cypress/support/Pages/DataSources.ts

@@ -265,7 +265,7 @@ export class DataSources {
     "')]/ancestor::div[@class='form-config-top']/following-sibling::div//div[contains(@class, 'rc-select-multiple')]";
   private _datasourceSchemaRefreshBtn = ".datasourceStructure-refresh";
   private _datasourceStructureHeader = ".datasourceStructure-header";
-  _datasourceSchemaColumn = ".t--datasource-column";
+  _datasourceSchemaColumn = ".t--datasource-column .t--field-name";
   _datasourceStructureSearchInput = ".datasourceStructure-search input";
   _jsModeSortingControl = ".t--actionConfiguration\\.formData\\.sortBy\\.data";
   public _queryEditorCollapsibleIcon = ".collapsible-icon";
@@ -296,7 +296,7 @@ export class DataSources {
   _imgFireStoreLogo = "//img[contains(@src, 'firestore.svg')]";
   _dsVirtuosoElement = `div .t--schema-virtuoso-container`;
   private _dsVirtuosoList = `[data-test-id="virtuoso-item-list"]`;
-  private _dsSchemaContainer = `[data-testid="datasource-schema-container"]`;
+  private _dsSchemaContainer = `[data-testid="t--datasource-schema-container"]`;
   private _dsVirtuosoElementTable = (targetTableName: string) =>
     `${this._dsSchemaEntityItem}[data-testid='t--entity-item-${targetTableName}']`;
   private _dsPageTabListItem = (buttonText: string) =>

app/client/src/IDE/Components/BottomView.tsx

@@ -38,6 +38,7 @@ const ViewWrapper = styled.div`
   & {
     .ads-v2-tabs__list {
       padding: var(--ads-v2-spaces-1) var(--ads-v2-spaces-7);
+      padding-left: var(--ads-v2-spaces-3);
     }
   }
 

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/CurrentDataSource.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Flex, Link } from "@appsmith/ads";
+import { getAssetUrl } from "ee/utils/airgapHelpers";
+import { EntityIcon } from "pages/Editor/Explorer/ExplorerIcons";
+import { useSelector } from "react-redux";
+import {
+  getPluginIdFromDatasourceId,
+  getPluginImages,
+} from "ee/selectors/entitiesSelector";
+import { useDataSourceNavigation } from "ee/PluginActionEditor/hooks/useDataSourceNavigation";
+
+interface iProps {
+  type: "link" | "trigger";
+  datasourceId: string;
+  datasourceName: string;
+}
+
+const CurrentDataSource = ({ datasourceId, datasourceName, type }: iProps) => {
+  const { pluginId, pluginImages } = useSelector((state) => ({
+    pluginId: getPluginIdFromDatasourceId(state, datasourceId),
+    pluginImages: getPluginImages(state),
+  }));
+
+  const { goToDatasource } = useDataSourceNavigation();
+
+  const datasourceIcon = pluginId ? pluginImages?.[pluginId] : undefined;
+
+  const content = (
+    <Flex
+      alignItems="center"
+      gap="spaces-2"
+      justifyContent={type === "link" ? "center" : "start"}
+    >
+      <EntityIcon height="16px" width="16px">
+        <img alt="entityIcon" src={getAssetUrl(datasourceIcon)} />
+      </EntityIcon>
+      {datasourceName}
+    </Flex>
+  );
+
+  return type === "link" ? (
+    <Link onClick={() => goToDatasource(datasourceId)}>{content}</Link>
+  ) : (
+    content
+  );
+};
+
+export { CurrentDataSource };