feat: add request/response area resizing (#3810)

Author: ElinorW

src/app/views/common/banners/Notification.styles.ts

@@ -9,17 +9,14 @@ export const useNotificationStyles = makeStyles({
     backgroundRepeat: 'no-repeat',
     backgroundSize: 'contain',
     backgroundPosition: 'right',
+    whiteSpace: 'wrap',
     '&light': {
       backgroundColor: '#E8EFFF',
       color: '#000000'
     },
     '&.dark': {
       backgroundColor: '#1D202A',
       color: '#ffffff'
-    },
-    '&.highContrast': {
-      backgroundColor: '#0C3B5E',
-      color: '#ffffff'
     }
   },
   body: {

src/app/views/layout/Layout.tsx

@@ -1,5 +1,5 @@
 import { mergeClasses } from '@fluentui/react-components';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../store';
 import CollectionPermissionsProvider from '../../services/context/collection-permissions/CollectionPermissionsProvider';
 import { PopupsProvider } from '../../services/context/popups-context';
@@ -17,7 +17,7 @@ import Request from '../query-runner/request/Request';
 import { Sidebar } from '../sidebar/Sidebar';
 import { LayoutResizeHandler } from './LayoutResizeHandler';
 import { useResizeHandle } from '@fluentui-contrib/react-resize-handle';
-import { useLayoutResizeStyles, useLayoutStyles, SIDEBAR_SIZE_CSS_VAR } from './LayoutStyles';
+import { useLayoutResizeStyles, useLayoutStyles, SIDEBAR_SIZE_CSS_VAR, REQUEST_HEIGHT_CSS_VAR } from './LayoutStyles';
 import { useDetectMobileScreen } from '../../utils/useDetectMobileScreen';
 
 interface LayoutProps {
@@ -30,9 +30,12 @@ export const Layout = (props: LayoutProps) => {
   const resizeStyles = useLayoutResizeStyles();
   const dispatch = useAppDispatch();
   const sampleQuery = useAppSelector((state) => state.sampleQuery);
+  const [sampleBody, setSampleBody] = useState('');
   const { mobileScreen, showSidebar } = useAppSelector((state) => state.sidebarProperties);
   const [initialSidebarWidth, setInitialSidebarWidth] = useState(456);
   const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(null);
+  const [requestHeight, setRequestHeight] = useState(300);
+  const requestRef = useRef<HTMLDivElement | null>(null);
 
   const {
     handleRef: sidebarHandleRef,
@@ -44,8 +47,6 @@ export const Layout = (props: LayoutProps) => {
     growDirection: 'end'
   });
 
-  const [sampleBody, setSampleBody] = useState('');
-
   useEffect(() => {
     if (sampleQuery.selectedVerb !== 'GET') {
       const query = { ...sampleQuery };
@@ -117,6 +118,40 @@ export const Layout = (props: LayoutProps) => {
     }
   };
 
+  const updateRequestHeight = (newHeight: number) => {
+    const min = 150;
+    const max = window.innerHeight * 0.5;
+    const finalHeight = Math.max(min, Math.min(max, newHeight));
+
+    document.documentElement.style.setProperty(REQUEST_HEIGHT_CSS_VAR, `${finalHeight}px`);
+    setRequestHeight(finalHeight);
+  };
+
+  const handleRequestResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const startY = e.clientY;
+    const startHeight = requestRef.current
+      ? parseInt(getComputedStyle(requestRef.current).height, 10)
+      : requestHeight;
+
+    const onMouseMove = (event: MouseEvent) => {
+      const newHeight = startHeight + (event.clientY - startY);
+      updateRequestHeight(newHeight);
+    };
+
+    const onMouseUp = () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  };
+
+  useEffect(() => {
+    document.documentElement.style.setProperty(REQUEST_HEIGHT_CSS_VAR, `${requestHeight}px`);
+  }, []);
   return (
     <>
       <PopupsProvider>
@@ -128,7 +163,7 @@ export const Layout = (props: LayoutProps) => {
                 <Sidebar handleToggleSelect={handleToggleSelect} />
                 {!mobileScreen && (
                   <LayoutResizeHandler
-                    position="end"
+                    position='end'
                     ref={sidebarHandleRef}
                     onDoubleClick={() => updateSidebarSize(456)}
                     onMouseDown={handleResizeStart}
@@ -150,8 +185,20 @@ export const Layout = (props: LayoutProps) => {
                   <QueryRunner onSelectVerb={props.handleSelectVerb} />
                 </div>
                 <div id='request-response-area' className={layoutStyles.requestResponseArea}>
-                  <div id='request-area' className={layoutStyles.requestArea}>
+                  <div
+                    id='request-area'
+                    className={layoutStyles.requestArea}
+                    ref={requestRef}
+                    style={{ height: `var(${REQUEST_HEIGHT_CSS_VAR})` }}
+                  >
                     <Request handleOnEditorChange={handleOnEditorChange} sampleQuery={sampleQuery} />
+                    {!mobileScreen && (
+                      <LayoutResizeHandler
+                        position='bottom'
+                        onMouseDown={handleRequestResizeStart}
+                        onDoubleClick={() => updateRequestHeight(300)}
+                      />
+                    )}
                   </div>
                   <div style={{ margin: '0 10px' }}>
                     <StatusMessages />

src/app/views/layout/LayoutResizeHandler.tsx

@@ -38,25 +38,30 @@ export const LayoutResizeHandler = React.forwardRef<HTMLDivElement, HandleProps>
         : position === 'start'
           ? 'right'
           : 'left';
-
-    const positioningProps =
-      position === 'start' || position === 'end'
-        ? {
+    const positioningProps = (() => {
+      if (position === 'start' || position === 'end') {
+        return {
           [positioningAttr]: '-5px',
           top: '50%',
           transform: 'translateY(-50%)',
-          width: '6px',
+          width: '8px',
           height: '100%',
           cursor: 'col-resize'
-        }
-        : {
-          ...(position === 'top' ? { top: '-6.5px' } : { bottom: '-6.5px' }),
-          left: '50%',
-          transform: 'translateX(-50%)',
+        };
+      }
+
+      if (position === 'top' || position === 'bottom') {
+        return {
+          [position]: '0',
+          left: '0',
           width: '100%',
-          height: '3px',
+          height: '6px',
           cursor: 'row-resize'
         };
+      }
+
+      return {};
+    })();
 
     return (
       <div

src/app/views/layout/LayoutStyles.tsx

@@ -1,6 +1,7 @@
 import { makeResetStyles, tokens, makeStyles } from '@fluentui/react-components';
 
 export const SIDEBAR_SIZE_CSS_VAR = '--sidebar-size';
+export const REQUEST_HEIGHT_CSS_VAR = '--request-area-height';
 
 export const useLayoutResizeStyles = makeResetStyles({
   [SIDEBAR_SIZE_CSS_VAR]: '23%'
@@ -22,9 +23,9 @@ export const useLayoutStyles = makeStyles({
   },
   sidebar: {
     flex: '0 0 auto',
-    flexBasis: `clamp(40px, var(${SIDEBAR_SIZE_CSS_VAR}), 25vw)`,
-    maxWidth: '25vw',
-    minWidth: '40px',
+    flexBasis: `var(${SIDEBAR_SIZE_CSS_VAR})`,
+    minWidth: '48px',
+    maxWidth: '50vw',
     position: 'relative',
     overflow: 'hidden',
     transition: 'flex-basis 0.2s ease-in-out',
@@ -48,17 +49,19 @@ export const useLayoutStyles = makeStyles({
     minHeight: 0
   },
   requestResponseArea: {
-    flex: 1,
     display: 'flex',
     flexDirection: 'column',
-    minHeight: 0,
-    overflowY: 'auto',
-    overflowX: 'hidden'
+    flexGrow: 1,
+    overflow: 'hidden'
   },
   requestArea: {
-    flex: 1,
-    minHeight: '200px',
+    height: `var(${REQUEST_HEIGHT_CSS_VAR})`,
+    minHeight: '150px',
+    maxHeight: '50vh',
+    position: 'relative',
     overflow: 'auto',
+    flexShrink: 0,
+    transition: 'height 0.2s ease-in-out',
     borderRadius: tokens.borderRadiusMedium,
     padding: tokens.spacingHorizontalS
   },

src/app/views/sidebar/Sidebar.styles.tsx

@@ -16,7 +16,8 @@ export const useSidebarStyles = makeStyles({
     }
   },
   sidebarToggle: {
-    marginLeft: 'auto'
+    marginLeft: 'auto',
+    padding: '10px'
   },
   tree: {
     flexGrow: 1,