fix: Api pane and settings responsiveness (#33297)

## Description

Various style and layout changes for side by side responsiveness

Fixes #33249 

## Automation

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

### 🔍 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/9006852734>
> Commit: de02d207d06524e3aace37647821ffd45ee17e64
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9006852734&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->






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

app/client/cypress/e2e/Regression/ServerSide/ApiTests/API_DefaultContentType_spec.js

@@ -3,10 +3,10 @@ import {
   AppSidebarButton,
 } from "../../../../support/Pages/EditorNavigation";
 
-const testdata = require("../../../../fixtures/testdata.json");
 const apiwidget = require("../../../../locators/apiWidgetslocator.json");
 import appPage from "../../../../locators/CMSApplocators";
 import apiEditor from "../../../../locators/ApiEditor";
+import { apiPage } from "../../../../support/Objects/ObjectsCore";
 
 describe("API Panel request body", { tags: ["@tag.Datasource"] }, function () {
   it("1. Check whether the default content-type changes on changing method types and remains unchanged on switching to GET", function () {
@@ -16,7 +16,7 @@ describe("API Panel request body", { tags: ["@tag.Datasource"] }, function () {
     cy.contains(apiEditor.bodyTab).click({ force: true });
     cy.get(apiEditor.bodyTypeSelected).should("have.text", "NONE");
 
-    cy.get(apiEditor.jsonBodyTab).click({ force: true });
+    apiPage.SelectSubTab("JSON");
 
     //Switch to headers tab
     cy.contains(apiEditor.headersTab).click();
@@ -35,7 +35,7 @@ describe("API Panel request body", { tags: ["@tag.Datasource"] }, function () {
 
     // Checking Body type to be JSON
     cy.contains(apiEditor.bodyTab).click({ force: true });
-    cy.get(apiEditor.jsonBodyTab).click({ force: true });
+    apiPage.SelectSubTab("JSON");
     cy.get(apiEditor.bodyTypeSelected).should("have.text", "JSON");
 
     // Changing method type to GET

app/client/cypress/locators/ApiEditor.js

@@ -23,11 +23,8 @@ export default {
     ".t--apiFormPaginationType label:contains('Paginate with response URL') input",
   apiTab: ".react-tabs__tab-list li",
   bodyType: ".t--apiFormPostBodyType",
-  bodyTypeSelected:
+  bodyTypeSelected: '[data-testid="t--api-body-tab-switch"] .rc-select-selection-item',
-    '[data-testid="t--api-body-tab-switch"] .ads-v2-segmented-control__segments-container-segment[data-selected="true"]',
   bodyTab: "Body",
-  jsonBodyTab:
-    ".ads-v2-segmented-control__segments-container-segment[data-value='application/json']",
   headersTab: "Header",
   jsonResponseTab: "[data-value='JSON']",
   tableResponseTab: "[data-value='TABLE']",

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

@@ -61,8 +61,11 @@ export class ApiPage {
     "//div[contains(@class, 'rc-select-item-option')]//div[contains(text(),'" +
     verb +
     "')]";
-  private _bodySubTab = (subTab: string) =>
+  private _bodyTypeSelect = `//div[@data-testid="t--api-body-tab-switch"]`;
-    `//div[@data-testid="t--api-body-tab-switch"]//span[text()='${subTab}']`;
+  private _bodyTypeToSelect = (subTab: string) =>
+    "//div[contains(@class, 'rc-select-item-option')]//div[contains(text(),'" +
+    subTab +
+    "')]";
   private _rightPaneTab = (tab: string) =>
     "//span[contains(text(), '" + tab + "')]/parent::button";
   _visibleTextSpan = (spanText: string) => "//span[text()='" + spanText + "']";
@@ -290,7 +293,8 @@ export class ApiPage {
       | "BINARY"
       | "RAW",
   ) {
-    this.agHelper.GetNClick(this._bodySubTab(subTabName));
+    this.agHelper.GetNClick(this._bodyTypeSelect);
+    cy.xpath(this._bodyTypeToSelect(subTabName)).should("be.visible").click();
   }
 
   AssertRightPaneSelectedTab(tabName: RightPaneTabs) {

app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx

@@ -116,7 +116,7 @@ function KeyValueRow(props: Props & WrappedFieldArrayProps) {
     >
       {!props.hideHeader && (
         <FlexContainer>
-          <Flex className="key-value" size={1}>
+          <Flex className="key-value" size={props.hasType ? 2 : 1}>
             <Text kind="body-m">Key</Text>
           </Flex>
           <Flex className="key-value" size={3}>
@@ -144,7 +144,10 @@ function KeyValueRow(props: Props & WrappedFieldArrayProps) {
 
             return (
               <FormRowWithLabel key={index}>
-                <Flex data-location-id={btoa(`${field}.key`)} size={1}>
+                <Flex
+                  data-location-id={btoa(`${field}.key`)}
+                  size={props.hasType ? 2 : 1}
+                >
                   {props.hasType ? (
                     <DynamicTextFieldWithDropdownWrapper>
                       <DynamicTextField

app/client/src/constants/AppsmithActionConstants/formConfig/GoogleSheetsSettingsConfig.ts

@@ -22,6 +22,7 @@ export default [
         configProperty: "actionConfiguration.timeoutInMillisecond",
         controlType: "INPUT_TEXT",
         dataType: "NUMBER",
+        width: "270px",
       },
     ],
   },

app/client/src/constants/AppsmithActionConstants/formConfig/QuerySettingsConfig.ts

@@ -22,6 +22,7 @@ export default [
         configProperty: "actionConfiguration.timeoutInMillisecond",
         controlType: "INPUT_TEXT",
         dataType: "NUMBER",
+        width: "270px",
       },
     ],
   },

app/client/src/pages/Editor/APIEditor/ApiAuthentication.tsx

@@ -33,7 +33,9 @@ const AuthContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  padding: var(--ads-v2-spaces-5);
+  gap: var(--ads-v2-spaces-3);
 `;
 
 const OAuthContainer = styled.div`
@@ -55,10 +57,6 @@ const OAuthText = styled.span<ErrorProps>`
   margin-left: 5px;
 `;
 
-const DescriptionText = styled(Text)`
-  margin: 12px auto;
-`;
-
 function OAuthLabel(props: ErrorProps) {
   return (
     <OAuthContainer>
@@ -118,11 +116,11 @@ function ApiAuthentication(props: Props): JSX.Element {
   return (
     <AuthContainer>
       {authType === AuthType.OAuth2 && <OAuthLabel hasError={hasError} />}
-      <DescriptionText kind="body-m">
+      <Text kind="body-m">
         {shouldSave
           ? createMessage(SAVE_DATASOURCE_MESSAGE)
           : createMessage(EDIT_DATASOURCE_MESSAGE)}
-      </DescriptionText>
+      </Text>
       <StoreAsDatasource
         datasourceId={datasourceId}
         enable={isEnabled}

app/client/src/pages/Editor/APIEditor/Pagination.tsx

@@ -49,11 +49,15 @@ const PaginationTypeView = styled.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: ${(props) => props.theme.spaces[11]}px;
+  max-width: 100%;
 `;
 
 const PaginationSection = styled.div`
   display: flex;
   padding: var(--ads-v2-spaces-4) 0 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ads-v2-spaces-3);
 `;
 
 const Example = styled(Text)`
@@ -77,7 +81,7 @@ const BindingKey = styled.div`
 const GifContainer = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
 
   img {
     width: 320px;
@@ -121,15 +125,13 @@ export default function Pagination(props: PaginationProps) {
                     1. Configure table for pagination
                   </Text>
                 </StepTitle>
-                <Step type={TextType.P1}>1. Enable server side pagination</Step>
-                <Step type={TextType.P1}>2. Configure OnPageChange action</Step>
                 <StepTitle>
                   <Text type={TextType.P1}>
                     2. Configure request parameters
                   </Text>
                 </StepTitle>
-                <Step style={{ width: "336px" }} type={TextType.P1}>
+                <Step type={TextType.P1}>
-                  1. Map appropiate parameter or header in your request to
+                  1. Map appropriate parameter or header in your request to
                   UsersTable’s page number property
                 </Step>
                 <Example type={TextType.P2}>
@@ -139,12 +141,6 @@ export default function Pagination(props: PaginationProps) {
                   <Text type={TextType.P2}>{"{{UsersTable.pageNo}}"}</Text>
                 </BindingKey>
               </div>
-              <GifContainer>
-                <GifPlayer gif={configPagination} thumbnail={thumbnail} />
-                <Text type={TextType.P3}>
-                  1. How to configure table for pagination
-                </Text>
-              </GifContainer>
             </PaginationTypeView>,
             <PaginationTypeView key={PaginationType.URL}>
               <div>
@@ -153,8 +149,6 @@ export default function Pagination(props: PaginationProps) {
                     1. Configure table for pagination
                   </Text>
                 </StepTitle>
-                <Step type={TextType.P1}>1. Enable server side pagination</Step>
-                <Step type={TextType.P1}>2. Configure OnPageChange action</Step>
                 <StepTitle>
                   <Text type={TextType.P1}>
                     2. Configure Request Parameters
@@ -212,16 +206,16 @@ export default function Pagination(props: PaginationProps) {
                   </Button>
                 </PaginationFieldWrapper>
               </div>
-              <GifContainer>
-                <GifPlayer gif={configPagination} thumbnail={thumbnail} />
-                <Text type={TextType.P3}>
-                  1. How to configure table for pagination
-                </Text>
-              </GifContainer>
             </PaginationTypeView>,
           ]}
         />
       </FormRow>
+      {props.paginationType !== PaginationType.NONE ? (
+        <GifContainer>
+          <GifPlayer gif={configPagination} thumbnail={thumbnail} />
+          <Text type={TextType.P3}>Configure table for pagination</Text>
+        </GifContainer>
+      ) : null}
     </PaginationSection>
   );
 }

app/client/src/pages/Editor/APIEditor/PostBodyData.tsx

@@ -23,16 +23,18 @@ import { updateBodyContentType } from "actions/apiPaneActions";
 import type { CodeEditorExpected } from "components/editorComponents/CodeEditor";
 import { AutocompleteDataType } from "utils/autocomplete/AutocompleteDataType";
 import { createMessage, API_PANE_NO_BODY } from "@appsmith/constants/messages";
-import { SegmentedControl } from "design-system";
+import { Select, Option } from "design-system";
 
 const PostBodyContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   padding: 12px 0px 0px;
   background-color: var(--ads-v2-color-bg);
   height: 100%;
-  .ads-v2-segmented-control {
+  gap: var(--ads-v2-spaces-4);
-    /* max-width: fit-content;
+  .ads-v2-select {
-    margin-left: 30px; */
+    max-width: 250px;
-    margin-bottom: 12px;
+    width: 100%;
   }
 `;
 
@@ -174,13 +176,18 @@ function PostBodyData(props: Props) {
 
   return (
     <PostBodyContainer>
-      <SegmentedControl
+      <Select
         data-testid="t--api-body-tab-switch"
         defaultValue={selectedTab}
-        isFullWidth={false}
+        onSelect={(value) => postBodyDataOnChangeFn(value)}
-        onChange={(key: string) => postBodyDataOnChangeFn(key)}
+        value={selectedTab}
-        options={options}
+      >
-      />
+        {options.map((option) => (
+          <Option key={option.value} value={option.value}>
+            {option.label}
+          </Option>
+        ))}
+      </Select>
       {tabComponentsMap(selectedTab)}
     </PostBodyContainer>
   );

app/server/appsmith-plugins/amazons3Plugin/src/main/resources/setting.json

@@ -29,6 +29,7 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "dataType": "NUMBER"
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/anthropicPlugin/src/main/resources/setting.json

@@ -22,7 +22,8 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/appsmithAiPlugin/src/main/resources/setting.json

@@ -22,7 +22,8 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/firestorePlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/googleAiPlugin/src/main/resources/setting.json

@@ -22,7 +22,8 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/googleSheetsPlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mongoPlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mssqlPlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/mysqlPlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/openAiPlugin/src/main/resources/setting.json

@@ -22,7 +22,8 @@
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
           "initialValue": 60000,
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/oraclePlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }

app/server/appsmith-plugins/postgresPlugin/src/main/resources/setting.json

@@ -28,7 +28,8 @@
           "subtitle": "Maximum time after which the query will return",
           "configProperty": "actionConfiguration.timeoutInMillisecond",
           "controlType": "INPUT_TEXT",
-          "dataType": "NUMBER"
+          "dataType": "NUMBER",
+          "width": "270px"
         }
       ]
     }