From 354ab5784f2dc139262114eeb8d53ca59e07ce4d Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Mon, 11 Apr 2022 15:51:42 +0300
Subject: [PATCH 1/5] restore layouts

---
 package-lock.json                             |  4 ++--
 .../services/reducers/dimensions-reducers.ts  |  4 ++--
 src/app/views/App.styles.ts                   |  9 +--------
 src/app/views/App.tsx                         | 11 +++++-----
 src/app/views/common/monaco/monaco.scss       |  1 -
 .../views/query-response/QueryResponse.tsx    | 20 ++++++++++---------
 .../views/query-runner/request/Request.tsx    |  4 +---
 7 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 425969e38..dfa495ed3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2338,7 +2338,7 @@
       "version": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
       "integrity": "sha512-GlERHSZSZrJyyY6FBKoRNgNkW8EJa3g5c45Oi/PKrrHW5fVj1mK53OElJxmLWAZLkQsoNVTCvg55AI0gBVVKJA==",
       "requires": {
-        "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
+        "@augloop/types-core": "2.16.189",
         "@ms-ofb/officefloodgatecore": "*",
         "es6-promise": "4.2.8",
         "tslib": "^1.9.3",
@@ -12981,4 +12981,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts
index 7d189393b..91ea91c2d 100644
--- a/src/app/services/reducers/dimensions-reducers.ts
+++ b/src/app/services/reducers/dimensions-reducers.ts
@@ -13,11 +13,11 @@ const initialState: IDimensions = {
   },
   sidebar: {
     width: '26%',
-    height: '100%'
+    height: ''
   },
   content: {
     width: '74%',
-    height: '100%'
+    height: ''
   }
 };
 
diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
index 9cd251e19..b1ace9a89 100644
--- a/src/app/views/App.styles.ts
+++ b/src/app/views/App.styles.ts
@@ -69,7 +69,7 @@ export const appStyles = (theme: ITheme) => {
       marginTop: 5
     },
     statusAreaFullScreen: {
-      marginTop: 0
+      marginTop: 10
     },
     vResizeHandle: {
       zIndex: 1,
@@ -88,15 +88,8 @@ export const appStyles = (theme: ITheme) => {
       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
index 342b80119..d4e406145 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -421,7 +421,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 && (
@@ -472,7 +471,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 +480,8 @@ 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,11 +490,11 @@ class App extends Component<IAppProps, IAppState> {
                   </div>
                 </div>
 
-                <div style={this.queryResponseStyle}>
+                <div style={{}}>
                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>
-                  <div style={{ display:'flex', flexGrow:'1', flexShrink: '1'}}>
+                  <div style={{}}>
                     <QueryResponse verb={this.state.selectedVerb} />
                   </div>
                 </div>
diff --git a/src/app/views/common/monaco/monaco.scss b/src/app/views/common/monaco/monaco.scss
index 168d05a5d..123fa242a 100644
--- a/src/app/views/common/monaco/monaco.scss
+++ b/src/app/views/common/monaco/monaco.scss
@@ -5,7 +5,6 @@
   margin-top: 5px;
   padding-bottom: $gutter;
   width: inherit !important;
-  overflow: hidden;
 
   .react-monaco-editor-container {
     width: inherit !important;
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index 11926fb6c..3bd06db7b 100644
--- 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 [responseHeight, setResponseHeight] = useState('610px');
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const [query] = useState('');
-  const { sampleQuery } = useSelector((state: IRootState) => state);
+  const { sampleQuery, dimensions } = useSelector((state: IRootState) => state);
+
+  useEffect(() => {
+    setResponseHeight(convertVhToPx(dimensions.response.height, 50));
+  }, [dimensions]);
 
   const {
     intl: { messages }
@@ -89,14 +94,11 @@ const QueryResponse = (props: IQueryResponseProps) => {
     <>
       <Resizable
         style={{
-          marginBottom: 10,
-          marginTop: 10,
-          flexGrow: 1,
-          flexShrink:1
+          marginBottom: 10
         }}
         bounds={'parent'}
         size={{
-          height: '100%',
+          height: responseHeight,
           width: '100%'
         }}
         enable={{
@@ -105,7 +107,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
       >
         <div className='query-response' style={{
           minHeight: 350,
-          height: '100%'
+          height: responseHeight
         }}>
 
           <Pivot overflowBehavior="menu" onLinkClick={handlePivotItemClick}
diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
index e906b7a9d..ada717b3b 100644
--- a/src/app/views/query-runner/request/Request.tsx
+++ b/src/app/views/query-runner/request/Request.tsx
@@ -178,9 +178,7 @@ export class Request extends Component<IRequestComponent, any> {
       <>
         <Resizable
           style={{
-            border: 'solid 1px #ddd',
-            marginBottom: 10,
-            overflow: 'hidden'
+            border: 'solid 1px #ddd'
           }}
           onResizeStop={(e: any, direction: any, ref: any) => {
             if (ref && ref.style && ref.style.height) {

From b3118ec47bab0eba8ac6d5e83fac766290991084 Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Tue, 12 Apr 2022 12:00:13 +0300
Subject: [PATCH 2/5] fix sidebar height

---
 src/app/services/reducers/dimensions-reducers.ts |  2 +-
 src/app/views/App.styles.ts                      |  6 +++---
 src/app/views/App.tsx                            | 10 +++++-----
 src/app/views/common/monaco/monaco.scss          |  1 +
 src/app/views/query-response/QueryResponse.tsx   |  9 ++++++---
 src/app/views/query-runner/request/Request.tsx   |  3 ++-
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts
index 91ea91c2d..6427fb94e 100644
--- a/src/app/services/reducers/dimensions-reducers.ts
+++ b/src/app/services/reducers/dimensions-reducers.ts
@@ -17,7 +17,7 @@ const initialState: IDimensions = {
   },
   content: {
     width: '74%',
-    height: ''
+    height: '100%'
   }
 };
 
diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
index b1ace9a89..74f9dd350 100644
--- 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
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index d4e406145..21f21c27f 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -404,6 +404,9 @@ class App extends Component<IAppProps, IAppState> {
     } else if (minimised) {
       sidebarWidth = classes.sidebarMini;
     }
+    else{
+      sideHeight = ''
+    }
 
     this.removeFlexBasisProperty();
 
@@ -480,8 +483,7 @@ class App extends Component<IAppProps, IAppState> {
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: contentHeight
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'}
-                  : {} }
+                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : {} }
               >
                 <div style={{ marginBottom: 8 }} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
@@ -494,9 +496,7 @@ class App extends Component<IAppProps, IAppState> {
                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>
-                  <div style={{}}>
-                    <QueryResponse verb={this.state.selectedVerb} />
-                  </div>
+                  <QueryResponse verb={this.state.selectedVerb} />
                 </div>
               </Resizable>
             )}
diff --git a/src/app/views/common/monaco/monaco.scss b/src/app/views/common/monaco/monaco.scss
index 123fa242a..168d05a5d 100644
--- a/src/app/views/common/monaco/monaco.scss
+++ b/src/app/views/common/monaco/monaco.scss
@@ -5,6 +5,7 @@
   margin-top: 5px;
   padding-bottom: $gutter;
   width: inherit !important;
+  overflow: hidden;
 
   .react-monaco-editor-container {
     width: inherit !important;
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index 3bd06db7b..936709f56 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -25,10 +25,10 @@ import { convertVhToPx } from '../common/dimensions/dimensions-adjustment';
 
 const QueryResponse = (props: IQueryResponseProps) => {
   const dispatch = useDispatch();
-  const [responseHeight, setResponseHeight] = useState('610px');
   const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const [query] = useState('');
+  const [responseHeight, setResponseHeight] = useState('610px');
   const { sampleQuery, dimensions } = useSelector((state: IRootState) => state);
 
   useEffect(() => {
@@ -94,9 +94,12 @@ const QueryResponse = (props: IQueryResponseProps) => {
     <>
       <Resizable
         style={{
-          marginBottom: 10
+          marginBottom: 10,
+          marginTop: 10
         }}
-        bounds={'parent'}
+        bounds={'window'}
+        maxHeight={800}
+        minHeight={350}
         size={{
           height: responseHeight,
           width: '100%'
diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
index ada717b3b..eadd1e802 100644
--- a/src/app/views/query-runner/request/Request.tsx
+++ b/src/app/views/query-runner/request/Request.tsx
@@ -178,7 +178,8 @@ export class Request extends Component<IRequestComponent, any> {
       <>
         <Resizable
           style={{
-            border: 'solid 1px #ddd'
+            border: 'solid 1px #ddd',
+            marginBottom: 10
           }}
           onResizeStop={(e: any, direction: any, ref: any) => {
             if (ref && ref.style && ref.style.height) {

From 91c49ec608791f43388c8445f3ab843244653296 Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Tue, 12 Apr 2022 14:23:34 +0300
Subject: [PATCH 3/5] limit query response to the Resizable component bounds

---
 src/app/views/App.styles.ts                   |  4 ---
 src/app/views/App.tsx                         | 26 +++++++++++++------
 .../views/query-response/QueryResponse.tsx    |  2 +-
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
index 74f9dd350..6efc31064 100644
--- a/src/app/views/App.styles.ts
+++ b/src/app/views/App.styles.ts
@@ -86,10 +86,6 @@ export const appStyles = (theme: ITheme) => {
       position: 'absolute',
       top: '13px',
       right: '10px'
-    },
-    mainContent: {
-    },
-    queryResponse: {
     }
   };
 };
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index 21f21c27f..957c96909 100644
--- 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,7 @@ class App extends Component<IAppProps, IAppState> {
     let sidebarWidth = classes.sidebar;
     let layout = '';
     let sideWidth = sidebar.width;
-    let sideHeight = sidebar.height;
+    const sideHeight = '';
     let maxWidth = '50%';
     let contentWidth = content.width;
     const contentHeight = content.height;
@@ -397,18 +410,15 @@ 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';
     } else if (minimised) {
       sidebarWidth = classes.sidebarMini;
     }
-    else{
-      sideHeight = ''
-    }
 
     this.removeFlexBasisProperty();
+    this.removeSidebarHeightProperty();
 
     return (
       // @ts-ignore
@@ -433,7 +443,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={{
diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
index 936709f56..e25ef66ca 100644
--- a/src/app/views/query-response/QueryResponse.tsx
+++ b/src/app/views/query-response/QueryResponse.tsx
@@ -110,7 +110,7 @@ const QueryResponse = (props: IQueryResponseProps) => {
       >
         <div className='query-response' style={{
           minHeight: 350,
-          height: responseHeight
+          height: '100%'
         }}>
 
           <Pivot overflowBehavior="menu" onLinkClick={handlePivotItemClick}

From d3ccfa22a379a5d5b61b3b3677fa03f507291e5f Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Tue, 12 Apr 2022 14:52:49 +0300
Subject: [PATCH 4/5] fix augloop file path

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index dfa495ed3..092805a5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2338,7 +2338,7 @@
       "version": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
       "integrity": "sha512-GlERHSZSZrJyyY6FBKoRNgNkW8EJa3g5c45Oi/PKrrHW5fVj1mK53OElJxmLWAZLkQsoNVTCvg55AI0gBVVKJA==",
       "requires": {
-        "@augloop/types-core": "2.16.189",
+        "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
         "@ms-ofb/officefloodgatecore": "*",
         "es6-promise": "4.2.8",
         "tslib": "^1.9.3",

From b4fe9733ee96897856eff7415516dd0881bf586e Mon Sep 17 00:00:00 2001
From: Evans Aboge <evansonoka05.j@gmail.com>
Date: Tue, 12 Apr 2022 15:58:27 +0300
Subject: [PATCH 5/5] remove unused sideheight property

---
 src/app/views/App.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
index 957c96909..2e97a12f6 100644
--- a/src/app/views/App.tsx
+++ b/src/app/views/App.tsx
@@ -389,7 +389,6 @@ class App extends Component<IAppProps, IAppState> {
     let sidebarWidth = classes.sidebar;
     let layout = '';
     let sideWidth = sidebar.width;
-    const sideHeight = '';
     let maxWidth = '50%';
     let contentWidth = content.width;
     const contentHeight = content.height;
@@ -455,7 +454,7 @@ class App extends Component<IAppProps, IAppState> {
                 bounds={'window'}
                 size={{
                   width: sideWidth,
-                  height: sideHeight
+                  height: ''
                 }}
               >
 
@@ -502,7 +501,7 @@ class App extends Component<IAppProps, IAppState> {
                   </div>
                 </div>
 
-                <div style={{}}>
+                <div>
                   <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaFullScreenStyle}>
                     <StatusMessages />
                   </div>