fixes querystring updating regression (#3995)

Co-authored-by: gatzjames <jamesgatzos@gmail.com>

packages/insomnia-app/app/ui/components/base/copy-button.tsx

@@ -17,7 +17,7 @@ interface State {
 }
 
 @autoBindMethodsForReact(AUTOBIND_CFG)
-class CopyButton extends PureComponent<Props, State> {
+export class CopyButton extends PureComponent<Props, State> {
   state: State = {
     showConfirmation: false,
   };
@@ -74,5 +74,3 @@ class CopyButton extends PureComponent<Props, State> {
     );
   }
 }
-
-export default CopyButton;

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

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

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

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

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<Props, State> {
-  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<Props> = ({ 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);
-  }
-
-  componentWillUnmount() {
-    if (this._interval !== null) {
-      clearTimeout(this._interval);
-    }
-  }
-
-  // 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 ? (
-      <span className="selectable force-wrap">{this.state.string}</span>
-    ) : (
-      <span className="super-duper-faint italic">...</span>
-    );
+  const className = previewString === defaultPreview ? 'super-duper-faint' : 'selectable force-wrap';
 
   return (
-      <div className="wide scrollable">
+    <Wrapper>
+      <span className={className}>{previewString}</span>
+
       <CopyButton
         size="small"
-          content={this.state.string}
-          className="pull-right"
+        content={previewString}
+        disabled={previewString === defaultPreview}
         title="Copy URL"
         confirmMessage=""
       >
         <i className="fa fa-copy" />
       </CopyButton>
-        {inner}
-      </div>
+    </Wrapper>
   );
-  }
-}
-
-export default RenderedQueryString;
+};

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

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 {