From bc2ad9f79db74fe6c1844de95b7990847abefc66 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Tue, 26 Nov 2024 12:48:54 +0300 Subject: [PATCH 1/6] use tab and tablist components --- src/app/views/query-runner/QueryRunner.tsx | 2 +- .../views/query-runner/request/RequestV9.tsx | 150 ++++++++++++++++++ 2 files changed, 151 insertions(+), 1 deletion(-) create mode 100644 src/app/views/query-runner/request/RequestV9.tsx diff --git a/src/app/views/query-runner/QueryRunner.tsx b/src/app/views/query-runner/QueryRunner.tsx index 13acff72f..a644598f8 100644 --- a/src/app/views/query-runner/QueryRunner.tsx +++ b/src/app/views/query-runner/QueryRunner.tsx @@ -13,7 +13,7 @@ import { parseSampleUrl } from '../../utils/sample-url-generation'; import { translateMessage } from '../../utils/translate-messages'; import { QueryInput } from './query-input'; import './query-runner.scss'; -import Request from './request/Request'; +import Request from './request/RequestV9'; const QueryRunner = (props: any) => { const dispatch = useAppDispatch(); diff --git a/src/app/views/query-runner/request/RequestV9.tsx b/src/app/views/query-runner/request/RequestV9.tsx new file mode 100644 index 000000000..0bf16c2e9 --- /dev/null +++ b/src/app/views/query-runner/request/RequestV9.tsx @@ -0,0 +1,150 @@ +import { Resizable } from 're-resizable'; +import { useEffect, useState } from 'react'; + +import { useAppDispatch, useAppSelector } from '../../../../store'; +import { telemetry } from '../../../../telemetry'; +import { Mode } from '../../../../types/enums'; +import { setDimensions } from '../../../services/slices/dimensions.slice'; +import { translateMessage } from '../../../utils/translate-messages'; +import { convertPxToVh } from '../../common/dimensions/dimensions-adjustment'; +import { Auth, Permissions, RequestHeaders } from '../../common/lazy-loader/component-registry'; +import { RequestBody } from './body'; +import './request.scss'; +import { IQuery } from '../../../../types/query-runner'; +import { makeStyles, Tab, TabList, TabValue } from '@fluentui/react-components'; + + interface IRequestProps { + handleOnEditorChange: ()=> void + sampleQuery: IQuery + } + +const useStyles = makeStyles({ + resizable: { + width: '100%' + }, + tabList: { + paddingBottom: '4px', + marginBottom: '8px' + }, + tabContent: { + overflow: 'hidden', + padding: '8px', + height: '100%', + border: '1px solid #ddd', + borderRadius: '4px' + }, + tab: { + fontWeight: 'bold', + padding: '8px 16px', + borderBottom: '2px solid transparent' + } +}); + +const Request = (props: IRequestProps) => { + const styles = useStyles(); + const dispatch = useAppDispatch(); + const [selectedTab, setSelectedTab] = useState('request-body'); + const mode = useAppSelector((state) => state.graphExplorerMode); + const dimensions = useAppSelector((state) => state.dimensions); + const sidebarProperties = useAppSelector((state) => state.sidebarProperties); + const minHeight = 60; + const maxHeight = 800; + + const { handleOnEditorChange, sampleQuery }: IRequestProps = props; + + useEffect(() => { + if (sidebarProperties && sidebarProperties.mobileScreen) { + window.addEventListener('resize', resizeHandler); + } else { + window.removeEventListener('resize', resizeHandler); + } + }, [sidebarProperties.mobileScreen]); + + const handleTabSelect = (tab: TabValue) => { + setSelectedTab(tab); + telemetry.trackTabClickEvent(tab as string, sampleQuery); + }; + + const setRequestAndResponseHeights = (requestHeight: string) => { + const heightInPx = requestHeight.replace('px', '').trim(); + const requestHeightInVh = convertPxToVh(parseFloat(heightInPx)).toString(); + const maxDeviceVerticalHeight = 90; + + const dimensionsToUpdate = { + ...dimensions, + request: { + ...dimensions.request, + height: requestHeightInVh + }, + response: { + ...dimensions.response, + height: `${maxDeviceVerticalHeight - parseFloat(requestHeightInVh.replace('vh', ''))}vh` + } + }; + + dispatch(setDimensions(dimensionsToUpdate)); + }; + + const resizeHandler = () => { + const resizable = document.getElementsByClassName('request-resizable'); + if (resizable && resizable.length > 0) { + const resizableElement = resizable[0] as HTMLElement; + if (resizableElement && resizableElement.style && resizableElement.style.height) { + resizableElement.style.height = ''; + } + } + }; + + return ( + { + if (ref && ref.style && ref.style.height) { + setRequestAndResponseHeights(ref.style.height); + } + }} + maxHeight={maxHeight} + minHeight={minHeight} + bounds={'window'} + size={{ + height: 'inherit', + width: '100%' + }} + enable={{ + bottom: true + }} + > +
+ handleTabSelect(data.value)} + className={styles.tabList} + > + + {translateMessage('Request Body')} + + + {translateMessage('Request Headers')} + + + {translateMessage('Modify Permissions')} + + {mode === Mode.Complete && ( + + {translateMessage('Access Token')} + + )} + + +
+ {selectedTab === 'request-body' && } + {selectedTab === 'request-headers' && } + {selectedTab === 'modify-permissions' && } + {selectedTab === 'access-token' && mode === Mode.Complete && } +
+
+ + ); +}; + +export default Request; \ No newline at end of file From 52776848468c4cf257e3ba66bb9fbc4dbf8ad989 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Wed, 27 Nov 2024 10:24:03 +0300 Subject: [PATCH 2/6] modify request headers --- .../lazy-loader/component-registry/index.tsx | 2 +- .../views/query-runner/request/RequestV9.tsx | 1 + .../request/headers/RequestHeadersV9.tsx | 120 ++++++++++++++++++ .../query-runner/request/headers/index.ts | 2 +- 4 files changed, 123 insertions(+), 2 deletions(-) create mode 100644 src/app/views/query-runner/request/headers/RequestHeadersV9.tsx diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx index faf435c22..508ec96eb 100644 --- a/src/app/views/common/lazy-loader/component-registry/index.tsx +++ b/src/app/views/common/lazy-loader/component-registry/index.tsx @@ -8,7 +8,7 @@ import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolki import LazySnippets from '../../../query-response/snippets/Snippets'; import LazyCopyButton from '../../copy-button/CopyButton'; import LazyAuth from '../../../query-runner/request/auth/Auth'; -import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeaders'; +import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeadersV9'; import LazyHistory from '../../../sidebar/history/History'; import LazyResourceExplorer from '../../../sidebar/resource-explorer/ResourceExplorer'; diff --git a/src/app/views/query-runner/request/RequestV9.tsx b/src/app/views/query-runner/request/RequestV9.tsx index 0bf16c2e9..7217ffbd0 100644 --- a/src/app/views/query-runner/request/RequestV9.tsx +++ b/src/app/views/query-runner/request/RequestV9.tsx @@ -13,6 +13,7 @@ import './request.scss'; import { IQuery } from '../../../../types/query-runner'; import { makeStyles, Tab, TabList, TabValue } from '@fluentui/react-components'; + interface IRequestProps { handleOnEditorChange: ()=> void sampleQuery: IQuery diff --git a/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx b/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx new file mode 100644 index 000000000..fcb5a139a --- /dev/null +++ b/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx @@ -0,0 +1,120 @@ +import { Button, Input, makeStyles, shorthands } from '@fluentui/react-components'; +import { useRef, useState } from 'react'; + +import { useAppDispatch, useAppSelector } from '../../../../../store'; +import { setSampleQuery } from '../../../../services/slices/sample-query.slice'; +import { translateMessage } from '../../../../utils/translate-messages'; +import HeadersList from './HeadersList'; +import { convertVhToPx } from '../../../common/dimensions/dimensions-adjustment'; + +interface IHeader { + name: string; + value: string; +} + +const useStyles = makeStyles({ + container: { + textAlign: 'center', + padding: '10px', + overflowY: 'auto', + overflowX: 'hidden' + }, + row: { + display: 'flex', + gap: '16px', + marginBottom: '16px', + alignItems: 'center' + }, + input: { + flex: 1 + }, + button: { + flexShrink: 0, + minWidth: '80px' + }, + listContainer: { + flex: 1, + overflow: 'auto' + } +}); + +const RequestHeaders = () => { + const { sampleQuery, dimensions: { request: { height } } } = useAppSelector((state) => state); + const [header, setHeader] = useState({ name: '', value: '' }); + const [isUpdatingHeader, setIsUpdatingHeader] = useState(false); + const [isHoverOverHeadersList, setIsHoverOverHeadersList] = useState(false); + + const dispatch = useAppDispatch(); + const styles = useStyles(); + + const handleInputChange = (e: React.ChangeEvent) => { + setHeader({ ...header, [e.target.name]: e.target.value }); + }; + + const handleAddHeader = () => { + if (header.name.trim() && header.value.trim()) { + const updatedHeaders = [header, ...(sampleQuery.sampleHeaders || [])]; + dispatch(setSampleQuery({ ...sampleQuery, sampleHeaders: updatedHeaders })); + setHeader({ name: '', value: '' }); + setIsUpdatingHeader(false); + } + }; + + const handleDeleteHeader = (headerToDelete: IHeader) => { + const updatedHeaders = sampleQuery.sampleHeaders.filter((h) => h.name !== headerToDelete.name); + dispatch(setSampleQuery({ ...sampleQuery, sampleHeaders: updatedHeaders })); + }; + + const handleEditHeader = (headerToEdit: IHeader) => { + setHeader(headerToEdit); + setIsUpdatingHeader(true); + const updatedHeaders = sampleQuery.sampleHeaders.filter((h) => h.name !== headerToEdit.name); + dispatch(setSampleQuery({ ...sampleQuery, sampleHeaders: updatedHeaders })); + }; + + return ( +
setIsHoverOverHeadersList(true)} + onMouseLeave={() => setIsHoverOverHeadersList(false)} + style={ + isHoverOverHeadersList + ? { height: convertVhToPx(height, 60) } + : { height: convertVhToPx(height, 60), overflow: 'hidden' } + } + > +
+ + + +
+
+ +
+
+ ); +}; + +export default RequestHeaders; \ No newline at end of file diff --git a/src/app/views/query-runner/request/headers/index.ts b/src/app/views/query-runner/request/headers/index.ts index 4ea53ad89..184344878 100644 --- a/src/app/views/query-runner/request/headers/index.ts +++ b/src/app/views/query-runner/request/headers/index.ts @@ -1,3 +1,3 @@ -import RequestHeaders from './RequestHeaders'; +import RequestHeaders from './RequestHeadersV9'; export default RequestHeaders; \ No newline at end of file From 97da4d77092fc4d75fdac61623e6ae8e94496d30 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Wed, 27 Nov 2024 17:41:27 +0300 Subject: [PATCH 3/6] modify access token area --- .../lazy-loader/component-registry/index.tsx | 2 +- .../query-runner/request/auth/AuthV9.tsx | 133 ++++++++++++++++++ .../views/query-runner/request/auth/index.ts | 2 +- 3 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 src/app/views/query-runner/request/auth/AuthV9.tsx diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx index 508ec96eb..1f0ce3d76 100644 --- a/src/app/views/common/lazy-loader/component-registry/index.tsx +++ b/src/app/views/common/lazy-loader/component-registry/index.tsx @@ -7,7 +7,7 @@ import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCa import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit'; import LazySnippets from '../../../query-response/snippets/Snippets'; import LazyCopyButton from '../../copy-button/CopyButton'; -import LazyAuth from '../../../query-runner/request/auth/Auth'; +import LazyAuth from '../../../query-runner/request/auth/AuthV9'; import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeadersV9'; import LazyHistory from '../../../sidebar/history/History'; import LazyResourceExplorer from '../../../sidebar/resource-explorer/ResourceExplorer'; diff --git a/src/app/views/query-runner/request/auth/AuthV9.tsx b/src/app/views/query-runner/request/auth/AuthV9.tsx new file mode 100644 index 000000000..fa4d7e254 --- /dev/null +++ b/src/app/views/query-runner/request/auth/AuthV9.tsx @@ -0,0 +1,133 @@ +import { useEffect, useState } from 'react'; +import { + Button, + Text, + Tooltip, + makeStyles, + MessageBar +} from '@fluentui/react-components'; +import { AuthenticationResult } from '@azure/msal-browser'; +import { authenticationWrapper } from '../../../../../modules/authentication'; +import { useAppSelector } from '../../../../../store'; + +import { componentNames, telemetry } from '../../../../../telemetry'; +import { ACCOUNT_TYPE } from '../../../../services/graph-constants'; +import { translateMessage } from '../../../../utils/translate-messages'; +import { trackedGenericCopy } from '../../../common/copy'; +import { CopyButton } from '../../../common/lazy-loader/component-registry'; +import { convertVhToPx } from '../../../common/dimensions/dimensions-adjustment'; +import { BracesRegular } from '@fluentui/react-icons'; + +const useStyles = makeStyles({ + auth: { + padding: '5px', + overflowY: 'auto' + }, + accessTokenContainer: { + width: '160px', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingBottom: '10px' + }, + accessToken: { + wordWrap: 'break-word', + fontFamily: 'monospace', + fontSize: '12px', + width: '100%', + height: '100%', + border: 'none', + resize: 'none' + }, + accessTokenLabel: { + fontWeight: 'bold', + marginBottom: '5px' + }, + emptyStateLabel: { + display: 'flex', + width: '100%', + minHeight: '100%', + justifyContent: 'center', + alignItems: 'center' + } +}); + +export function Auth() { + const { auth: { authToken }, profile, dimensions: {request:{height}}} = useAppSelector((state) => state); + const { user } = profile; + const requestHeight = convertVhToPx(height, 60); + const [accessToken, setAccessToken] = useState(null); + const [loading, setLoading] = useState(false); + + const styles = useStyles(); + + const handleCopy = async () => { + trackedGenericCopy(accessToken || '', componentNames.ACCESS_TOKEN_COPY_BUTTON); + }; + + useEffect(() => { + setLoading(true); + authenticationWrapper + .getToken() + .then((response: AuthenticationResult) => { + setAccessToken(response.accessToken); + setLoading(false); + }) + .catch(() => { + setLoading(false); + }); + }, [authToken]); + + const tokenDetailsDisabled = user?.profileType === ACCOUNT_TYPE.MSA; + + if (!authToken.token) { + return ( + + {translateMessage('Sign In to see your access token.')} + + ); + } + + return ( +
+ {!loading ? ( +
+
+ {translateMessage('Access Token')} + + +
+ + {accessToken} + +
+ ) : ( + + {translateMessage('Getting your access token')} ... + + )} +
+ ); + + function showMessage(): string { + if (tokenDetailsDisabled) { + return 'This token is not a JWT token and cannot be decoded by jwt.ms'; + } + return 'Get token details (Powered by jwt.ms)'; + } +} + +export default telemetry.trackReactComponent(Auth, componentNames.ACCESS_TOKEN_TAB); \ No newline at end of file diff --git a/src/app/views/query-runner/request/auth/index.ts b/src/app/views/query-runner/request/auth/index.ts index e2737e758..4e4aa8043 100644 --- a/src/app/views/query-runner/request/auth/index.ts +++ b/src/app/views/query-runner/request/auth/index.ts @@ -1,3 +1,3 @@ -import { Auth } from './Auth'; +import { Auth } from './AuthV9'; export default Auth; From 8a3eb39f381fbebfdcef273e52670cd875d04d10 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Wed, 27 Nov 2024 18:12:00 +0300 Subject: [PATCH 4/6] update copy button --- .../views/common/copy-button/CopyButtonV9.tsx | 65 +++++++++++++++++++ .../lazy-loader/component-registry/index.tsx | 2 +- 2 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/app/views/common/copy-button/CopyButtonV9.tsx diff --git a/src/app/views/common/copy-button/CopyButtonV9.tsx b/src/app/views/common/copy-button/CopyButtonV9.tsx new file mode 100644 index 000000000..f42e1f43c --- /dev/null +++ b/src/app/views/common/copy-button/CopyButtonV9.tsx @@ -0,0 +1,65 @@ +import { useState, useRef } from 'react'; +import { Button, Tooltip, makeStyles } from '@fluentui/react-components'; +import { translateMessage } from '../../../utils/translate-messages'; +import { CheckmarkRegular, CopyRegular } from '@fluentui/react-icons'; + +interface ICopyButtonProps { + style?: React.CSSProperties; + handleOnClick: Function; + className?: string; + isIconButton: boolean; +} + +const useStyles = makeStyles({ + button: { + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center' + } +}); + +export default function CopyButton(props: ICopyButtonProps) { + const [copied, setCopied] = useState(false); + const copyRef = useRef(null); + const styles = useStyles(); + + const copyLabel: string = !copied ? translateMessage('Copy') : translateMessage('Copied'); + + const handleCopyClick = async () => { + props.handleOnClick(props); + setCopied(true); + handleTimeout(); + copyRef.current?.focus(); // Set focus back to the button + }; + + const handleTimeout = () => { + const timer = setTimeout(() => setCopied(false), 3000); // Reset copied state after 3 seconds + return () => clearTimeout(timer); + }; + + return ( + <> + {props.isIconButton ? ( + + + )} + + ); +} \ No newline at end of file diff --git a/src/app/views/common/lazy-loader/component-registry/index.tsx b/src/app/views/common/lazy-loader/component-registry/index.tsx index 1f0ce3d76..bf41446a4 100644 --- a/src/app/views/common/lazy-loader/component-registry/index.tsx +++ b/src/app/views/common/lazy-loader/component-registry/index.tsx @@ -6,7 +6,7 @@ import LazyResponseHeaders from '../../../query-response/headers/ResponseHeader import LazyAdaptiveCard from '../../../query-response/adaptive-cards/AdaptiveCard'; import LazyGraphToolkit from '../../../query-response/graph-toolkit/GraphToolkit'; import LazySnippets from '../../../query-response/snippets/Snippets'; -import LazyCopyButton from '../../copy-button/CopyButton'; +import LazyCopyButton from '../../copy-button/CopyButtonV9'; import LazyAuth from '../../../query-runner/request/auth/AuthV9'; import LazyRequestHeaders from '../../../query-runner/request/headers/RequestHeadersV9'; import LazyHistory from '../../../sidebar/history/History'; From 82be8091d43d533ab39ca0c2b4da3b9580c82688 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Wed, 4 Dec 2024 11:49:07 +0300 Subject: [PATCH 5/6] resolve changes --- package.json | 2 -- src/app/views/query-runner/request/RequestV9.tsx | 2 +- src/app/views/query-runner/request/auth/AuthV9.tsx | 4 +++- .../views/query-runner/request/headers/RequestHeadersV9.tsx | 3 ++- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4d087c5a0..bc7e9d624 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,6 @@ "dependencies": { "@augloop/types-core": "file:packages/types-core-2.16.189.tgz", "@axe-core/webdriverjs": "4.10.0", - "@fluentui/react-components": "9.55.1", - "@fluentui/react-icons": "2.0.264", "@azure/msal-browser": "3.26.1", "@babel/core": "7.26.0", "@babel/runtime": "7.26.0", diff --git a/src/app/views/query-runner/request/RequestV9.tsx b/src/app/views/query-runner/request/RequestV9.tsx index 7217ffbd0..2cfa0d778 100644 --- a/src/app/views/query-runner/request/RequestV9.tsx +++ b/src/app/views/query-runner/request/RequestV9.tsx @@ -15,7 +15,7 @@ import { makeStyles, Tab, TabList, TabValue } from '@fluentui/react-components'; interface IRequestProps { - handleOnEditorChange: ()=> void + handleOnEditorChange: () => void sampleQuery: IQuery } diff --git a/src/app/views/query-runner/request/auth/AuthV9.tsx b/src/app/views/query-runner/request/auth/AuthV9.tsx index fa4d7e254..b4512491f 100644 --- a/src/app/views/query-runner/request/auth/AuthV9.tsx +++ b/src/app/views/query-runner/request/auth/AuthV9.tsx @@ -54,7 +54,9 @@ const useStyles = makeStyles({ }); export function Auth() { - const { auth: { authToken }, profile, dimensions: {request:{height}}} = useAppSelector((state) => state); + const profile = useAppSelector((state) => state.profile); + const height: string = useAppSelector((state) => state.dimensions.request.height); + const authToken = useAppSelector((state) => state.auth.authToken); const { user } = profile; const requestHeight = convertVhToPx(height, 60); const [accessToken, setAccessToken] = useState(null); diff --git a/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx b/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx index fcb5a139a..de690f06d 100644 --- a/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx +++ b/src/app/views/query-runner/request/headers/RequestHeadersV9.tsx @@ -39,7 +39,8 @@ const useStyles = makeStyles({ }); const RequestHeaders = () => { - const { sampleQuery, dimensions: { request: { height } } } = useAppSelector((state) => state); + const sampleQuery = useAppSelector((state) => state.sampleQuery); + const height = useAppSelector((state) => state.dimensions.request.height); const [header, setHeader] = useState({ name: '', value: '' }); const [isUpdatingHeader, setIsUpdatingHeader] = useState(false); const [isHoverOverHeadersList, setIsHoverOverHeadersList] = useState(false); From f2f521ccf36ded84ae972038d9ec8c410f91e482 Mon Sep 17 00:00:00 2001 From: ElinorW Date: Mon, 9 Dec 2024 19:19:19 +0300 Subject: [PATCH 6/6] update height --- .../views/query-runner/request/RequestV9.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/app/views/query-runner/request/RequestV9.tsx b/src/app/views/query-runner/request/RequestV9.tsx index 2cfa0d778..f5f40f8d4 100644 --- a/src/app/views/query-runner/request/RequestV9.tsx +++ b/src/app/views/query-runner/request/RequestV9.tsx @@ -1,12 +1,12 @@ import { Resizable } from 're-resizable'; -import { useEffect, useState } from 'react'; +import { CSSProperties, useEffect, useState } from 'react'; import { useAppDispatch, useAppSelector } from '../../../../store'; import { telemetry } from '../../../../telemetry'; import { Mode } from '../../../../types/enums'; import { setDimensions } from '../../../services/slices/dimensions.slice'; import { translateMessage } from '../../../utils/translate-messages'; -import { convertPxToVh } from '../../common/dimensions/dimensions-adjustment'; +import { convertPxToVh, convertVhToPx } from '../../common/dimensions/dimensions-adjustment'; import { Auth, Permissions, RequestHeaders } from '../../common/lazy-loader/component-registry'; import { RequestBody } from './body'; import './request.scss'; @@ -27,13 +27,6 @@ const useStyles = makeStyles({ paddingBottom: '4px', marginBottom: '8px' }, - tabContent: { - overflow: 'hidden', - padding: '8px', - height: '100%', - border: '1px solid #ddd', - borderRadius: '4px' - }, tab: { fontWeight: 'bold', padding: '8px 16px', @@ -52,6 +45,14 @@ const Request = (props: IRequestProps) => { const maxHeight = 800; const { handleOnEditorChange, sampleQuery }: IRequestProps = props; + const newHeight = convertVhToPx(dimensions.request.height, 55); + const containerStyle: CSSProperties = { + height: newHeight, + overflow: 'hidden', + borderRadius: '4px', + border: '1px solid #ddd', + padding: '8px' + } useEffect(() => { if (sidebarProperties && sidebarProperties.mobileScreen) { @@ -137,7 +138,7 @@ const Request = (props: IRequestProps) => { )} -
+
{selectedTab === 'request-body' && } {selectedTab === 'request-headers' && } {selectedTab === 'modify-permissions' && }