From 2006025ffe44b17cab422dfcec43635574c77a12 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 14 Dec 2018 18:10:57 -0500
Subject: [PATCH] Explicitly pass request when saving in React components
 (#1306)

* Started work on it

* Finish refactoring I think
---
 .../ui/components/dropdowns/auth-dropdown.js  |  51 +++--
 .../ui/components/editors/auth/asap-auth.js   |  93 ++++----
 .../components/editors/auth/auth-wrapper.js   |  65 +++---
 .../ui/components/editors/auth/aws-auth.js    | 144 ++++++-------
 .../ui/components/editors/auth/basic-auth.js  | 200 ++++++++---------
 .../ui/components/editors/auth/bearer-auth.js | 203 +++++++++---------
 .../ui/components/editors/auth/digest-auth.js | 201 ++++++++---------
 .../ui/components/editors/auth/hawk-auth.js   |  28 +--
 .../ui/components/editors/auth/ntlm-auth.js   | 200 ++++++++---------
 .../components/editors/auth/o-auth-2-auth.js  |  16 +-
 .../ui/components/editors/body/body-editor.js |  26 +--
 .../editors/request-headers-editor.js         |  70 +++---
 .../app/ui/components/request-pane.js         | 132 ++++++------
 .../app/ui/components/request-url-bar.js      | 138 ++++++------
 .../insomnia-app/app/ui/components/wrapper.js |  98 +++++----
 15 files changed, 867 insertions(+), 798 deletions(-)

diff --git a/packages/insomnia-app/app/ui/components/dropdowns/auth-dropdown.js b/packages/insomnia-app/app/ui/components/dropdowns/auth-dropdown.js
index 93371d52f9..31023bb532 100644
--- a/packages/insomnia-app/app/ui/components/dropdowns/auth-dropdown.js
+++ b/packages/insomnia-app/app/ui/components/dropdowns/auth-dropdown.js
@@ -1,10 +1,12 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import { showModal } from '../modals';
 import AlertModal from '../modals/alert-modal';
 import * as models from '../../../models';
+import type { Request, RequestAuthentication } from '../../../models/request';
 import {
   AUTH_BASIC,
   AUTH_DIGEST,
@@ -20,24 +22,36 @@ import {
   getAuthTypeName,
 } from '../../../common/constants';
 
+type Props = {
+  onChange: (r: Request, RequestAuthentication) => Promise<Request>,
+  request: Request,
+
+  // Optional
+  className: string,
+  children: React.Node,
+};
+
 @autobind
-class AuthDropdown extends PureComponent {
-  async _handleTypeChange(type) {
-    if (type === this.props.authentication.type) {
+class AuthDropdown extends React.PureComponent<Props> {
+  async _handleTypeChange(type: string) {
+    const { request, onChange } = this.props;
+    const { authentication } = request;
+
+    if (type === authentication.type) {
       // Type didn't change
       return;
     }
 
-    const newAuthentication = models.request.newAuth(type, this.props.authentication);
-    const defaultAuthentication = models.request.newAuth(this.props.authentication.type);
+    const newAuthentication = models.request.newAuth(type, authentication);
+    const defaultAuthentication = models.request.newAuth(authentication.type);
 
     // Prompt the user if fields will change between new and old
-    for (const key of Object.keys(this.props.authentication)) {
+    for (const key of Object.keys(authentication)) {
       if (key === 'type') {
         continue;
       }
 
-      const value = this.props.authentication[key];
+      const value = authentication[key];
       const changedSinceDefault = defaultAuthentication[key] !== value;
       const willChange = newAuthentication[key] !== value;
 
@@ -51,14 +65,16 @@ class AuthDropdown extends PureComponent {
       }
     }
 
-    this.props.onChange(newAuthentication);
+    onChange(request, newAuthentication);
   }
 
-  renderAuthType(type, nameOverride = null) {
-    const currentType = this.props.authentication.type || AUTH_NONE;
+  renderAuthType(type: string, nameOverride: string | null = null) {
+    const {authentication} = this.props.request;
+    const currentType = authentication.type || AUTH_NONE;
+
     return (
       <DropdownItem onClick={this._handleTypeChange} value={type}>
-        {currentType === type ? <i className="fa fa-check" /> : <i className="fa fa-empty" />}{' '}
+        {currentType === type ? <i className="fa fa-check"/> : <i className="fa fa-empty"/>}{' '}
         {nameOverride || getAuthTypeName(type, true)}
       </DropdownItem>
     );
@@ -87,13 +103,4 @@ class AuthDropdown extends PureComponent {
   }
 }
 
-AuthDropdown.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  authentication: PropTypes.object.isRequired,
-
-  // Optional
-  className: PropTypes.string,
-  children: PropTypes.node,
-};
-
 export default AuthDropdown;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
index 9a0860c6e6..a13d4a670a 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js
@@ -1,5 +1,4 @@
 // @flow
-import type { RequestAuthentication } from '../../../../models/request';
 
 import classnames from 'classnames';
 import * as React from 'react';
@@ -9,14 +8,15 @@ import HelpTooltip from '../../help-tooltip';
 import { showModal } from '../../modals';
 import CodePromptModal from '../../modals/code-prompt-modal';
 import Button from '../../base/button';
+import type { Request, RequestAuthentication } from '../../../../models/request';
 
 type Props = {
-  authentication: RequestAuthentication,
+  request: Request,
   handleRender: Function,
   handleGetRenderContext: Function,
   nunjucksPowerUserMode: boolean,
   isVariableUncovered: boolean,
-  onChange: Function,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
 };
 
 const PRIVATE_KEY_PLACEHOLDER = `
@@ -35,21 +35,21 @@ cJV+wRTs/Szp6LXAgMmTkKMJ+9XXErUIUgwbl27Y3Rv/9ox1p5VRg+A=
 @autobind
 class AsapAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
   _handleChangeProperty(property: string, value: string | boolean): void {
-    const { authentication } = this.props;
-    authentication[property] = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, [property]: value });
   }
 
   _handleChangePrivateKey(value: string): void {
-    const { authentication } = this.props;
-    authentication.privateKey = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, privateKey: value });
   }
 
   renderAsapAuthenticationFields(): React.Node {
@@ -90,11 +90,14 @@ class AsapAuth extends React.PureComponent<Props> {
     const {
       handleRender,
       handleGetRenderContext,
-      authentication,
+      request,
       nunjucksPowerUserMode,
       isVariableUncovered,
     } = this.props;
+
+    const { authentication } = request;
     const id = label.replace(/ /g, '-');
+
     return (
       <tr key={id}>
         <td className="pad-right no-wrap valign-middle">
@@ -124,7 +127,14 @@ class AsapAuth extends React.PureComponent<Props> {
   }
 
   _handleEditPrivateKey() {
-    const { handleRender, handleGetRenderContext, authentication } = this.props;
+    const {
+      handleRender,
+      handleGetRenderContext,
+      request,
+    } = this.props;
+
+    const { authentication } = request;
+
     showModal(CodePromptModal, {
       submitName: 'Done',
       title: `Edit Private Key`,
@@ -138,8 +148,9 @@ class AsapAuth extends React.PureComponent<Props> {
   }
 
   renderPrivateKeyInput(label: string): React.Element<*> {
+    const { authentication } = this.props.request;
     const id = label.replace(/ /g, '-');
-    const { authentication } = this.props;
+
     return (
       <tr key={id}>
         <td className="pad-right pad-top-sm no-wrap valign-top">
@@ -160,7 +171,7 @@ class AsapAuth extends React.PureComponent<Props> {
               },
             )}>
             <button className="btn btn--clicky wide" onClick={this._handleEditPrivateKey}>
-              <i className="fa fa-edit space-right" />
+              <i className="fa fa-edit space-right"/>
               {authentication.privateKey ? 'Click to Edit' : 'Click to Add'}
             </button>
           </div>
@@ -170,37 +181,37 @@ class AsapAuth extends React.PureComponent<Props> {
   }
 
   render() {
+    const { authentication } = this.props.request;
     const fields = this.renderAsapAuthenticationFields();
-    const { authentication } = this.props;
 
     return (
       <div className="pad">
         <table>
           <tbody>
-            {fields}
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          {fields}
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js b/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
index f84dc268fb..b8c2b22c30 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js
@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+
+import * as React from 'react';
 import {
   AUTH_BASIC,
   AUTH_DIGEST,
@@ -23,9 +24,26 @@ import AWSAuth from './aws-auth';
 import NetrcAuth from './netrc-auth';
 import AsapAuth from './asap-auth';
 import autobind from 'autobind-decorator';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+import type { OAuth2Token } from '../../../../models/o-auth-2-token';
+import type { Settings } from '../../../../models/settings';
+
+type Props = {
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  handleUpdateSettingsShowPasswords: (showPasswords: boolean) => Promise<Settings>,
+  nunjucksPowerUserMode: boolean,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
+  request: Request,
+  showPasswords: boolean,
+  isVariableUncovered: boolean,
+
+  // Optional
+  oAuth2Token: ?OAuth2Token,
+};
 
 @autobind
-class AuthWrapper extends PureComponent {
+class AuthWrapper extends React.PureComponent<Props> {
   renderEditor() {
     const {
       oAuth2Token,
@@ -44,7 +62,7 @@ class AuthWrapper extends PureComponent {
     if (authentication.type === AUTH_BASIC) {
       return (
         <BasicAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           handleUpdateSettingsShowPasswords={handleUpdateSettingsShowPasswords}
@@ -71,7 +89,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_HAWK) {
       return (
         <HawkAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           nunjucksPowerUserMode={nunjucksPowerUserMode}
@@ -94,7 +112,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_DIGEST) {
       return (
         <DigestAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           handleUpdateSettingsShowPasswords={handleUpdateSettingsShowPasswords}
@@ -107,7 +125,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_NTLM) {
       return (
         <NTLMAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           nunjucksPowerUserMode={nunjucksPowerUserMode}
@@ -120,7 +138,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_BEARER) {
       return (
         <BearerAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           nunjucksPowerUserMode={nunjucksPowerUserMode}
@@ -131,7 +149,7 @@ class AuthWrapper extends PureComponent {
     } else if (authentication.type === AUTH_AWS_IAM) {
       return (
         <AWSAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           handleUpdateSettingsShowPasswords={handleUpdateSettingsShowPasswords}
@@ -142,11 +160,11 @@ class AuthWrapper extends PureComponent {
         />
       );
     } else if (authentication.type === AUTH_NETRC) {
-      return <NetrcAuth />;
+      return <NetrcAuth/>;
     } else if (authentication.type === AUTH_ASAP) {
       return (
         <AsapAuth
-          authentication={authentication}
+          request={request}
           handleRender={handleRender}
           handleGetRenderContext={handleGetRenderContext}
           nunjucksPowerUserMode={nunjucksPowerUserMode}
@@ -158,9 +176,9 @@ class AuthWrapper extends PureComponent {
       return (
         <div className="vertically-center text-center">
           <p className="pad super-faint text-sm text-center">
-            <i className="fa fa-unlock-alt" style={{ fontSize: '8rem', opacity: 0.3 }} />
-            <br />
-            <br />
+            <i className="fa fa-unlock-alt" style={{ fontSize: '8rem', opacity: 0.3 }}/>
+            <br/>
+            <br/>
             Select an auth type from above
           </p>
         </div>
@@ -169,21 +187,12 @@ class AuthWrapper extends PureComponent {
   }
 
   render() {
-    return <div className="tall">{this.renderEditor()}</div>;
+    return (
+      <div className="tall">
+        {this.renderEditor()}
+      </div>
+    );
   }
 }
 
-AuthWrapper.propTypes = {
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  request: PropTypes.object.isRequired,
-  showPasswords: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-  // Optional
-  oAuth2Token: PropTypes.object,
-};
-
 export default AuthWrapper;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
index faceaec614..891f103fd2 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js
@@ -5,60 +5,58 @@ import classnames from 'classnames';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import HelpTooltip from '../../help-tooltip';
-import type { RequestAuthentication } from '../../../../models/request';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+import type { Settings } from '../../../../models/settings';
 
 type Props = {
-  authentication: RequestAuthentication,
+  request: Request,
   nunjucksPowerUserMode: boolean,
   showPasswords: boolean,
   isVariableUncovered: boolean,
-  onChange: RequestAuthentication => void,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
   handleRender: string => Promise<string>,
   handleGetRenderContext: () => Promise<Object>,
-  handleUpdateSettingsShowPasswords: boolean => Promise<void>,
+  handleUpdateSettingsShowPasswords: boolean => Promise<Settings>,
 };
 
 @autobind
 class AWSAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
   _handleChangeAccessKeyId(value: string) {
-    const { authentication } = this.props;
-    authentication.accessKeyId = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, accessKeyId: value });
   }
 
   _handleChangeSecretAccessKey(value: string) {
-    const { authentication } = this.props;
-    authentication.secretAccessKey = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, secretAccessKey: value });
   }
 
   _handleChangeRegion(value: string) {
-    const { authentication } = this.props;
-    authentication.region = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, region: value });
   }
 
   _handleChangeService(value: string) {
-    const { authentication } = this.props;
-    authentication.service = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, service: value });
   }
 
   _handleChangeSessionToken(value: string) {
-    const { authentication } = this.props;
-    authentication.sessionToken = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, sessionToken: value });
   }
 
   renderRow(key: string, label: string, onChange: Function, help?: string) {
     const {
-      authentication,
+      request,
       nunjucksPowerUserMode,
       handleRender,
       handleGetRenderContext,
@@ -76,12 +74,12 @@ class AWSAuth extends React.PureComponent<Props> {
         <td className="wide">
           <div
             className={classnames('form-control form-control--underlined no-margin', {
-              'form-control--inactive': authentication.disabled,
+              'form-control--inactive': request.authentication.disabled,
             })}>
             <OneLineEditor
               id={key}
               onChange={onChange}
-              defaultValue={authentication[key] || ''}
+              defaultValue={request.authentication[key] || ''}
               nunjucksPowerUserMode={nunjucksPowerUserMode}
               render={handleRender}
               getRenderContext={handleGetRenderContext}
@@ -94,58 +92,58 @@ class AWSAuth extends React.PureComponent<Props> {
   }
 
   render() {
-    const { authentication } = this.props;
+    const { authentication } = this.props.request;
     return (
       <div className="pad">
         <table>
           <tbody>
-            {this.renderRow('accessKeyId', 'Access Key ID', this._handleChangeAccessKeyId)}
-            {this.renderRow(
-              'secretAccessKey',
-              'Secret Access Key',
-              this._handleChangeSecretAccessKey,
-            )}
-            {this.renderRow(
-              'region',
-              'Region',
-              this._handleChangeRegion,
-              "will be calculated from hostname or host or use 'us-east-1' if not given",
-            )}
-            {this.renderRow(
-              'service',
-              'Service',
-              this._handleChangeService,
-              'will be calculated from hostname or host if not given',
-            )}
-            {this.renderRow(
-              'sessionToken',
-              'Session Token',
-              this._handleChangeSessionToken,
-              'Optional token used for multi-factor authentication',
-            )}
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          {this.renderRow('accessKeyId', 'Access Key ID', this._handleChangeAccessKeyId)}
+          {this.renderRow(
+            'secretAccessKey',
+            'Secret Access Key',
+            this._handleChangeSecretAccessKey,
+          )}
+          {this.renderRow(
+            'region',
+            'Region',
+            this._handleChangeRegion,
+            'will be calculated from hostname or host or use \'us-east-1\' if not given',
+          )}
+          {this.renderRow(
+            'service',
+            'Service',
+            this._handleChangeService,
+            'will be calculated from hostname or host if not given',
+          )}
+          {this.renderRow(
+            'sessionToken',
+            'Session Token',
+            this._handleChangeSessionToken,
+            'Optional token used for multi-factor authentication',
+          )}
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
index a4ef04e1fe..bd5cdb63a5 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js
@@ -1,33 +1,46 @@
-import React, { PureComponent } from 'react';
+// @flow
+import * as React from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import autobind from 'autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
+import type { Settings } from '../../../../models/settings';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+
+type Props = {
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  handleUpdateSettingsShowPasswords: (boolean) => Promise<Settings>,
+  nunjucksPowerUserMode: boolean,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
+  request: Request,
+  showPasswords: boolean,
+  isVariableUncovered: boolean,
+};
 
 @autobind
-class BasicAuth extends PureComponent {
+class BasicAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
-  _handleChangeUsername(value) {
-    const { authentication } = this.props;
-    authentication.username = value;
-    this.props.onChange(authentication);
+  _handleChangeUsername(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, username: value });
   }
 
-  _handleChangePassword(value) {
-    const { authentication } = this.props;
-    authentication.password = value;
-    this.props.onChange(authentication);
+  _handleChangePassword(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, password: value });
   }
 
   render() {
     const {
-      authentication,
+      request,
       showPasswords,
       handleRender,
       handleGetRenderContext,
@@ -35,82 +48,84 @@ class BasicAuth extends PureComponent {
       isVariableUncovered,
     } = this.props;
 
+    const { authentication } = request;
+
     return (
       <div className="pad">
         <table>
           <tbody>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="username" className="label--small no-pad">
-                  Username
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type="text"
-                    id="username"
-                    disabled={authentication.disabled}
-                    onChange={this._handleChangeUsername}
-                    defaultValue={authentication.username || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="password" className="label--small no-pad">
-                  Password
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type={showPasswords ? 'text' : 'password'}
-                    id="password"
-                    onChange={this._handleChangePassword}
-                    defaultValue={authentication.password || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="username" className="label--small no-pad">
+                Username
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type="text"
+                  id="username"
+                  disabled={authentication.disabled}
+                  onChange={this._handleChangeUsername}
+                  defaultValue={authentication.username || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="password" className="label--small no-pad">
+                Password
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type={showPasswords ? 'text' : 'password'}
+                  id="password"
+                  onChange={this._handleChangePassword}
+                  defaultValue={authentication.password || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -118,15 +133,4 @@ class BasicAuth extends PureComponent {
   }
 }
 
-BasicAuth.propTypes = {
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  authentication: PropTypes.object.isRequired,
-  showPasswords: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-};
-
 export default BasicAuth;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
index b8711e5cda..ab9473f2fa 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js
@@ -1,120 +1,132 @@
-import React, { PureComponent } from 'react';
+// @flow
+import * as React from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import autobind from 'autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import HelpTooltip from '../../help-tooltip';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+
+type Props = {
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  nunjucksPowerUserMode: boolean,
+  request: Request,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
+  isVariableUncovered: boolean,
+};
 
 @autobind
-class BearerAuth extends PureComponent {
+class BearerAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
-  _handleChangeToken(token) {
-    const { authentication } = this.props;
-    authentication.token = token;
-    this.props.onChange(authentication);
+  _handleChangeToken(token: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, token });
   }
 
-  _handleChangePrefix(prefix) {
-    const { authentication } = this.props;
-    authentication.prefix = prefix;
-    this.props.onChange(authentication);
+  _handleChangePrefix(prefix: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, prefix });
   }
 
   render() {
     const {
-      authentication,
+      request,
       handleRender,
       handleGetRenderContext,
       nunjucksPowerUserMode,
       isVariableUncovered,
     } = this.props;
 
+    const { authentication } = request;
+
     return (
       <div className="pad">
         <table>
           <tbody>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="token" className="label--small no-pad">
-                  Token
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type="text"
-                    id="token"
-                    disabled={authentication.disabled}
-                    onChange={this._handleChangeToken}
-                    defaultValue={authentication.token || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="prefix" className="label--small no-pad">
-                  Prefix{' '}
-                  <HelpTooltip>
-                    Prefix to use when sending the Authorization header. Defaults to Bearer.
-                  </HelpTooltip>
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type="text"
-                    id="prefix"
-                    disabled={authentication.disabled}
-                    onChange={this._handleChangePrefix}
-                    defaultValue={authentication.prefix || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="token" className="label--small no-pad">
+                Token
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type="text"
+                  id="token"
+                  disabled={authentication.disabled}
+                  onChange={this._handleChangeToken}
+                  defaultValue={authentication.token || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="prefix" className="label--small no-pad">
+                Prefix{' '}
+                <HelpTooltip>
+                  Prefix to use when sending the Authorization header. Defaults to Bearer.
+                </HelpTooltip>
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type="text"
+                  id="prefix"
+                  disabled={authentication.disabled}
+                  onChange={this._handleChangePrefix}
+                  defaultValue={authentication.prefix || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -122,13 +134,4 @@ class BearerAuth extends PureComponent {
   }
 }
 
-BearerAuth.propTypes = {
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  authentication: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-};
-
 export default BearerAuth;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
index aa6067f297..f7a861acae 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js
@@ -1,33 +1,47 @@
-import React, { PureComponent } from 'react';
+// @flow
+
+import * as React from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import autobind from 'autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
+import type { Settings } from '../../../../models/settings';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+
+type Props = {
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  handleUpdateSettingsShowPasswords: (boolean) => Promise<Settings>,
+  nunjucksPowerUserMode: boolean,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
+  request: Request,
+  showPasswords: boolean,
+  isVariableUncovered: boolean,
+};
 
 @autobind
-class DigestAuth extends PureComponent {
+class DigestAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
-  _handleChangeUsername(value) {
-    const { authentication } = this.props;
-    authentication.username = value;
-    this.props.onChange(authentication);
+  _handleChangeUsername(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, username: value });
   }
 
-  _handleChangePassword(value) {
-    const { authentication } = this.props;
-    authentication.password = value;
-    this.props.onChange(authentication);
+  _handleChangePassword(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, password: value });
   }
 
   render() {
     const {
-      authentication,
+      request,
       showPasswords,
       handleRender,
       nunjucksPowerUserMode,
@@ -35,82 +49,84 @@ class DigestAuth extends PureComponent {
       isVariableUncovered,
     } = this.props;
 
+    const { authentication } = request;
+
     return (
       <div className="pad">
         <table>
           <tbody>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="username" className="label--small no-pad">
-                  Username
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type="text"
-                    id="username"
-                    disabled={authentication.disabled}
-                    onChange={this._handleChangeUsername}
-                    defaultValue={authentication.username || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="password" className="label--small no-pad">
-                  Password
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type={showPasswords ? 'text' : 'password'}
-                    id="password"
-                    onChange={this._handleChangePassword}
-                    defaultValue={authentication.password || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="username" className="label--small no-pad">
+                Username
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type="text"
+                  id="username"
+                  disabled={authentication.disabled}
+                  onChange={this._handleChangeUsername}
+                  defaultValue={authentication.username || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="password" className="label--small no-pad">
+                Password
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type={showPasswords ? 'text' : 'password'}
+                  id="password"
+                  onChange={this._handleChangePassword}
+                  defaultValue={authentication.password || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -118,15 +134,4 @@ class DigestAuth extends PureComponent {
   }
 }
 
-DigestAuth.propTypes = {
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  authentication: PropTypes.object.isRequired,
-  showPasswords: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-};
-
 export default DigestAuth;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
index c22e506682..5ac43a008c 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js
@@ -1,5 +1,4 @@
 // @flow
-import type { RequestAuthentication } from '../../../../models/request';
 
 import * as React from 'react';
 import classnames from 'classnames';
@@ -8,28 +7,30 @@ import OneLineEditor from '../../codemirror/one-line-editor';
 import { HAWK_ALGORITHM_SHA1, HAWK_ALGORITHM_SHA256 } from '../../../../common/constants';
 import HelpTooltip from '../../help-tooltip';
 import Button from '../../base/button';
+import type { Request, RequestAuthentication } from '../../../../models/request';
 
 type Props = {
-  authentication: RequestAuthentication,
+  request: Request,
   handleRender: Function,
   handleGetRenderContext: Function,
   nunjucksPowerUserMode: boolean,
   isVariableUncovered: boolean,
-  onChange: Function,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
 };
 
 @autobind
 class HawkAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
   _handleChangeProperty(property: string, value: string | boolean): void {
-    const { authentication } = this.props;
-    authentication[property] = value;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, [property]: value });
   }
 
   _handleChangeHawkAuthId(value: string): void {
@@ -75,7 +76,7 @@ class HawkAuth extends React.PureComponent<Props> {
     onChange: Function,
     help: string | null = null,
   ): React.Element<*> {
-    const { authentication } = this.props;
+    const { authentication } = this.props.request;
     const id = label.replace(/ /g, '-');
     const value = authentication.hasOwnProperty(property) ? authentication[property] : options[0];
 
@@ -109,10 +110,13 @@ class HawkAuth extends React.PureComponent<Props> {
     const {
       handleRender,
       handleGetRenderContext,
-      authentication,
+      request,
       nunjucksPowerUserMode,
       isVariableUncovered,
     } = this.props;
+
+    const {authentication} = request;
+
     const id = label.replace(/ /g, '-');
     return (
       <tr key={id}>
@@ -144,7 +148,7 @@ class HawkAuth extends React.PureComponent<Props> {
 
   render() {
     const fields = this.renderHawkAuthenticationFields();
-    const { authentication } = this.props;
+    const { authentication } = this.props.request;
 
     return (
       <div className="pad">
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
index 492774199c..32fbad752e 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js
@@ -1,33 +1,46 @@
-import React, { PureComponent } from 'react';
+// @flow
+import * as React from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import autobind from 'autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
+import type { Request, RequestAuthentication } from '../../../../models/request';
+import type { Settings } from '../../../../models/settings';
+
+type Props = {
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  handleUpdateSettingsShowPasswords: (boolean) => Promise<Settings>,
+  nunjucksPowerUserMode: boolean,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
+  request: Request,
+  showPasswords: boolean,
+  isVariableUncovered: boolean,
+};
 
 @autobind
-class NTLMAuth extends PureComponent {
+class NTLMAuth extends React.PureComponent<Props> {
   _handleDisable() {
-    const { authentication } = this.props;
-    authentication.disabled = !authentication.disabled;
-    this.props.onChange(authentication);
+    const { request, onChange } = this.props;
+    onChange(request, {
+      ...request.authentication,
+      disabled: !request.authentication.disabled,
+    });
   }
 
-  _handleChangeUsername(value) {
-    const { authentication } = this.props;
-    authentication.username = value;
-    this.props.onChange(authentication);
+  _handleChangeUsername(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, username: value });
   }
 
-  _handleChangePassword(value) {
-    const { authentication } = this.props;
-    authentication.password = value;
-    this.props.onChange(authentication);
+  _handleChangePassword(value: string) {
+    const { request, onChange } = this.props;
+    onChange(request, { ...request.authentication, password: value });
   }
 
   render() {
     const {
-      authentication,
+      request,
       showPasswords,
       handleRender,
       handleGetRenderContext,
@@ -35,82 +48,84 @@ class NTLMAuth extends PureComponent {
       isVariableUncovered,
     } = this.props;
 
+    const { authentication } = request;
+
     return (
       <div className="pad">
         <table>
           <tbody>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="username" className="label--small no-pad">
-                  Username
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type="text"
-                    id="username"
-                    disabled={authentication.disabled}
-                    onChange={this._handleChangeUsername}
-                    defaultValue={authentication.username || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="password" className="label--small no-pad">
-                  Password
-                </label>
-              </td>
-              <td className="wide">
-                <div
-                  className={classnames('form-control form-control--underlined no-margin', {
-                    'form-control--inactive': authentication.disabled,
-                  })}>
-                  <OneLineEditor
-                    type={showPasswords ? 'text' : 'password'}
-                    id="password"
-                    onChange={this._handleChangePassword}
-                    defaultValue={authentication.password || ''}
-                    nunjucksPowerUserMode={nunjucksPowerUserMode}
-                    render={handleRender}
-                    getRenderContext={handleGetRenderContext}
-                    isVariableUncovered={isVariableUncovered}
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td className="pad-right no-wrap valign-middle">
-                <label htmlFor="enabled" className="label--small no-pad">
-                  Enabled
-                </label>
-              </td>
-              <td className="wide">
-                <div className="form-control form-control--underlined">
-                  <Button
-                    className="btn btn--super-duper-compact"
-                    id="enabled"
-                    onClick={this._handleDisable}
-                    value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
-                    {authentication.disabled ? (
-                      <i className="fa fa-square-o" />
-                    ) : (
-                      <i className="fa fa-check-square-o" />
-                    )}
-                  </Button>
-                </div>
-              </td>
-            </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="username" className="label--small no-pad">
+                Username
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type="text"
+                  id="username"
+                  disabled={authentication.disabled}
+                  onChange={this._handleChangeUsername}
+                  defaultValue={authentication.username || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="password" className="label--small no-pad">
+                Password
+              </label>
+            </td>
+            <td className="wide">
+              <div
+                className={classnames('form-control form-control--underlined no-margin', {
+                  'form-control--inactive': authentication.disabled,
+                })}>
+                <OneLineEditor
+                  type={showPasswords ? 'text' : 'password'}
+                  id="password"
+                  onChange={this._handleChangePassword}
+                  defaultValue={authentication.password || ''}
+                  nunjucksPowerUserMode={nunjucksPowerUserMode}
+                  render={handleRender}
+                  getRenderContext={handleGetRenderContext}
+                  isVariableUncovered={isVariableUncovered}
+                />
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td className="pad-right no-wrap valign-middle">
+              <label htmlFor="enabled" className="label--small no-pad">
+                Enabled
+              </label>
+            </td>
+            <td className="wide">
+              <div className="form-control form-control--underlined">
+                <Button
+                  className="btn btn--super-duper-compact"
+                  id="enabled"
+                  onClick={this._handleDisable}
+                  value={!authentication.disabled}
+                  title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                  {authentication.disabled ? (
+                    <i className="fa fa-square-o"/>
+                  ) : (
+                    <i className="fa fa-check-square-o"/>
+                  )}
+                </Button>
+              </div>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>
@@ -118,15 +133,4 @@ class NTLMAuth extends PureComponent {
   }
 }
 
-NTLMAuth.propTypes = {
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  authentication: PropTypes.object.isRequired,
-  showPasswords: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-};
-
 export default NTLMAuth;
diff --git a/packages/insomnia-app/app/ui/components/editors/auth/o-auth-2-auth.js b/packages/insomnia-app/app/ui/components/editors/auth/o-auth-2-auth.js
index 6e8df421a5..3e10c2ea5d 100644
--- a/packages/insomnia-app/app/ui/components/editors/auth/o-auth-2-auth.js
+++ b/packages/insomnia-app/app/ui/components/editors/auth/o-auth-2-auth.js
@@ -1,5 +1,5 @@
 // @flow
-import type { Request } from '../../../../models/request';
+import type { Request, RequestAuthentication } from '../../../../models/request';
 import type { OAuth2Token } from '../../../../models/o-auth-2-token';
 
 import * as React from 'react';
@@ -26,19 +26,20 @@ import TimeFromNow from '../../time-from-now';
 import Button from '../../base/button';
 import { showModal } from '../../modals';
 import ResponseDebugModal from '../../modals/response-debug-modal';
+import type { Settings } from '../../../../models/settings';
 
 type Props = {
   handleRender: Function,
   handleGetRenderContext: Function,
-  handleUpdateSettingsShowPasswords: Function,
+  handleUpdateSettingsShowPasswords: (boolean) => Promise<Settings>,
   nunjucksPowerUserMode: boolean,
-  onChange: Function,
+  onChange: (Request, RequestAuthentication) => Promise<Request>,
   request: Request,
   showPasswords: boolean,
   isVariableUncovered: boolean,
 
   // Optional
-  oAuth2Token: OAuth2Token | null,
+  oAuth2Token: ?OAuth2Token,
 };
 
 type State = {
@@ -134,11 +135,12 @@ class OAuth2Auth extends React.PureComponent<Props, State> {
   }
 
   _handleChangeProperty(property: string, value: string | boolean): void {
-    const { request } = this.props;
+    const { onChange, request } = this.props;
     const authentication = Object.assign({}, request.authentication, {
       [property]: value,
     });
-    this.props.onChange(authentication);
+
+    onChange(request, authentication);
   }
 
   _handlerChangeResponseType(e: SyntheticEvent<HTMLInputElement>): void {
@@ -443,7 +445,7 @@ class OAuth2Auth extends React.PureComponent<Props, State> {
     return { basic: basicFields, advanced: advancedFields };
   }
 
-  static renderExpireAt(token: OAuth2Token | null): React.Element<*> | string | null {
+  static renderExpireAt(token: ?OAuth2Token): React.Element<*> | string | null {
     if (!token || !token.accessToken) {
       return null;
     }
diff --git a/packages/insomnia-app/app/ui/components/editors/body/body-editor.js b/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
index 47a0cf6416..6791aa70fd 100644
--- a/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
+++ b/packages/insomnia-app/app/ui/components/editors/body/body-editor.js
@@ -14,7 +14,7 @@ import {
   CONTENT_TYPE_GRAPHQL,
   getContentTypeFromHeaders,
 } from '../../../../common/constants';
-import type { Request, RequestBodyParameter } from '../../../../models/request';
+import type { Request, RequestBody, RequestBodyParameter, RequestHeader } from '../../../../models/request';
 import {
   newBodyFile,
   newBodyForm,
@@ -30,9 +30,9 @@ import AskModal from '../../modals/ask-modal';
 
 type Props = {
   // Required
-  onChange: Function,
-  onChangeHeaders: Function,
-  handleUpdateRequestMimeType: Function,
+  onChange: (r: Request, body: RequestBody) => Promise<Request>,
+  onChangeHeaders: (r: Request, headers: Array<RequestHeader>) => Promise<Request>,
+  handleUpdateRequestMimeType: (r: Request, mimeType: string) => Promise<Request>,
   handleRender: Function,
   handleGetRenderContext: Function,
   request: Request,
@@ -50,25 +50,25 @@ class BodyEditor extends React.PureComponent<Props> {
     const oldContentType = request.body.mimeType || '';
     const newBody = newBodyRaw(rawValue, oldContentType);
 
-    onChange(newBody);
+    onChange(request, newBody);
   }
 
   _handleGraphQLChange(content: string) {
-    const { onChange } = this.props;
+    const { onChange, request } = this.props;
     const newBody = newBodyRaw(content, CONTENT_TYPE_GRAPHQL);
-    onChange(newBody);
+    onChange(request, newBody);
   }
 
   _handleFormUrlEncodedChange(parameters: Array<RequestBodyParameter>) {
-    const { onChange } = this.props;
+    const { onChange, request } = this.props;
     const newBody = newBodyFormUrlEncoded(parameters);
-    onChange(newBody);
+    onChange(request, newBody);
   }
 
   _handleFormChange(parameters: Array<RequestBodyParameter>) {
-    const { onChange } = this.props;
+    const { onChange, request } = this.props;
     const newBody = newBodyForm(parameters);
-    onChange(newBody);
+    onChange(request, newBody);
   }
 
   async _handleFileChange(path: string) {
@@ -97,7 +97,7 @@ class BodyEditor extends React.PureComponent<Props> {
         ),
         onDone: saidYes => {
           if (saidYes) {
-            onChangeHeaders(headers);
+            onChangeHeaders(request, headers);
           }
         },
       });
@@ -105,7 +105,7 @@ class BodyEditor extends React.PureComponent<Props> {
 
     const newBody = newBodyFile(path);
 
-    onChange(newBody);
+    onChange(request, newBody);
   }
 
   render() {
diff --git a/packages/insomnia-app/app/ui/components/editors/request-headers-editor.js b/packages/insomnia-app/app/ui/components/editors/request-headers-editor.js
index e19844cb46..9a06444711 100644
--- a/packages/insomnia-app/app/ui/components/editors/request-headers-editor.js
+++ b/packages/insomnia-app/app/ui/components/editors/request-headers-editor.js
@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import KeyValueEditor from '../key-value-editor/editor';
 import CodeEditor from '../codemirror/code-editor';
@@ -7,14 +8,36 @@ import allHeaderNames from '../../../datasets/header-names';
 import allCharsets from '../../../datasets/charsets';
 import allMimeTypes from '../../../datasets/content-types';
 import allEncodings from '../../../datasets/encodings';
+import type { Request, RequestHeader } from '../../../models/request';
+
+type Props = {
+  onChange: (r: Request, headers: Array<RequestHeader>) => Promise<Request>,
+  bulk: boolean,
+  editorFontSize: number,
+  editorIndentSize: number,
+  editorLineWrapping: boolean,
+  nunjucksPowerUserMode: boolean,
+  isVariableUncovered: boolean,
+  handleRender: Function,
+  handleGetRenderContext: Function,
+  request: Request,
+};
 
 @autobind
-class RequestHeadersEditor extends PureComponent {
-  _handleBulkUpdate(headersString) {
-    this.props.onChange(this._getHeadersFromString(headersString));
+class RequestHeadersEditor extends React.PureComponent<Props> {
+  _handleBulkUpdate(headersString: string) {
+    const { onChange, request } = this.props;
+    const headers = RequestHeadersEditor._getHeadersFromString(headersString);
+
+    onChange(request, headers);
   }
 
-  _getHeadersFromString(headersString) {
+  _handleKeyValueUpdate(headers: Array<RequestHeader>) {
+    const { onChange, request } = this.props;
+    onChange(request, headers);
+  }
+
+  static _getHeadersFromString(headersString: string) {
     const headers = [];
     const rows = headersString.split(/\n+/);
 
@@ -35,7 +58,7 @@ class RequestHeadersEditor extends PureComponent {
   }
 
   _getHeadersString() {
-    const { headers } = this.props;
+    const { headers } = this.props.request;
 
     let headersString = '';
 
@@ -56,7 +79,7 @@ class RequestHeadersEditor extends PureComponent {
     return headersString;
   }
 
-  _getCommonHeaderValues(pair) {
+  static _getCommonHeaderValues(pair: RequestHeader) {
     switch (pair.name.toLowerCase()) {
       case 'content-type':
       case 'accept':
@@ -70,18 +93,17 @@ class RequestHeadersEditor extends PureComponent {
     }
   }
 
-  _getCommonHeaderNames(pair) {
+  static _getCommonHeaderNames(pair: RequestHeader) {
     return allHeaderNames;
   }
 
   render() {
     const {
       bulk,
-      headers,
+      request,
       editorFontSize,
       editorIndentSize,
       editorLineWrapping,
-      onChange,
       handleRender,
       handleGetRenderContext,
       nunjucksPowerUserMode,
@@ -124,14 +146,14 @@ class RequestHeadersEditor extends PureComponent {
             sortable
             namePlaceholder="Header"
             valuePlaceholder="Value"
-            pairs={headers}
+            pairs={request.headers}
             nunjucksPowerUserMode={nunjucksPowerUserMode}
             isVariableUncovered={isVariableUncovered}
             handleRender={handleRender}
             handleGetRenderContext={handleGetRenderContext}
-            handleGetAutocompleteNameConstants={this._getCommonHeaderNames}
-            handleGetAutocompleteValueConstants={this._getCommonHeaderValues}
-            onChange={onChange}
+            handleGetAutocompleteNameConstants={RequestHeadersEditor._getCommonHeaderNames}
+            handleGetAutocompleteValueConstants={RequestHeadersEditor._getCommonHeaderValues}
+            onChange={this._handleKeyValueUpdate}
           />
         </div>
       </div>
@@ -139,22 +161,4 @@ class RequestHeadersEditor extends PureComponent {
   }
 }
 
-RequestHeadersEditor.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  bulk: PropTypes.bool.isRequired,
-  editorFontSize: PropTypes.number.isRequired,
-  editorIndentSize: PropTypes.number.isRequired,
-  editorLineWrapping: PropTypes.bool.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  headers: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      value: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-};
-
 export default RequestHeadersEditor;
diff --git a/packages/insomnia-app/app/ui/components/request-pane.js b/packages/insomnia-app/app/ui/components/request-pane.js
index 287b55345f..94b99b5961 100644
--- a/packages/insomnia-app/app/ui/components/request-pane.js
+++ b/packages/insomnia-app/app/ui/components/request-pane.js
@@ -1,5 +1,11 @@
 // @flow
-import type { Request } from '../../models/request';
+import type {
+  Request,
+  RequestAuthentication,
+  RequestBody,
+  RequestHeader,
+  RequestParameter,
+} from '../../models/request';
 import type { Workspace } from '../../models/workspace';
 import type { OAuth2Token } from '../../models/o-auth-2-token';
 
@@ -14,7 +20,7 @@ import RenderedQueryString from './rendered-query-string';
 import BodyEditor from './editors/body/body-editor';
 import AuthWrapper from './editors/auth/auth-wrapper';
 import RequestUrlBar from './request-url-bar.js';
-import { DEBOUNCE_MILLIS, getAuthTypeName, getContentTypeName } from '../../common/constants';
+import { getAuthTypeName, getContentTypeName } from '../../common/constants';
 import { deconstructQueryStringToParams, extractQueryStringFromUrl } from 'insomnia-url';
 import * as db from '../../common/database';
 import * as models from '../../models';
@@ -28,21 +34,21 @@ import ErrorBoundary from './error-boundary';
 
 type Props = {
   // Functions
-  forceUpdateRequest: Function,
-  forceUpdateRequestHeaders: Function,
-  handleSend: Function,
-  handleSendAndDownload: Function,
-  handleCreateRequest: Function,
+  forceUpdateRequest: (r: Request, patch: Object) => Promise<Request>,
+  forceUpdateRequestHeaders: (r: Request, headers: Array<RequestHeader>) => Promise<Request>,
+  handleSend: () => void,
+  handleSendAndDownload: (filepath?: string) => Promise<void>,
+  handleCreateRequest: () => Promise<Request>,
   handleGenerateCode: Function,
   handleRender: Function,
   handleGetRenderContext: Function,
-  updateRequestUrl: Function,
-  updateRequestMethod: Function,
-  updateRequestBody: Function,
-  updateRequestParameters: Function,
-  updateRequestAuthentication: Function,
-  updateRequestHeaders: Function,
-  updateRequestMimeType: Function,
+  updateRequestUrl: (r: Request, url: string) => Promise<Request>,
+  updateRequestMethod: (r: Request, method: string) => Promise<Request>,
+  updateRequestBody: (r: Request, body: RequestBody) => Promise<Request>,
+  updateRequestParameters: (r: Request, params: Array<RequestParameter>) => Promise<Request>,
+  updateRequestAuthentication: (r: Request, auth: RequestAuthentication) => Promise<Request>,
+  updateRequestHeaders: (r: Request, headers: Array<RequestHeader>) => Promise<Request>,
+  updateRequestMimeType: (r: Request, mimeType: string) => Promise<Request>,
   updateSettingsShowPasswords: Function,
   updateSettingsUseBulkHeaderEditor: Function,
   handleImport: Function,
@@ -62,8 +68,6 @@ type Props = {
 
 @autobind
 class RequestPane extends React.PureComponent<Props> {
-  _handleUpdateRequestUrlTimeout: TimeoutID;
-
   _handleEditDescriptionAdd() {
     this._handleEditDescription(true);
   }
@@ -102,18 +106,18 @@ class RequestPane extends React.PureComponent<Props> {
   }
 
   _handleCreateRequest() {
-    this.props.handleCreateRequest(this.props.request);
+    this.props.handleCreateRequest();
   }
 
-  _handleUpdateRequestUrl(url: string) {
-    clearTimeout(this._handleUpdateRequestUrlTimeout);
-    this._handleUpdateRequestUrlTimeout = setTimeout(() => {
-      this.props.updateRequestUrl(url);
-    }, DEBOUNCE_MILLIS);
+  _handleUpdateRequestParameters(parameters: Array<RequestParameter>) {
+    const { request, updateRequestParameters } = this.props;
+    if (request) {
+      updateRequestParameters(request, parameters);
+    }
   }
 
   _handleImportQueryFromUrl() {
-    const { request } = this.props;
+    const { request, forceUpdateRequest } = this.props;
 
     if (!request) {
       console.warn('Tried to import query when no request active');
@@ -134,7 +138,7 @@ class RequestPane extends React.PureComponent<Props> {
 
     // Only update if url changed
     if (url !== request.url) {
-      this.props.forceUpdateRequest({ url, parameters });
+      forceUpdateRequest(request, { url, parameters });
     }
   }
 
@@ -157,10 +161,10 @@ class RequestPane extends React.PureComponent<Props> {
       updateRequestAuthentication,
       updateRequestBody,
       updateRequestHeaders,
-      updateRequestMethod,
       updateRequestMimeType,
-      updateRequestParameters,
       updateSettingsShowPasswords,
+      updateRequestMethod,
+      updateRequestUrl,
     } = this.props;
 
     const paneClasses = 'request-pane theme--pane pane';
@@ -170,35 +174,35 @@ class RequestPane extends React.PureComponent<Props> {
     if (!request) {
       return (
         <section className={paneClasses}>
-          <header className={paneHeaderClasses} />
+          <header className={paneHeaderClasses}/>
           <div className={paneBodyClasses + ' pane__body--placeholder'}>
             <div>
               <table className="table--fancy">
                 <tbody>
-                  <tr>
-                    <td>New Request</td>
-                    <td className="text-right">
-                      <code>
-                        <Hotkey hotkey={hotkeys.CREATE_REQUEST} />
-                      </code>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>Switch Requests</td>
-                    <td className="text-right">
-                      <code>
-                        <Hotkey hotkey={hotkeys.SHOW_QUICK_SWITCHER} />
-                      </code>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td>Edit Environments</td>
-                    <td className="text-right">
-                      <code>
-                        <Hotkey hotkey={hotkeys.SHOW_ENVIRONMENTS} />
-                      </code>
-                    </td>
-                  </tr>
+                <tr>
+                  <td>New Request</td>
+                  <td className="text-right">
+                    <code>
+                      <Hotkey hotkey={hotkeys.CREATE_REQUEST}/>
+                    </code>
+                  </td>
+                </tr>
+                <tr>
+                  <td>Switch Requests</td>
+                  <td className="text-right">
+                    <code>
+                      <Hotkey hotkey={hotkeys.SHOW_QUICK_SWITCHER}/>
+                    </code>
+                  </td>
+                </tr>
+                <tr>
+                  <td>Edit Environments</td>
+                  <td className="text-right">
+                    <code>
+                      <Hotkey hotkey={hotkeys.SHOW_ENVIRONMENTS}/>
+                    </code>
+                  </td>
+                </tr>
                 </tbody>
               </table>
 
@@ -235,9 +239,8 @@ class RequestPane extends React.PureComponent<Props> {
           <ErrorBoundary errorClassName="font-error pad text-center">
             <RequestUrlBar
               uniquenessKey={uniqueKey}
-              method={request.method}
               onMethodChange={updateRequestMethod}
-              onUrlChange={this._handleUpdateRequestUrl}
+              onUrlChange={updateRequestUrl}
               handleAutocompleteUrls={this._autocompleteUrls}
               handleImport={handleImport}
               handleGenerateCode={handleGenerateCode}
@@ -247,8 +250,7 @@ class RequestPane extends React.PureComponent<Props> {
               nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
               isVariableUncovered={isVariableUncovered}
               handleGetRenderContext={handleGetRenderContext}
-              url={request.url}
-              requestId={request._id}
+              request={request}
             />
           </ErrorBoundary>
         </header>
@@ -264,16 +266,16 @@ class RequestPane extends React.PureComponent<Props> {
                   ? getContentTypeName(request.body.mimeType)
                   : 'Body'}
                 {numBodyParams ? <span className="bubble space-left">{numBodyParams}</span> : null}
-                <i className="fa fa-caret-down space-left" />
+                <i className="fa fa-caret-down space-left"/>
               </ContentTypeDropdown>
             </Tab>
             <Tab tabIndex="-1">
               <AuthDropdown
                 onChange={updateRequestAuthentication}
-                authentication={request.authentication}
+                request={request}
                 className="tall">
                 {getAuthTypeName(request.authentication.type) || 'Auth'}
-                <i className="fa fa-caret-down space-left" />
+                <i className="fa fa-caret-down space-left"/>
               </AuthDropdown>
             </Tab>
             <Tab tabIndex="-1">
@@ -293,7 +295,7 @@ class RequestPane extends React.PureComponent<Props> {
                 Docs
                 {request.description && (
                   <span className="bubble space-left">
-                    <i className="fa fa--skinny fa-check txt-xxs" />
+                    <i className="fa fa--skinny fa-check txt-xxs"/>
                   </span>
                 )}
               </button>
@@ -339,7 +341,7 @@ class RequestPane extends React.PureComponent<Props> {
                 <ErrorBoundary
                   key={uniqueKey}
                   errorClassName="tall wide vertically-align font-error pad text-center">
-                  <RenderedQueryString handleRender={handleRender} request={request} />
+                  <RenderedQueryString handleRender={handleRender} request={request}/>
                 </ErrorBoundary>
               </code>
             </div>
@@ -357,7 +359,7 @@ class RequestPane extends React.PureComponent<Props> {
                   handleGetRenderContext={handleGetRenderContext}
                   nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
                   isVariableUncovered={isVariableUncovered}
-                  onChange={updateRequestParameters}
+                  onChange={this._handleUpdateRequestParameters}
                 />
               </ErrorBoundary>
             </div>
@@ -373,7 +375,6 @@ class RequestPane extends React.PureComponent<Props> {
           <TabPanel className="react-tabs__tab-panel header-editor">
             <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
               <RequestHeadersEditor
-                headers={request.headers}
                 handleRender={handleRender}
                 handleGetRenderContext={handleGetRenderContext}
                 nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
@@ -382,6 +383,7 @@ class RequestPane extends React.PureComponent<Props> {
                 editorIndentSize={settings.editorIndentSize}
                 editorLineWrapping={settings.editorLineWrapping}
                 onChange={updateRequestHeaders}
+                request={request}
                 bulk={settings.useBulkHeaderEditor}
               />
             </ErrorBoundary>
@@ -417,10 +419,10 @@ class RequestPane extends React.PureComponent<Props> {
               <div className="overflow-hidden editor vertically-center text-center">
                 <p className="pad text-sm text-center">
                   <span className="super-faint">
-                    <i className="fa fa-file-text-o" style={{ fontSize: '8rem', opacity: 0.3 }} />
+                    <i className="fa fa-file-text-o" style={{ fontSize: '8rem', opacity: 0.3 }}/>
                   </span>
-                  <br />
-                  <br />
+                  <br/>
+                  <br/>
                   <button
                     className="btn btn--clicky faint"
                     onClick={this._handleEditDescriptionAdd}>
diff --git a/packages/insomnia-app/app/ui/components/request-url-bar.js b/packages/insomnia-app/app/ui/components/request-url-bar.js
index 33efee834a..47e1bceb0d 100644
--- a/packages/insomnia-app/app/ui/components/request-url-bar.js
+++ b/packages/insomnia-app/app/ui/components/request-url-bar.js
@@ -1,5 +1,5 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+import * as React from 'react';
 import autobind from 'autobind-decorator';
 import { remote } from 'electron';
 import { DEBOUNCE_MILLIS, isMac } from '../../common/constants';
@@ -16,10 +16,41 @@ import PromptButton from './base/prompt-button';
 import OneLineEditor from './codemirror/one-line-editor';
 import * as hotkeys from '../../common/hotkeys';
 import KeydownBinder from './keydown-binder';
+import type { Request } from '../../models/request';
+
+type Props = {
+  handleAutocompleteUrls: Function,
+  handleGenerateCode: Function,
+  handleGetRenderContext: Function,
+  handleImport: Function,
+  handleRender: string => Promise<string>,
+  handleSend: () => void,
+  handleSendAndDownload: (filepath?: string) => Promise<void>,
+  isVariableUncovered: boolean,
+  nunjucksPowerUserMode: boolean,
+  onMethodChange: (r: Request, method: string) => Promise<Request>,
+  onUrlChange: (r: Request, url: string) => Promise<Request>,
+  request: Request,
+  uniquenessKey: string,
+};
+
+type State = {
+  currentInterval: number | null,
+  currentTimeout: number | null,
+  downloadPath: string | null
+};
 
 @autobind
-class RequestUrlBar extends PureComponent {
-  constructor(props) {
+class RequestUrlBar extends React.PureComponent<Props, State> {
+  _urlChangeDebounceTimeout: TimeoutID;
+  _sendTimeout: TimeoutID;
+  _sendInterval: IntervalID;
+  _lastPastedText: string | null;
+  _dropdown: ?Dropdown;
+  _methodDropdown: ?Dropdown;
+  _input: ?OneLineEditor;
+
+  constructor(props: Props) {
     super(props);
     this.state = {
       currentInterval: null,
@@ -27,46 +58,47 @@ class RequestUrlBar extends PureComponent {
       downloadPath: null,
     };
 
-    this._urlChangeDebounceTimeout = null;
     this._lastPastedText = null;
   }
 
-  _setDropdownRef(n) {
+  _setDropdownRef(n: Dropdown | null) {
     this._dropdown = n;
   }
 
-  _setMethodDropdownRef(n) {
+  _setMethodDropdownRef(n: Dropdown | null) {
     this._methodDropdown = n;
   }
 
-  _setInputRef(n) {
+  _setInputRef(n: HTMLInputElement | null) {
     this._input = n;
   }
 
-  _handleMetaClickSend(e) {
+  _handleMetaClickSend(e: MouseEvent) {
     e.preventDefault();
-    this._dropdown.show();
+    this._dropdown && this._dropdown.show();
   }
 
-  _handleFormSubmit(e) {
-    e.preventDefault();
-    e.stopPropagation();
+  _handleFormSubmit(e?: SyntheticEvent<HTMLFormElement>) {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
 
     this._handleSend();
   }
 
-  _handleMethodChange(method) {
-    this.props.onMethodChange(method);
+  _handleMethodChange(method: string) {
+    this.props.onMethodChange(this.props.request, method);
   }
 
-  _handleUrlChange(url) {
+  _handleUrlChange(url: string) {
     clearTimeout(this._urlChangeDebounceTimeout);
     this._urlChangeDebounceTimeout = setTimeout(async () => {
       const pastedText = this._lastPastedText;
 
       // If no pasted text in the queue, just fire the regular change handler
       if (!pastedText) {
-        this.props.onUrlChange(url);
+        this.props.onUrlChange(this.props.request, url);
         return;
       }
 
@@ -78,12 +110,12 @@ class RequestUrlBar extends PureComponent {
 
       // Update depending on whether something was imported
       if (!importedRequest) {
-        this.props.onUrlChange(url);
+        this.props.onUrlChange(this.props.request, url);
       }
     }, DEBOUNCE_MILLIS);
   }
 
-  _handleUrlPaste(e) {
+  _handleUrlPaste(e: SyntheticClipboardEvent<HTMLInputElement>) {
     // NOTE: We're not actually doing the import here to avoid races with onChange
     this._lastPastedText = e.clipboardData.getData('text/plain');
   }
@@ -112,29 +144,22 @@ class RequestUrlBar extends PureComponent {
     this.setState({ downloadPath: null });
   }
 
-  _handleKeyDown(e) {
+  _handleKeyDown(e: KeyboardEvent) {
     if (!this._input) {
       return;
     }
 
     hotkeys.executeHotKey(e, hotkeys.FOCUS_URL, () => {
-      if (!this._input) {
-        return;
-      }
-
-      this._input.focus();
-      this._input.selectAll();
+      this._input && this._input.focus();
+      this._input && this._input.selectAll();
     });
 
     hotkeys.executeHotKey(e, hotkeys.TOGGLE_METHOD_DROPDOWN, () => {
-      if (!this._methodDropdown) {
-        return;
-      }
-      this._methodDropdown.toggle();
+      this._methodDropdown && this._methodDropdown.toggle();
     });
 
     hotkeys.executeHotKey(e, hotkeys.SHOW_SEND_OPTIONS, () => {
-      this._dropdown.toggle(true);
+      this._dropdown && this._dropdown.toggle(true);
     });
   }
 
@@ -187,7 +212,7 @@ class RequestUrlBar extends PureComponent {
   }
 
   _handleStopInterval() {
-    clearTimeout(this._sendInterval);
+    clearInterval(this._sendInterval);
     if (this.state.currentInterval) {
       this.setState({ currentInterval: null });
     }
@@ -205,7 +230,7 @@ class RequestUrlBar extends PureComponent {
     this._handleStopInterval();
   }
 
-  _handleClickSend(e) {
+  _handleClickSend(e: MouseEvent) {
     const metaPressed = isMac() ? e.metaKey : e.ctrlKey;
 
     // If we're pressing a meta key, let the dropdown open
@@ -216,11 +241,11 @@ class RequestUrlBar extends PureComponent {
 
     // If we're not pressing a meta key, cancel dropdown and send the request
     e.stopPropagation(); // Don't trigger the dropdown
-    this._handleFormSubmit(e);
+    this._handleFormSubmit();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.requestId !== this.props.requestId) {
+  componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.request._id !== this.props.request._id) {
       this._handleResetTimeouts();
     }
   }
@@ -264,18 +289,18 @@ class RequestUrlBar extends PureComponent {
           </DropdownButton>
           <DropdownDivider>Basic</DropdownDivider>
           <DropdownItem type="submit">
-            <i className="fa fa-arrow-circle-o-right" /> Send Now
-            <DropdownHint hotkey={hotkeys.SEND_REQUEST} />
+            <i className="fa fa-arrow-circle-o-right"/> Send Now
+            <DropdownHint hotkey={hotkeys.SEND_REQUEST}/>
           </DropdownItem>
           <DropdownItem onClick={this._handleGenerateCode}>
-            <i className="fa fa-code" /> Generate Client Code
+            <i className="fa fa-code"/> Generate Client Code
           </DropdownItem>
           <DropdownDivider>Advanced</DropdownDivider>
           <DropdownItem onClick={this._handleSendAfterDelay}>
-            <i className="fa fa-clock-o" /> Send After Delay
+            <i className="fa fa-clock-o"/> Send After Delay
           </DropdownItem>
           <DropdownItem onClick={this._handleSendOnInterval}>
-            <i className="fa fa-repeat" /> Repeat on Interval
+            <i className="fa fa-repeat"/> Repeat on Interval
           </DropdownItem>
           {downloadPath ? (
             <DropdownItem
@@ -283,15 +308,15 @@ class RequestUrlBar extends PureComponent {
               addIcon
               buttonClass={PromptButton}
               onClick={this._handleClearDownloadLocation}>
-              <i className="fa fa-stop-circle" /> Stop Auto-Download
+              <i className="fa fa-stop-circle"/> Stop Auto-Download
             </DropdownItem>
           ) : (
             <DropdownItem onClick={this._handleSetDownloadLocation}>
-              <i className="fa fa-download" /> Download After Send
+              <i className="fa fa-download"/> Download After Send
             </DropdownItem>
           )}
           <DropdownItem onClick={this._handleClickSendAndDownload}>
-            <i className="fa fa-download" /> Send And Download
+            <i className="fa fa-download"/> Send And Download
           </DropdownItem>
         </Dropdown>
       );
@@ -302,8 +327,7 @@ class RequestUrlBar extends PureComponent {
 
   render() {
     const {
-      url,
-      method,
+      request,
       handleRender,
       nunjucksPowerUserMode,
       isVariableUncovered,
@@ -312,6 +336,8 @@ class RequestUrlBar extends PureComponent {
       uniquenessKey,
     } = this.props;
 
+    const { url, method } = request;
+
     return (
       <KeydownBinder onKeydown={this._handleKeyDown}>
         <div className="urlbar">
@@ -319,7 +345,7 @@ class RequestUrlBar extends PureComponent {
             ref={this._setMethodDropdownRef}
             onChange={this._handleMethodChange}
             method={method}>
-            {method} <i className="fa fa-caret-down" />
+            {method} <i className="fa fa-caret-down"/>
           </MethodDropdown>
           <form onSubmit={this._handleFormSubmit}>
             <OneLineEditor
@@ -345,22 +371,4 @@ class RequestUrlBar extends PureComponent {
   }
 }
 
-RequestUrlBar.propTypes = {
-  handleSend: PropTypes.func.isRequired,
-  handleSendAndDownload: PropTypes.func.isRequired,
-  handleRender: PropTypes.func.isRequired,
-  handleGetRenderContext: PropTypes.func.isRequired,
-  handleImport: PropTypes.func.isRequired,
-  handleAutocompleteUrls: PropTypes.func.isRequired,
-  onUrlChange: PropTypes.func.isRequired,
-  onMethodChange: PropTypes.func.isRequired,
-  handleGenerateCode: PropTypes.func.isRequired,
-  url: PropTypes.string.isRequired,
-  nunjucksPowerUserMode: PropTypes.bool.isRequired,
-  isVariableUncovered: PropTypes.bool.isRequired,
-  method: PropTypes.string.isRequired,
-  requestId: PropTypes.string.isRequired,
-  uniquenessKey: PropTypes.string.isRequired,
-};
-
 export default RequestUrlBar;
diff --git a/packages/insomnia-app/app/ui/components/wrapper.js b/packages/insomnia-app/app/ui/components/wrapper.js
index d3c92a1501..c77a5c2738 100644
--- a/packages/insomnia-app/app/ui/components/wrapper.js
+++ b/packages/insomnia-app/app/ui/components/wrapper.js
@@ -145,42 +145,49 @@ class Wrapper extends React.PureComponent<Props, State> {
   }
 
   // Request updaters
-  async _handleForceUpdateRequest(patch: Object): Promise<Request> {
-    const newRequest = await rUpdate(this.props.activeRequest, patch);
+  async _handleForceUpdateRequest(r: Request, patch: Object): Promise<Request> {
+    const newRequest = await rUpdate(r, patch);
 
     // Give it a second for the app to render first. If we don't wait, it will refresh
     // on the old request and won't catch the newest one.
+    // TODO: Move this refresh key into redux store so we don't need timeout
     window.setTimeout(this._forceRequestPaneRefresh, 100);
 
     return newRequest;
   }
 
-  _handleUpdateRequestBody(body: RequestBody): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { body });
+  _handleForceUpdateRequestHeaders(r: Request, headers: Array<RequestHeader>): Promise<Request> {
+    return this._handleForceUpdateRequest(r, { headers });
   }
 
-  _handleUpdateRequestMethod(method: string): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { method });
+  static _handleUpdateRequestBody(r: Request, body: RequestBody): Promise<Request> {
+    return rUpdate(r, { body });
   }
 
-  _handleUpdateRequestParameters(parameters: Array<RequestParameter>): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { parameters });
+  static _handleUpdateRequestParameters(
+    r: Request,
+    parameters: Array<RequestParameter>,
+  ): Promise<Request> {
+    return rUpdate(r, { parameters });
   }
 
-  _handleUpdateRequestAuthentication(authentication: RequestAuthentication): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { authentication });
+  static _handleUpdateRequestAuthentication(
+    r: Request,
+    authentication: RequestAuthentication,
+  ): Promise<Request> {
+    return rUpdate(r, { authentication });
   }
 
-  _handleUpdateRequestHeaders(headers: Array<RequestHeader>): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { headers });
+  static _handleUpdateRequestHeaders(r: Request, headers: Array<RequestHeader>): Promise<Request> {
+    return rUpdate(r, { headers });
   }
 
-  _handleForceUpdateRequestHeaders(headers: Array<RequestHeader>): Promise<Request> {
-    return this._handleForceUpdateRequest({ headers });
+  static _handleUpdateRequestMethod(r: Request, method: string): Promise<Request> {
+    return rUpdate(r, { method });
   }
 
-  _handleUpdateRequestUrl(url: string): Promise<Request> {
-    return rUpdate(this.props.activeRequest, { url });
+  static _handleUpdateRequestUrl(r: Request, url: string): Promise<Request> {
+    return rUpdate(r, { url });
   }
 
   // Special request updaters
@@ -197,9 +204,9 @@ class Wrapper extends React.PureComponent<Props, State> {
       const { resources } = data;
       const r = resources[0];
 
-      if (r && r._type === 'request') {
+      if (r && r._type === 'request' && this.props.activeRequest) {
         // Only pull fields that we want to update
-        return this._handleForceUpdateRequest({
+        return this._handleForceUpdateRequest(this.props.activeRequest, {
           url: r.url,
           method: r.method,
           headers: r.headers,
@@ -254,7 +261,7 @@ class Wrapper extends React.PureComponent<Props, State> {
     showModal(CookiesModal, this.props.activeWorkspace);
   }
 
-  _handleShowModifyCookieModal(cookie: Object): void {
+  static _handleShowModifyCookieModal(cookie: Object): void {
     showModal(CookieModifyModal, cookie);
   }
 
@@ -304,15 +311,16 @@ class Wrapper extends React.PureComponent<Props, State> {
     handleSendRequestWithEnvironment(activeRequestId, activeEnvironmentId);
   }
 
-  _handleSendAndDownloadRequestWithActiveEnvironment(filename?: string): void {
+  async _handleSendAndDownloadRequestWithActiveEnvironment(filename?: string): Promise<void> {
     const {
       activeRequest,
       activeEnvironment,
       handleSendAndDownloadRequestWithEnvironment,
     } = this.props;
+
     const activeRequestId = activeRequest ? activeRequest._id : 'n/a';
     const activeEnvironmentId = activeEnvironment ? activeEnvironment._id : 'n/a';
-    handleSendAndDownloadRequestWithEnvironment(activeRequestId, activeEnvironmentId, filename);
+    await handleSendAndDownloadRequestWithEnvironment(activeRequestId, activeEnvironmentId, filename);
   }
 
   _handleSetPreviewMode(previewMode: string): void {
@@ -392,24 +400,24 @@ class Wrapper extends React.PureComponent<Props, State> {
     const realSidebarWidth = sidebarHidden ? 0 : sidebarWidth;
 
     const columns = `${realSidebarWidth}rem 0 minmax(0, ${paneWidth}fr) 0 minmax(0, ${1 -
-      paneWidth}fr)`;
+    paneWidth}fr)`;
     const rows = `minmax(0, ${paneHeight}fr) 0 minmax(0, ${1 - paneHeight}fr)`;
 
     return [
       <div key="modals" className="modals">
         <ErrorBoundary showAlert>
-          <AlertModal ref={registerModal} />
-          <ErrorModal ref={registerModal} />
-          <PromptModal ref={registerModal} />
+          <AlertModal ref={registerModal}/>
+          <ErrorModal ref={registerModal}/>
+          <PromptModal ref={registerModal}/>
 
-          <WrapperModal ref={registerModal} />
-          <LoginModal ref={registerModal} />
-          <AskModal ref={registerModal} />
-          <SelectModal ref={registerModal} />
-          <RequestCreateModal ref={registerModal} />
-          <PaymentNotificationModal ref={registerModal} />
-          <FilterHelpModal ref={registerModal} />
-          <RequestRenderErrorModal ref={registerModal} />
+          <WrapperModal ref={registerModal}/>
+          <LoginModal ref={registerModal}/>
+          <AskModal ref={registerModal}/>
+          <SelectModal ref={registerModal}/>
+          <RequestCreateModal ref={registerModal}/>
+          <PaymentNotificationModal ref={registerModal}/>
+          <FilterHelpModal ref={registerModal}/>
+          <RequestRenderErrorModal ref={registerModal}/>
 
           <CodePromptModal
             ref={registerModal}
@@ -437,7 +445,7 @@ class Wrapper extends React.PureComponent<Props, State> {
           />
 
           <CookiesModal
-            handleShowModifyCookieModal={this._handleShowModifyCookieModal}
+            handleShowModifyCookieModal={Wrapper._handleShowModifyCookieModal}
             handleRender={handleRender}
             nunjucksPowerUserMode={settings.nunjucksPowerUserMode}
             ref={registerModal}
@@ -464,7 +472,7 @@ class Wrapper extends React.PureComponent<Props, State> {
             workspace={activeWorkspace}
           />
 
-          <MoveRequestGroupModal ref={registerModal} workspaces={workspaces} />
+          <MoveRequestGroupModal ref={registerModal} workspaces={workspaces}/>
 
           <WorkspaceSettingsModal
             ref={registerModal}
@@ -482,7 +490,7 @@ class Wrapper extends React.PureComponent<Props, State> {
             isVariableUncovered={isVariableUncovered}
           />
 
-          <WorkspaceShareSettingsModal ref={registerModal} workspace={activeWorkspace} />
+          <WorkspaceShareSettingsModal ref={registerModal} workspace={activeWorkspace}/>
 
           <GenerateCodeModal
             ref={registerModal}
@@ -502,7 +510,7 @@ class Wrapper extends React.PureComponent<Props, State> {
             settings={settings}
           />
 
-          <ResponseDebugModal ref={registerModal} settings={settings} />
+          <ResponseDebugModal ref={registerModal} settings={settings}/>
 
           <RequestSwitcherModal
             ref={registerModal}
@@ -527,7 +535,7 @@ class Wrapper extends React.PureComponent<Props, State> {
             isVariableUncovered={isVariableUncovered}
           />
 
-          <SetupSyncModal ref={registerModal} workspace={activeWorkspace} />
+          <SetupSyncModal ref={registerModal} workspace={activeWorkspace}/>
 
           <WorkspaceEnvironmentsEditModal
             ref={registerModal}
@@ -615,7 +623,7 @@ class Wrapper extends React.PureComponent<Props, State> {
         </ErrorBoundary>
 
         <div className="drag drag--sidebar">
-          <div onDoubleClick={handleResetDragSidebar} onMouseDown={this._handleStartDragSidebar} />
+          <div onDoubleClick={handleResetDragSidebar} onMouseDown={this._handleStartDragSidebar}/>
         </div>
 
         <ErrorBoundary showAlert>
@@ -633,13 +641,13 @@ class Wrapper extends React.PureComponent<Props, State> {
             handleImport={this._handleImport}
             handleRender={handleRender}
             handleGetRenderContext={handleGetRenderContext}
-            updateRequestBody={this._handleUpdateRequestBody}
+            updateRequestBody={Wrapper._handleUpdateRequestBody}
             forceUpdateRequestHeaders={this._handleForceUpdateRequestHeaders}
-            updateRequestUrl={this._handleUpdateRequestUrl}
-            updateRequestMethod={this._handleUpdateRequestMethod}
-            updateRequestParameters={this._handleUpdateRequestParameters}
-            updateRequestAuthentication={this._handleUpdateRequestAuthentication}
-            updateRequestHeaders={this._handleUpdateRequestHeaders}
+            updateRequestUrl={Wrapper._handleUpdateRequestUrl}
+            updateRequestMethod={Wrapper._handleUpdateRequestMethod}
+            updateRequestParameters={Wrapper._handleUpdateRequestParameters}
+            updateRequestAuthentication={Wrapper._handleUpdateRequestAuthentication}
+            updateRequestHeaders={Wrapper._handleUpdateRequestHeaders}
             updateRequestMimeType={handleUpdateRequestMimeType}
             updateSettingsShowPasswords={this._handleUpdateSettingsShowPasswords}
             updateSettingsUseBulkHeaderEditor={this._handleUpdateSettingsUseBulkHeaderEditor}