chore: Updating styles and adding docs link for REST API plugin for better UI/UX

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

@@ -206,7 +206,7 @@ export class DataSources {
     ".t--datasource-name:contains('" + dsName + "')";
   _mandatoryMark = "//span[text()='*']";
   _deleteDSHostPort = ".t--delete-field";
-  _dsTabSchema = "[data-testid='t--tab-SCHEMA_TAB']";
+  _dsTabSchema = "[data-testid='t--tab-DATASOURCE_TAB']";
   private _pageSelectionMenu = "[data-testid='t--page-selection']";
 
   private _pageSelectMenuItem = ".ads-v2-menu__menu-item";
@@ -1891,7 +1891,9 @@ export class DataSources {
     cy.intercept("GET", "/api/v1/datasources/*/structure?ignoreCache=*").as(
       `getDatasourceStructureUpdated_${ds_entity_name}`,
     );
-    cy.get("[data-testid=t--tab-SCHEMA_TAB]").first().click({ force: true });
+    cy.get("[data-testid=t--tab-DATASOURCE_TAB]")
+      .first()
+      .click({ force: true });
     this.RefreshDatasourceSchema();
     this.assertHelper
       .WaitForNetworkCall(`@getDatasourceStructureUpdated_${ds_entity_name}`)

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1033,6 +1033,10 @@ const DashboardLineIcon = importSvg(
   async () => import("../__assets__/icons/ads/dashboard-line.svg"),
 );
 
+const DatasourceConfigIcon = importSvg(
+  async () => import("../__assets__/icons/ads/datasource-config.svg"),
+);
+
 // v3 icons
 const JsSquareV3Icon = importSvg(
   async () => import("../__assets__/icons/ads/js-square-v3-icon.svg"),
@@ -1173,6 +1177,7 @@ const ICON_LOOKUP = {
   "cut-control": CutIcon,
   "dashboard-line": DashboardLineIcon,
   "database-2-line": Database2Line,
+  "datasource-config": DatasourceConfigIcon,
   "datasource-v3": DatasourceV3Icon,
   "datasources-2": Datasources2,
   "decrease-control": DecreaseIcon,

app/client/packages/design-system/ads/src/Switch/Switch.styles.tsx

@@ -31,6 +31,7 @@ export const StyledSwitchLabel = styled(Text)<{
   justify-content: space-between;
   min-width: 9rem;
   cursor: pointer;
+  word-break: break-all;
 
   ${({ isDisabled }) =>
     isDisabled &&

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/components/EmbeddedDatasourcePathField.tsx

@@ -593,7 +593,7 @@ class EmbeddedDatasourcePathComponent extends React.Component<
               </Text>
             </StyledTooltip>
           )}
-        {displayValue && (
+        {displayValue && shouldSave && (
           <StoreAsDatasource
             datasourceId={
               datasourceObject && "id" in datasourceObject

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

@@ -60,7 +60,7 @@ function PluginActionResponse() {
         dispatch(
           setPluginActionEditorDebuggerState({
             open: true,
-            selectedTab: DEBUGGER_TAB_KEYS.SCHEMA_TAB,
+            selectedTab: DEBUGGER_TAB_KEYS.DATASOURCE_TAB,
           }),
         );
       }

app/client/src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab/styles.ts

@@ -30,9 +30,10 @@ export const StatusBar = styled.div`
   display: flex;
   justify-content: space-between;
   height: ${TAB_BAR_HEIGHT}px;
-  padding: 8px;
+  padding: 8px 8px 8px 12px;
   border-bottom: 1px solid var(--ads-v2-color-border);
   z-index: var(--ads-v2-z-index-1);
+  background: var(--ads-v2-color-bg);
 `;
 
 export const StatusBarInfo = styled.div`

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/ApiDatasourceSelector.tsx

@@ -0,0 +1,13 @@
+import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
+import { type Action } from "entities/Action";
+import { reduxForm } from "redux-form";
+import {
+  PluginDatasourceSelector,
+  type CustomProps,
+} from "./PluginDatasourceSelector";
+
+export default reduxForm<Action, CustomProps>({
+  form: API_EDITOR_FORM_NAME,
+  destroyOnUnmount: false,
+  enableReinitialize: true,
+})(PluginDatasourceSelector);

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/PluginDatasourceSelector.tsx

@@ -20,16 +20,18 @@ import type { AppState } from "ee/reducers";
 import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors";
 import { useActiveActionBaseId } from "ee/pages/Editor/Explorer/hooks";
 import { INTEGRATION_TABS } from "constants/routes";
-import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
+import {
+  API_EDITOR_FORM_NAME,
+  QUERY_EDITOR_FORM_NAME,
+} from "ee/constants/forms";
 import MenuField from "components/editorComponents/form/fields/MenuField";
 import type { InjectedFormProps } from "redux-form";
-import { reduxForm } from "redux-form";
-import type { Action } from "entities/Action";
-import { CurrentDataSourceLink } from "./CurrentDataSourceLink";
-import { CurrentDataSource } from "./CurrentDataSource";
+import { PluginType, type Action } from "entities/Action";
+import { CurrentDataSourceLink } from "../CurrentDataSourceLink";
+import { CurrentDataSource } from "../CurrentDataSource";
 import { useCreateDatasource } from "ee/PluginActionEditor/hooks/useCreateDatasource";
 
-interface CustomProps {
+export interface CustomProps {
   datasourceId: string;
   datasourceName: string;
 }
@@ -44,7 +46,10 @@ interface DATASOURCES_OPTIONS_TYPE {
   onSelect?: (value: string) => void;
 }
 
-const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => {
+export const PluginDatasourceSelector = ({
+  datasourceId,
+  datasourceName,
+}: Props) => {
   const activeActionBaseId = useActiveActionBaseId();
   const currentActionConfig = useSelector((state) =>
     activeActionBaseId
@@ -118,7 +123,11 @@ const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => {
     <Flex>
       <MenuField
         className={"t--switch-datasource"}
-        formName={QUERY_EDITOR_FORM_NAME}
+        formName={
+          plugin?.type === PluginType.API
+            ? API_EDITOR_FORM_NAME
+            : QUERY_EDITOR_FORM_NAME
+        }
         name="datasource.id"
         options={DATASOURCES_OPTIONS}
       >
@@ -130,9 +139,3 @@ const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => {
     </Flex>
   );
 };
-
-export default reduxForm<Action, CustomProps>({
-  form: QUERY_EDITOR_FORM_NAME,
-  destroyOnUnmount: false,
-  enableReinitialize: true,
-})(DatasourceSelector);

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/QueryDatasourceSelector.tsx

@@ -0,0 +1,13 @@
+import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
+import { type Action } from "entities/Action";
+import { reduxForm } from "redux-form";
+import {
+  PluginDatasourceSelector,
+  type CustomProps,
+} from "./PluginDatasourceSelector";
+
+export default reduxForm<Action, CustomProps>({
+  form: QUERY_EDITOR_FORM_NAME,
+  destroyOnUnmount: false,
+  enableReinitialize: true,
+})(PluginDatasourceSelector);

app/client/src/PluginActionEditor/components/PluginActionResponse/components/Schema/DatasourceSelector/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { UIComponentTypes } from "api/PluginApi";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import ApiDatasourceSelector from "./ApiDatasourceSelector";
+import QueryDatasourceSelector from "./QueryDatasourceSelector";
+
+const API_FORM_COMPONENTS = [
+  UIComponentTypes.ApiEditorForm,
+  UIComponentTypes.GraphQLEditorForm,
+];
+
+export interface DatasourceProps {
+  datasourceId: string;
+  datasourceName: string;
+}
+
+const DatasourceSelector = (props: DatasourceProps) => {
+  const { plugin } = usePluginActionContext();
+
+  return API_FORM_COMPONENTS.includes(plugin.uiComponent) ? (
+    <ApiDatasourceSelector {...props} />
+  ) : (
+    <QueryDatasourceSelector {...props} />
+  );
+};
+
+export default DatasourceSelector;

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

@@ -1,4 +1,4 @@
-import { Flex } from "@appsmith/ads";
+import { Button, Flex, Tooltip } from "@appsmith/ads";
 import React, { useEffect, useState } from "react";
 import { DatasourceStructureContext } from "entities/Datasource";
 import { useDispatch, useSelector } from "react-redux";
@@ -21,9 +21,11 @@ import { DatasourceEditEntryPoints } from "constants/Datasource";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import { isEmpty, omit } from "lodash";
 import { getQueryParams } from "utils/URLUtils";
-import { getCurrentPageId } from "selectors/editorSelectors";
 import { TableColumns } from "./TableColumns";
 import { BOTTOMBAR_HEIGHT } from "./constants";
+import { createMessage, EDIT_DS_CONFIG } from "ee/constants/messages";
+import { useEditorType } from "ee/hooks";
+import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
 
 interface Props {
   datasourceId: string;
@@ -44,7 +46,8 @@ const Schema = (props: Props) => {
     getPluginIdFromDatasourceId(state, props.datasourceId),
   );
 
-  const currentPageId = useSelector(getCurrentPageId);
+  const editorType = useEditorType(location.pathname);
+  const { parentEntityId } = useParentEntityInfo(editorType);
 
   const [selectedTable, setSelectedTable] = useState<string>();
 
@@ -107,7 +110,7 @@ const Schema = (props: Props) => {
     });
 
     const url = datasourcesEditorIdURL({
-      basePageId: currentPageId,
+      baseParentEntityId: parentEntityId,
       datasourceId: props.datasourceId,
       params: { ...omit(getQueryParams(), "viewMode"), viewMode: false },
       generateEditorPath: true,
@@ -143,6 +146,15 @@ const Schema = (props: Props) => {
             datasourceId={props.datasourceId}
             datasourceName={props.datasourceName}
           />
+          <Tooltip content={createMessage(EDIT_DS_CONFIG)} placement="top">
+            <Button
+              isIconButton
+              kind="tertiary"
+              onClick={editDatasource}
+              size="sm"
+              startIcon="datasource-config"
+            />
+          </Tooltip>
         </Flex>
         <StatusDisplay
           editDatasource={editDatasource}

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

@@ -1,4 +1,4 @@
-import { Flex, Button } from "@appsmith/ads";
+import { Flex, Button, Tooltip } from "@appsmith/ads";
 import {
   DatasourceStructureContext,
   type DatasourceStructure,
@@ -9,6 +9,15 @@ import DatasourceSelector from "./DatasourceSelector";
 import { refreshDatasourceStructure } from "actions/datasourceActions";
 import { useDispatch } from "react-redux";
 import { SchemaTableContainer } from "./styles";
+import { createMessage, EDIT_DS_CONFIG } from "ee/constants/messages";
+import { DatasourceEditEntryPoints } from "constants/Datasource";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
+import { datasourcesEditorIdURL } from "ee/RouteBuilder";
+import history from "utils/history";
+import { omit } from "lodash";
+import { getQueryParams } from "utils/URLUtils";
+import { useEditorType } from "ee/hooks";
+import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
 
 interface Props {
   datasourceId: string;
@@ -28,6 +37,8 @@ const SchemaTables = ({
   setSelectedTable,
 }: Props) => {
   const dispatch = useDispatch();
+  const editorType = useEditorType(location.pathname);
+  const { parentEntityId } = useParentEntityInfo(editorType);
 
   const refreshStructure = useCallback(() => {
     dispatch(
@@ -38,6 +49,26 @@ const SchemaTables = ({
     );
   }, [dispatch, datasourceId]);
 
+  // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop
+  const editDatasource = () => {
+    const entryPoint = DatasourceEditEntryPoints.QUERY_EDITOR_DATASOURCE_SCHEMA;
+
+    AnalyticsUtil.logEvent("EDIT_DATASOURCE_CLICK", {
+      datasourceId: datasourceId,
+      pluginName: "",
+      entryPoint: entryPoint,
+    });
+
+    const url = datasourcesEditorIdURL({
+      baseParentEntityId: parentEntityId,
+      datasourceId: datasourceId,
+      params: { ...omit(getQueryParams(), "viewMode"), viewMode: false },
+      generateEditorPath: true,
+    });
+
+    history.push(url);
+  };
+
   return (
     <SchemaTableContainer
       data-testid="t--datasource-schema-container"
@@ -53,10 +84,21 @@ const SchemaTables = ({
         gap="spaces-2"
         justifyContent={"space-between"}
       >
-        <DatasourceSelector
-          datasourceId={datasourceId}
-          datasourceName={datasourceName}
-        />
+        <Flex alignItems={"center"} gap="spaces-2">
+          <DatasourceSelector
+            datasourceId={datasourceId}
+            datasourceName={datasourceName}
+          />
+          <Tooltip content={createMessage(EDIT_DS_CONFIG)} placement="top">
+            <Button
+              isIconButton
+              kind="tertiary"
+              onClick={editDatasource}
+              size="sm"
+              startIcon="datasource-config"
+            />
+          </Tooltip>
+        </Flex>
         <Button
           className="datasourceStructure-refresh"
           isIconButton

app/client/src/ce/PluginActionEditor/components/PluginActionResponse/hooks/usePluginActionResponseTabs.tsx

@@ -62,6 +62,20 @@ function usePluginActionResponseTabs() {
   };
 
   if (plugin.type === PluginType.API) {
+    if (datasource && "id" in datasource) {
+      tabs.push({
+        key: DEBUGGER_TAB_KEYS.DATASOURCE_TAB,
+        title: "Datasource",
+        panelComponent: (
+          <Schema
+            currentActionId={action.id}
+            datasourceId={datasource?.id || ""}
+            datasourceName={datasource?.name || ""}
+          />
+        ),
+      });
+    }
+
     tabs.push(
       {
         key: DEBUGGER_TAB_KEYS.RESPONSE_TAB,
@@ -111,8 +125,8 @@ function usePluginActionResponseTabs() {
 
     if (showSchema) {
       tabs.push({
-        key: DEBUGGER_TAB_KEYS.SCHEMA_TAB,
-        title: "Schema",
+        key: DEBUGGER_TAB_KEYS.DATASOURCE_TAB,
+        title: "Datasource",
         panelComponent: (
           <Schema
             currentActionId={action.id}

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

@@ -393,6 +393,7 @@ export const CREATE_NEW_DATASOURCE_DATABASE_HEADER = () => "Databases";
 export const CREATE_NEW_DATASOURCE_MOST_POPULAR_HEADER = () => "Most popular";
 export const CREATE_NEW_DATASOURCE_REST_API = () => "REST API";
 export const SAMPLE_DATASOURCES = () => "Sample datasources";
+export const EDIT_DS_CONFIG = () => "Edit datasource configuration";
 
 export const ERROR_EVAL_ERROR_GENERIC = () =>
   `Unexpected error occurred while evaluating the application`;

app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx

@@ -70,7 +70,7 @@ function DebuggerTabs() {
   const shouldRender = !(
     selectedTab === DEBUGGER_TAB_KEYS.RESPONSE_TAB ||
     selectedTab === DEBUGGER_TAB_KEYS.HEADER_TAB ||
-    selectedTab === DEBUGGER_TAB_KEYS.SCHEMA_TAB
+    selectedTab === DEBUGGER_TAB_KEYS.DATASOURCE_TAB
   );
 
   return (

app/client/src/components/editorComponents/Debugger/constants.ts

@@ -1,5 +1,5 @@
 export enum DEBUGGER_TAB_KEYS {
-  SCHEMA_TAB = "SCHEMA_TAB",
+  DATASOURCE_TAB = "DATASOURCE_TAB",
   RESPONSE_TAB = "RESPONSE_TAB",
   HEADER_TAB = "HEADERS_TAB",
   ERROR_TAB = "ERROR_TAB",