Skip to content

Commit

Permalink
Fix: shrink request section (#822)
Browse files Browse the repository at this point in the history
* resize to complete shrinkage

* adjust response-headers height

* remove unnecessary code

* add container style to auth import
  • Loading branch information
thewahome committed Jan 29, 2021
1 parent a2098b9 commit 13074a4
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 59 deletions.
2 changes: 1 addition & 1 deletion src/app/views/query-response/headers/ResponseHeaders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
36 changes: 23 additions & 13 deletions src/app/views/query-runner/request/Request.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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'
Expand All @@ -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'
Expand All @@ -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'
Expand All @@ -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>,
];

Expand All @@ -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>
);
}
Expand Down Expand Up @@ -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 (
Expand All @@ -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);
}
Expand Down
7 changes: 4 additions & 3 deletions src/app/views/query-runner/request/auth/Auth.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -18,7 +19,7 @@ export const authStyles = (theme: ITheme) => {
fontFamily: 'monospace',
fontSize: FontSizes.xSmall,
width: '100%',
height: 150,
height: '100%',
border: 'none',
resize: 'none'
},
Expand All @@ -29,7 +30,7 @@ export const authStyles = (theme: ITheme) => {
emptyStateLabel: {
display: 'flex',
width: '100%',
minHeight: 200,
minHeight: '100%',
justifyContent: 'center',
alignItems: 'center'

Expand Down
7 changes: 5 additions & 2 deletions src/app/views/query-runner/request/auth/Auth.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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}>
Expand Down
18 changes: 12 additions & 6 deletions src/app/views/query-runner/request/body/RequestBody.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 4 additions & 0 deletions src/app/views/query-runner/request/body/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import RequestBody from './RequestBody';
export {
RequestBody
};
3 changes: 1 addition & 2 deletions src/app/views/query-runner/request/headers/Headers.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
67 changes: 35 additions & 32 deletions src/app/views/query-runner/request/permissions/Permission.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}

Expand Down

0 comments on commit 13074a4

Please sign in to comment.