feat: Schema tab UI update (#37420)

## Description

Updated schema tab as per new design.
https://www.figma.com/design/8L9BXMzNTKboGWlHpdXyYP/Appsmith-IDE?node-id=3071-101845&node-type=text&m=dev


Fixes #35289

## Automation

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

### 🔍 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/12022221992>
> Commit: c38fc99
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12022221992&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Tue, 26 Nov 2024 03:45:12 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

## Release Notes

- **New Features**
- Introduced new components: `CurrentDataSource`, `DatasourceSelector`,
`SchemaTables`, `TableColumns`, `StatusDisplay`,
`CurrentDataSourceLink`, `Schema`, `MenuField`, and custom hooks
`useCreateDatasource` and `useGoToDatasource`.
- Added constants for improved user feedback in schema-related messages.
  
- **Improvements**
- Enhanced layout and styling for various components, including
`BottomView` and `Schema`.
  - Updated test identifiers for better consistency and testability.

- **Bug Fixes**
  - Adjusted test cases to ensure accurate schema validation.

- **Refactor**
- Updated internal logic for handling datasource interactions and state
management across components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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,34 @@
+import React from "react";
+import { Flex } 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";
+
+interface Props {
+  datasourceId: string;
+  datasourceName: string;
+}
+
+const CurrentDataSource = ({ datasourceId, datasourceName }: Props) => {
+  const { pluginId, pluginImages } = useSelector((state) => ({
+    pluginId: getPluginIdFromDatasourceId(state, datasourceId),
+    pluginImages: getPluginImages(state),
+  }));
+
+  const datasourceIcon = pluginId ? pluginImages?.[pluginId] : undefined;
+
+  return (
+    <Flex alignItems="center" gap="spaces-2">
+      <EntityIcon height="16px" width="16px">
+        <img alt="entityIcon" src={getAssetUrl(datasourceIcon)} />
+      </EntityIcon>
+      {datasourceName}
+    </Flex>
+  );
+};
+
+export { CurrentDataSource };

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

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { Link } from "@appsmith/ads";
+import { CurrentDataSource } from "./CurrentDataSource";
+import { useGoToDatasource } from "PluginActionEditor/components/PluginActionResponse/hooks/useGoToDatasource";
+
+const CurrentDataSourceLink = ({
+  datasourceId,
+  datasourceName,
+}: {
+  datasourceId: string;
+  datasourceName: string;
+}) => {
+  const { goToDatasource } = useGoToDatasource();
+
+  const handleClick = useCallback(
+    () => goToDatasource(datasourceId),
+    [datasourceId, goToDatasource],
+  );
+
+  return (
+    <Link onClick={handleClick}>
+      <CurrentDataSource
+        datasourceId={datasourceId}
+        datasourceName={datasourceName}
+      />
+    </Link>
+  );
+};
+
+export { CurrentDataSourceLink };