From 893c94655317e7d40eeede6055272ddab52cf066 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Fri, 3 Sep 2021 14:25:32 -0400 Subject: [PATCH] fixes querystring updating regression (#3995) Co-authored-by: gatzjames --- .../app/ui/components/base/copy-button.tsx | 4 +- .../components/modals/code-prompt-modal.tsx | 2 +- .../components/modals/generate-code-modal.tsx | 2 +- .../modals/generate-config-modal.tsx | 2 +- .../app/ui/components/panes/request-pane.tsx | 2 +- .../ui/components/rendered-query-string.tsx | 136 +++++++----------- .../app/ui/components/settings/plugins.tsx | 2 +- .../viewers/response-headers-viewer.tsx | 2 +- 8 files changed, 61 insertions(+), 91 deletions(-) diff --git a/packages/insomnia-app/app/ui/components/base/copy-button.tsx b/packages/insomnia-app/app/ui/components/base/copy-button.tsx index 54b153033..64c6b4d20 100644 --- a/packages/insomnia-app/app/ui/components/base/copy-button.tsx +++ b/packages/insomnia-app/app/ui/components/base/copy-button.tsx @@ -17,7 +17,7 @@ interface State { } @autoBindMethodsForReact(AUTOBIND_CFG) -class CopyButton extends PureComponent { +export class CopyButton extends PureComponent { state: State = { showConfirmation: false, }; @@ -74,5 +74,3 @@ class CopyButton extends PureComponent { ); } } - -export default CopyButton; diff --git a/packages/insomnia-app/app/ui/components/modals/code-prompt-modal.tsx b/packages/insomnia-app/app/ui/components/modals/code-prompt-modal.tsx index bff1a6843..412373c4e 100644 --- a/packages/insomnia-app/app/ui/components/modals/code-prompt-modal.tsx +++ b/packages/insomnia-app/app/ui/components/modals/code-prompt-modal.tsx @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react'; import { AUTOBIND_CFG } from '../../../common/constants'; import { HandleGetRenderContext, HandleRender } from '../../../common/render'; -import CopyButton from '../base/copy-button'; +import { CopyButton } from '../base/copy-button'; import Dropdown from '../base/dropdown/dropdown'; import DropdownButton from '../base/dropdown/dropdown-button'; import DropdownDivider from '../base/dropdown/dropdown-divider'; diff --git a/packages/insomnia-app/app/ui/components/modals/generate-code-modal.tsx b/packages/insomnia-app/app/ui/components/modals/generate-code-modal.tsx index 1a1f60c55..374413f17 100644 --- a/packages/insomnia-app/app/ui/components/modals/generate-code-modal.tsx +++ b/packages/insomnia-app/app/ui/components/modals/generate-code-modal.tsx @@ -4,7 +4,7 @@ import React, { PureComponent } from 'react'; import { AUTOBIND_CFG } from '../../../common/constants'; import { exportHarRequest } from '../../../common/har'; -import CopyButton from '../base/copy-button'; +import { CopyButton } from '../base/copy-button'; import { Dropdown, DropdownButton, DropdownItem } from '../base/dropdown'; import Link from '../base/link'; import Modal from '../base/modal'; diff --git a/packages/insomnia-app/app/ui/components/modals/generate-config-modal.tsx b/packages/insomnia-app/app/ui/components/modals/generate-config-modal.tsx index 82006bafc..f19bf2168 100644 --- a/packages/insomnia-app/app/ui/components/modals/generate-config-modal.tsx +++ b/packages/insomnia-app/app/ui/components/modals/generate-config-modal.tsx @@ -8,7 +8,7 @@ import type { ApiSpec } from '../../../models/api-spec'; import type { Settings } from '../../../models/settings'; import type { ConfigGenerator } from '../../../plugins'; import * as plugins from '../../../plugins'; -import CopyButton from '../base/copy-button'; +import { CopyButton } from '../base/copy-button'; import Modal from '../base/modal'; import ModalBody from '../base/modal-body'; import ModalFooter from '../base/modal-footer'; diff --git a/packages/insomnia-app/app/ui/components/panes/request-pane.tsx b/packages/insomnia-app/app/ui/components/panes/request-pane.tsx index a6a15230e..4304b2a1f 100644 --- a/packages/insomnia-app/app/ui/components/panes/request-pane.tsx +++ b/packages/insomnia-app/app/ui/components/panes/request-pane.tsx @@ -28,7 +28,7 @@ import ErrorBoundary from '../error-boundary'; import MarkdownPreview from '../markdown-preview'; import { showModal } from '../modals'; import RequestSettingsModal from '../modals/request-settings-modal'; -import RenderedQueryString from '../rendered-query-string'; +import { RenderedQueryString } from '../rendered-query-string'; import RequestUrlBar from '../request-url-bar'; import { Pane, paneBodyClasses, PaneHeader } from './pane'; import PlaceholderRequestPane from './placeholder-request-pane'; diff --git a/packages/insomnia-app/app/ui/components/rendered-query-string.tsx b/packages/insomnia-app/app/ui/components/rendered-query-string.tsx index 1de3c25cc..4269951b3 100644 --- a/packages/insomnia-app/app/ui/components/rendered-query-string.tsx +++ b/packages/insomnia-app/app/ui/components/rendered-query-string.tsx @@ -1,104 +1,76 @@ -import { autoBindMethodsForReact } from 'class-autobind-decorator'; import { buildQueryStringFromParams, joinUrlAndQueryString, smartEncodeUrl } from 'insomnia-url'; -import React, { PureComponent } from 'react'; +import React, { FC, useState } from 'react'; +import { useAsync } from 'react-use'; +import styled from 'styled-components'; -import { AUTOBIND_CFG } from '../../common/constants'; import { HandleRender } from '../../common/render'; -import CopyButton from './base/copy-button'; +import { Request } from '../../models/request'; +import { CopyButton as _CopyButton } from './base/copy-button'; + +const Wrapper = styled.div({ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + overflow: 'auto', + position: 'relative', + height: '100%', + gap: 'var(--padding-sm)', + width: '100%', +}); + +const CopyButton = styled(_CopyButton)({ + alignSelf: 'start', + position: 'sticky', + top: 0, +}); interface Props { - request: any; + request: Request; handleRender: HandleRender; } -interface State { - string: string; -} +const defaultPreview = '...'; -@autoBindMethodsForReact(AUTOBIND_CFG) -class RenderedQueryString extends PureComponent { - state: State = { - string: '', - }; - - _interval: NodeJS.Timeout | null = null; - - async _debouncedUpdate(props: Props) { - if (this._interval !== null) { - clearTimeout(this._interval); - this._interval = setTimeout(() => { - this._update(props); - }, 300); - } - } - - async _update(props: Props) { - const { request } = props; - const enabledParameters = request.parameters.filter(p => !p.disabled); - let result; +export const RenderedQueryString: FC = ({ request, handleRender }) => { + const [previewString, setPreviewString] = useState(defaultPreview); + useAsync(async () => { + const enabledParameters = request.parameters.filter(({ disabled }) => !disabled); try { - result = await props.handleRender({ + const result = await handleRender({ url: request.url, parameters: enabledParameters, }); - } catch (err) { - // Just ignore failures - } + if (!result) { + return; + } - if (result) { const { url, parameters } = result; const qs = buildQueryStringFromParams(parameters); const fullUrl = joinUrlAndQueryString(url, qs); - this.setState({ - string: smartEncodeUrl(fullUrl, request.settingEncodeUrl), - }); + const encoded = smartEncodeUrl(fullUrl, request.settingEncodeUrl); + setPreviewString(encoded === '' ? defaultPreview : encoded); + } catch (error: unknown) { + console.error(error); + setPreviewString(defaultPreview); } - } + }, [request.url, request.parameters, request.settingEncodeUrl, handleRender]); - componentDidMount() { - this._update(this.props); - } + const className = previewString === defaultPreview ? 'super-duper-faint' : 'selectable force-wrap'; - componentWillUnmount() { - if (this._interval !== null) { - clearTimeout(this._interval); - } - } + return ( + + {previewString} - // eslint-disable-next-line camelcase - UNSAFE_componentWillReceiveProps(nextProps: Props) { - if (nextProps.request._id !== this.props.request._id) { - this._update(nextProps); - } else { - this._debouncedUpdate(nextProps); - } - } - - render() { - const { string } = this.state; - - const inner = string ? ( - {this.state.string} - ) : ( - ... - ); - - return ( -
- - - - {inner} -
- ); - } -} - -export default RenderedQueryString; + + + + + ); +}; diff --git a/packages/insomnia-app/app/ui/components/settings/plugins.tsx b/packages/insomnia-app/app/ui/components/settings/plugins.tsx index 7e64f4b04..4c8bcd7b8 100644 --- a/packages/insomnia-app/app/ui/components/settings/plugins.tsx +++ b/packages/insomnia-app/app/ui/components/settings/plugins.tsx @@ -18,7 +18,7 @@ import type { Plugin } from '../../../plugins/index'; import { getPlugins } from '../../../plugins/index'; import installPlugin from '../../../plugins/install'; import { reload } from '../../../templating/index'; -import CopyButton from '../base/copy-button'; +import { CopyButton } from '../base/copy-button'; import Link from '../base/link'; import HelpTooltip from '../help-tooltip'; import { showAlert, showPrompt } from '../modals'; diff --git a/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.tsx b/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.tsx index ca60e6fa7..6a7554154 100644 --- a/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.tsx +++ b/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.tsx @@ -2,7 +2,7 @@ import React, { Fragment, PureComponent } from 'react'; import { URL } from 'url'; import type { ResponseHeader } from '../../../models/response'; -import CopyButton from '../base/copy-button'; +import { CopyButton } from '../base/copy-button'; import Link from '../base/link'; interface Props {