From 0a4b1a27d0bd85eca44e3b223e0eda3c637c7f03 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 07:52:52 +0300 Subject: [PATCH 01/19] add resize to left side of screen --- .../services/reducers/dimensions-reducers.ts | 8 ++ src/app/views/App.tsx | 126 ++++++++++++------ .../views/query-runner/request/Request.tsx | 4 +- src/types/dimensions.ts | 2 + 4 files changed, 97 insertions(+), 43 deletions(-) diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts index 9e4b53a8c..8aa986740 100644 --- a/src/app/services/reducers/dimensions-reducers.ts +++ b/src/app/services/reducers/dimensions-reducers.ts @@ -10,6 +10,14 @@ const initialState: IDimensions = { response: { width: '100%', height: '62vh' + }, + sidebar: { + width: '26%', + height: '98vh' + }, + content: { + width: '72%', + height: '98vh' } }; diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 0002f4144..a122d1f84 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -1,4 +1,5 @@ import { Announced, getTheme, IStackTokens, ITheme, styled } from '@fluentui/react'; +import { Resizable } from 're-resizable'; import React, { Component } from 'react'; import { InjectedIntl, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; @@ -15,6 +16,7 @@ import { IRootState } from '../../types/root'; import { ISharedQueryParams } from '../../types/share-query'; import { ISidebarProps } from '../../types/sidebar'; import * as authActionCreators from '../services/actions/auth-action-creators'; +import { setDimensions } from '../services/actions/dimensions-action-creator'; import { runQuery } from '../services/actions/query-action-creators'; import { setSampleQuery } from '../services/actions/query-input-action-creators'; import { clearQueryStatus } from '../services/actions/query-status-action-creator'; @@ -62,6 +64,7 @@ interface IAppProps { signIn: Function; storeScopes: Function; changeTheme: Function; + setDimensions: Function; }; } @@ -309,10 +312,30 @@ class App extends Component { ); }; + private setSidebarAndContentDimensions(sidebarWidth: string) { + const maxWidth = 98; + let width = parseFloat(sidebarWidth.replace('%', '')); + if (width < 10) { + width = 4; + } + + const { dimensions }: any = this.props; + const dimensionsToUpdate = { ...dimensions }; + dimensionsToUpdate.content.width = `${maxWidth - width}%`; + dimensionsToUpdate.sidebar.width = `${width}%`; + this.props.actions!.setDimensions(dimensionsToUpdate); + + if (width === 4) { + this.toggleSidebar(); + } + } + public render() { const classes = classNames(this.props); const { authenticated, graphExplorerMode, queryState, minimised, termsOfUse, sampleQuery, - actions, sidebarProperties }: any = this.props; + actions, sidebarProperties, dimensions }: any = this.props; + + const { sidebar, content } = dimensions; const query = createShareLink(sampleQuery, authenticated); const { mobileScreen, showSidebar } = sidebarProperties; @@ -329,22 +352,6 @@ class App extends Component { padding: 10 }; - let sidebarWidth = `col-sm-12 col-lg-3 col-md-4 ${classes.sidebar}`; - - let layout = - graphExplorerMode === Mode.TryIt - ? 'col-xs-12 col-sm-12' - : 'col-xs-12 col-sm-12 col-lg-9 col-md-8'; - - if (minimised) { - sidebarWidth = `${classes.sidebarMini}`; - layout = `col-xs-12 col-sm-12 col-lg-11 col-md-11 ${classes.layoutExtra}`; - } - - if (mobileScreen) { - sidebarWidth = layout = 'col-xs-12 col-sm-12'; - } - return ( // @ts-ignore @@ -358,7 +365,31 @@ class App extends Component { />
{graphExplorerMode === Mode.Complete && ( -
+ { + if (ref && ref.style && ref.style.width) { + this.setSidebarAndContentDimensions(ref.style.width); + } + }} + className={ + minimised ? `${classes.sidebarMini}` : `${classes.sidebar}` + } + minWidth={'4vw'} + maxWidth={'50vw'} + enable={{ + right: true + }} + bounds={'window'} + size={{ + width: sidebar.width, + height: sidebar.height + }} + > + {JSON.stringify(sidebar)} {mobileScreen && appTitleDisplayOnMobileScreen( stackTokens, classes, @@ -379,28 +410,39 @@ class App extends Component { {showSidebar && ( )} -
+ + )} + {graphExplorerMode === Mode.TryIt && + headerMessaging(classes, query)} + + {displayContent && ( + + {JSON.stringify(content)} +
+ +
+
+ {termsOfUseMessage(termsOfUse, actions, classes, geLocale)} + {statusMessages(queryState, sampleQuery, actions)} +
+ { + // @ts-ignore + + } + )} -
- {graphExplorerMode === Mode.TryIt && - headerMessaging(classes, query)} - - {displayContent && ( - <> -
- -
-
- {statusMessages(queryState, sampleQuery, actions)} - {termsOfUseMessage(termsOfUse, actions, classes, geLocale)} -
- { - // @ts-ignore - - } - - )} -
@@ -408,7 +450,7 @@ class App extends Component { } } -const mapStateToProps = ({ sidebarProperties, theme, +const mapStateToProps = ({ sidebarProperties, theme, dimensions, queryRunnerStatus, profile, sampleQuery, termsOfUse, authToken, graphExplorerMode }: IRootState) => { const mobileScreen = !!sidebarProperties.mobileScreen; @@ -424,6 +466,7 @@ const mapStateToProps = ({ sidebarProperties, theme, termsOfUse, minimised: !mobileScreen && !showSidebar, sampleQuery, + dimensions, authenticated: !!authToken.token }; }; @@ -438,7 +481,8 @@ const mapDispatchToProps = (dispatch: Dispatch) => { setSampleQuery, toggleSidebar, ...authActionCreators, - changeTheme + changeTheme, + setDimensions }, dispatch ) diff --git a/src/app/views/query-runner/request/Request.tsx b/src/app/views/query-runner/request/Request.tsx index d23112625..11435b644 100644 --- a/src/app/views/query-runner/request/Request.tsx +++ b/src/app/views/query-runner/request/Request.tsx @@ -112,7 +112,7 @@ export class Request extends Component { , ); } - if(profile !== ACCOUNT_TYPE.AAD){ + if (profile !== ACCOUNT_TYPE.AAD) { pivotItems.push( { border: 'solid 1px #ddd', marginBottom: 10 }} - onResize={(e: any, direction: any, ref: any) => { + onResizeStop={(e: any, direction: any, ref: any) => { if (ref && ref.style && ref.style.height) { this.setRequestAndResponseHeights(ref.style.height); } diff --git a/src/types/dimensions.ts b/src/types/dimensions.ts index 0ad3a3d01..af37a1d5d 100644 --- a/src/types/dimensions.ts +++ b/src/types/dimensions.ts @@ -6,4 +6,6 @@ export interface IDimensionProperies { export interface IDimensions { request: IDimensionProperies; response: IDimensionProperies; + sidebar: IDimensionProperies; + content: IDimensionProperies; } \ No newline at end of file From dfe4b92e36a1cd20ab97fbe9c9124ca37987c669 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 08:53:12 +0300 Subject: [PATCH 02/19] add spacing between resize and component --- src/app/views/App.tsx | 60 ++++++++++++++++++++++--------------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index a122d1f84..f09ed2a6e 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -315,7 +315,7 @@ class App extends Component { private setSidebarAndContentDimensions(sidebarWidth: string) { const maxWidth = 98; let width = parseFloat(sidebarWidth.replace('%', '')); - if (width < 10) { + if (width < 16) { width = 4; } @@ -327,6 +327,11 @@ class App extends Component { if (width === 4) { this.toggleSidebar(); + } else { + const { sidebarProperties } = this.props; + if (!sidebarProperties.showSidebar) { + this.toggleSidebar(); + } } } @@ -366,11 +371,7 @@ class App extends Component {
{graphExplorerMode === Mode.Complete && ( { + onResize={(e: any, direction: any, ref: any, d: any) => { if (ref && ref.style && ref.style.width) { this.setSidebarAndContentDimensions(ref.style.width); } @@ -379,7 +380,7 @@ class App extends Component { minimised ? `${classes.sidebarMini}` : `${classes.sidebar}` } minWidth={'4vw'} - maxWidth={'50vw'} + maxWidth={'50%'} enable={{ right: true }} @@ -389,27 +390,29 @@ class App extends Component { height: sidebar.height }} > - {JSON.stringify(sidebar)} - {mobileScreen && appTitleDisplayOnMobileScreen( - stackTokens, - classes, - this.toggleSidebar - )} - - {!mobileScreen && appTitleDisplayOnFullScreen( - classes, - minimised, - this.toggleSidebar - )} - -
- - {this.displayAuthenticationSection(minimised)} -
- - {showSidebar && ( - - )} +
+ + {mobileScreen && appTitleDisplayOnMobileScreen( + stackTokens, + classes, + this.toggleSidebar + )} + + {!mobileScreen && appTitleDisplayOnFullScreen( + classes, + minimised, + this.toggleSidebar + )} + +
+ + {this.displayAuthenticationSection(minimised)} +
+ + {showSidebar && ( + + )} +
)} {graphExplorerMode === Mode.TryIt && @@ -429,7 +432,6 @@ class App extends Component { height: '98vh' }} > - {JSON.stringify(content)}
From b9ce0ff603e3c7e9677ceebceb17af1be1d1dc34 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 09:12:50 +0300 Subject: [PATCH 03/19] make status messages independent --- src/app/views/App.tsx | 10 ++- src/app/views/app-sections/StatusMessages.tsx | 63 +++++++++++-------- src/app/views/app-sections/index.ts | 5 ++ 3 files changed, 46 insertions(+), 32 deletions(-) create mode 100644 src/app/views/app-sections/index.ts diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index f09ed2a6e..8083b80d7 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -32,7 +32,7 @@ import { appTitleDisplayOnMobileScreen } from './app-sections/AppTitle'; import { headerMessaging } from './app-sections/HeaderMessaging'; -import { statusMessages } from './app-sections/StatusMessages'; +import { StatusMessages } from './app-sections'; import { termsOfUseMessage } from './app-sections/TermsOfUseMessage'; import { appStyles } from './App.styles'; import { Authentication } from './authentication'; @@ -49,7 +49,6 @@ interface IAppProps { styles?: object; intl: InjectedIntl; profile: object; - queryState: object | null; termsOfUse: boolean; graphExplorerMode: Mode; sidebarProperties: ISidebarProps; @@ -337,7 +336,7 @@ class App extends Component { public render() { const classes = classNames(this.props); - const { authenticated, graphExplorerMode, queryState, minimised, termsOfUse, sampleQuery, + const { authenticated, graphExplorerMode, minimised, termsOfUse, sampleQuery, actions, sidebarProperties, dimensions }: any = this.props; const { sidebar, content } = dimensions; @@ -437,7 +436,7 @@ class App extends Component {
{termsOfUseMessage(termsOfUse, actions, classes, geLocale)} - {statusMessages(queryState, sampleQuery, actions)} +
{ // @ts-ignore @@ -453,7 +452,7 @@ class App extends Component { } const mapStateToProps = ({ sidebarProperties, theme, dimensions, - queryRunnerStatus, profile, sampleQuery, termsOfUse, authToken, graphExplorerMode + profile, sampleQuery, termsOfUse, authToken, graphExplorerMode }: IRootState) => { const mobileScreen = !!sidebarProperties.mobileScreen; const showSidebar = !!sidebarProperties.showSidebar; @@ -462,7 +461,6 @@ const mapStateToProps = ({ sidebarProperties, theme, dimensions, appTheme: theme, graphExplorerMode, profile, - queryState: queryRunnerStatus, receivedSampleQuery: sampleQuery, sidebarProperties, termsOfUse, diff --git a/src/app/views/app-sections/StatusMessages.tsx b/src/app/views/app-sections/StatusMessages.tsx index 3d6c6a7dc..6e831b0d0 100644 --- a/src/app/views/app-sections/StatusMessages.tsx +++ b/src/app/views/app-sections/StatusMessages.tsx @@ -1,15 +1,23 @@ import { Link, MessageBar } from '@fluentui/react'; import React, { Fragment } from 'react'; import { FormattedMessage } from 'react-intl'; +import { useDispatch, useSelector } from 'react-redux'; import { IQuery } from '../../../types/query-runner'; +import { IRootState } from '../../../types/root'; +import { setSampleQuery } from '../../services/actions/query-input-action-creators'; +import { clearQueryStatus } from '../../services/actions/query-status-action-creator'; import { GRAPH_URL } from '../../services/graph-constants'; import { convertArrayToObject, extractUrl, getMatchesAndParts, matchIncludesLink, replaceLinks } from '../../utils/status-message'; -export function statusMessages(queryState: any, sampleQuery: IQuery, actions: any) { +const StatusMessages = () => { + const dispatch = useDispatch(); + const { queryRunnerStatus, sampleQuery } = + useSelector((state: IRootState) => state); + function displayStatusMessage(message: string, urls: any) { const { matches, parts } = getMatchesAndParts(message); @@ -39,41 +47,44 @@ export function statusMessages(queryState: any, sampleQuery: IQuery, actions: an function setQuery(link: string) { const query: IQuery = { ...sampleQuery }; query.sampleUrl = link; - actions.setSampleQuery(query); + dispatch(setSampleQuery(query)); } - if (queryState) { - const { messageType, statusText, status, duration, hint } = queryState; + if (queryRunnerStatus) { + const { messageType, statusText, status, duration, hint } = queryRunnerStatus; let urls: any = {}; - let message = status; - const extractedUrls = extractUrl(status); + let message = statusText; + const extractedUrls = extractUrl(statusText); if (extractedUrls) { - message = replaceLinks(status); + message = replaceLinks(statusText); urls = convertArrayToObject(extractedUrls); } - return ( - - {`${statusText} - `}{displayStatusMessage(message, urls)} - {duration && <> - {` - ${duration}`} - } + return dispatch(clearQueryStatus())} + dismissButtonAriaLabel='Close' + aria-live={'assertive'}> + {`${status} - `}{displayStatusMessage(message, urls)} + + {duration && <> + {` - ${duration}`} + } - {status === 403 && <>. - - - - - - } + {status === 403 && <>. + + + + + + } - {hint &&
{hint}
} + {hint &&
{hint}
} - ); + ; } + return
; } + +export default StatusMessages; diff --git a/src/app/views/app-sections/index.ts b/src/app/views/app-sections/index.ts new file mode 100644 index 000000000..2d765f817 --- /dev/null +++ b/src/app/views/app-sections/index.ts @@ -0,0 +1,5 @@ +import StatusMessages from './StatusMessages'; + +export { + StatusMessages +}; \ No newline at end of file From d7bb476465dba5f4217789c7df787e68f5130ebc Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 09:25:46 +0300 Subject: [PATCH 04/19] make terms of use independent --- src/app/views/App.tsx | 14 ++++----- .../views/app-sections/TermsOfUseMessage.tsx | 30 ++++++++++++++----- src/app/views/app-sections/index.ts | 4 ++- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 8083b80d7..ca0e51098 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -5,7 +5,6 @@ import { InjectedIntl, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; -import { geLocale } from '../../appLocale'; import { authenticationWrapper } from '../../modules/authentication'; import { componentNames, eventTypes, telemetry } from '../../telemetry'; import { loadGETheme } from '../../themes'; @@ -32,8 +31,7 @@ import { appTitleDisplayOnMobileScreen } from './app-sections/AppTitle'; import { headerMessaging } from './app-sections/HeaderMessaging'; -import { StatusMessages } from './app-sections'; -import { termsOfUseMessage } from './app-sections/TermsOfUseMessage'; +import { StatusMessages, TermsOfUseMessage } from './app-sections'; import { appStyles } from './App.styles'; import { Authentication } from './authentication'; import { classNames } from './classnames'; @@ -49,7 +47,6 @@ interface IAppProps { styles?: object; intl: InjectedIntl; profile: object; - termsOfUse: boolean; graphExplorerMode: Mode; sidebarProperties: ISidebarProps; sampleQuery: IQuery; @@ -336,8 +333,8 @@ class App extends Component { public render() { const classes = classNames(this.props); - const { authenticated, graphExplorerMode, minimised, termsOfUse, sampleQuery, - actions, sidebarProperties, dimensions }: any = this.props; + const { authenticated, graphExplorerMode, minimised, sampleQuery, + sidebarProperties, dimensions }: any = this.props; const { sidebar, content } = dimensions; @@ -435,7 +432,7 @@ class App extends Component {
- {termsOfUseMessage(termsOfUse, actions, classes, geLocale)} +
{ @@ -452,7 +449,7 @@ class App extends Component { } const mapStateToProps = ({ sidebarProperties, theme, dimensions, - profile, sampleQuery, termsOfUse, authToken, graphExplorerMode + profile, sampleQuery, authToken, graphExplorerMode }: IRootState) => { const mobileScreen = !!sidebarProperties.mobileScreen; const showSidebar = !!sidebarProperties.showSidebar; @@ -463,7 +460,6 @@ const mapStateToProps = ({ sidebarProperties, theme, dimensions, profile, receivedSampleQuery: sampleQuery, sidebarProperties, - termsOfUse, minimised: !mobileScreen && !showSidebar, sampleQuery, dimensions, diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx index 441718adb..f635cd9a3 100644 --- a/src/app/views/app-sections/TermsOfUseMessage.tsx +++ b/src/app/views/app-sections/TermsOfUseMessage.tsx @@ -1,29 +1,45 @@ import { MessageBar, MessageBarType } from '@fluentui/react'; import React from 'react'; import { FormattedMessage } from 'react-intl'; +import { useDispatch, useSelector } from 'react-redux'; +import { geLocale } from '../../../appLocale'; import { componentNames, telemetry } from '../../../telemetry'; +import { IRootState } from '../../../types/root'; +import { clearTermsOfUse } from '../../services/actions/terms-of-use-action-creator'; +import { classNames } from '../classnames'; -export function termsOfUseMessage(termsOfUse: any, actions: any, classes: any, language: string) { - return termsOfUse && ( - { + + const { termsOfUse } = + useSelector((state: IRootState) => state); + + + const classes = classNames(props); + const dispatch = useDispatch(); + if (termsOfUse) { + return dispatch(clearTermsOfUse())} dismissButtonAriaLabel='Close' style={{ position: 'relative' }}> telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_APIS_TERMS_OF_USE_LINK)} - className={classes.links} href={'https://docs.microsoft.com/' + language + + className={classes.links} href={'https://docs.microsoft.com/' + geLocale + '/legal/microsoft-apis/terms-of-use?context=graph/context'} target='_blank' rel='noopener noreferrer'> . telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_PRIVACY_STATEMENT_LINK)} - className={classes.links} href={'https://privacy.microsoft.com/' + language + '/privacystatement'} + className={classes.links} href={'https://privacy.microsoft.com/' + geLocale + '/privacystatement'} target='_blank' rel='noopener noreferrer'> . - ); + ; + } + return
; } + +export default TermsOfUseMessage; \ No newline at end of file diff --git a/src/app/views/app-sections/index.ts b/src/app/views/app-sections/index.ts index 2d765f817..4d3d54bad 100644 --- a/src/app/views/app-sections/index.ts +++ b/src/app/views/app-sections/index.ts @@ -1,5 +1,7 @@ import StatusMessages from './StatusMessages'; +import TermsOfUseMessage from './TermsOfUseMessage'; export { - StatusMessages + StatusMessages, + TermsOfUseMessage }; \ No newline at end of file From 4dd88be4cc458c599c5d249accd598997a68f6d6 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 13:04:28 +0300 Subject: [PATCH 05/19] seamlessly shrink sidebar --- src/app/views/App.styles.ts | 5 +++- src/app/views/App.tsx | 56 ++++++++++++++++++------------------- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index 2b5660ed1..1ce4c3505 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -12,10 +12,13 @@ export const appStyles = (theme: ITheme) => { marginBottom: theme.spacing.s1 }, sidebar: { - background: theme.palette.neutralLighter + background: theme.palette.neutralLighter, + borderRight: '1px solid ' + theme.palette.neutralLight, + paddingRight: 5 }, sidebarMini: { background: theme.palette.neutralLighter, + borderRight: '1px solid ' + theme.palette.neutralLight, maxWidth: '65px', minWidth: '55px', padding: 10 diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index ca0e51098..675bfada0 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -18,8 +18,6 @@ import * as authActionCreators from '../services/actions/auth-action-creators'; import { setDimensions } from '../services/actions/dimensions-action-creator'; import { runQuery } from '../services/actions/query-action-creators'; import { setSampleQuery } from '../services/actions/query-input-action-creators'; -import { clearQueryStatus } from '../services/actions/query-status-action-creator'; -import { clearTermsOfUse } from '../services/actions/terms-of-use-action-creator'; import { changeTheme } from '../services/actions/theme-action-creator'; import { toggleSidebar } from '../services/actions/toggle-sidebar-action-creator'; import { GRAPH_URL } from '../services/graph-constants'; @@ -52,8 +50,6 @@ interface IAppProps { sampleQuery: IQuery; authenticated: boolean; actions: { - clearQueryStatus: Function; - clearTermsOfUse: Function; setSampleQuery: Function; runQuery: Function; toggleSidebar: Function; @@ -232,7 +228,6 @@ class App extends Component { setTimeout(() => { if (actions) { const { queryVersion } = parseSampleUrl(url); - const requestHeaders = headers.map((header: any) => { return { name: Object.keys(header)[0], @@ -262,10 +257,8 @@ class App extends Component { }; public toggleSidebar = (): void => { - const { sidebarProperties } = this.props; - const properties = { ...sidebarProperties }; - properties.showSidebar = !properties.showSidebar; - this.props.actions!.toggleSidebar(properties); + const shouldShowSidebar = this.setSidebarProperties(); + this.changeDimensions(shouldShowSidebar ? '26%' : '4%'); telemetry.trackEvent( eventTypes.BUTTON_CLICK_EVENT, { @@ -296,7 +289,6 @@ class App extends Component { justifyContent: minimised ? '' : 'center', alignItems: minimised ? '' : 'center', marginLeft: minimised ? '' : '-0.9em' - }}>
@@ -308,12 +300,30 @@ class App extends Component { ); }; - private setSidebarAndContentDimensions(sidebarWidth: string) { - const maxWidth = 98; - let width = parseFloat(sidebarWidth.replace('%', '')); - if (width < 16) { - width = 4; + private setSidebarProperties() { + const { sidebarProperties } = this.props; + const properties = { ...sidebarProperties }; + const shouldShowSidebar = !properties.showSidebar; + properties.showSidebar = shouldShowSidebar; + this.props.actions!.toggleSidebar(properties); + return shouldShowSidebar; + } + + private resizeSideBar(sidebarWidth: string) { + const breakPoint = 15; + const width = this.changeDimensions(sidebarWidth); + const { sidebarProperties } = this.props; + const minimised = !sidebarProperties.showSidebar; + if (width <= breakPoint && !minimised) { + this.setSidebarProperties(); + } else if (width > breakPoint && minimised) { + this.setSidebarProperties(); } + } + + private changeDimensions(sidebarWidth: string): number { + const maxWidth = 98; + const width = parseFloat(sidebarWidth.replace('%', '')); const { dimensions }: any = this.props; const dimensionsToUpdate = { ...dimensions }; @@ -321,21 +331,13 @@ class App extends Component { dimensionsToUpdate.sidebar.width = `${width}%`; this.props.actions!.setDimensions(dimensionsToUpdate); - if (width === 4) { - this.toggleSidebar(); - } else { - const { sidebarProperties } = this.props; - if (!sidebarProperties.showSidebar) { - this.toggleSidebar(); - } - } + return width; } public render() { const classes = classNames(this.props); const { authenticated, graphExplorerMode, minimised, sampleQuery, sidebarProperties, dimensions }: any = this.props; - const { sidebar, content } = dimensions; const query = createShareLink(sampleQuery, authenticated); @@ -369,7 +371,7 @@ class App extends Component { { if (ref && ref.style && ref.style.width) { - this.setSidebarAndContentDimensions(ref.style.width); + this.resizeSideBar(ref.style.width); } }} className={ @@ -386,7 +388,7 @@ class App extends Component { height: sidebar.height }} > -
+
{mobileScreen && appTitleDisplayOnMobileScreen( stackTokens, @@ -471,8 +473,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => { return { actions: bindActionCreators( { - clearQueryStatus, - clearTermsOfUse, runQuery, setSampleQuery, toggleSidebar, From e8202935526c8cf4fc9872bbff8abb544df1fbad Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 14:31:37 +0300 Subject: [PATCH 06/19] ensure page is still responsive --- src/app/views/App.tsx | 55 +++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 675bfada0..6bc23541d 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -355,6 +355,14 @@ class App extends Component { padding: 10 }; + let sidebarWidth = classes.sidebar; + if (mobileScreen) { + sidebarWidth = 'col-xs-12 col-sm-12'; + } else if (minimised) { + sidebarWidth = classes.sidebarMini; + } + const layout = mobileScreen ? 'col-xs-12 col-sm-12' : ''; + return ( // @ts-ignore @@ -374,43 +382,39 @@ class App extends Component { this.resizeSideBar(ref.style.width); } }} - className={ - minimised ? `${classes.sidebarMini}` : `${classes.sidebar}` - } + className={sidebarWidth} minWidth={'4vw'} - maxWidth={'50%'} + maxWidth={mobileScreen ? '100%' : '50%'} enable={{ right: true }} bounds={'window'} size={{ - width: sidebar.width, - height: sidebar.height + width: mobileScreen ? '100%' : sidebar.width, + height: mobileScreen ? '150px' : sidebar.height }} > -
- {mobileScreen && appTitleDisplayOnMobileScreen( - stackTokens, - classes, - this.toggleSidebar - )} + {mobileScreen && appTitleDisplayOnMobileScreen( + stackTokens, + classes, + this.toggleSidebar + )} - {!mobileScreen && appTitleDisplayOnFullScreen( - classes, - minimised, - this.toggleSidebar - )} + {!mobileScreen && appTitleDisplayOnFullScreen( + classes, + minimised, + this.toggleSidebar + )} -
+
- {this.displayAuthenticationSection(minimised)} -
+ {this.displayAuthenticationSection(minimised)} +
- {showSidebar && ( - - )} -
+ {showSidebar && ( + + )} )} {graphExplorerMode === Mode.TryIt && @@ -419,6 +423,7 @@ class App extends Component { {displayContent && ( { right: false }} size={{ - width: content.width, + width: mobileScreen ? '100%' : content.width, height: '98vh' }} > From 393c740f48ea48dc65462e0bfc752e0434eb58f3 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 15:19:55 +0300 Subject: [PATCH 07/19] improve handle accessibility --- src/app/views/App.styles.ts | 4 ++-- src/app/views/App.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index 1ce4c3505..e5b526fb1 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -13,12 +13,12 @@ export const appStyles = (theme: ITheme) => { }, sidebar: { background: theme.palette.neutralLighter, - borderRight: '1px solid ' + theme.palette.neutralLight, + borderRight: '1px solid silver', paddingRight: 5 }, sidebarMini: { background: theme.palette.neutralLighter, - borderRight: '1px solid ' + theme.palette.neutralLight, + borderRight: '1px solid silver', maxWidth: '65px', minWidth: '55px', padding: 10 diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 6bc23541d..378f90bd1 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -388,6 +388,12 @@ class App extends Component { enable={{ right: true }} + handleStyles={{ + right: { + zIndex: 1, + padding: 7 + } + }} bounds={'window'} size={{ width: mobileScreen ? '100%' : sidebar.width, From b9dabb26c725a5e6cc5c391d7f8e0a3f248cdf1e Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 15:28:29 +0300 Subject: [PATCH 08/19] make conditions more succint --- src/app/views/App.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 378f90bd1..d79ae77a5 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -344,10 +344,8 @@ class App extends Component { const { mobileScreen, showSidebar } = sidebarProperties; let displayContent = true; - if (graphExplorerMode === Mode.Complete) { - if (mobileScreen && showSidebar) { - displayContent = false; - } + if (graphExplorerMode === Mode.Complete && (mobileScreen && showSidebar)) { + displayContent = false; } const stackTokens: IStackTokens = { @@ -356,12 +354,12 @@ class App extends Component { }; let sidebarWidth = classes.sidebar; + let layout = mobileScreen ? 'col-xs-12 col-sm-12' : ''; if (mobileScreen) { - sidebarWidth = 'col-xs-12 col-sm-12'; + layout = sidebarWidth = 'col-xs-12 col-sm-12'; } else if (minimised) { sidebarWidth = classes.sidebarMini; } - const layout = mobileScreen ? 'col-xs-12 col-sm-12' : ''; return ( // @ts-ignore From b004b5a83e2376e272c58db02a3f701f0d15ebc3 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 17:18:12 +0300 Subject: [PATCH 09/19] refactor to reduce complexity --- src/app/views/App.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index d79ae77a5..0b91ad7d7 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -340,6 +340,13 @@ class App extends Component { sidebarProperties, dimensions }: any = this.props; const { sidebar, content } = dimensions; + let sidebarWidth = classes.sidebar; + let layout = ''; + let sideWidth = sidebar.width; + let sideHeight = sidebar.height; + let maxWidth = '50%'; + let contentWidth = content.width; + const query = createShareLink(sampleQuery, authenticated); const { mobileScreen, showSidebar } = sidebarProperties; @@ -353,10 +360,12 @@ class App extends Component { padding: 10 }; - let sidebarWidth = classes.sidebar; - let layout = mobileScreen ? 'col-xs-12 col-sm-12' : ''; if (mobileScreen) { layout = sidebarWidth = 'col-xs-12 col-sm-12'; + sideWidth = '100%'; + sideHeight = '150px'; + maxWidth = '100%'; + contentWidth = '100%'; } else if (minimised) { sidebarWidth = classes.sidebarMini; } @@ -382,7 +391,7 @@ class App extends Component { }} className={sidebarWidth} minWidth={'4vw'} - maxWidth={mobileScreen ? '100%' : '50%'} + maxWidth={maxWidth} enable={{ right: true }} @@ -394,8 +403,8 @@ class App extends Component { }} bounds={'window'} size={{ - width: mobileScreen ? '100%' : sidebar.width, - height: mobileScreen ? '150px' : sidebar.height + width: sideWidth, + height: sideHeight }} > @@ -416,9 +425,7 @@ class App extends Component { {this.displayAuthenticationSection(minimised)}
- {showSidebar && ( - - )} + {showSidebar && ()} )} {graphExplorerMode === Mode.TryIt && @@ -435,7 +442,7 @@ class App extends Component { right: false }} size={{ - width: mobileScreen ? '100%' : content.width, + width: contentWidth, height: '98vh' }} > From 0d3ed2c0eb8c159d89ee80d89feb362a15286725 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 17:53:51 +0300 Subject: [PATCH 10/19] remove duplication code smell --- src/app/views/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 0b91ad7d7..2672acdfe 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -278,6 +278,7 @@ class App extends Component { showSidebar }; + // @ts-ignore this.props.actions!.toggleSidebar(properties); }; @@ -314,9 +315,7 @@ class App extends Component { const width = this.changeDimensions(sidebarWidth); const { sidebarProperties } = this.props; const minimised = !sidebarProperties.showSidebar; - if (width <= breakPoint && !minimised) { - this.setSidebarProperties(); - } else if (width > breakPoint && minimised) { + if ((width <= breakPoint && !minimised) || (width > breakPoint && minimised)) { this.setSidebarProperties(); } } @@ -329,6 +328,7 @@ class App extends Component { const dimensionsToUpdate = { ...dimensions }; dimensionsToUpdate.content.width = `${maxWidth - width}%`; dimensionsToUpdate.sidebar.width = `${width}%`; + // @ts-ignore this.props.actions!.setDimensions(dimensionsToUpdate); return width; From 867e6bd5b6fd76a8af9d588f310293adb2a44c16 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 8 Feb 2022 19:37:03 +0300 Subject: [PATCH 11/19] highlight when handle is hovered over --- src/app/views/App.styles.ts | 13 +++++++++---- src/app/views/App.tsx | 9 +++------ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index e5b526fb1..db08efa81 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -12,13 +12,11 @@ export const appStyles = (theme: ITheme) => { marginBottom: theme.spacing.s1 }, sidebar: { - background: theme.palette.neutralLighter, - borderRight: '1px solid silver', - paddingRight: 5 + background: theme.palette.neutralLighter + }, sidebarMini: { background: theme.palette.neutralLighter, - borderRight: '1px solid silver', maxWidth: '65px', minWidth: '55px', padding: 10 @@ -61,6 +59,13 @@ export const appStyles = (theme: ITheme) => { }, statusAreaLaptopScreen: { marginTop: 0 + }, + vResizeHandle: { + zIndex: 1, + borderRight: '1px solid silver', + '&:hover': { + borderRight: '3px solid silver' + } } }; }; diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 2672acdfe..9ea773193 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -395,11 +395,8 @@ class App extends Component { enable={{ right: true }} - handleStyles={{ - right: { - zIndex: 1, - padding: 7 - } + handleClasses={{ + right: classes.vResizeHandle }} bounds={'window'} size={{ @@ -436,7 +433,7 @@ class App extends Component { bounds={'window'} className={layout} style={{ - marginLeft: 5 + marginLeft: 10 }} enable={{ right: false From 7a0dba8e404c92a7708f1adaeaf2c56306729b24 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Thu, 10 Feb 2022 19:45:52 +0300 Subject: [PATCH 12/19] remove unnecessary assertion --- src/app/views/App.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 9ea773193..489bdd5f2 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -324,13 +324,13 @@ class App extends Component { const maxWidth = 98; const width = parseFloat(sidebarWidth.replace('%', '')); - const { dimensions }: any = this.props; + const { dimensions, actions }: any = this.props; const dimensionsToUpdate = { ...dimensions }; dimensionsToUpdate.content.width = `${maxWidth - width}%`; dimensionsToUpdate.sidebar.width = `${width}%`; - // @ts-ignore - this.props.actions!.setDimensions(dimensionsToUpdate); - + if (actions) { + actions.setDimensions(dimensionsToUpdate); + } return width; } From 3e8b8a227c9da613149b668a4c7ff6c5ad1464fd Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Fri, 11 Feb 2022 12:20:08 +0300 Subject: [PATCH 13/19] correct type spelling --- src/types/dimensions.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/types/dimensions.ts b/src/types/dimensions.ts index af37a1d5d..f46c90b12 100644 --- a/src/types/dimensions.ts +++ b/src/types/dimensions.ts @@ -1,11 +1,11 @@ -export interface IDimensionProperies { +export interface IDimensionProperties { width: string; height: string; } export interface IDimensions { - request: IDimensionProperies; - response: IDimensionProperies; - sidebar: IDimensionProperies; - content: IDimensionProperies; + request: IDimensionProperties; + response: IDimensionProperties; + sidebar: IDimensionProperties; + content: IDimensionProperties; } \ No newline at end of file From e544a2a6182ad49aac8ed9da848818f3c775397a Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Fri, 11 Feb 2022 12:33:06 +0300 Subject: [PATCH 14/19] style terms of use message component --- src/app/views/app-sections/TermsOfUseMessage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx index f635cd9a3..31c44161d 100644 --- a/src/app/views/app-sections/TermsOfUseMessage.tsx +++ b/src/app/views/app-sections/TermsOfUseMessage.tsx @@ -1,4 +1,4 @@ -import { MessageBar, MessageBarType } from '@fluentui/react'; +import { MessageBar, MessageBarType, styled } from '@fluentui/react'; import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; @@ -8,6 +8,7 @@ import { componentNames, telemetry } from '../../../telemetry'; import { IRootState } from '../../../types/root'; import { clearTermsOfUse } from '../../services/actions/terms-of-use-action-creator'; import { classNames } from '../classnames'; +import { appStyles } from '../App.styles'; const TermsOfUseMessage = (props: any) => { @@ -41,5 +42,6 @@ const TermsOfUseMessage = (props: any) => { } return
; } - -export default TermsOfUseMessage; \ No newline at end of file +// @ts-ignore +const styledTermsOfUseMessage = styled(TermsOfUseMessage, appStyles); +export default styledTermsOfUseMessage; \ No newline at end of file From 5f27ff675b2909d377d79d2378d1604d41e0758f Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Fri, 11 Feb 2022 13:38:10 +0300 Subject: [PATCH 15/19] add padding to sidebar --- src/app/views/App.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts index db08efa81..4f1947a1d 100644 --- a/src/app/views/App.styles.ts +++ b/src/app/views/App.styles.ts @@ -12,8 +12,8 @@ export const appStyles = (theme: ITheme) => { marginBottom: theme.spacing.s1 }, sidebar: { - background: theme.palette.neutralLighter - + background: theme.palette.neutralLighter, + paddingLeft: 10 }, sidebarMini: { background: theme.palette.neutralLighter, From a1ff83aea0fa4bed7ac0190827870e01c1ef6b7b Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 15 Feb 2022 08:45:50 +0300 Subject: [PATCH 16/19] remove flex-basis property --- src/app/views/App.tsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 489bdd5f2..d3456a105 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -277,9 +277,12 @@ class App extends Component { mobileScreen, showSidebar }; - + if (showSidebar) { + this.changeDimensions('26%'); + } // @ts-ignore this.props.actions!.toggleSidebar(properties); + }; public displayAuthenticationSection = (minimised: boolean) => { @@ -366,10 +369,13 @@ class App extends Component { sideHeight = '150px'; maxWidth = '100%'; contentWidth = '100%'; + layout += ' layout'; } else if (minimised) { sidebarWidth = classes.sidebarMini; } + removeFlexBasisProperty(); + return ( // @ts-ignore @@ -460,6 +466,22 @@ class App extends Component {
); + + function removeFlexBasisProperty() { + /* + flex-basis style property is added automatically 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/1433#issuecomment-1036135231 + + Removing the property altogether helps maintain the layout of the page. + */ + + const collection = document.getElementsByClassName('layout'); + if (collection.length > 0) { + const element: any = collection[0]; + element.style.removeProperty('flex-basis'); + } + } } } From 9da254217c82d4dfbd898ab0ec4547bc0a439dd6 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 15 Feb 2022 10:45:27 +0300 Subject: [PATCH 17/19] rename class name --- src/app/views/app-sections/TermsOfUseMessage.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx index 31c44161d..82cedfd50 100644 --- a/src/app/views/app-sections/TermsOfUseMessage.tsx +++ b/src/app/views/app-sections/TermsOfUseMessage.tsx @@ -10,12 +10,11 @@ import { clearTermsOfUse } from '../../services/actions/terms-of-use-action-crea import { classNames } from '../classnames'; import { appStyles } from '../App.styles'; -const TermsOfUseMessage = (props: any) => { +const styledTermsOfUseMessage = (props: any) => { const { termsOfUse } = useSelector((state: IRootState) => state); - const classes = classNames(props); const dispatch = useDispatch(); if (termsOfUse) { @@ -43,5 +42,5 @@ const TermsOfUseMessage = (props: any) => { return
; } // @ts-ignore -const styledTermsOfUseMessage = styled(TermsOfUseMessage, appStyles); -export default styledTermsOfUseMessage; \ No newline at end of file +const TermsOfUseMessage = styled(styledTermsOfUseMessage, appStyles); +export default TermsOfUseMessage; \ No newline at end of file From 45a84bea46d1c897170693ac084ba9543d842bf0 Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 15 Feb 2022 11:05:14 +0300 Subject: [PATCH 18/19] refactor function to reduce cognitive complexity --- src/app/views/App.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index d3456a105..4f70c37d0 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -353,10 +353,7 @@ class App extends Component { const query = createShareLink(sampleQuery, authenticated); const { mobileScreen, showSidebar } = sidebarProperties; - let displayContent = true; - if (graphExplorerMode === Mode.Complete && (mobileScreen && showSidebar)) { - displayContent = false; - } + const displayContent = shouldDisplayContent(); const stackTokens: IStackTokens = { childrenGap: 10, @@ -391,7 +388,7 @@ class App extends Component { {graphExplorerMode === Mode.Complete && ( { - if (ref && ref.style && ref.style.width) { + if (ref?.style?.width) { this.resizeSideBar(ref.style.width); } }} @@ -467,6 +464,13 @@ class App extends Component { ); + function shouldDisplayContent() { + if (graphExplorerMode === Mode.Complete && (mobileScreen && showSidebar)) { + return false; + } + return true; + } + function removeFlexBasisProperty() { /* flex-basis style property is added automatically when the window resizes From 16994079cefb1792d0643ef85e522eeb9710221a Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Tue, 15 Feb 2022 11:24:34 +0300 Subject: [PATCH 19/19] attempt fix for complexity --- src/app/views/App.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx index 4f70c37d0..09b872b23 100644 --- a/src/app/views/App.tsx +++ b/src/app/views/App.tsx @@ -465,10 +465,7 @@ class App extends Component { ); function shouldDisplayContent() { - if (graphExplorerMode === Mode.Complete && (mobileScreen && showSidebar)) { - return false; - } - return true; + return !(graphExplorerMode === Mode.Complete && mobileScreen && showSidebar); } function removeFlexBasisProperty() { @@ -481,10 +478,11 @@ class App extends Component { */ const collection = document.getElementsByClassName('layout'); - if (collection.length > 0) { - const element: any = collection[0]; - element.style.removeProperty('flex-basis'); + if (collection?.length === 0) { + return; } + const element: any = collection[0]; + element.style.removeProperty('flex-basis'); } } }