Merge branch 'fix/api-scroll' into 'release'

Fixing api Scroll.

See merge request theappsmith/internal-tools-client!689

app/client/src/components/designSystems/appsmith/TabbedView.tsx

@@ -9,7 +9,8 @@ const TabsWrapper = styled.div<{ overflow?: boolean }>`
     height: 100%;
   }
   .react-tabs__tab-panel {
-    height: 100%;
+    height: calc(100% - 46px);
+    overflow: scroll;
   }
   .react-tabs__tab-list {
     border-bottom-color: #d0d7dd;

app/client/src/components/editorComponents/ApiResponseView.tsx

@@ -103,6 +103,10 @@ const FailedMessageContainer = styled.div`
   align-items: center;
 `;
 
+const TabbedViewWrapper = styled.div`
+  height: calc(100% - 30px);
+`;
+
 const ApiResponseView = (props: Props) => {
   const {
     match: {
@@ -143,7 +147,7 @@ const ApiResponseView = (props: Props) => {
                 ? JSON.stringify(response.body, null, 2)
                 : "",
             }}
-            height={700}
+            height={"100%"}
           />
         </>
       ),
@@ -163,12 +167,12 @@ const ApiResponseView = (props: Props) => {
       title: "Request Body",
       panelComponent: (
         <CodeEditor
+          height={"100%"}
           input={{
             value: _.isObject(response.requestBody)
               ? JSON.stringify(response.requestBody, null, 2)
               : response.requestBody || "",
           }}
-          height={700}
         />
       ),
     },
@@ -203,12 +207,14 @@ const ApiResponseView = (props: Props) => {
           </ResponseMetaInfo>
         </React.Fragment>
       </FormRow>
-      <BaseTabbedView
-        overflow
-        tabs={tabs}
-        selectedIndex={selectedIndex}
-        setSelectedIndex={setSelectedIndex}
-      />
+      <TabbedViewWrapper>
+        <BaseTabbedView
+          overflow
+          tabs={tabs}
+          selectedIndex={selectedIndex}
+          setSelectedIndex={setSelectedIndex}
+        />
+      </TabbedViewWrapper>
     </ResponseWrapper>
   );
 };

app/client/src/components/editorComponents/CodeEditor.tsx

@@ -6,9 +6,13 @@ import "codemirror/theme/monokai.css";
 
 require("codemirror/mode/javascript/javascript");
 
-const Wrapper = styled.div<{ height: number }>`
-  height: ${props => props.height}px;
+const Wrapper = styled.div<{ height: number | string }>`
+  height: ${props =>
+    typeof props.height === "number" ? props.height + "px" : props.height};
   color: white;
+  .CodeMirror {
+    height: 100%;
+  }
 `;
 
 interface Props {
@@ -16,7 +20,7 @@ interface Props {
     value: string;
     onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
   };
-  height: number;
+  height: number | string;
 }
 
 class CodeEditor extends React.Component<Props> {
@@ -35,7 +39,6 @@ class CodeEditor extends React.Component<Props> {
         lineNumbers: true,
         lineWrapping: true,
       });
-      this.editor.setSize(null, this.props.height);
     }
   }
 

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

@@ -74,7 +74,7 @@ const DatasourceWrapper = styled.div`
 
 const SecondaryWrapper = styled.div`
   display: flex;
-  height: 100%;
+  height: calc(100% - 120px);
   border-top: 1px solid #d0d7dd;
   margin-top: 15px;
 `;

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

@@ -29,6 +29,10 @@ const PostbodyContainer = styled.div`
 
 const JSONEditorFieldWrapper = styled.div`
   margin: 5px;
+  .CodeMirror {
+    height: auto;
+    min-height: 300px;
+  }
 `;
 export interface RapidApiAction {
   editable: boolean;
@@ -110,7 +114,6 @@ const PostBodyData = (props: Props) => {
             <DynamicTextField
               name="actionConfiguration.body"
               expected={FIELD_VALUES.API_ACTION.body}
-              height={300}
               showLineNumbers
               allowTabIndent
               singleLine={false}

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

@@ -55,7 +55,7 @@ const MainConfiguration = styled.div`
 
 const SecondaryWrapper = styled.div`
   display: flex;
-  height: 100%;
+  height: calc(100% - 120px);
   border-top: 1px solid #d0d7dd;
   margin-top: 10px;
 `;
@@ -163,7 +163,12 @@ const RapidApiEditorForm: React.FC<Props> = (props: Props) => {
   // }
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form
+      onSubmit={handleSubmit}
+      style={{
+        height: "100%",
+      }}
+    >
       <MainConfiguration>
         <FormRow>
           <DynamicTextField

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

@@ -188,6 +188,7 @@ class ApiEditor extends React.Component<Props> {
       <div
         style={{
           position: "relative",
+          height: "100%",
         }}
       >
         {apiId ? (