Fix: Sidebar and query response components on zoom (#1658)

microsoftgraph · Apr 12, 2022 · 728734d · 728734d
1 parent 422a95a
commit 728734d
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts
@@ -13,7 +13,7 @@ const initialState: IDimensions = {
   },
   sidebar: {
     width: '26%',
-    height: '100%'
+    height: ''
   },
   content: {
     width: '74%',

diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
@@ -11,12 +11,12 @@ export const appStyles = (theme: ITheme) => {
       paddingRight: '15px',
       paddingLeft: '4px',
       marginLeft: 'auto',
-      marginRight: 'auto',
-      borderBottom: '1px solid black'
+      marginRight: 'auto'
     },
     appRow: {
       display: 'flex',
-      flexWrap: 'no-wrap'
+      flexWrap: 'no-wrap',
+      alignItems: 'stretch'
     },
     tryItMessage: {
       marginBottom: theme.spacing.s1
@@ -69,7 +69,7 @@ export const appStyles = (theme: ITheme) => {
       marginTop: 5
     },
     statusAreaFullScreen: {
-      marginTop: 0
+      marginTop: 10
     },
     vResizeHandle: {
       zIndex: 1,
@@ -86,17 +86,6 @@ export const appStyles = (theme: ITheme) => {
       position: 'absolute',
       top: '13px',
       right: '10px'
-    },
-    mainContent: {
-      overflow: 'hidden',
-      display: 'flex',
-      flexDirection: 'column' as 'column'
-    },
-    queryResponse: {
-      display: 'flex',
-      flexDirection: 'column' as 'column',
-      height: '100%',
-      overflow: 'hidden'
     }
   };
 };
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -72,8 +72,6 @@ class App extends Component<IAppProps, IAppState> {
   private currentTheme: ITheme = getTheme();
   private statusAreaMobileStyle = appStyles(this.currentTheme).statusAreaMobileScreen;
   private statusAreaFullScreenStyle = appStyles(this.currentTheme).statusAreaFullScreen;
-  private contentStyle = appStyles(this.currentTheme).mainContent;
-  private queryResponseStyle = appStyles(this.currentTheme).queryResponse;
 
   constructor(props: IAppProps) {
     super(props);
@@ -367,6 +365,21 @@ class App extends Component<IAppProps, IAppState> {
     element.style.removeProperty('flex-basis');
   }
 
+  private removeSidebarHeightProperty(){
+    /*
+    height style property is added automatically on the sidebar when the window resizes
+    and is set to 100% leading to a distortion of the page when these exact steps are followed.
+    https://github.com/microsoftgraph/microsoft-graph-explorer-v4/pull/1602#:~:text=Zoom
+    Removing the property altogether helps maintain the layout of the page.
+    */
+    const collection = document.getElementsByClassName('resizable-sidebar');
+    if (collection?.length === 0) {
+      return;
+    }
+    const element: any = collection[0];
+    element.style.removeProperty('height');
+  }
+
   public render() {
     const classes = classNames(this.props);
     const { authenticated, graphExplorerMode, minimised, sampleQuery,
@@ -376,7 +389,6 @@ class App extends Component<IAppProps, IAppState> {
     let sidebarWidth = classes.sidebar;
     let layout = '';
     let sideWidth = sidebar.width;
-    let sideHeight = sidebar.height;
     let maxWidth = '50%';
     let contentWidth = content.width;
     const contentHeight = content.height;
@@ -397,7 +409,6 @@ class App extends Component<IAppProps, IAppState> {
     if (mobileScreen) {
       layout = sidebarWidth = 'ms-Grid-col ms-sm12';
       sideWidth = '100%';
-      sideHeight = '100%';
       maxWidth = '100%';
       contentWidth = '100%';
       layout += ' layout';
@@ -406,6 +417,7 @@ class App extends Component<IAppProps, IAppState> {
     }
 
     this.removeFlexBasisProperty();
+    this.removeSidebarHeightProperty();
 
     return (
       // @ts-ignore
@@ -421,7 +433,6 @@ class App extends Component<IAppProps, IAppState> {
           <div className={ `ms-Grid-row ${classes.appRow}`} style={{
             flexWrap: mobileScreen && 'wrap',
             marginRight: showSidebar || (graphExplorerMode === Mode.TryIt)  && '-20px',
-            height: mobileScreen ? '100%' : '100vh',
             flexDirection: (graphExplorerMode === Mode.TryIt) ? 'column' : 'row' }}>
 
             {graphExplorerMode === Mode.Complete && (
@@ -431,7 +442,7 @@ class App extends Component<IAppProps, IAppState> {
                     this.resizeSideBar(ref.style.width);
                   }
                 }}
-                className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth}`}
+                className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth} resizable-sidebar`}
                 minWidth={'4'}
                 maxWidth={maxWidth}
                 enable={{
@@ -443,7 +454,7 @@ class App extends Component<IAppProps, IAppState> {
                 bounds={'window'}
                 size={{
                   width: sideWidth,
-                  height: sideHeight
+                  height: ''
                 }}
               >
 
@@ -472,7 +483,7 @@ class App extends Component<IAppProps, IAppState> {
 
             {displayContent && (
               <Resizable
-                bounds={'parent'}
+                bounds={'window'}
                 className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
                 enable={{
                   right: false
@@ -481,8 +492,7 @@ class App extends Component<IAppProps, IAppState> {
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: contentHeight
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px', overflow: 'hidden'}
-                  : this.contentStyle }
+                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : {} }
               >
                 <div style={{ marginBottom: 8 }} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
@@ -491,13 +501,11 @@ class App extends Component<IAppProps, IAppState> {
                   </div>
                 </div>
 
-                <div style={this.queryResponseStyle}>
+                <div>
                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>
-                  <div style={{ display:'flex', flexGrow:'1', flexShrink: '1'}}>
-                    <QueryResponse verb={this.state.selectedVerb} />
-                  </div>
+                  <QueryResponse verb={this.state.selectedVerb} />
                 </div>
               </Resizable>
             )}

diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -4,7 +4,7 @@ import {
   Modal, Pivot, PivotItem, TooltipHost
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { componentNames, eventTypes, telemetry } from '../../../telemetry';
@@ -20,15 +20,20 @@ import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items';
 import './query-response.scss';
 import { IRootState } from '../../../types/root';
 import { CopyButton } from '../common/copy/CopyButton';
+import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 
 
 const QueryResponse = (props: IQueryResponseProps) => {
   const dispatch = useDispatch();
-
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const [query] = useState('');
-  const { sampleQuery } = useSelector((state: IRootState) => state);
+  const [responseHeight, setResponseHeight] = useState('610px');
+  const { sampleQuery, dimensions } = useSelector((state: IRootState) => state);
+
+  useEffect(() => {
+    setResponseHeight(convertVhToPx(dimensions.response.height, 50));
+  }, [dimensions]);
 
   const {
     intl: { messages }
@@ -90,13 +95,13 @@ const QueryResponse = (props: IQueryResponseProps) => {
       <Resizable
         style={{
           marginBottom: 10,
-          marginTop: 10,
-          flexGrow: 1,
-          flexShrink:1
+          marginTop: 10
         }}
-        bounds={'parent'}
+        bounds={'window'}
+        maxHeight={800}
+        minHeight={350}
         size={{
-          height: '100%',
+          height: responseHeight,
           width: '100%'
         }}
         enable={{

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -179,8 +179,7 @@ export class Request extends Component<IRequestComponent, any> {
         <Resizable
           style={{
             border: 'solid 1px #ddd',
-            marginBottom: 10,
-            overflow: 'hidden'
+            marginBottom: 10
           }}
           onResizeStop={(e: any, direction: any, ref: any) => {
             if (ref && ref.style && ref.style.height) {