Autobind replacement and react-hot-reload update (#3022)

packages/insomnia-app/app/common/constants.js

@@ -111,6 +111,13 @@ export const HUGE_RESPONSE_MB = 100;
 export const FLEXIBLE_URL_REGEX = /^(http|https):\/\/[\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ\-_.]+[/\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ.\-+=:\][@%^*&!#?;$]*/;
 export const CHECK_FOR_UPDATES_INTERVAL = 1000 * 60 * 60 * 3; // 3 hours
 export const PLUGIN_PATH = path.join(getDataDirectory(), 'plugins');
+export const AUTOBIND_CFG = {
+  methodsToIgnore: [
+    'UNSAFE_componentWillMount',
+    'UNSAFE_componentWillReceiveProps',
+    'UNSAFE_componentWillUpdate',
+  ],
+};
 
 // Available editor key maps
 export const EDITOR_KEY_MAP_DEFAULT = 'default';

packages/insomnia-app/app/ui/components/base/button.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Button extends PureComponent {
   _handleClick(e) {
     const { onClick, onDisabledClick, disabled } = this.props;

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

@@ -1,10 +1,11 @@
 import React, { PureComponent } from 'react';
 import { clipboard } from 'electron';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { Button } from 'insomnia-components';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CopyButton extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/debounced-input.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { debounce } from '../../../common/misc';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class DebouncedInput extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/dropdown/dropdown-item.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import classnames from 'classnames';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class DropdownItem extends PureComponent {
   _handleClick(e) {
     const { stayOpenAfterClick, onClick, disabled } = this.props;

packages/insomnia-app/app/ui/components/base/dropdown/dropdown.js

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import classnames from 'classnames';
 import DropdownButton from './dropdown-button';
 import DropdownItem from './dropdown-item';
@@ -13,7 +14,7 @@ import { hotKeyRefs } from '../../../../common/hotkeys';
 
 const dropdownsContainer = document.querySelector('#dropdowns-container');
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Dropdown extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/editable.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import KeydownBinder from '../keydown-binder';
 
 export const shouldSave = (oldValue, newValue, preventBlank) => {
@@ -18,7 +19,7 @@ export const shouldSave = (oldValue, newValue, preventBlank) => {
   return true;
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Editable extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/file-input-button.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { basename as pathBasename } from 'path';
 import selectFileOrFolder from '../../../common/select-file-or-folder';
 
@@ -17,7 +18,7 @@ type Props = {
   name?: string,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class FileInputButton extends React.PureComponent<Props> {
   _button: ?HTMLButtonElement;
 

packages/insomnia-app/app/ui/components/base/highlight.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import fuzzySort from 'fuzzysort';
 import { fuzzyMatch } from '../../../common/misc';
 
@@ -10,7 +11,7 @@ type Props = {|
   blankValue?: String,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Highlight extends React.PureComponent<Props> {
   render() {
     const { search, text, blankValue, ...otherProps } = this.props;

packages/insomnia-app/app/ui/components/base/indeterminate-checkbox.js

@@ -1,13 +1,14 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 
 type Props = {
   indeterminate: boolean,
   checked: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class IndeterminateCheckbox extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 

packages/insomnia-app/app/ui/components/base/lazy.js

@@ -1,8 +1,9 @@
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Lazy extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/link.js

@@ -1,7 +1,8 @@
 // @flow
 import classnames from 'classnames';
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import * as misc from '../../../common/misc';
 
 type Props = {|
@@ -15,7 +16,7 @@ type Props = {|
   noTheme?: boolean,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Link extends React.PureComponent<Props> {
   _handleClick(e: SyntheticEvent<HTMLAnchorElement>) {
     e && e.preventDefault();

packages/insomnia-app/app/ui/components/base/mailto.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { buildQueryStringFromParams, joinUrlAndQueryString } from 'insomnia-url';
 import Link from './link';
 
@@ -11,7 +12,7 @@ type Props = {|
   body?: string,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Mailto extends React.PureComponent<Props> {
   render() {
     const { email, body, subject, children } = this.props;

packages/insomnia-app/app/ui/components/base/modal.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import KeydownBinder from '../keydown-binder';
 import { hotKeyRefs } from '../../../common/hotkeys';
@@ -10,7 +11,7 @@ import { pressedHotKey } from '../../../common/hotkeys-listener';
 // appear over top of an existing one.
 let globalZIndex = 1000;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Modal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/base/prompt-button.js

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Button from './button';
 
 const STATE_DEFAULT = 'default';
 const STATE_ASK = 'ask';
 const STATE_DONE = 'done';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class PromptButton extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/check-for-updates-button.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import * as electron from 'electron';
+import { AUTOBIND_CFG } from '../../common/constants';
 
 type Props = {
   children: React.Node,
@@ -14,7 +15,7 @@ type State = {
   updateAvailable: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CheckForUpdatesButton extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);

packages/insomnia-app/app/ui/components/codemirror/code-editor.js

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import {
+  AUTOBIND_CFG,
+  DEBOUNCE_MILLIS,
+  EDITOR_KEY_MAP_VIM,
+  isMac,
+} from '../../../common/constants';
 import CodeMirror from 'codemirror';
 import classnames from 'classnames';
 import clone from 'clone';
@@ -10,7 +16,7 @@ import { showModal } from '../modals/index';
 import FilterHelpModal from '../modals/filter-help-modal';
 import * as misc from '../../../common/misc';
 import prettify from 'insomnia-prettify';
-import { DEBOUNCE_MILLIS, EDITOR_KEY_MAP_VIM, isMac } from '../../../common/constants';
+
 import { keyboardKeys as keyCodes } from '../../../common/keyboard-keys';
 import './base-imports';
 import { getTagDefinitions } from '../../../templating/index';
@@ -78,7 +84,7 @@ const BASE_CODEMIRROR_OPTIONS = {
   gutters: ['CodeMirror-lint-markers'],
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CodeEditor extends React.Component {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/codemirror/one-line-editor.js

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import CodeEditor from './code-editor';
 import Input from '../base/debounced-input';
 
@@ -11,7 +12,7 @@ const MODE_EDITOR = 'editor';
 const TYPE_TEXT = 'text';
 const NUNJUCKS_REGEX = /({%|%}|{{|}})/;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class OneLineEditor extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/cookie-list.js

@@ -2,12 +2,13 @@
 import React from 'react';
 import * as uuid from 'uuid';
 import * as toughCookie from 'tough-cookie';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { cookieToString } from 'insomnia-cookies';
 import PromptButton from './base/prompt-button';
 import RenderedText from './rendered-text';
 import type { Cookie } from '../../models/cookie-jar';
 import { Dropdown, DropdownButton, DropdownItem } from './base/dropdown/index';
+import { AUTOBIND_CFG } from '../../common/constants';
 
 type Props = {
   handleCookieAdd: Function,
@@ -23,7 +24,7 @@ type Props = {
 // https://github.com/salesforce/tough-cookie/blob/5ae97c6a28122f3fb309adcd8428274d9b2bd795/lib/cookie.js#L77
 const MAX_TIME = 2147483647000;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CookieList extends React.PureComponent<Props> {
   _handleCookieAdd() {
     const newCookie: Cookie = {

packages/insomnia-app/app/ui/components/dropdowns/auth-dropdown.js

@@ -1,13 +1,9 @@
 // @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 { autoBindMethodsForReact } from 'class-autobind-decorator';
 import {
+  AUTOBIND_CFG,
   AUTH_BASIC,
   AUTH_DIGEST,
   AUTH_BEARER,
@@ -21,6 +17,11 @@ import {
   AUTH_ASAP,
   getAuthTypeName,
 } from '../../../common/constants';
+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';
 
 type Props = {
   onChange: (r: Request, RequestAuthentication) => Promise<Request>,
@@ -31,7 +32,7 @@ type Props = {
   children: React.Node,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AuthDropdown extends React.PureComponent<Props> {
   async _handleTypeChange(type: string) {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/dropdowns/content-type-dropdown.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
-import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import {
+  AUTOBIND_CFG,
   CONTENT_TYPE_FILE,
   CONTENT_TYPE_FORM_DATA,
   CONTENT_TYPE_FORM_URLENCODED,
@@ -14,6 +14,8 @@ import {
   CONTENT_TYPE_EDN,
   getContentTypeName,
 } from '../../../common/constants';
+import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
+
 import { showModal } from '../modals/index';
 import AlertModal from '../modals/alert-modal';
 import type { Request, RequestBody } from '../../../models/request';
@@ -31,7 +33,7 @@ type Props = {
 
 const EMPTY_MIME_TYPE = null;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ContentTypeDropdown extends React.PureComponent<Props> {
   async _checkMimeTypeChange(body: RequestBody, mimeType: string | null) {
     // Nothing to do

packages/insomnia-app/app/ui/components/dropdowns/document-card-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, getAppName } from '../../../common/constants';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import { showError, showModal, showPrompt } from '../modals';
 import type { DocumentAction } from '../../../plugins';
@@ -14,7 +15,6 @@ import * as db from '../../../common/database';
 import * as models from '../../../models';
 import AskModal from '../modals/ask-modal';
 import type { Workspace } from '../../../models/workspace';
-import { getAppName } from '../../../common/constants';
 
 type Props = {
   apiSpec: ?ApiSpec,
@@ -30,7 +30,7 @@ type State = {
   loadingActions: { [string]: boolean },
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class DocumentCardDropdown extends React.PureComponent<Props, State> {
   state = {
     actionPlugins: [],

packages/insomnia-app/app/ui/components/dropdowns/environments-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import EnvironmentsModal from '../modals/workspace-environments-edit-modal';
 import {
   Dropdown,
@@ -30,7 +31,7 @@ type Props = {
   activeEnvironment: Environment | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class EnvironmentsDropdown extends React.PureComponent<Props> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/dropdowns/git-sync-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import type { Workspace } from '../../../models/workspace';
@@ -40,7 +41,7 @@ type State = {|
   branches: Array<string>,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GitSyncDropdown extends React.PureComponent<Props, State> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js

@@ -1,15 +1,15 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import * as constants from '../../../common/constants';
 import { showPrompt } from '../modals/index';
-import { METHOD_GRPC } from '../../../common/constants';
+import { METHOD_GRPC, AUTOBIND_CFG } from '../../../common/constants';
 
 const LOCALSTORAGE_KEY = 'insomnia.httpMethods';
 const GRPC_LABEL = 'gRPC';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class MethodDropdown extends PureComponent {
   _setDropdownRef(n) {
     this._dropdown = n;

packages/insomnia-app/app/ui/components/dropdowns/preview-mode-dropdown.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, getPreviewModeName, PREVIEW_MODES } from '../../../common/constants';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
-import { getPreviewModeName, PREVIEW_MODES } from '../../../common/constants';
 
 type Props = {|
   download: (pretty: boolean) => any,
@@ -12,7 +12,7 @@ type Props = {|
   showPrettifyOption?: boolean,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class PreviewModeDropdown extends React.PureComponent<Props> {
   async _handleClick(previewMode: string) {
     const { updatePreviewMode } = this.props;

packages/insomnia-app/app/ui/components/dropdowns/request-actions-dropdown.js

@@ -1,7 +1,8 @@
 // @flow
 import React from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import PromptButton from '../base/prompt-button';
 import {
   Dropdown,
@@ -47,7 +48,7 @@ type State = {
   loadingActions: { [string]: boolean },
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestActionsDropdown extends React.PureComponent<Props, State> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import PromptButton from '../base/prompt-button';
 import {
@@ -39,7 +40,7 @@ type State = {
   loadingActions: { [string]: boolean },
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestGroupActionsDropdown extends React.PureComponent<Props, State> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/dropdowns/response-history-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import moment from 'moment';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import StatusTag from '../tags/status-tag';
@@ -28,7 +29,7 @@ type Props = {
   activeEnvironment: ?Environment,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ResponseHistoryDropdown extends React.PureComponent<Props> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/dropdowns/sync-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import type { Workspace } from '../../../models/workspace';
@@ -55,7 +56,7 @@ type State = {
   remoteProjects: Array<Project>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncDropdown extends React.PureComponent<Props, State> {
   checkInterval: IntervalID;
   refreshOnNextSyncItems = false;

packages/insomnia-app/app/ui/components/dropdowns/workspace-dropdown.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, getAppName, getAppVersion } from '../../../common/constants';
 import classnames from 'classnames';
 import Dropdown from '../base/dropdown/dropdown';
 import DropdownDivider from '../base/dropdown/dropdown-divider';
@@ -9,7 +10,7 @@ import DropdownItem from '../base/dropdown/dropdown-item';
 import DropdownHint from '../base/dropdown/dropdown-hint';
 import SettingsModal, { TAB_INDEX_EXPORT } from '../modals/settings-modal';
 import * as models from '../../../models';
-import { getAppName, getAppVersion } from '../../../common/constants';
+
 import { showAlert, showError, showModal, showPrompt } from '../modals';
 import Link from '../base/link';
 import WorkspaceSettingsModal from '../modals/workspace-settings-modal';
@@ -55,7 +56,7 @@ type State = {
   remoteProjects: Array<Project>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class WorkspaceDropdown extends React.PureComponent<Props, State> {
   _dropdown: ?Dropdown;
 

packages/insomnia-app/app/ui/components/editors/auth/asap-auth.js

@@ -2,13 +2,14 @@
 
 import classnames from 'classnames';
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import OneLineEditor from '../../codemirror/one-line-editor';
 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';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 
 type Props = {
   request: Request,
@@ -32,7 +33,7 @@ cJV+wRTs/Szp6LXAgMmTkKMJ+9XXErUIUgwbl27Y3Rv/9ox1p5VRg+A=
 -----END RSA PRIVATE KEY-----
 `.trim();
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AsapAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/auth-wrapper.js

@@ -12,6 +12,7 @@ import {
   AUTH_HAWK,
   AUTH_NETRC,
   AUTH_ASAP,
+  AUTOBIND_CFG,
 } from '../../../../common/constants';
 import BasicAuth from './basic-auth';
 import DigestAuth from './digest-auth';
@@ -23,7 +24,7 @@ import HawkAuth from './hawk-auth';
 import AWSAuth from './aws-auth';
 import NetrcAuth from './netrc-auth';
 import AsapAuth from './asap-auth';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import type { Request, RequestAuthentication } from '../../../../models/request';
 import type { OAuth2Token } from '../../../../models/o-auth-2-token';
 import type { Settings } from '../../../../models/settings';
@@ -42,7 +43,7 @@ type Props = {
   oAuth2Token: ?OAuth2Token,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AuthWrapper extends React.PureComponent<Props> {
   renderEditor() {
     const {

packages/insomnia-app/app/ui/components/editors/auth/aws-auth.js

@@ -1,12 +1,13 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import classnames from 'classnames';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import HelpTooltip from '../../help-tooltip';
 import type { Request, RequestAuthentication } from '../../../../models/request';
 import type { Settings } from '../../../../models/settings';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 
 type Props = {
   request: Request,
@@ -19,7 +20,7 @@ type Props = {
   handleUpdateSettingsShowPasswords: boolean => Promise<Settings>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AWSAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/basic-auth.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import type { Settings } from '../../../../models/settings';
@@ -19,7 +20,7 @@ type Props = {
   isVariableUncovered: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class BasicAuth extends React.PureComponent<Props> {
   _handleUseISO88591() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/bearer-auth.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import HelpTooltip from '../../help-tooltip';
@@ -16,7 +17,7 @@ type Props = {
   isVariableUncovered: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class BearerAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/digest-auth.js

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import type { Settings } from '../../../../models/settings';
@@ -19,7 +20,7 @@ type Props = {
   isVariableUncovered: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class DigestAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/hawk-auth.js

@@ -2,9 +2,14 @@
 
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import {
+  AUTOBIND_CFG,
+  HAWK_ALGORITHM_SHA1,
+  HAWK_ALGORITHM_SHA256,
+} from '../../../../common/constants';
 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';
@@ -18,7 +23,7 @@ type Props = {
   onChange: (Request, RequestAuthentication) => Promise<Request>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class HawkAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/ntlm-auth.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import Button from '../../base/button';
 import type { Request, RequestAuthentication } from '../../../../models/request';
@@ -18,7 +19,7 @@ type Props = {
   isVariableUncovered: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class NTLMAuth extends React.PureComponent<Props> {
   _handleDisable() {
     const { request, onChange } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/o-auth-1-auth.js

@@ -2,7 +2,8 @@
 import type { Request, RequestAuthentication } from '../../../../models/request';
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import HelpTooltip from '../../help-tooltip';
 import {
@@ -38,7 +39,7 @@ cJV+wRTs/Szp6LXAgMmTkKMJ+9XXErUIUgwbl27Y3Rv/9ox1p5VRg+A=
 -----END RSA PRIVATE KEY-----
 `.trim();
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class OAuth1Auth extends React.PureComponent<Props> {
   _handleEditPrivateKey() {
     const { handleRender, handleGetRenderContext, request } = this.props;

packages/insomnia-app/app/ui/components/editors/auth/o-auth-2-auth.js

@@ -4,7 +4,8 @@ import type { OAuth2Token } from '../../../../models/o-auth-2-token';
 
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import OneLineEditor from '../../codemirror/one-line-editor';
 import {
   GRANT_TYPE_AUTHORIZATION_CODE,
@@ -54,7 +55,7 @@ const getAccessTokenUrls = () => accessTokenUrls;
 
 let showAdvanced = false;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class OAuth2Auth extends React.PureComponent<Props, State> {
   constructor(props: any) {
     super(props);

packages/insomnia-app/app/ui/components/editors/body/body-editor.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as mimes from 'mime-types';
 import clone from 'clone';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import RawEditor from './raw-editor';
 import UrlEncodedEditor from './url-encoded-editor';
 import FormEditor from './form-editor';
@@ -12,6 +12,7 @@ import {
   CONTENT_TYPE_FORM_DATA,
   CONTENT_TYPE_FORM_URLENCODED,
   CONTENT_TYPE_GRAPHQL,
+  AUTOBIND_CFG,
   getContentTypeFromHeaders,
 } from '../../../../common/constants';
 import type {
@@ -47,7 +48,7 @@ type Props = {
   isVariableUncovered: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class BodyEditor extends React.PureComponent<Props> {
   _handleRawChange(rawValue: string) {
     const { onChange, request } = this.props;

packages/insomnia-app/app/ui/components/editors/body/file-editor.js

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import fs from 'fs';
 import electron from 'electron';
 import FileInputButton from '../../base/file-input-button';
 import PromptButton from '../../base/prompt-button';
 import * as misc from '../../../../common/misc';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class FileEditor extends PureComponent {
   _handleResetFile() {
     this.props.onChange('');

packages/insomnia-app/app/ui/components/editors/body/form-editor.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import KeyValueEditor from '../../key-value-editor/editor';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class FormEditor extends PureComponent {
   render() {
     const {

packages/insomnia-app/app/ui/components/editors/body/graph-ql-editor.js

@@ -2,7 +2,7 @@
 import classnames from 'classnames';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import { markdownToHTML } from '../../../../common/markdown-to-html';
 import type { GraphQLArgument, GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
 import { parse, print, typeFromAST } from 'graphql';
@@ -12,7 +12,7 @@ import type { CodeMirror, TextMarker } from 'codemirror';
 import CodeEditor from '../../codemirror/code-editor';
 import { jsonParseOr } from '../../../../common/misc';
 import HelpTooltip from '../../help-tooltip';
-import { CONTENT_TYPE_JSON, DEBOUNCE_MILLIS } from '../../../../common/constants';
+import { CONTENT_TYPE_JSON, DEBOUNCE_MILLIS, AUTOBIND_CFG } from '../../../../common/constants';
 import prettify from 'insomnia-prettify';
 import type { ResponsePatch } from '../../../../network/network';
 import * as network from '../../../../network/network';
@@ -75,7 +75,7 @@ type State = {
   },
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLEditor extends React.PureComponent<Props, State> {
   _disabledOperationMarkers: Array<TextMarker>;
   _documentAST: null | Object;

packages/insomnia-app/app/ui/components/editors/body/raw-editor.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import CodeEditor from '../../codemirror/code-editor';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RawEditor extends PureComponent {
   render() {
     const {

packages/insomnia-app/app/ui/components/editors/body/url-encoded-editor.js

@@ -1,9 +1,10 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../../common/constants';
 import KeyValueEditor from '../../key-value-editor/editor';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class UrlEncodedEditor extends PureComponent {
   render() {
     const {

packages/insomnia-app/app/ui/components/editors/environment-editor.js

@@ -1,9 +1,10 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, JSON_ORDER_PREFIX, JSON_ORDER_SEPARATOR } from '../../../common/constants';
 import CodeEditor from '../codemirror/code-editor';
 import orderedJSON from 'json-order';
-import { JSON_ORDER_PREFIX, JSON_ORDER_SEPARATOR } from '../../../common/constants';
+
 import { NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME } from '../../../templating';
 
 // NeDB field names cannot begin with '$' or contain a period '.'
@@ -46,7 +47,7 @@ type State = {
   error: string | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class EnvironmentEditor extends React.PureComponent<Props, State> {
   _editor: CodeEditor | null;
 

packages/insomnia-app/app/ui/components/editors/request-headers-editor.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import KeyValueEditor from '../key-value-editor/editor';
 import CodeEditor from '../codemirror/code-editor';
 import allHeaderNames from '../../../datasets/header-names';
@@ -23,7 +24,7 @@ type Props = {
   request: Request,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestHeadersEditor extends React.PureComponent<Props> {
   _handleBulkUpdate(headersString: string) {
     const { onChange, request } = this.props;

packages/insomnia-app/app/ui/components/editors/request-parameters-editor.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import KeyValueEditor from '../key-value-editor/editor';
 import CodeEditor from '../codemirror/code-editor';
 import type { Request, RequestParameter } from '../../../models/request';
@@ -19,7 +20,7 @@ type Props = {
   request: Request,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestParametersEditor extends React.PureComponent<Props> {
   _handleBulkUpdate(paramsString: string) {
     const { onChange, request } = this.props;

packages/insomnia-app/app/ui/components/export-requests/request-group-row.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import type { RequestGroup } from '../../../models/request-group';
 
@@ -17,7 +18,7 @@ type Props = {
   children?: React.Node,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestGroupRow extends React.PureComponent<Props> {
   checkbox: HTMLInputElement;
 

packages/insomnia-app/app/ui/components/export-requests/request-row.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import MethodTag from '../tags/method-tag';
 import type { Request } from '../../../models/request';
 import type { GrpcRequest } from '../../../models/grpc-request';
@@ -13,7 +14,7 @@ type Props = {
   request: Request | GrpcRequest,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestRow extends PureComponent<Props> {
   handleSelect(e: SyntheticEvent<HTMLInputElement>) {
     const el = e.currentTarget;

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-enum.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import MarkdownPreview from '../markdown-preview';
 import type { GraphQLEnumValue } from 'graphql';
 import { GraphQLEnumType } from 'graphql';
@@ -9,7 +10,7 @@ type Props = {|
   type: GraphQLEnumType,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLExplorerEnum extends React.PureComponent<Props> {
   renderDescription() {
     const { type } = this.props;

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-field-link.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import type { GraphQLField } from 'graphql';
 
 type Props = {
@@ -8,7 +9,7 @@ type Props = {
   field: GraphQLField<any, any>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLExplorerFieldLink extends React.PureComponent<Props> {
   _handleClick(e: MouseEvent) {
     e.preventDefault();

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-type-link.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { GraphQLList, GraphQLNonNull } from 'graphql';
 import type { GraphQLType } from 'graphql';
 
@@ -9,7 +10,7 @@ type Props = {
   type: GraphQLType,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLExplorerTypeLink extends React.PureComponent<Props> {
   _handleClick(e: MouseEvent) {
     e.preventDefault();

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer-type.js

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { SvgIcon } from 'insomnia-components';
 import GraphQLExplorerTypeLink from './graph-ql-explorer-type-link';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import MarkdownPreview from '../markdown-preview';
 import GraphQLExplorerFieldLink from './graph-ql-explorer-field-link';
 import type { GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
@@ -17,7 +18,7 @@ type Props = {
   schema: GraphQLSchema | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLExplorerType extends React.PureComponent<Props> {
   _handleNavigateType(type: Object) {
     const { onNavigateType } = this.props;

packages/insomnia-app/app/ui/components/graph-ql-explorer/graph-ql-explorer.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import GraphQLExplorerField from './graph-ql-explorer-field';
 import GraphQLExplorerType from './graph-ql-explorer-type';
 import type { GraphQLArgument, GraphQLField, GraphQLSchema, GraphQLType } from 'graphql';
@@ -28,7 +29,7 @@ type State = HistoryItem & {
   history: Array<HistoryItem>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GraphQLExplorer extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);

packages/insomnia-app/app/ui/components/help-tooltip.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import Tooltip from './tooltip';
+import { AUTOBIND_CFG } from '../../common/constants';
 
 type Props = {
   children: React.Node,
@@ -13,7 +14,7 @@ type Props = {
   info?: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class HelpTooltip extends React.PureComponent<Props> {
   render() {
     const { children, className, style, info } = this.props;

packages/insomnia-app/app/ui/components/html-element-wrapper.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../common/constants';
 
 type Props = {|
   el: HTMLElement,
@@ -12,7 +13,7 @@ type Props = {|
  * application. This was created to facilitate the layer between UI plugins
  * and the Insomnia application.
  */
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class HtmlElementWrapper extends React.Component<Props> {
   _setRef(n: ?HTMLDivElement) {
     if (!n) {

packages/insomnia-app/app/ui/components/key-value-editor/editor.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, DEBOUNCE_MILLIS } from '../../../common/constants';
 import classnames from 'classnames';
-import { DEBOUNCE_MILLIS } from '../../../common/constants';
+
 import Lazy from '../base/lazy';
 import KeyValueEditorRow from './row';
 import { generateId, nullFn } from '../../../common/misc';
@@ -19,7 +20,7 @@ const DOWN = 40;
 const LEFT = 37;
 const RIGHT = 39;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class Editor extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/key-value-editor/row.js

@@ -2,7 +2,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { DragSource, DropTarget } from 'react-dnd';
 import classnames from 'classnames';
 import FileInputButton from '../base/file-input-button';
@@ -14,7 +15,7 @@ import OneLineEditor from '../codemirror/one-line-editor';
 import { showModal } from '../modals/index';
 import { describeByteSize } from '../../../common/misc';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class KeyValueEditorRow extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/keydown-binder.js

@@ -1,8 +1,8 @@
 // @flow
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import autobind from 'autobind-decorator';
-import { isMac } from '../../common/constants';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { isMac, AUTOBIND_CFG } from '../../common/constants';
 
 type Props = {
   children: React.Node,
@@ -13,7 +13,7 @@ type Props = {
   stopMetaPropagation?: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class KeydownBinder extends React.PureComponent<Props> {
   _handleKeydown(e: KeyboardEvent) {
     const { stopMetaPropagation, onKeydown, disabled } = this.props;

packages/insomnia-app/app/ui/components/markdown-editor.js

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../common/constants';
 import classnames from 'classnames';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
 import Button from './base/button';
 import CodeEditor from './codemirror/code-editor';
 import MarkdownPreview from './markdown-preview';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class MarkdownEditor extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/markdown-preview.js

@@ -2,12 +2,13 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../common/constants';
 import highlight from 'highlight.js';
 import * as misc from '../../common/misc';
 import { markdownToHTML } from '../../common/markdown-to-html';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class MarkdownPreview extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/add-key-combination-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import Modal from '../base/modal';
 import ModalHeader from '../base/modal-header';
@@ -19,7 +20,7 @@ type State = {
   pressedKeyCombination: KeyCombination | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AddKeyCombinationModal extends PureComponent<Props, State> {
   _modal: Modal | null;
 

packages/insomnia-app/app/ui/components/modals/alert-modal.js

@@ -1,11 +1,12 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AlertModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/ask-modal.js

@@ -1,11 +1,12 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class AskModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/code-prompt-modal.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -22,7 +23,7 @@ const MODES = {
   'text/html': 'HTML',
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CodePromptModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/cookie-modify-modal.js

@@ -1,11 +1,12 @@
 // @flow
 import * as React from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, DEBOUNCE_MILLIS } from '../../../common/constants';
 import * as toughCookie from 'tough-cookie';
 import * as models from '../../../models';
 import clone from 'clone';
-import { DEBOUNCE_MILLIS } from '../../../common/constants';
+
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -29,7 +30,7 @@ type State = {
   rawValue: string,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CookieModifyModal extends React.PureComponent<Props, State> {
   modal: Modal | null;
   _rawTimeout: TimeoutID;

packages/insomnia-app/app/ui/components/modals/cookies-modal.js

@@ -1,7 +1,8 @@
 // @flow
 import React, { PureComponent } from 'react';
 import deepEqual from 'deep-equal';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -24,7 +25,7 @@ type State = {
   visibleCookieIndexes: Array<number> | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class CookiesModal extends PureComponent<Props, State> {
   modal: Modal | null;
   filterInput: HTMLInputElement | null;

packages/insomnia-app/app/ui/components/modals/environment-edit-modal.js

@@ -1,13 +1,14 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import EnvironmentEditor from '../editors/environment-editor';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class EnvironmentEditModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/error-modal.js

@@ -1,7 +1,8 @@
 // @flow
 
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -14,7 +15,7 @@ export type ErrorModalOptions = {|
   message?: string,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ErrorModal extends PureComponent<{}, ErrorModalOptions> {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/export-requests-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -29,7 +30,7 @@ type State = {
   treeRoot: ?Node,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ExportRequestsModal extends PureComponent<Props, State> {
   modal: Modal;
 

packages/insomnia-app/app/ui/components/modals/filter-help-modal.js

@@ -1,11 +1,12 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Link from '../base/link';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class FilterHelpModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/generate-code-modal.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import HTTPSnippet, { availableTargets } from 'httpsnippet';
 import CopyButton from '../base/copy-button';
 import { Dropdown, DropdownButton, DropdownItem } from '../base/dropdown';
@@ -27,7 +28,7 @@ const TO_ADD_CONTENT_LENGTH = {
   node: ['native'],
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GenerateCodeModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/generate-config-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -31,7 +32,7 @@ type State = {|
   activeTab: number,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GenerateConfigModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/git-branches-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -26,7 +27,7 @@ type State = {|
   newBranchName: string,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GitBranchesModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   input: ?HTMLInputElement;

packages/insomnia-app/app/ui/components/modals/git-log-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -19,7 +20,7 @@ type State = {|
   branch: string,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GitLogModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/git-repository-settings-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -24,7 +25,7 @@ type State = {|
   },
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GitRepositorySettingsModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   input: ?HTMLInputElement;

packages/insomnia-app/app/ui/components/modals/git-staging-modal.js

@@ -1,7 +1,8 @@
 // @flow
 import YAML from 'yaml';
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import path from 'path';
 import * as models from '../../../models';
 import Modal from '../base/modal';
@@ -48,7 +49,7 @@ const INITIAL_STATE: State = {
   items: {},
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class GitStagingModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   statusNames: { [string]: string };

packages/insomnia-app/app/ui/components/modals/login-modal.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Link from '../base/link';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
@@ -7,7 +8,7 @@ import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 import * as session from '../../../account/session';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class LoginModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/move-request-group-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -20,7 +21,7 @@ type State = {
   selectedWorkspaceId: string | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class MoveRequestGroupModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/nunjucks-modal.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import VariableEditor from '../templating/variable-editor';
 import TagEditor from '../templating/tag-editor';
 import Modal from '../base/modal';
@@ -8,7 +9,7 @@ import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class NunjucksModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/payment-notification-modal.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import PromptButton from '../base/prompt-button';
 import Link from '../base/link';
 import Modal from '../base/modal';
@@ -9,7 +10,7 @@ import { getFirstName, endTrial, logout } from '../../../account/session';
 
 let hidePaymentNotificationUntilNextLaunch = false;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class PaymentNotificationModal extends PureComponent {
   async _handleCancel() {
     try {

packages/insomnia-app/app/ui/components/modals/prompt-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
@@ -30,7 +31,7 @@ type State = {
   currentValue: string,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class PromptModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _input: ?HTMLInputElement;

packages/insomnia-app/app/ui/components/modals/proto-files-modal.js

@@ -4,7 +4,8 @@ import type { ProtoFile } from '../../../models/proto-file';
 import ModalHeader from '../base/modal-header';
 import ModalBody from '../base/modal-body';
 import ModalFooter from '../base/modal-footer';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import type { Workspace } from '../../../models/workspace';
 import Modal from '../base/modal';
 import ProtoFileList from '../proto-file/proto-file-list';
@@ -39,7 +40,7 @@ const INITIAL_STATE: State = {
 
 const spinner = <i className="fa fa-spin fa-refresh" />;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ProtoFilesModal extends React.PureComponent<Props, State> {
   modal: Modal | null;
   onSave: (string => Promise<void>) | null;

packages/insomnia-app/app/ui/components/modals/request-create-modal.js

@@ -1,13 +1,8 @@
 // @flow
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
-import ContentTypeDropdown from '../dropdowns/content-type-dropdown';
-import MethodDropdown from '../dropdowns/method-dropdown';
-import Modal from '../base/modal';
-import ModalBody from '../base/modal-body';
-import ModalHeader from '../base/modal-header';
-import ModalFooter from '../base/modal-footer';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
 import {
+  AUTOBIND_CFG,
   getContentTypeName,
   METHOD_GET,
   METHOD_HEAD,
@@ -15,6 +10,13 @@ import {
   METHOD_DELETE,
   METHOD_GRPC,
 } from '../../../common/constants';
+import ContentTypeDropdown from '../dropdowns/content-type-dropdown';
+import MethodDropdown from '../dropdowns/method-dropdown';
+import Modal from '../base/modal';
+import ModalBody from '../base/modal-body';
+import ModalHeader from '../base/modal-header';
+import ModalFooter from '../base/modal-footer';
+
 import * as models from '../../../models/index';
 import { trackEvent } from '../../../common/analytics';
 import { showModal } from './index';
@@ -25,7 +27,7 @@ type RequestCreateModalOptions = {
   onComplete: string => void,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestCreateModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/request-render-error-modal.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import jq from 'jsonpath';
 import RequestSettingsModal from '../modals/request-settings-modal';
 import Modal from '../base/modal';
@@ -8,7 +9,7 @@ import ModalHeader from '../base/modal-header';
 import { showModal } from './index';
 import Link from '../base/link';
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestRenderErrorModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/request-settings-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -42,7 +43,7 @@ type RequestSettingsModalOptions = {
   forceEditMode: boolean,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestSettingsModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _editor: ?MarkdownEditor;

packages/insomnia-app/app/ui/components/modals/request-switcher-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import classnames from 'classnames';
 import { buildQueryStringFromParams, joinUrlAndQueryString } from 'insomnia-url';
 import Button from '../base/button';
@@ -46,7 +47,7 @@ type State = {
   title: string | null,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestSwitcherModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _input: ?HTMLInputElement;

packages/insomnia-app/app/ui/components/modals/response-debug-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import ResponseTimelineViewer from '../../components/viewers/response-timeline-viewer';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
@@ -18,7 +19,7 @@ type State = {|
   title: string | null,
 |};
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class ResponseDebugModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/select-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -16,7 +17,7 @@ type State = {
   onCancel?: Function,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SelectModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   doneButton: ?HTMLButtonElement;

packages/insomnia-app/app/ui/components/modals/settings-modal.js

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, getAppName, getAppVersion, isInsomnia } from '../../../common/constants';
 import Modal from '../base/modal';
 import Button from '../base/button';
 import ModalBody from '../base/modal-body';
@@ -13,7 +14,7 @@ import Plugins from '../settings/plugins';
 import Theme from '../settings/theme';
 import * as models from '../../../models/index';
 import { Curl } from 'node-libcurl';
-import { getAppName, getAppVersion, isInsomnia } from '../../../common/constants';
+
 import Tooltip from '../tooltip';
 import { setTheme } from '../../../plugins/misc';
 import * as session from '../../../account/session';
@@ -24,7 +25,7 @@ export const TAB_INDEX_SHORTCUTS = 3;
 export const TAB_INDEX_THEMES = 2;
 export const TAB_INDEX_PLUGINS = 5;
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SettingsModal extends PureComponent {
   constructor(props) {
     super(props);

packages/insomnia-app/app/ui/components/modals/sync-branches-modal.js

@@ -1,7 +1,8 @@
 // @flow
 import * as React from 'react';
 import classnames from 'classnames';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -26,7 +27,7 @@ type State = {
   remoteBranches: Array<string>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncBranchesModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/sync-delete-modal.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -24,7 +25,7 @@ const INITIAL_STATE: State = {
   workspaceName: '',
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncDeleteModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   input: ?HTMLInputElement;

packages/insomnia-app/app/ui/components/modals/sync-history-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -23,7 +24,7 @@ type State = {
   history: Array<Snapshot>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncHistoryModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   handleRollback: Snapshot => Promise<void>;

packages/insomnia-app/app/ui/components/modals/sync-merge-modal.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -20,7 +21,7 @@ type State = {
   conflicts: Array<MergeConflict>,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncMergeModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _handleDone: (Array<MergeConflict>) => void;

packages/insomnia-app/app/ui/components/modals/sync-share-modal.js

@@ -1,7 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import { Dropdown, DropdownButton, DropdownDivider, DropdownItem } from '../base/dropdown';
 import Link from '../base/link';
 import Modal from '../base/modal';
@@ -25,7 +26,7 @@ type State = {
   error: string,
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncShareModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
 

packages/insomnia-app/app/ui/components/modals/sync-staging-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG } from '../../../common/constants';
 import Modal from '../base/modal';
 import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
@@ -46,7 +47,7 @@ const _initialState: State = {
   lookupMap: {},
 };
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class SyncStagingModal extends React.PureComponent<Props, State> {
   modal: ?Modal;
   _onSnapshot: ?() => void;

packages/insomnia-app/app/ui/components/modals/workspace-environments-edit-modal.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react';
-import autobind from 'autobind-decorator';
+import { autoBindMethodsForReact } from 'class-autobind-decorator';
+import { AUTOBIND_CFG, DEBOUNCE_MILLIS } from '../../../common/constants';
 import classnames from 'classnames';
 import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc/dist/es6';
 import { Dropdown, DropdownButton, DropdownItem } from '../base/dropdown';
@@ -14,7 +15,7 @@ import ModalBody from '../base/modal-body';
 import ModalHeader from '../base/modal-header';
 import ModalFooter from '../base/modal-footer';
 import * as models from '../../../models';
-import { DEBOUNCE_MILLIS } from '../../../common/constants';
+
 import type { Workspace } from '../../../models/workspace';
 import type { Environment } from '../../../models/environment';
 import * as db from '../../../common/database';
@@ -98,7 +99,7 @@ const SidebarList = SortableContainer(
   ),
 );
 
-@autobind
+@autoBindMethodsForReact(AUTOBIND_CFG)
 class WorkspaceEnvironmentsEditModal extends React.PureComponent<Props, State> {
   environmentEditorRef: ?EnvironmentEditor;
   environmentColorInputRef: HTMLInputElement;