fix: query tab scrollbar padding gap fix (#38317)

## Description
Remove scrollbar gap in request config.


Fixes [#38135](#38135)

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]
> 🟣 🟣 🟣 Your tests are running.
> Tests running at:
<https://github.com/appsmithorg/appsmith/actions/runs/12491071853>
> Commit: 85399db
> Workflow: `PR Automation test suite`
> Tags: `@tag.IDE`
> Spec: ``
> <hr>Wed, 25 Dec 2024 08:14:00 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a tabbed interface in the `CommonEditorForm` for better
content organization.
- Enhanced usability of the `PluginActionForm` with scrollable content
areas.
  
- **Bug Fixes**
- Adjusted tooltip positioning to improve visibility in the
`EmbeddedDatasourcePathField`.

- **Style**
- Added new styled components for tabs and headers to enhance layout and
design.

- **Chores**
- Deprecated the `RequestTabs` component in preparation for its removal.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -12,7 +12,7 @@ const PluginActionForm = () => {
   const { plugin } = usePluginActionContext();
 
   return (
-    <Flex flex="1" overflow="hidden" p="spaces-4" w="100%">
+    <Flex flex="1" overflow="auto" p="spaces-4" w="100%">
       {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
         <APIEditorForm />
       )}

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

@@ -1,11 +1,19 @@
 import React from "react";
+import { Tab, TabsList } from "@appsmith/ads";
 import { type Action } from "entities/Action";
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import { InfoFields } from "./InfoFields";
-import { RequestTabs } from "./RequestTabs";
-import { HintMessages } from "./HintMessages";
-import { Flex } from "@appsmith/ads";
+import { API_EDITOR_TABS } from "PluginActionEditor/constants/CommonApiConstants";
+import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
+
 import useGetFormActionValues from "./hooks/useGetFormActionValues";
+import { DatasourceConfig } from "./components/DatasourceConfig";
+import { HintMessages } from "./HintMessages";
+import { InfoFields } from "./InfoFields";
+import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
+import ApiAuthentication from "./components/ApiAuthentication";
+import { useSelectedFormTab } from "./hooks/useSelectedFormTab";
+import { getHeadersCount, getParamsCount } from "./utils";
+import * as Styled from "./styles";
 
 interface Props {
   httpMethodOptions: { value: string }[];
@@ -18,7 +26,13 @@ interface Props {
 }
 
 const CommonEditorForm = (props: Props) => {
-  const { action } = props;
+  const {
+    action,
+    bodyUIComponent,
+    formName,
+    isChangePermitted,
+    paginationUiComponent,
+  } = props;
   const hintMessages = action.messages || [];
   const theme = EditorTheme.LIGHT;
   const {
@@ -29,39 +43,89 @@ const CommonEditorForm = (props: Props) => {
     datasourceParams,
   } = useGetFormActionValues();
 
+  const [currentTab, setCurrentTab] = useSelectedFormTab();
+  const headersCount = getHeadersCount(
+    actionHeaders,
+    datasourceHeaders,
+    autoGeneratedHeaders,
+  );
+  const paramsCount = getParamsCount(actionParams, datasourceHeaders);
+
   return (
-    <Flex
-      data-testid={props.dataTestId}
-      flex="1"
-      flexDirection="column"
-      gap="spaces-3"
-      overflow="hidden"
-      w="100%"
-    >
-      <InfoFields
-        actionName={action.name}
-        changePermitted={props.isChangePermitted}
-        formName={props.formName}
-        options={props.httpMethodOptions}
-        pluginId={action.pluginId}
-        theme={theme}
-      />
-      <HintMessages hintMessages={hintMessages} />
-      <RequestTabs
-        actionConfigurationHeaders={actionHeaders}
-        actionConfigurationParams={actionParams}
-        actionName={action.name}
-        autogeneratedHeaders={autoGeneratedHeaders}
-        bodyUIComponent={props.bodyUIComponent}
-        datasourceHeaders={datasourceHeaders}
-        datasourceParams={datasourceParams}
-        formName={props.formName}
-        paginationUiComponent={props.paginationUiComponent}
-        pushFields={props.isChangePermitted}
-        showSettings={false}
-        theme={theme}
-      />
-    </Flex>
+    <Styled.Tabs onValueChange={setCurrentTab} value={currentTab}>
+      <Styled.FormHeader>
+        <InfoFields
+          actionName={action.name}
+          changePermitted={props.isChangePermitted}
+          formName={props.formName}
+          options={props.httpMethodOptions}
+          pluginId={action.pluginId}
+          theme={theme}
+        />
+        <HintMessages hintMessages={hintMessages} />
+        <TabsList>
+          {Object.values(API_EDITOR_TABS)
+            .filter((tab) => {
+              return tab !== API_EDITOR_TABS.SETTINGS;
+            })
+            .map((tab) => (
+              <Tab
+                data-testid={`t--api-editor-${tab}`}
+                key={tab}
+                notificationCount={
+                  tab == "HEADERS"
+                    ? headersCount
+                    : tab == "PARAMS"
+                      ? paramsCount
+                      : undefined
+                }
+                value={tab}
+              >
+                {createMessage(API_EDITOR_TAB_TITLES[tab])}
+              </Tab>
+            ))}
+        </TabsList>
+      </Styled.FormHeader>
+
+      <Styled.TabPanel value={API_EDITOR_TABS.HEADERS}>
+        <DatasourceConfig
+          attributeName="header"
+          autogeneratedHeaders={autoGeneratedHeaders}
+          data={datasourceHeaders}
+        />
+        <KeyValueFieldArray
+          actionConfig={actionHeaders}
+          dataTreePath={`${action.name}.config.headers`}
+          hideHeader
+          label="Headers"
+          name="actionConfiguration.headers"
+          placeholder="Value"
+          pushFields={isChangePermitted}
+          theme={theme}
+        />
+      </Styled.TabPanel>
+      <Styled.TabPanel value={API_EDITOR_TABS.PARAMS}>
+        <DatasourceConfig attributeName={"param"} data={datasourceParams} />
+        <KeyValueFieldArray
+          actionConfig={actionParams}
+          dataTreePath={`${action.name}.config.queryParameters`}
+          hideHeader
+          label="Params"
+          name="actionConfiguration.queryParameters"
+          pushFields={isChangePermitted}
+          theme={theme}
+        />
+      </Styled.TabPanel>
+      <Styled.TabPanel className="h-full" value={API_EDITOR_TABS.BODY}>
+        {bodyUIComponent}
+      </Styled.TabPanel>
+      <Styled.TabPanel value={API_EDITOR_TABS.PAGINATION}>
+        {paginationUiComponent}
+      </Styled.TabPanel>
+      <Styled.TabPanel value={API_EDITOR_TABS.AUTHENTICATION}>
+        <ApiAuthentication formName={formName} />
+      </Styled.TabPanel>
+    </Styled.Tabs>
   );
 };
 

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

@@ -27,6 +27,9 @@ const StyledTabPanel = styled(TabPanel)`
   overflow: auto;
 `;
 
+/**
+ * @deprecated This component will be deleted along with APIEditor/CommonEditorForm.
+ */
 export function RequestTabs(props: {
   autogeneratedHeaders: AutoGeneratedHeader[] | undefined;
   datasourceHeaders: Property[];

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

@@ -155,7 +155,7 @@ const StyledTooltip = styled.span<{ width?: number }>`
   position: absolute;
   z-index: 100000;
   max-width: 300px;
-  bottom: 125%;
+  top: 125%;
   left: calc(-10px + ${(props) => (props.width ? props.width / 2 : 0)}px);
   margin-left: -60px;
 
@@ -165,14 +165,14 @@ const StyledTooltip = styled.span<{ width?: number }>`
   &::after {
     content: "";
     position: absolute;
-    top: 100%;
+    bottom: 100%;
     left: 50%;
     height: 10px;
     width: 10px;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: var(--ads-v2-color-bg-emphasis-max) transparent transparent
+    border-color: transparent transparent var(--ads-v2-color-bg-emphasis-max)
       transparent;
   }
 

app/client/src/PluginActionEditor/components/PluginActionForm/components/CommonEditorForm/styles.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Tabs as AdsTabs, TabPanel as AdsTabPanel } from "@appsmith/ads";
 
 export const RequestMethodSelectContainer = styled.div`
   width: 100px;
@@ -10,3 +11,21 @@ export const RequestMethodSelectContainer = styled.div`
 export const DatasourcePathFieldContainer = styled.div`
   width: 100%;
 `;
+
+export const FormHeader = styled.div`
+  position: sticky;
+  top: calc(-1 * var(--ads-v2-spaces-4));
+  padding-top: var(--ads-v2-spaces-4);
+  margin-top: calc(-1 * var(--ads-v2-spaces-4));
+  z-index: var(--ads-v2-z-index-21);
+  background-color: var(--ads-color-background);
+  height: 100px;
+`;
+
+export const Tabs = styled(AdsTabs)`
+  height: max-content;
+`;
+
+export const TabPanel = styled(AdsTabPanel)`
+  margin: 0 auto;
+`;

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx

@@ -23,7 +23,6 @@ const UQIEditorForm = () => {
       alignItems="center"
       data-testid="t--uqi-editor-form"
       flexDirection="column"
-      overflowY="scroll"
       w="100%"
     >
       <FormRender