fix: split request and response area evenly (#1464)

![Screenshot 2024-05-10 at 5 17 58 PM](https://github.com/TBD54566975/ftl/assets/51647/7671d8b0-2eb3-44ef-9c21-f566ed56b4c4) ![Screenshot 2024-05-10 at 5 18 01 PM](https://github.com/TBD54566975/ftl/assets/51647/41f7ec38-f403-4dcc-bef6-95fa04e9d314)
block · May 11, 2024 · f7fb7a6 · f7fb7a6
1 parent ffa5eca
commit f7fb7a6
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 66 deletions.
diff --git a/frontend/src/components/ResizablePanels.tsx b/frontend/src/components/ResizablePanels.tsx
@@ -62,7 +62,7 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
 
   return (
     <div
-      className='flex h-full w-full flex-col overflow-hidden'
+      className='flex h-full w-full flex-col'
       onMouseMove={(e) => {
         if (isDraggingHorizontal) onDragHorizontal(e)
         if (isDraggingVertical) onDragVertical(e)
@@ -72,20 +72,22 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
     >
       <div className='flex flex-1'>
         <div style={{ maxHeight: `calc(100vh - ${(bottomPanelHeight + 46)}px)` }}
-          className='overflow-y-auto flex-1 flex-col'>
+          className='flex-1 flex-col min-h-64'>
           {mainContent}
         </div>
         <div
           className='cursor-col-resize bg-gray-200 dark:bg-gray-700 hover:bg-indigo-600'
           onMouseDown={startDraggingHorizontal}
           style={{ width: '3px', cursor: 'col-resize' }}
         />
-        <RightPanel
-          width={rightPanelWidth}
-          bottomPanelHeight={bottomPanelHeight}
-          header={rightPanelHeader}
-          panels={rightPanelPanels}
-        />
+        <div
+          style={{ width: `${rightPanelWidth}px`, maxHeight: `calc(100vh - ${bottomPanelHeight + 46}px)` }}
+          className='flex flex-col h-full overflow-y-scroll'>
+          <RightPanel
+            header={rightPanelHeader}
+            panels={rightPanelPanels}
+          />
+        </div>
       </div>
       <div
         className='cursor-row-resize bg-gray-200 dark:bg-gray-700 hover:bg-indigo-600'

diff --git a/frontend/src/features/console/right-panel/RightPanel.tsx b/frontend/src/features/console/right-panel/RightPanel.tsx
@@ -2,18 +2,13 @@ import React from 'react'
 import { ExpandablePanel, ExpandablePanelProps } from '../ExpandablePanel'
 
 interface RightPanelProps {
-  width: number
-  bottomPanelHeight: number
   header: React.ReactNode
   panels: ExpandablePanelProps[]
 }
 
-const RightPanel: React.FC<RightPanelProps> = ({ width, bottomPanelHeight, header, panels }) => {
+const RightPanel: React.FC<RightPanelProps> = ({ header, panels }) => {
   return (
-    <div
-      style={{ width: `${width}px`, maxHeight: `calc(100vh - ${bottomPanelHeight}px)` }}
-      className='overflow-y-auto flex flex-col'
-    >
+    <div>
       {header}
       {panels.map((panel, index) => (
         <ExpandablePanel key={`panel-${index}`} {...panel}>

diff --git a/frontend/src/features/verbs/VerbFormInput.tsx b/frontend/src/features/verbs/VerbFormInput.tsx
@@ -23,7 +23,7 @@ export const VerbFormInput = (
 
   return (
     <form onSubmit={handleSubmit} className='rounded-lg'>
-      <div className='mt-2 flex rounded-md shadow-sm'>
+      <div className='flex rounded-md shadow-sm'>
         <span className='inline-flex items-center rounded-l-md border border-r-0 border-gray-300 dark:border-gray-500 px-3 sm:text-sm'>
           {requestType}
         </span>

diff --git a/frontend/src/features/verbs/VerbPage.tsx b/frontend/src/features/verbs/VerbPage.tsx
@@ -85,10 +85,7 @@ export const VerbPage = () => {
         />
         <Page.Body className='flex h-full'>
           <ResizablePanels
-            mainContent={
-              <div className='flex mb-2'>
-                <VerbRequestForm module={module} verb={verb} />
-              </div>}
+            mainContent={<VerbRequestForm module={module} verb={verb} />}
             rightPanelHeader={header}
             rightPanelPanels={verbPanels(verb)}
             bottomPanelContent={<CallList calls={calls} />}

diff --git a/frontend/src/features/verbs/VerbRequestForm.tsx b/frontend/src/features/verbs/VerbRequestForm.tsx
@@ -86,8 +86,10 @@ export const VerbRequestForm = ({ module, verb }: { module?: Module; verb?: Verb
     }
   }
 
+  const bottomText = response ?? error ?? ''
+
   return (
-    <div className='p-4 flex flex-col h-full w-full'>
+    <div className='flex flex-col h-full overflow-hidden pt-4 px-4'>
       <VerbFormInput
         requestType={requestType(verb)}
         initialPath={httpPopulatedRequestPath(module, verb)}
@@ -96,62 +98,48 @@ export const VerbRequestForm = ({ module, verb }: { module?: Module; verb?: Verb
         onSubmit={handleSubmit}
       />
       <div>
-
-        <div className='hidden sm:block pt-2'>
-          <div className='border-b border-gray-200 dark:border-white/10'>
-            <nav className='-mb-px flex space-x-6' aria-label='Tabs'>
-              {tabs.map((tab) => (
-                <a
-                  key={tab.name}
-                  className={classNames(
-                    activeTabId === tab.id
-                      ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400'
-                      : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:hover:border-gray-500 dark:text-gray-500 dark:hover:text-gray-300',
-                    'whitespace-nowrap cursor-pointer border-b-2 py-2 px-1 text-sm font-medium'
-                  )}
-                  aria-current={activeTabId === tab.id ? 'page' : undefined}
-                  onClick={(e) => handleTabClick(e, tab.id)}
-                >
-                  {tab.name}
-                </a>
-              ))}
-            </nav>
-          </div>
+        <div className='border-b border-gray-200 dark:border-white/10'>
+          <nav className='-mb-px flex space-x-6' aria-label='Tabs'>
+            {tabs.map((tab) => (
+              <a
+                key={tab.name}
+                className={classNames(
+                  activeTabId === tab.id
+                    ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400'
+                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:hover:border-gray-500 dark:text-gray-500 dark:hover:text-gray-300',
+                  'whitespace-nowrap cursor-pointer border-b-2 py-2 px-1 text-sm font-medium'
+                )}
+                aria-current={activeTabId === tab.id ? 'page' : undefined}
+                onClick={(e) => handleTabClick(e, tab.id)}
+              >
+                {tab.name}
+              </a>
+            ))}
+          </nav>
         </div>
       </div>
-      <div className='flex flex-col justify-between h-full'>
-        <div>
+      <div className='flex-1 overflow-hidden'>
+        <div className='h-1/2 overflow-y-scroll'>
           {activeTabId === 'body' && (
-            <CodeEditor key='body' initialState={initialEditorState} onTextChanged={handleEditorTextChanged} />
+            <CodeEditor initialState={initialEditorState} onTextChanged={handleEditorTextChanged} />
           )}
           {activeTabId === 'verbschema' && (
-            <CodeEditor key='verbschema' initialState={{ initialText: verb?.schema ?? 'what', readonly: true }} />
+            <CodeEditor initialState={{ initialText: verb?.schema ?? 'what', readonly: true }} />
           )}
           {activeTabId === 'jsonschema' && (
-            <CodeEditor key='jsonschema' initialState={{ initialText: verb?.jsonRequestSchema ?? '', readonly: true }} />
+            <CodeEditor initialState={{ initialText: verb?.jsonRequestSchema ?? '', readonly: true }} />
           )}
           {activeTabId === 'headers' && (
-            <CodeEditor key='headers' initialState={initialHeadersState} onTextChanged={setHeadersText} />
+            <CodeEditor initialState={initialHeadersState} onTextChanged={setHeadersText} />
           )}
-
         </div>
 
-        <div className='flex flex-col'>
-          {response && (
-            <>
-              <div className='border-b my-4 border-gray-200 dark:border-gray-600'></div>
-              <h2 className='text-md pb-2'>Response</h2>
-              <CodeEditor key='verb-response' initialState={{ initialText: response, readonly: true }} />
-            </>
-          )}
-          {error && (
-            <>
-              <div className='border-b my-4 border-gray-200 dark:border-gray-600'></div>
-              <h2 className='text-md pb-2'>Error</h2>
-              <CodeEditor key='verb-error' initialState={{ initialText: error, readonly: true }} />
-            </>
-          )}
+        <div className='border-b border-gray-200 dark:border-white/10'></div>
+        <div className='h-1/2 overflow-y-scroll'>
+          <CodeEditor initialState={{ initialText: bottomText, readonly: true }} onTextChanged={setHeadersText} />
         </div>
       </div>
-    </div>)
+    </div >
+  )
+
 }
diff --git a/frontend/src/features/verbs/VerbRightPanel.tsx b/frontend/src/features/verbs/VerbRightPanel.tsx
@@ -36,7 +36,6 @@ export const verbPanels = (verb?: Verb) => {
           <ArrowRightStartOnRectangleIcon className='h-4 w-4 text-blue-600' />
           <div className='truncate text-xs'>{`${c?.module}.${c?.name}`}</div>
         </div>
-
       )),
     })
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,6 @@ export const verbPanels = (verb?: Verb) => { @@
               <ArrowRightStartOnRectangleIcon className='h-4 w-4 text-blue-600' />
               <div className='truncate text-xs'>{`${c?.module}.${c?.name}`}</div>
             </div>
           )),
         })
       }
@@ Expand Down @@