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

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

@@ -17,10 +17,10 @@ describe(
         dataSources.FillAuthAPIUrl();
         dataSources.SaveDatasource();
         apiPage.CreateApi("API" + uid, "GET", true);
+        agHelper.AssertElementAbsence(apiPage._saveAsDS);
         apiPage.SelectPaneTab("Authentication");
-        agHelper.AssertElementEnabledDisabled(apiPage._saveAsDS, 0, false);
         // Last one if present on the authentication tab.
-        agHelper.AssertElementEnabledDisabled(apiPage._saveAsDS, 1, false);
+        agHelper.AssertElementEnabledDisabled(apiPage._saveAsDS, 0, false);
       });
     });
   },

app/client/cypress/e2e/Sanity/Datasources/GraphQL_spec.ts

@@ -305,6 +305,7 @@ describe(
         variable: GRAPHQL_VARIABLES,
       });
       apiPage.RunAPI();
+      apiPage.SelectPaneTab("Authentication");
       agHelper.GetNClick(locators._saveDatasource);
       dataSources.AssertDataSourceInfo([
         dataManager.dsValues[

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/Schema/Schema.tsx → app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/Datasource.tsx

@@ -15,23 +15,24 @@ import { datasourcesEditorIdURL } from "ee/RouteBuilder";
 import { DatasourceComponentTypes } from "api/PluginApi";
 import { getPluginActionDebuggerState } from "PluginActionEditor/store";
 import { SchemaDisplayStatus, StatusDisplay } from "./StatusDisplay";
-import DatasourceSelector from "./DatasourceSelector";
-import { SchemaTables } from "./SchemaTables";
+import { DatasourceTables } from "./DatasourceTables";
 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 { useEditorType } from "ee/hooks";
+import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
+import DatasourceInfo from "./DatasourceInfo";
 
 interface Props {
   datasourceId: string;
   datasourceName: string;
   currentActionId: string;
 }
 
-const Schema = (props: Props) => {
+const Datasource = (props: Props) => {
   const dispatch = useDispatch();
 
   const datasourceStructure = useSelector((state) =>
@@ -44,7 +45,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 +109,7 @@ const Schema = (props: Props) => {
     });
 
     const url = datasourcesEditorIdURL({
-      basePageId: currentPageId,
+      baseParentEntityId: parentEntityId,
       datasourceId: props.datasourceId,
       params: { ...omit(getQueryParams(), "viewMode"), viewMode: false },
       generateEditorPath: true,
@@ -137,13 +139,12 @@ const Schema = (props: Props) => {
     }
 
     return (
-      <>
-        <Flex padding="spaces-3">
-          <DatasourceSelector
-            datasourceId={props.datasourceId}
-            datasourceName={props.datasourceName}
-          />
-        </Flex>
+      <Flex flexDirection="column" padding="spaces-3">
+        <DatasourceInfo
+          datasourceId={props.datasourceId}
+          datasourceName={props.datasourceName}
+          showEditButton={!isLoading}
+        />
         <StatusDisplay
           editDatasource={editDatasource}
           errorMessage={
@@ -153,7 +154,7 @@ const Schema = (props: Props) => {
           }
           state={statusState}
         />
-      </>
+      </Flex>
     );
   };
 
@@ -164,7 +165,7 @@ const Schema = (props: Props) => {
 
     return (
       <Flex h="100%">
-        <SchemaTables
+        <DatasourceTables
           currentActionId={props.currentActionId}
           datasourceId={props.datasourceId}
           datasourceName={props.datasourceName}
@@ -194,4 +195,4 @@ const Schema = (props: Props) => {
   );
 };
 
-export { Schema };
+export { Datasource };

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

@@ -0,0 +1,69 @@
+import React from "react";
+import { Button, Flex, Tooltip } from "@appsmith/ads";
+import DatasourceSelector from "./DatasourceSelector";
+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 { omit } from "lodash";
+import { getQueryParams } from "utils/URLUtils";
+import history from "utils/history";
+import { useEditorType } from "ee/hooks";
+import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
+
+interface Props {
+  datasourceId: string;
+  datasourceName: string;
+  showEditButton: boolean;
+}
+
+const DatasourceInfo = ({
+  datasourceId,
+  datasourceName,
+  showEditButton,
+}: Props) => {
+  const editorType = useEditorType(location.pathname);
+  const { parentEntityId } = useParentEntityInfo(editorType);
+
+  // 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 (
+    <Flex alignItems={"center"} gap="spaces-2">
+      <DatasourceSelector
+        datasourceId={datasourceId}
+        datasourceName={datasourceName}
+      />
+      {showEditButton && (
+        <Tooltip content={createMessage(EDIT_DS_CONFIG)} placement="top">
+          <Button
+            isIconButton
+            kind="tertiary"
+            onClick={editDatasource}
+            size="sm"
+            startIcon="datasource-config"
+          />
+        </Tooltip>
+      )}
+    </Flex>
+  );
+};
+
+export default DatasourceInfo;

app/client/src/PluginActionEditor/components/PluginActionResponse/components/DatasourceTab/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/DatasourceTab/DatasourceSelector/PluginDatasourceSelector.tsx

@@ -20,18 +20,17 @@ 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 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 { 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;
+  formName: string;
 }
 
 type Props = InjectedFormProps<Action, CustomProps> & CustomProps;
@@ -44,7 +43,11 @@ interface DATASOURCES_OPTIONS_TYPE {
   onSelect?: (value: string) => void;
 }
 
-const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => {
+export const PluginDatasourceSelector = ({
+  datasourceId,
+  datasourceName,
+  formName,
+}: Props) => {
   const activeActionBaseId = useActiveActionBaseId();
   const currentActionConfig = useSelector((state) =>
     activeActionBaseId
@@ -118,7 +121,7 @@ const DatasourceSelector = ({ datasourceId, datasourceName }: Props) => {
     <Flex>
       <MenuField
         className={"t--switch-datasource"}
-        formName={QUERY_EDITOR_FORM_NAME}
+        formName={formName}
         name="datasource.id"
         options={DATASOURCES_OPTIONS}
       >
@@ -130,9 +133,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/DatasourceTab/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/DatasourceTab/DatasourceSelector/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { UIComponentTypes } from "api/PluginApi";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import ApiDatasourceSelector from "./ApiDatasourceSelector";
+import QueryDatasourceSelector from "./QueryDatasourceSelector";
+import {
+  API_EDITOR_FORM_NAME,
+  QUERY_EDITOR_FORM_NAME,
+} from "ee/constants/forms";
+
+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} formName={API_EDITOR_FORM_NAME} />
+  ) : (
+    <QueryDatasourceSelector {...props} formName={QUERY_EDITOR_FORM_NAME} />
+  );
+};
+
+export default DatasourceSelector;