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

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,
+  };
+}

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,

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;
+  }
+}

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';
+export const RESIZE_SUCCESS = 'RESIZE_SUCCESS';
+export const RESPONSE_EXPANDED = 'RESPONSE_EXPANDED';

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;
 }

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 = () => {

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 (

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 (<div style={{ display: 'block' }}>

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();