Fix: shrink request section (#822)

* resize to complete shrinkage * adjust response-headers height * remove unnecessary code * add container style to auth import
microsoftgraph · Jan 29, 2021 · 13074a4 · 13074a4
1 parent a2098b9
commit 13074a4
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 59 deletions.
diff --git a/src/app/views/query-response/headers/ResponseHeaders.tsx b/src/app/views/query-response/headers/ResponseHeaders.tsx
@@ -11,7 +11,7 @@ const ResponseHeaders = () => {
   const { dimensions: { response }, graphResponse, responseAreaExpanded } = useSelector((state: any) => state);
   const { headers } = graphResponse;
 
-  const height = convertVhToPx(getResponseHeight(response, responseAreaExpanded), 100);
+  const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100);
 
   if (headers) {
     return (

diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx
@@ -6,7 +6,7 @@ import {
   TooltipHost,
 } from 'office-ui-fabric-react';
 import { Resizable } from 're-resizable';
-import React, { Component } from 'react';
+import React, { Component, CSSProperties } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
@@ -15,11 +15,10 @@ import { telemetry } from '../../../../telemetry';
 import { Mode } from '../../../../types/enums';
 import { IRequestComponent } from '../../../../types/request';
 import { setDimensions } from '../../../services/actions/dimensions-action-creator';
-import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { translateMessage } from '../../../utils/translate-messages';
 import { convertVhToPx } from '../../common/dimensions-adjustment';
-import { Monaco } from '../../common/monaco/Monaco';
 import { Auth } from './auth';
+import { RequestBody } from './body';
 import { RequestHeaders } from './headers';
 import { Permission } from './permissions';
 import './request.scss';
@@ -32,11 +31,17 @@ export class Request extends Component<IRequestComponent, any> {
   private getPivotItems = (height: string) => {
     const {
       handleOnEditorChange,
-      sampleQuery,
       mode,
       intl: { messages },
     }: any = this.props;
 
+    const heightAdjustment = 55;
+    const containerStyle: CSSProperties = {
+      height: convertVhToPx(height, heightAdjustment),
+      overflowY: 'hidden',
+      borderBottom: '1px solid #ddd'
+    };
+
     const pivotItems = [
       <PivotItem
         key='request-body'
@@ -46,10 +51,9 @@ export class Request extends Component<IRequestComponent, any> {
         title={messages['request body']}
         headerText={messages['request body']}
       >
-        <Monaco
-          body={sampleQuery.sampleBody}
-          height={convertVhToPx(height, 100)}
-          onChange={(value) => handleOnEditorChange(value)} />
+        <div style={containerStyle}>
+          <RequestBody handleOnEditorChange={handleOnEditorChange} />
+        </div>
       </PivotItem>,
       <PivotItem
         key='request-headers'
@@ -59,7 +63,9 @@ export class Request extends Component<IRequestComponent, any> {
         title={messages['request header']}
         headerText={messages['request header']}
       >
-        <RequestHeaders height={convertVhToPx(height, 60)} />
+        <div style={containerStyle}>
+          <RequestHeaders />
+        </div>
       </PivotItem>,
       <PivotItem
         key='permissions'
@@ -69,7 +75,9 @@ export class Request extends Component<IRequestComponent, any> {
         title={translateMessage('permissions preview')}
         headerText={messages['modify permissions']}
       >
-        <Permission />
+        <div style={containerStyle}>
+          <Permission />
+        </div>
       </PivotItem>,
     ];
 
@@ -82,7 +90,9 @@ export class Request extends Component<IRequestComponent, any> {
           onRenderItemLink={this.getTooltipDisplay}
           title={messages['Access Token']}
           headerText={messages['Access Token']}>
-          <Auth style={{ height }} />
+          <div style={containerStyle}>
+            <Auth />
+          </div>
         </PivotItem>
       );
     }
@@ -124,7 +134,7 @@ export class Request extends Component<IRequestComponent, any> {
   public render() {
     const { dimensions } = this.props;
     const requestPivotItems = this.getPivotItems(dimensions.request.height);
-    const minHeight = 250;
+    const minHeight = 60;
     const maxHeight = 800;
 
     return (
@@ -133,7 +143,7 @@ export class Request extends Component<IRequestComponent, any> {
           border: 'solid 1px #ddd',
           marginBottom: 10,
         }}
-        onResize={(e: any, direction: any, ref: any, d: any) => {
+        onResize={(e: any, direction: any, ref: any) => {
           if (ref && ref.style && ref.style.height) {
             this.setRequestAndResponseHeights(ref.style.height);
           }

diff --git a/src/app/views/query-runner/request/auth/Auth.styles.ts b/src/app/views/query-runner/request/auth/Auth.styles.ts
@@ -3,7 +3,8 @@ import { FontSizes, ITheme } from '@uifabric/styling';
 export const authStyles = (theme: ITheme) => {
   return {
     auth: {
-      padding: 10
+      padding: 5,
+      overflowY: 'auto',
     },
     accessTokenContainer: {
       width: 160,
@@ -18,7 +19,7 @@ export const authStyles = (theme: ITheme) => {
       fontFamily: 'monospace',
       fontSize: FontSizes.xSmall,
       width: '100%',
-      height: 150,
+      height: '100%',
       border: 'none',
       resize: 'none'
     },
@@ -29,7 +30,7 @@ export const authStyles = (theme: ITheme) => {
     emptyStateLabel: {
       display: 'flex',
       width: '100%',
-      minHeight: 200,
+      minHeight: '100%',
       justifyContent: 'center',
       alignItems: 'center'
 

diff --git a/src/app/views/query-runner/request/auth/Auth.tsx b/src/app/views/query-runner/request/auth/Auth.tsx
@@ -1,16 +1,19 @@
 import { IconButton, IIconProps, Label, styled } from 'office-ui-fabric-react';
 import React from 'react';
+import { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { componentNames, eventTypes, telemetry } from '../../../../../telemetry';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { classNames } from '../../../classnames';
 import { genericCopy } from '../../../common/copy';
+import { convertVhToPx } from '../../../common/dimensions-adjustment';
 import { authStyles } from './Auth.styles';
 
 
 export function Auth(props: any) {
-  const accessToken = useSelector((state: any) => state.authToken);
+  const { authToken: accessToken, dimensions: { request: { height } } } = useSelector((state: any) => state);
+  const requestHeight = convertVhToPx(height, 60);
 
   const handleCopy = async () => {
     await genericCopy(accessToken);
@@ -26,7 +29,7 @@ export function Auth(props: any) {
     iconName: 'code'
   };
 
-  return (<div className={classes.auth}>
+  return (<div className={classes.auth} style={{ height: requestHeight }}>
     {accessToken ?
       <div>
         <div className={classes.accessTokenContainer}>

diff --git a/src/app/views/query-runner/request/body/RequestBody.tsx b/src/app/views/query-runner/request/body/RequestBody.tsx
@@ -1,12 +1,18 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
+
 import { Monaco } from '../../../common';
+import { convertVhToPx } from '../../../common/dimensions-adjustment';
+
+const RequestBody = ({ handleOnEditorChange }: any) => {
+    const { dimensions: { request: { height } }, sampleQuery } = useSelector((state: any) => state);
 
-export const RequestBodyControl = () => {
     return (
-        <div className='request-editor-control'>
-            <Monaco
-                body={undefined}
-            />
-        </div>
+        <Monaco
+            body={sampleQuery.sampleBody}
+            height={convertVhToPx(height, 60)}
+            onChange={(value) => handleOnEditorChange(value)} />
     );
 };
+
+export default RequestBody;
diff --git a/src/app/views/query-runner/request/body/index.ts b/src/app/views/query-runner/request/body/index.ts
@@ -0,0 +1,4 @@
+import RequestBody from './RequestBody';
+export {
+  RequestBody
+};
diff --git a/src/app/views/query-runner/request/headers/Headers.styles.ts b/src/app/views/query-runner/request/headers/Headers.styles.ts
@@ -3,11 +3,10 @@ import { FontSizes } from '@uifabric/styling';
 export const headerStyles = () => {
   return {
     container: {
-      width: '100%',
       textAlign: 'center',
       padding: 10,
       overflowY: 'auto',
-      overflowX: 'auto'
+      overflowX: 'hidden'
     },
     itemContent: {
       marginTop: '2.5%',

diff --git a/src/app/views/query-runner/request/permissions/Permission.tsx b/src/app/views/query-runner/request/permissions/Permission.tsx
@@ -238,39 +238,42 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
 
     const tabHeight = convertVhToPx(dimensions.request.height, 110);
 
-    return (
-      <div className={panel ? classes.panelContainer : ''}
-        style={{ minHeight: (panel) ? '800px' : '', maxHeight: (panel) ? '800px' : tabHeight, }}>
-        {loading && <Label>
-          <FormattedMessage id={'Fetching permissions'} />...
-        </Label>}
-        {!loading &&
-          <div className={classes.permissions}>
-            {!panel && <TabList
-              columns={this.getColumns()}
-              maxHeight={tabHeight}
-              renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
-                this.renderItemColumn(item, index, column)}
-              renderDetailsHeader={this.renderDetailsHeader}
-              classes={classes}
-            />}
-            {panel &&
-              <div data-is-scrollable={true}>
-                <PanelList
-                  classes={classes}
-                  messages={messages}
-                  selection={selection}
-                  columns={this.getColumns()}
-                  renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
-                    this.renderItemColumn(item, index, column)}
-                  renderDetailsHeader={this.renderDetailsHeader}
-                />
-              </div>
-            }
-          </div>
-        }
+    if (loading) {
+      return <Label>
+        <FormattedMessage id={'Fetching permissions'} />...
+        </Label>;
+    }
+
+    const displayPermissionsPanel = () => {
+      return <div data-is-scrollable={true} className={classes.panelContainer}>
+        <PanelList
+          classes={classes}
+          messages={messages}
+          selection={selection}
+          columns={this.getColumns()}
+          renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
+            this.renderItemColumn(item, index, column)}
+          renderDetailsHeader={this.renderDetailsHeader}
+        />
       </div>
-    );
+    };
+
+    const displayPermissionsAsTab = () => {
+      return <TabList
+        columns={this.getColumns()}
+        maxHeight={tabHeight}
+        renderItemColumn={(item?: any, index?: number, column?: IColumn) =>
+          this.renderItemColumn(item, index, column)}
+        renderDetailsHeader={this.renderDetailsHeader}
+        classes={classes}
+      />;
+    };
+
+    if (panel) {
+      return displayPermissionsPanel();
+    }
+
+    return displayPermissionsAsTab();
   }
 }