From 6f1234f7fabb16f75ac1c0a1d8aaba4c1b2c0a3e Mon Sep 17 00:00:00 2001 From: Charles Wahome Date: Wed, 27 Jan 2021 09:36:19 -0800 Subject: [PATCH] Fix: prevent resize when view expanded (#816) * save expanded state to global state * respond to expanded state * create reusable response height function * set appropriate heights if response area expanded --- .../actions/response-expanded-action-creator.ts | 8 ++++++++ src/app/services/reducers/index.ts | 2 ++ .../services/reducers/response-expanded-reducer.ts | 12 ++++++++++++ src/app/services/redux-constants.ts | 3 ++- src/app/views/common/dimensions-adjustment.ts | 8 ++++++++ src/app/views/query-response/QueryResponse.tsx | 7 +++++-- .../views/query-response/headers/ResponseHeaders.tsx | 7 ++++--- src/app/views/query-response/response/Response.tsx | 7 ++++--- .../query-response/snippets/snippets-helper.tsx | 8 +++++--- 9 files changed, 50 insertions(+), 12 deletions(-) create mode 100644 src/app/services/actions/response-expanded-action-creator.ts create mode 100644 src/app/services/reducers/response-expanded-reducer.ts diff --git a/src/app/services/actions/response-expanded-action-creator.ts b/src/app/services/actions/response-expanded-action-creator.ts new file mode 100644 index 000000000..dd99bc744 --- /dev/null +++ b/src/app/services/actions/response-expanded-action-creator.ts @@ -0,0 +1,8 @@ +import { RESPONSE_EXPANDED } from "../redux-constants"; + +export function expandResponseArea(expanded: boolean): any { + return { + type: RESPONSE_EXPANDED, + response: expanded, + }; +} diff --git a/src/app/services/reducers/index.ts b/src/app/services/reducers/index.ts index c8bcf1104..22dfdc418 100644 --- a/src/app/services/reducers/index.ts +++ b/src/app/services/reducers/index.ts @@ -12,6 +12,7 @@ import { isLoadingData } from './query-loading-reducers'; import { graphResponse } from './query-runner-reducers'; import { queryRunnerStatus } from './query-runner-status-reducers'; import { history } from './request-history-reducers'; +import { responseAreaExpanded } from './response-expanded-reducer'; import { samples } from './samples-reducers'; import { snippets } from './snippet-reducer'; import { termsOfUse } from './terms-of-use-reducer'; @@ -30,6 +31,7 @@ export default combineReducers({ isLoadingData, profile, queryRunnerStatus, + responseAreaExpanded, sampleQuery, samples, scopes, diff --git a/src/app/services/reducers/response-expanded-reducer.ts b/src/app/services/reducers/response-expanded-reducer.ts new file mode 100644 index 000000000..be8687ede --- /dev/null +++ b/src/app/services/reducers/response-expanded-reducer.ts @@ -0,0 +1,12 @@ +import { IAction } from '../../../types/action'; +import { RESPONSE_EXPANDED } from '../redux-constants'; + +export function responseAreaExpanded(state: boolean = false, action: IAction): any { + switch (action.type) { + case RESPONSE_EXPANDED: + return !!action.response; + + default: + return state; + } +} diff --git a/src/app/services/redux-constants.ts b/src/app/services/redux-constants.ts index a640392ba..b40bbf444 100644 --- a/src/app/services/redux-constants.ts +++ b/src/app/services/redux-constants.ts @@ -38,4 +38,5 @@ export const REMOVE_ALL_HISTORY_ITEMS_SUCCESS = 'REMOVE_ALL_HISTORY_ITEMS_SUCCES export const AUTOCOMPLETE_FETCH_SUCCESS = 'AUTOCOMPLETE_FETCH_SUCCESS'; export const AUTOCOMPLETE_FETCH_ERROR = 'AUTOCOMPLETE_FETCH_ERROR'; export const AUTOCOMPLETE_FETCH_PENDING = 'AUTOCOMPLETE_FETCH_PENDING'; -export const RESIZE_SUCCESS = 'RESIZE_SUCCESS'; \ No newline at end of file +export const RESIZE_SUCCESS = 'RESIZE_SUCCESS'; +export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED'; \ No newline at end of file diff --git a/src/app/views/common/dimensions-adjustment.ts b/src/app/views/common/dimensions-adjustment.ts index 2d630e9fc..d3bf83a35 100644 --- a/src/app/views/common/dimensions-adjustment.ts +++ b/src/app/views/common/dimensions-adjustment.ts @@ -2,4 +2,12 @@ export function convertVhToPx(height: string, adjustment: number) { const newHeight = parseFloat(height.replace('vh', '')) / 100 * document.documentElement.clientHeight; return Math.floor(newHeight - adjustment) + 'px'; +} + +export function getResponseHeight(height: any, responseAreaExpanded: any) { + let responseHeight = height; + if (responseAreaExpanded) { + responseHeight = '90vh'; + } + return responseHeight; } \ No newline at end of file diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx index 31213b07a..58293b164 100644 --- a/src/app/views/query-response/QueryResponse.tsx +++ b/src/app/views/query-response/QueryResponse.tsx @@ -7,11 +7,12 @@ import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dia import { Resizable } from 're-resizable'; import React, { useEffect, useState } from 'react'; import { injectIntl } from 'react-intl'; -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { IQueryResponseProps } from '../../../types/query-response'; +import { expandResponseArea } from '../../services/actions/response-expanded-action-creator'; import { translateMessage } from '../../utils/translate-messages'; import { copy } from '../common/copy'; import { convertVhToPx } from '../common/dimensions-adjustment'; @@ -20,6 +21,8 @@ import { getPivotItems, onPivotItemClick } from './pivot-items/pivot-items'; import './query-response.scss'; const QueryResponse = (props: IQueryResponseProps) => { + const dispatch = useDispatch(); + const [showShareQueryDialog, setShareQuaryDialogStatus] = useState(true); const [showModal, setShowModal] = useState(false); const [query, setQuery] = useState(''); @@ -31,7 +34,6 @@ const QueryResponse = (props: IQueryResponseProps) => { intl: { messages }, }: any = props; - useEffect(() => { setResponseHeight(convertVhToPx(dimensions.response.height, 50)); }, [dimensions]); @@ -42,6 +44,7 @@ const QueryResponse = (props: IQueryResponseProps) => { const toggleExpandResponse = () => { setShowModal(!showModal); + dispatch(expandResponseArea(!showModal)); }; const handleCopy = () => { diff --git a/src/app/views/query-response/headers/ResponseHeaders.tsx b/src/app/views/query-response/headers/ResponseHeaders.tsx index 34dad453a..ed70e1690 100644 --- a/src/app/views/query-response/headers/ResponseHeaders.tsx +++ b/src/app/views/query-response/headers/ResponseHeaders.tsx @@ -5,12 +5,13 @@ import { useSelector } from 'react-redux'; import { Monaco } from '../../common'; import { genericCopy } from '../../common/copy'; -import { convertVhToPx } from '../../common/dimensions-adjustment'; +import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment'; const ResponseHeaders = () => { - const { dimensions, graphResponse } = useSelector((state: any) => state); + const { dimensions: { response }, graphResponse, responseAreaExpanded } = useSelector((state: any) => state); const { headers } = graphResponse; - const height = convertVhToPx(dimensions.response.height, 100); + + const height = convertVhToPx(getResponseHeight(response, responseAreaExpanded), 100); if (headers) { return ( diff --git a/src/app/views/query-response/response/Response.tsx b/src/app/views/query-response/response/Response.tsx index b314a00c4..b6654f413 100644 --- a/src/app/views/query-response/response/Response.tsx +++ b/src/app/views/query-response/response/Response.tsx @@ -5,16 +5,17 @@ import { useSelector } from 'react-redux'; import { ContentType } from '../../../../types/enums'; import { isImageResponse } from '../../../services/actions/query-action-creator-util'; import { Image, Monaco } from '../../common'; -import { convertVhToPx } from '../../common/dimensions-adjustment'; +import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment'; import { formatXml } from '../../common/monaco/util/format-xml'; const Response = () => { const language = 'json'; - const { dimensions, graphResponse } = useSelector((state: any) => state); - const height = convertVhToPx(dimensions.response.height, 100); + const { dimensions: { response }, graphResponse, responseAreaExpanded } = useSelector((state: any) => state); const { body, headers } = graphResponse; + const height = convertVhToPx(getResponseHeight(response.height, responseAreaExpanded), 100); + if (headers) { const contentType = getContentType(headers); return (
diff --git a/src/app/views/query-response/snippets/snippets-helper.tsx b/src/app/views/query-response/snippets/snippets-helper.tsx index ece2f9725..acaa0930f 100644 --- a/src/app/views/query-response/snippets/snippets-helper.tsx +++ b/src/app/views/query-response/snippets/snippets-helper.tsx @@ -12,7 +12,7 @@ import { CODE_SNIPPETS_COPY_BUTTON } from '../../../../telemetry/component-names import { BUTTON_CLICK_EVENT } from '../../../../telemetry/event-types'; import { IQuery } from '../../../../types/query-runner'; import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization'; -import { convertVhToPx } from '../../common/dimensions-adjustment'; +import { convertVhToPx, getResponseHeight } from '../../common/dimensions-adjustment'; interface ISnippetProps { language: string; @@ -41,10 +41,12 @@ function Snippet(props: ISnippetProps) { language = language.toLowerCase(); const sampleQuery = useSelector((state: any) => state.sampleQuery, shallowEqual); - const { dimensions, snippets } = useSelector((state: any) => state); + const { dimensions: { response }, snippets, responseAreaExpanded } = useSelector((state: any) => state); const { data, pending: loadingState } = snippets; const snippet = (!loadingState && data) ? data[language] : null; - const height = convertVhToPx(dimensions.response.height, 140); + + const responseHeight = getResponseHeight(response.height, responseAreaExpanded); + const height = convertVhToPx(responseHeight, 140); const dispatch = useDispatch();