React ESLint rules (#3884)

.eslintrc.js

@@ -97,6 +97,16 @@ module.exports = {
     'react/jsx-indent': ['error', 2],
     'react/jsx-indent-props': ['error', 2],
     'react/prop-types': 'off',
+    'react/function-component-definition': ['error', {
+      'namedComponents':  'arrow-function',
+      'unnamedComponents': 'arrow-function',
+    }],
+    'react/jsx-max-props-per-line': ['error', { 'maximum': 1, 'when': 'multiline' }],
+    'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
+    'react/prefer-stateless-function': 'warn', // TODO: fix this and change to error
+    'react/jsx-key': ['error', { 'checkFragmentShorthand': true }],
+    'react/no-array-index-key': 'warn',
+    'react/self-closing-comp': 'error',
 
     'react-hooks/exhaustive-deps': 'error',
     'react-hooks/rules-of-hooks': 'error',

packages/insomnia-app/app/ui/components/analytics.tsx

@@ -48,13 +48,15 @@ class Analytics extends PureComponent<Props> {
           radius="3px"
           size="medium"
           variant="contained"
-          onClick={this._handleClickEnableAnalytics}>
+          onClick={this._handleClickEnableAnalytics}
+        >
           Share Usage Analytics
         </Button>
         <button
           key="disable"
           className="btn btn--super-compact"
-          onClick={this._handleClickDisableAnalytics}>
+          onClick={this._handleClickDisableAnalytics}
+        >
           Don't share usage analytics
         </button>
       </Fragment>

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

@@ -381,7 +381,8 @@ class Dropdown extends PureComponent<DropdownProps, State> {
             className={classnames({
               active,
               hide,
-            })}>
+            })}
+          >
             {child}
           </li>,
         );
@@ -412,7 +413,8 @@ class Dropdown extends PureComponent<DropdownProps, State> {
           <div
             key="item"
             className={menuClasses}
-            aria-hidden={!open}>
+            aria-hidden={!open}
+          >
             <div className="dropdown__backdrop theme--transparent-overlay" />
             <div
               key={uniquenessKey}
@@ -420,7 +422,8 @@ class Dropdown extends PureComponent<DropdownProps, State> {
               tabIndex={-1}
               className={classnames('dropdown__list', {
                 'dropdown__list--filtering': filterVisible,
-              })}>
+              })}
+            >
               <div className="form-control dropdown__filter">
                 <i className="fa fa-search" />
                 <input
@@ -434,7 +437,8 @@ class Dropdown extends PureComponent<DropdownProps, State> {
               <ul
                 className={classnames({
                   hide: noResults,
-                })}>
+                })}
+              >
                 {dropdownItems}
               </ul>
             </div>
@@ -453,7 +457,8 @@ class Dropdown extends PureComponent<DropdownProps, State> {
           ref={this._setRef}
           onClick={this._handleClick}
           tabIndex={-1}
-          onMouseDown={Dropdown._handleMouseDown}>
+          onMouseDown={Dropdown._handleMouseDown}
+        >
           {finalChildren}
         </div>
       </KeydownBinder>

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

@@ -178,7 +178,8 @@ class Modal extends PureComponent<ModalProps, State> {
           className={classes}
           style={styles}
           aria-hidden={!open}
-          onClick={this._handleClick}>
+          onClick={this._handleClick}
+        >
           <div className="modal__backdrop overlay theme--transparent-overlay" data-close-modal />
           <div className="modal__content__wrapper">
             <div className="modal__content" key={forceRefreshCounter}>

packages/insomnia-app/app/ui/components/buttons/settings-button.tsx

@@ -22,7 +22,8 @@ const SettingsButton: FunctionComponent<Props> = ({ className, settings }) => (
         Preferences (
         <Hotkey keyBindings={settings.hotKeyRegistry[hotKeyRefs.PREFERENCES_SHOW_GENERAL.id]} />)
       </>
-    }>
+    }
+  >
     <CircleButton className={className} onClick={showSettingsModal}>
       <SvgIcon icon="gear" />
     </CircleButton>

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

@@ -1205,7 +1205,8 @@ class CodeEditor extends Component<Props, State> {
           key="prettify"
           className="btn btn--compact"
           title="Auto-format request body whitespace"
-          onClick={this._handleBeautify}>
+          onClick={this._handleBeautify}
+        >
           Beautify {contentTypeName}
         </button>,
       );
@@ -1233,7 +1234,8 @@ class CodeEditor extends Component<Props, State> {
           className={classnames('editor__container', 'input', className)}
           style={styles}
           onClick={onClick}
-          onMouseLeave={onMouseLeave}>
+          onMouseLeave={onMouseLeave}
+        >
           <textarea
             key={isVariableUncovered ? 'foo' : 'bar'}
             id={id}

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

@@ -55,24 +55,28 @@ class CookieList extends PureComponent<CookieListProps> {
               <th
                 style={{
                   minWidth: '10rem',
-                }}>
+                }}
+              >
                 Domain
               </th>
               <th
                 style={{
                   width: '90%',
-                }}>
+                }}
+              >
                 Cookie
               </th>
               <th
                 style={{
                   width: '2rem',
                 }}
-                className="text-right">
+                className="text-right"
+              >
                 <Dropdown right>
                   <DropdownButton
                     title="Add cookie"
-                    className="btn btn--super-duper-compact btn--outlined txt-md">
+                    className="btn btn--super-duper-compact btn--outlined txt-md"
+                  >
                     Actions <i className="fa fa-caret-down" />
                   </DropdownButton>
                   <DropdownItem onClick={this._handleCookieAdd}>
@@ -100,7 +104,8 @@ class CookieList extends PureComponent<CookieListProps> {
                     <button
                       className="btn btn--super-compact btn--outlined"
                       onClick={() => { handleShowModifyCookieModal(cookie); }}
-                      title="Edit cookie properties">
+                      title="Edit cookie properties"
+                    >
                       Edit
                     </button>{' '}
                     <PromptButton
@@ -108,7 +113,8 @@ class CookieList extends PureComponent<CookieListProps> {
                       addIcon
                       confirmMessage=""
                       onClick={() => this._handleDeleteCookie(cookie)}
-                      title="Delete cookie">
+                      title="Delete cookie"
+                    >
                       <i className="fa fa-trash-o" />
                     </PromptButton>
                   </td>

packages/insomnia-app/app/ui/components/dropdowns/account-dropdown.tsx

@@ -39,7 +39,8 @@ const AccountDropdown: FunctionComponent<Props> = ({ className }) => (
           key="login"
           stayOpenAfterClick
           buttonClass={PromptButton}
-          onClick={session.logout}>
+          onClick={session.logout}
+        >
           <StyledIconContainer>
             <i className="fa fa-sign-out" />
           </StyledIconContainer>

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

@@ -50,7 +50,8 @@ class EnvironmentsDropdown extends PureComponent<Props> {
       <DropdownItem
         key={environment._id}
         value={environment._id}
-        onClick={this._handleActivateEnvironment}>
+        onClick={this._handleActivateEnvironment}
+      >
         <i
           className="fa fa-random"
           style={{
@@ -97,14 +98,16 @@ class EnvironmentsDropdown extends PureComponent<Props> {
         <Dropdown
           ref={this._setDropdownRef}
           {...(other as Record<string, any>)}
-          className={className}>
+          className={className}
+        >
           <DropdownButton className="btn btn--super-compact no-wrap">
             <div className="sidebar__menu__thing">
               {!activeEnvironment && subEnvironments.length > 0 && (
                 <Tooltip
                   message="No environments active. Please select one to use."
                   className="space-right"
-                  position="right">
+                  position="right"
+                >
                   <i className="fa fa-exclamation-triangle notice" />
                 </Tooltip>
               )}

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

@@ -306,7 +306,8 @@ class GitSyncDropdown extends PureComponent<Props, State> {
         className={classnames({
           bold: isCurrentBranch,
         })}
-        title={isCurrentBranch ? null : `Switch to "${branch}"`}>
+        title={isCurrentBranch ? null : `Switch to "${branch}"`}
+      >
         {icon}
         {branch}
       </DropdownItem>

packages/insomnia-app/app/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx

@@ -61,7 +61,8 @@ const GrpcMethodDropdown: FunctionComponent<Props> = ({
               value={fullPath}
               disabled={disabled}
               selected={fullPath === selectedMethod?.path}
-              icon={<GrpcMethodTag methodType={type} />}>
+              icon={<GrpcMethodTag methodType={type} />}
+            >
               <Tooltip message={fullPath} position="right" delay={500}>
                 {getShortGrpcPath(segments, fullPath)}
               </Tooltip>

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

@@ -101,7 +101,8 @@ class MethodDropdown extends PureComponent<Props> {
             key={method}
             className={`http-method-${method}`}
             onClick={this._handleChange}
-            value={method}>
+            value={method}
+          >
             {method}
           </DropdownItem>
         ))}
@@ -117,7 +118,8 @@ class MethodDropdown extends PureComponent<Props> {
         <DropdownItem
           className="http-method-custom"
           onClick={this._handleSetCustomMethod}
-          value={method}>
+          value={method}
+        >
           Custom Method
         </DropdownItem>
       </Dropdown>

packages/insomnia-app/app/ui/components/dropdowns/remote-workspaces-dropdown.tsx

@@ -77,7 +77,8 @@ export const RemoteWorkspacesDropdown: FC<Props> = ({ className, vcs }) => {
             ) : (
               <i className="fa fa-cloud-download" />
             )
-          }>
+          }
+        >
           <span>
             Pull <strong>{p.name}</strong>
           </span>

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

@@ -181,7 +181,8 @@ class RequestActionsDropdown extends PureComponent<Props, State> {
             key={`${plugin.plugin.name}::${plugin.label}`}
             value={plugin}
             onClick={this._handlePluginClick}
-            stayOpenAfterClick>
+            stayOpenAfterClick
+          >
             {loadingActions[plugin.label] ? (
               <i className="fa fa-refresh fa-spin" />
             ) : (

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

@@ -69,7 +69,8 @@ class ResponseHistoryDropdown extends PureComponent<Props> {
         key={response._id}
         disabled={active}
         value={i === 0 ? null : response}
-        onClick={this._handleSetActiveResponse}>
+        onClick={this._handleSetActiveResponse}
+      >
         {active ? <i className="fa fa-thumb-tack" /> : <i className="fa fa-empty" />}{' '}
         <StatusTag
           small

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

@@ -380,7 +380,8 @@ class UnconnectedSyncDropdown extends PureComponent<Props, State> {
         className={classnames({
           bold: isCurrentBranch,
         })}
-        title={isCurrentBranch ? null : `Switch to "${branch}"`}>
+        title={isCurrentBranch ? null : `Switch to "${branch}"`}
+      >
         {icon}
         {branch}
       </DropdownItem>
@@ -569,7 +570,8 @@ class UnconnectedSyncDropdown extends PureComponent<Props, State> {
             onClick={this._handleRevert}
             buttonClass={PromptButton}
             stayOpenAfterClick
-            disabled={!canCreateSnapshot || historyCount === 0}>
+            disabled={!canCreateSnapshot || historyCount === 0}
+          >
             <i className="fa fa-undo" />
             Revert Changes
           </DropdownItem>

packages/insomnia-app/app/ui/components/dropdowns/workspace-card-dropdown.tsx

@@ -104,7 +104,8 @@ const useDocumentActionPlugins = ({ workspace, apiSpec, space }: Props) => {
       key={`${p.plugin.name}:${p.label}`}
       value={p}
       onClick={handleClick}
-      stayOpenAfterClick={!p.hideAfterClick}>
+      stayOpenAfterClick={!p.hideAfterClick}
+    >
       {isLoading(p.label) && spinner}
       {p.label}
     </DropdownItem>

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

@@ -149,14 +149,16 @@ class WorkspaceDropdown extends PureComponent<Props, State> {
           onOpen={this._handleDropdownOpen}
           // @ts-expect-error -- TSCONVERSION appears to be genuine
           onHide={this._handleDropdownHide}
-          {...(other as Record<string, any>)}>
+          {...(other as Record<string, any>)}
+        >
           <DropdownButton className="row">
             <div
               className="ellipsis"
               style={{
                 maxWidth: '400px',
               }}
-              title={displayName}>
+              title={displayName}
+            >
               {displayName}
             </div>
             <i className="fa fa-caret-down space-left" />
@@ -179,7 +181,8 @@ class WorkspaceDropdown extends PureComponent<Props, State> {
             <DropdownItem
               key={p.label}
               onClick={() => this._handlePluginClick(p)}
-              stayOpenAfterClick>
+              stayOpenAfterClick
+            >
               {loadingActions[p.label] ? (
                 <i className="fa fa-refresh fa-spin" />
               ) : (
@@ -197,7 +200,8 @@ class WorkspaceDropdown extends PureComponent<Props, State> {
                 <DropdownItem
                   key="generateConfig"
                   onClick={this._handleGenerateConfig}
-                  value={p.label}>
+                  value={p.label}
+                >
                   <i className="fa fa-code" />
                   {p.label}
                 </DropdownItem>

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

@@ -99,7 +99,8 @@ class AsapAuth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               id={id}
               mode={mode}
@@ -152,7 +153,8 @@ class AsapAuth extends PureComponent<Props> {
               {
                 'form-control--inactive': authentication.disabled,
               },
-            )}>
+            )}
+          >
             <button className="btn btn--clicky wide" onClick={this._handleEditPrivateKey}>
               <i className="fa fa-edit space-right" />
               {authentication.privateKey ? 'Click to Edit' : 'Click to Add'}
@@ -184,7 +186,8 @@ class AsapAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -73,7 +73,8 @@ class AWSAuth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': request.authentication.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               id={key}
               onChange={onChange}
@@ -132,7 +133,8 @@ class AWSAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -71,7 +71,8 @@ class BasicAuth extends PureComponent<Props> {
                 <div
                   className={classnames('form-control form-control--underlined no-margin', {
                     'form-control--inactive': authentication.disabled,
-                  })}>
+                  })}
+                >
                   <OneLineEditor
                     type="text"
                     id="username"
@@ -118,7 +119,8 @@ class BasicAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (
@@ -144,7 +146,8 @@ class BasicAuth extends PureComponent<Props> {
                     id="use-iso-8859-1"
                     onClick={this._handleUseISO88591}
                     value={authentication.useISO88591}
-                    title={authentication.useISO88591 ? 'Enable item' : 'Disable item'}>
+                    title={authentication.useISO88591 ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.useISO88591 ? (
                       <i className="fa fa-check-square-o" />
                     ) : (

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

@@ -58,7 +58,8 @@ class BearerAuth extends PureComponent<Props> {
                 <div
                   className={classnames('form-control form-control--underlined no-margin', {
                     'form-control--inactive': authentication.disabled,
-                  })}>
+                  })}
+                >
                   <OneLineEditor
                     type="text"
                     id="token"
@@ -86,7 +87,8 @@ class BearerAuth extends PureComponent<Props> {
                 <div
                   className={classnames('form-control form-control--underlined no-margin', {
                     'form-control--inactive': authentication.disabled,
-                  })}>
+                  })}
+                >
                   <OneLineEditor
                     type="text"
                     id="prefix"
@@ -114,7 +116,8 @@ class BearerAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -62,7 +62,8 @@ class DigestAuth extends PureComponent<Props> {
                 <div
                   className={classnames('form-control form-control--underlined no-margin', {
                     'form-control--inactive': authentication.disabled,
-                  })}>
+                  })}
+                >
                   <OneLineEditor
                     type="text"
                     id="username"
@@ -109,7 +110,8 @@ class DigestAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -109,7 +109,8 @@ class HawkAuth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--outlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <select id={id} onChange={onChange} value={value}>
               {options.map(({ name, value }) => (
                 <option key={value} value={value}>
@@ -148,7 +149,8 @@ class HawkAuth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               id={id}
               type="text"
@@ -180,7 +182,8 @@ class HawkAuth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <Button
               className="btn btn--super-duper-compact"
               id={id}
@@ -190,7 +193,8 @@ class HawkAuth extends PureComponent<Props> {
                 authentication.validatePayload
                   ? 'Enable payload validation'
                   : 'Disable payload validation'
-              }>
+              }
+            >
               {authentication.validatePayload ? (
                 <i className="fa fa-check-square-o" />
               ) : (
@@ -224,7 +228,8 @@ class HawkAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -62,7 +62,8 @@ class NTLMAuth extends PureComponent<Props> {
                 <div
                   className={classnames('form-control form-control--underlined no-margin', {
                     'form-control--inactive': authentication.disabled,
-                  })}>
+                  })}
+                >
                   <OneLineEditor
                     type="text"
                     id="username"
@@ -109,7 +110,8 @@ class NTLMAuth extends PureComponent<Props> {
                     id="enabled"
                     onClick={this._handleDisable}
                     value={!authentication.disabled}
-                    title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+                    title={authentication.disabled ? 'Enable item' : 'Disable item'}
+                  >
                     {authentication.disabled ? (
                       <i className="fa fa-square-o" />
                     ) : (

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

@@ -143,7 +143,8 @@ class OAuth1Auth extends PureComponent<Props> {
               className="btn btn--super-duper-compact"
               id={label}
               onClick={onChange}
-              value={!authentication[property]}>
+              value={!authentication[property]}
+            >
               {authentication[property] ? (
                 <i className="fa fa-check-square-o" />
               ) : (
@@ -173,7 +174,8 @@ class OAuth1Auth extends PureComponent<Props> {
               id="enabled"
               onClick={onChange}
               value={!authentication.disabled}
-              title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+              title={authentication.disabled ? 'Enable item' : 'Disable item'}
+            >
               {authentication.disabled ? (
                 <i className="fa fa-square-o" />
               ) : (
@@ -215,7 +217,8 @@ class OAuth1Auth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               id={id}
               type={type}
@@ -261,7 +264,8 @@ class OAuth1Auth extends PureComponent<Props> {
           <div
             className={classnames('form-control form-control--outlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <select id={id} onChange={onChange} value={value}>
               {options.map(({ name, value }) => (
                 <option key={value} value={value}>

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

@@ -262,7 +262,8 @@ class OAuth2Auth extends PureComponent<Props, State> {
               id="enabled"
               onClick={onChange}
               value={!authentication.disabled}
-              title={authentication.disabled ? 'Enable item' : 'Disable item'}>
+              title={authentication.disabled ? 'Enable item' : 'Disable item'}
+            >
               {authentication.disabled ? (
                 <i className="fa fa-square-o" />
               ) : (
@@ -289,13 +290,15 @@ class OAuth2Auth extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <Button
               className="btn btn--super-duper-compact"
               id="use-pkce"
               onClick={onChange}
               value={!authentication.usePkce}
-              title={authentication.usePkce ? 'Disable PKCE' : 'Enable PKCE'}>
+              title={authentication.usePkce ? 'Disable PKCE' : 'Enable PKCE'}
+            >
               {authentication.usePkce ? (
                 <i className="fa fa-check-square-o" />
               ) : (
@@ -337,7 +340,8 @@ class OAuth2Auth extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--underlined no-margin', {
               'form-control--inactive': authentication.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               id={id}
               type={type}
@@ -384,7 +388,8 @@ class OAuth2Auth extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--outlined no-margin', {
               'form-control--inactive': authentication.disabled || disabled,
-            })}>
+            })}
+          >
             <select id={id} onChange={onChange} value={value}>
               {options.map(({ name, value }) => (
                 <option key={value} value={value}>
@@ -593,7 +598,8 @@ class OAuth2Auth extends PureComponent<Props, State> {
         <button
           onClick={this._handleDebugResponseClick}
           className="icon icon--success space-left"
-          title="View response timeline">
+          title="View response timeline"
+        >
           <i className="fa fa-bug" />
         </button>
       ) : null;
@@ -724,7 +730,8 @@ class OAuth2Auth extends PureComponent<Props, State> {
             <button
               className="btn btn--clicky"
               onClick={this._handleRefreshToken}
-              disabled={loading}>
+              disabled={loading}
+            >
               {loading
                 ? tok
                   ? 'Refreshing...'

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

@@ -56,7 +56,8 @@ class FileEditor extends PureComponent<Props> {
           <PromptButton
             className="btn btn--super-compact"
             disabled={!path}
-            onClick={this._handleResetFile}>
+            onClick={this._handleResetFile}
+          >
             Reset File
           </PromptButton>
           &nbsp;&nbsp;

packages/insomnia-app/app/ui/components/editors/password-editor.tsx

@@ -51,7 +51,8 @@ class PasswordEditor extends PureComponent<Props, State> {
         <div
           className={classnames('form-control form-control--underlined no-margin', {
             'form-control--inactive': disabled,
-          })}>
+          })}
+        >
           <OneLineEditor
             type={showAllPasswords || showPassword ? 'text' : 'password'}
             id="password"
@@ -67,7 +68,8 @@ class PasswordEditor extends PureComponent<Props, State> {
           <Button
             className="btn btn--super-duper-compact pointer"
             onClick={this._handleShowPassword}
-            value={showPassword}>
+            value={showPassword}
+          >
             {showPassword ? <i className="fa fa-eye-slash" /> : <i className="fa fa-eye" />}
           </Button>
         )}

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

@@ -67,7 +67,8 @@ class RequestGroupRow extends PureComponent<Props> {
         <ul
           className={classnames('tree__list', {
             'tree__list--collapsed': isCollapsed,
-          })}>
+          })}
+        >
           {!isCollapsed ? children : null}
         </ul>
       </li>

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

@@ -126,7 +126,8 @@ class GraphQLExplorerType extends PureComponent<Props> {
                   <Tooltip
                     message={`The field "${field.name}" is deprecated. ${field.deprecationReason}`}
                     position="bottom"
-                    delay={1000}>
+                    delay={1000}
+                  >
                     <SvgIcon icon="warning" />
                   </Tooltip>
                 )}

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

@@ -122,7 +122,8 @@ class GraphQLExplorer extends PureComponent<Props, State> {
             e.preventDefault();
 
             this._handlePopHistory();
-          }}>
+          }}
+        >
           <i className="fa--skinny fa fa-angle-left" /> Schema
         </a>
       );
@@ -150,7 +151,8 @@ class GraphQLExplorer extends PureComponent<Props, State> {
           e.preventDefault();
 
           this._handlePopHistory();
-        }}>
+        }}
+      >
         <i className="fa--skinny fa fa-angle-left" /> {name}
       </a>
     );
@@ -200,7 +202,8 @@ class GraphQLExplorer extends PureComponent<Props, State> {
           <h1>{fieldName || typeName || schemaName || 'Unknown'}</h1>
           <button
             className="btn btn--compact graphql-explorer__header__close-btn"
-            onClick={handleClose}>
+            onClick={handleClose}
+          >
             <i className="fa fa-close" />
           </button>
         </div>

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

@@ -285,7 +285,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
           {
             'form-control--inactive': pair.disabled,
           },
-        )}>
+        )}
+      >
         <OneLineEditor
           ref={this._setDescriptionInputRef}
           // @ts-expect-error -- TSCONVERSION very strange that one of the `OneLineEditor`s in this file _doesn't_ error with this...
@@ -336,7 +337,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
       return (
         <button
           className="btn btn--outlined btn--super-duper-compact wide ellipsis"
-          onClick={this._handleEditMultiline}>
+          onClick={this._handleEditMultiline}
+        >
           <i className="fa fa-pencil-square-o space-right" />
           {bytes > 0 ? describeByteSize(bytes, true) : 'Click to Edit'}
         </button>
@@ -394,7 +396,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
             value={{
               type: 'text',
               multiline: false,
-            }}>
+            }}
+          >
             Text
           </DropdownItem>
           {allowMultiline && (
@@ -403,7 +406,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
               value={{
                 type: 'text',
                 multiline: true,
-              }}>
+              }}
+            >
               Text (Multi-line)
             </DropdownItem>
           )}
@@ -412,7 +416,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
               onClick={this._handleTypeChange}
               value={{
                 type: 'file',
-              }}>
+              }}
+            >
               File
             </DropdownItem>
           )}
@@ -475,7 +480,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--underlined form-control--wide', {
               'form-control--inactive': pair.disabled,
-            })}>
+            })}
+          >
             <OneLineEditor
               ref={ref => { this._nameInput = ref; }}
               placeholder={namePlaceholder || 'Name'}
@@ -497,7 +503,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--underlined form-control--wide', {
               'form-control--inactive': pair.disabled,
-            })}>
+            })}
+          >
             {this.renderPairValue()}
           </div>
           {this.renderPairDescription()}
@@ -508,7 +515,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
             <Button
               onClick={this._handleDisableChange}
               value={!pair.disabled}
-              title={pair.disabled ? 'Enable item' : 'Disable item'}>
+              title={pair.disabled ? 'Enable item' : 'Disable item'}
+            >
               {pair.disabled ? (
                 <i className="fa fa-square-o" />
               ) : (
@@ -529,7 +537,8 @@ class KeyValueEditorRow extends PureComponent<Props, State> {
                 confirmMessage=""
                 addIcon
                 onClick={this._handleDelete}
-                title="Delete item">
+                title="Delete item"
+              >
                 <i className="fa fa-trash-o" />
               </PromptButton>
             ) : (

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

@@ -122,7 +122,7 @@ class MarkdownPreview extends PureComponent<Props, State> {
         {renderError && <p className="notice error no-margin">Failed to render: {renderError}</p>}
         <div className="markdown-preview__content selectable">
           {heading ? <h1>{heading}</h1> : null}
-          <div dangerouslySetInnerHTML={{ __html: compiled }}></div>
+          <div dangerouslySetInnerHTML={{ __html: compiled }} />
         </div>
       </div>
     );

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

@@ -125,7 +125,8 @@ class AddKeyCombinationModal extends PureComponent<{}, State> {
       <Modal
         ref={this._setModalRef}
         onKeyDown={this._handleKeyDown}
-        className="shortcuts add-key-comb-modal">
+        className="shortcuts add-key-comb-modal"
+      >
         <ModalHeader>Add Keyboard Shortcut</ModalHeader>
         <ModalBody noScroll>
           <div className="pad-left pad-right pad-top pad-bottom-sm">

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

@@ -153,7 +153,8 @@ class CodePromptModal extends PureComponent<Props, State> {
               : {
                 minHeight: '10rem',
               }
-          }>
+          }
+        >
           {showCopyButton ? (
             <div className="pad-top-sm pad-right-sm">
               <CopyButton content={defaultValue} className="pull-right" />

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

@@ -150,7 +150,8 @@ class GenerateCodeModal extends PureComponent<Props, State> {
             display: 'grid',
             gridTemplateColumns: 'minmax(0, 1fr)',
             gridTemplateRows: 'auto minmax(0, 1fr)',
-          }}>
+          }}
+        >
           <div className="pad">
             <Dropdown outline>
               <DropdownButton className="btn btn--clicky">

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

@@ -218,7 +218,8 @@ class GitBranchesModal extends PureComponent<Props, State> {
                       <span
                         className={classnames({
                           bold: name === currentBranch,
-                        })}>
+                        })}
+                      >
                         {name}
                       </span>
                       {name === currentBranch ? (
@@ -231,18 +232,21 @@ class GitBranchesModal extends PureComponent<Props, State> {
                           <PromptButton
                             className="btn btn--micro btn--outlined space-left"
                             doneMessage="Merged"
-                            onClick={() => this._handleMerge(name)}>
+                            onClick={() => this._handleMerge(name)}
+                          >
                             Merge
                           </PromptButton>
                           <PromptButton
                             className="btn btn--micro btn--outlined space-left"
                             doneMessage="Deleted"
-                            onClick={() => this._handleDelete(name)}>
+                            onClick={() => this._handleDelete(name)}
+                          >
                             Delete
                           </PromptButton>
                           <button
                             className="btn btn--micro btn--outlined space-left"
-                            onClick={() => this._handleCheckout(name)}>
+                            onClick={() => this._handleCheckout(name)}
+                          >
                             Checkout
                           </button>
                         </Fragment>
@@ -269,7 +273,8 @@ class GitBranchesModal extends PureComponent<Props, State> {
                       <td className="text-right">
                         <button
                           className="btn btn--micro btn--outlined space-left"
-                          onClick={() => this._handleRemoteCheckout(name)}>
+                          onClick={() => this._handleRemoteCheckout(name)}
+                        >
                           Checkout
                         </button>
                       </td>

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

@@ -328,7 +328,8 @@ class GitStagingModal extends PureComponent<Props, State> {
           {item.editable && <Tooltip message={item.added ? 'Delete' : 'Rollback'}>
             <button
               className="btn btn--micro space-right"
-              onClick={() => this._handleRollback([item])}>
+              onClick={() => this._handleRollback([item])}
+            >
               <i className={classnames('fa', item.added ? 'fa-trash' : 'fa-undo')} />
             </button>
           </Tooltip>}
@@ -350,7 +351,8 @@ class GitStagingModal extends PureComponent<Props, State> {
         <strong>{title}</strong>
         <PromptButton
           className="btn pull-right btn--micro"
-          onClick={() => this._handleRollback(items)}>
+          onClick={() => this._handleRollback(items)}
+        >
           {rollbackLabel}
         </PromptButton>
         <table className="table--fancy table--outlined margin-top-sm">

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

@@ -54,7 +54,8 @@ class PaymentNotificationModal extends PureComponent {
               style={{
                 maxWidth: '30rem',
                 margin: 'auto',
-              }}>
+              }}
+            >
               Your Insomnia Plus trial has come to an end. Please enter your billing info to
               continue using Plus features like encrypted data synchronization and backup.
             </p>
@@ -67,7 +68,8 @@ class PaymentNotificationModal extends PureComponent {
               <Link
                 button
                 href="https://app.insomnia.rest/app/subscribe/"
-                className="btn btn--compact btn--outlined">
+                className="btn btn--compact btn--outlined"
+              >
                 Update Billing
               </Link>
             </p>

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

@@ -217,7 +217,8 @@ class PromptModal extends PureComponent<{}, State> {
           confirmMessage=""
           className="tall space-left icon"
           onClick={this._handleDeleteHint}
-          value={hint}>
+          value={hint}
+        >
           <i className="fa fa-close faint" />
         </PromptButton>
       </div>

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

@@ -154,7 +154,8 @@ class ProtoFilesModal extends PureComponent<Props, State> {
               <AsyncButton
                 className="margin-right-sm"
                 onClick={this._handleAddDirectory}
-                loadingNode={spinner}>
+                loadingNode={spinner}
+              >
                 Add Directory
               </AsyncButton>
               <AsyncButton onClick={this._handleAdd} loadingNode={spinner}>

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

@@ -163,7 +163,8 @@ class RequestCreateModal extends PureComponent<{}, State> {
                 className="form-control form-control--no-label"
                 style={{
                   width: 'auto',
-                }}>
+                }}
+              >
                 <MethodDropdown
                   right
                   showGrpc
@@ -177,12 +178,14 @@ class RequestCreateModal extends PureComponent<{}, State> {
                   className="form-control form-control--no-label"
                   style={{
                     width: 'auto',
-                  }}>
+                  }}
+                >
                   <ContentTypeDropdown
                     className="btn btn--clicky no-wrap"
                     right
                     contentType={selectedContentType}
-                    onChange={this._handleChangeSelectedContentType}>
+                    onChange={this._handleChangeSelectedContentType}
+                  >
                     {getContentTypeName(selectedContentType) || 'No Body'}{' '}
                     <i className="fa fa-caret-down" />
                   </ContentTypeDropdown>

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

@@ -61,7 +61,8 @@ class RequestRenderErrorModal extends PureComponent<{}, State> {
             {error.path.match(/^body/) && (
               <button
                 className="btn btn--clicky margin-right-sm"
-                onClick={this._handleShowRequestSettings}>
+                onClick={this._handleShowRequestSettings}
+              >
                 Adjust Render Settings
               </button>
             )}

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

@@ -311,7 +311,8 @@ class RequestSettingsModal extends PureComponent<Props, State> {
               // @ts-expect-error -- TSCONVERSION this setting only exists for a Request not GrpcRequest
               defaultValue={this.state.request?.settingFollowRedirects}
               name="settingFollowRedirects"
-              onChange={this._updateRequestSettingString}>
+              onChange={this._updateRequestSettingString}
+            >
               <option value={'global'}>Use global setting</option>
               <option value={'off'}>Don't follow redirects</option>
               <option value={'on'}>Follow redirects</option>
@@ -360,7 +361,8 @@ class RequestSettingsModal extends PureComponent<Props, State> {
     ) : (
       <button
         onClick={this._handleAddDescription}
-        className="btn btn--outlined btn--super-duper-compact">
+        className="btn btn--outlined btn--super-duper-compact"
+      >
         Add Description
       </button>
     );
@@ -402,7 +404,8 @@ class RequestSettingsModal extends PureComponent<Props, State> {
             </HelpTooltip>
             <select
               value={activeWorkspaceIdToCopyTo || '__NULL__'}
-              onChange={this._handleUpdateMoveCopyWorkspace}>
+              onChange={this._handleUpdateMoveCopyWorkspace}
+            >
               <option value="__NULL__">-- Select Workspace --</option>
               {workspaces.map(w => {
                 if (workspace && workspace._id === w._id) {
@@ -422,7 +425,8 @@ class RequestSettingsModal extends PureComponent<Props, State> {
           <button
             disabled={justCopied || !activeWorkspaceIdToCopyTo}
             className="btn btn--clicky"
-            onClick={this._handleCopyToWorkspace}>
+            onClick={this._handleCopyToWorkspace}
+          >
             {justCopied ? 'Copied!' : 'Copy'}
           </button>
         </div>
@@ -430,7 +434,8 @@ class RequestSettingsModal extends PureComponent<Props, State> {
           <button
             disabled={justMoved || !activeWorkspaceIdToCopyTo}
             className="btn btn--clicky"
-            onClick={this._handleMoveToWorkspace}>
+            onClick={this._handleMoveToWorkspace}
+          >
             {justMoved ? 'Moved!' : 'Move'}
           </button>
         </div>

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

@@ -412,7 +412,8 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
         <Modal
           ref={this._setModalRef}
           dontFocus={!disableInput}
-          className={isModalVisible ? '' : 'hide'}>
+          className={isModalVisible ? '' : 'hide'}
+        >
           <ModalHeader hideCloseButton>
             {title || (
               <Fragment>
@@ -505,7 +506,8 @@ class RequestSwitcherModal extends PureComponent<Props, State> {
                 {workspace ? <button
                   className="btn btn--outlined btn--compact"
                   disabled={!searchString}
-                  onClick={this._activateCurrentIndex}>
+                  onClick={this._activateCurrentIndex}
+                >
                   Create a request named {searchString}
                 </button> : null}
               </div>

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

@@ -58,7 +58,8 @@ class ResponseDebugModal extends PureComponent<Props, State> {
             style={{
               display: 'grid',
             }}
-            className="tall">
+            className="tall"
+          >
             {response ? (
               <ResponseTimelineViewer
                 editorFontSize={settings.editorFontSize}

packages/insomnia-app/app/ui/components/modals/space-settings-modal.tsx

@@ -77,7 +77,8 @@ class SpaceSettingsModal extends PureComponent<Props> {
             <PromptButton
               onClick={this._handleRemoveSpace}
               addIcon
-              className="width-auto btn btn--clicky inline-block">
+              className="width-auto btn btn--clicky inline-block"
+            >
               <i className="fa fa-trash-o" /> Delete
             </PromptButton>
           </div>

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

@@ -226,7 +226,8 @@ class SyncBranchesModal extends PureComponent<Props, State> {
                       <span
                         className={classnames({
                           bold: name === currentBranch,
-                        })}>
+                        })}
+                      >
                         {name}
                       </span>
                       {name === currentBranch ? (
@@ -239,20 +240,23 @@ class SyncBranchesModal extends PureComponent<Props, State> {
                         className="btn btn--micro btn--outlined space-left"
                         doneMessage="Merged"
                         disabled={name === currentBranch}
-                        onClick={() => this._handleMerge(name)}>
+                        onClick={() => this._handleMerge(name)}
+                      >
                         Merge
                       </PromptButton>
                       <PromptButton
                         className="btn btn--micro btn--outlined space-left"
                         doneMessage="Deleted"
                         disabled={name === currentBranch || name === 'master'}
-                        onClick={() => this._handleDelete(name)}>
+                        onClick={() => this._handleDelete(name)}
+                      >
                         Delete
                       </PromptButton>
                       <button
                         className="btn btn--micro btn--outlined space-left"
                         disabled={name === currentBranch}
-                        onClick={() => this._handleCheckout(name)}>
+                        onClick={() => this._handleCheckout(name)}
+                      >
                         Checkout
                       </button>
                     </td>
@@ -284,7 +288,8 @@ class SyncBranchesModal extends PureComponent<Props, State> {
                             className="btn btn--micro btn--outlined space-left"
                             doneMessage="Deleted"
                             disabled={name === currentBranch}
-                            onClick={() => this._handleRemoteDelete(name)}>
+                            onClick={() => this._handleRemoteDelete(name)}
+                          >
                             Delete
                           </PromptButton>
                         )}
@@ -294,7 +299,8 @@ class SyncBranchesModal extends PureComponent<Props, State> {
                           space={space}
                           onPull={this.refreshState}
                           disabled={name === currentBranch}
-                          vcs={vcs}>
+                          vcs={vcs}
+                        >
                           Fetch
                         </SyncPullButton>
                       </td>

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

@@ -87,7 +87,8 @@ class SyncDeleteModal extends PureComponent<Props, State> {
       <strong
         style={{
           whiteSpace: 'pre-wrap',
-        }}>
+        }}
+      >
         {workspace.name}
       </strong>
     );

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

@@ -139,7 +139,8 @@ class SyncHistoryModal extends PureComponent<Props, State> {
                   <td className="text-right">
                     <PromptButton
                       className="btn btn--micro btn--outlined"
-                      onClick={() => this._handleClickRollback(snapshot)}>
+                      onClick={() => this._handleClickRollback(snapshot)}
+                    >
                       Restore
                     </PromptButton>
                   </td>

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

@@ -81,7 +81,8 @@ class SyncMergeModal extends PureComponent<Props, State> {
                 <th
                   style={{
                     width: '10rem',
-                  }}>
+                  }}
+                >
                   Choose
                 </th>
               </tr>

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

@@ -461,7 +461,8 @@ class WorkspaceEnvironmentsEditModal extends PureComponent<Props, State> {
             <li
               className={classnames('env-modal__sidebar-root-item', {
                 'env-modal__sidebar-item--active': selectedEnvironment === rootEnvironment,
-              })}>
+              })}
+            >
               <Button onClick={this._handleShowEnvironment} value={rootEnvironment}>
                 {ROOT_ENVIRONMENT_NAME}
                 <HelpTooltip className="space-left">
@@ -483,7 +484,8 @@ class WorkspaceEnvironmentsEditModal extends PureComponent<Props, State> {
                 <DropdownItem
                   onClick={this._handleAddEnvironment}
                   value={true}
-                  title="Environment will not be exported or synced">
+                  title="Environment will not be exported or synced"
+                >
                   <i className="fa fa-eye-slash" /> Private Environment
                 </DropdownItem>
               </Dropdown>
@@ -556,7 +558,8 @@ class WorkspaceEnvironmentsEditModal extends PureComponent<Props, State> {
                     <DropdownItem
                       value={selectedEnvironment}
                       onClick={this.unsetColor}
-                      disabled={!selectedEnvironment.color}>
+                      disabled={!selectedEnvironment.color}
+                    >
                       <i className="fa fa-minus-circle" />
                       Unset Color
                     </DropdownItem>
@@ -565,14 +568,16 @@ class WorkspaceEnvironmentsEditModal extends PureComponent<Props, State> {
                   <Button
                     value={selectedEnvironment}
                     onClick={this._handleDuplicateEnvironment}
-                    className="btn btn--clicky space-right">
+                    className="btn btn--clicky space-right"
+                  >
                     <i className="fa fa-copy" /> Duplicate
                   </Button>
 
                   <PromptButton
                     value={selectedEnvironment}
                     onClick={this._handleDeleteEnvironment}
-                    className="btn btn--clicky">
+                    className="btn btn--clicky"
+                  >
                     <i className="fa fa-trash-o" />
                   </PromptButton>
                 </Fragment>

packages/insomnia-app/app/ui/components/modals/workspace-settings-modal.tsx

@@ -246,7 +246,8 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
             <button
               className="btn btn--super-compact width-auto"
               title="Enable or disable certificate"
-              onClick={() => WorkspaceSettingsModal._handleToggleCertificate(certificate)}>
+              onClick={() => WorkspaceSettingsModal._handleToggleCertificate(certificate)}
+            >
               {certificate.disabled ? (
                 <i className="fa fa-square-o" />
               ) : (
@@ -257,7 +258,8 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
               className="btn btn--super-compact width-auto"
               confirmMessage=""
               addIcon
-              onClick={() => WorkspaceSettingsModal._handleDeleteCertificate(certificate)}>
+              onClick={() => WorkspaceSettingsModal._handleDeleteCertificate(certificate)}
+            >
               <i className="fa fa-trash-o" />
             </PromptButton>
           </div>
@@ -336,7 +338,8 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
               ) : (
                 <button
                   onClick={this._handleAddDescription}
-                  className="btn btn--outlined btn--super-duper-compact">
+                  className="btn btn--outlined btn--super-duper-compact"
+                >
                   Add Description
                 </button>
               )}
@@ -346,18 +349,21 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
               <PromptButton
                 onClick={this._handleRemoveWorkspace}
                 addIcon
-                className="width-auto btn btn--clicky inline-block">
+                className="width-auto btn btn--clicky inline-block"
+              >
                 <i className="fa fa-trash-o" /> Delete
               </PromptButton>
               <button
                 onClick={this._handleDuplicateWorkspace}
-                className="width-auto btn btn--clicky inline-block space-left">
+                className="width-auto btn btn--clicky inline-block space-left"
+              >
                 <i className="fa fa-copy" /> Duplicate
               </button>
               <PromptButton
                 onClick={this._handleClearAllResponses}
                 addIcon
-                className="width-auto btn btn--clicky inline-block space-left">
+                className="width-auto btn btn--clicky inline-block space-left"
+              >
                 <i className="fa fa-trash-o" /> Clear All Responses
               </PromptButton>
             </div>
@@ -390,7 +396,8 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
                 <div className="text-center">
                   <button
                     className="btn btn--clicky auto"
-                    onClick={this._handleToggleCertificateForm}>
+                    onClick={this._handleToggleCertificateForm}
+                  >
                     New Certificate
                   </button>
                 </div>
@@ -486,7 +493,8 @@ class WorkspaceSettingsModal extends PureComponent<Props, State> {
                   <button
                     type="button"
                     className="btn btn--super-compact space-right"
-                    onClick={this._handleToggleCertificateForm}>
+                    onClick={this._handleToggleCertificateForm}
+                  >
                     Cancel
                   </button>
                   <button className="btn btn--clicky space-right" type="submit">

packages/insomnia-app/app/ui/components/page-layout.tsx

@@ -100,7 +100,8 @@ class PageLayout extends PureComponent<Props> {
             settings.environmentHighlightColorStyle === 'window-right'
               ? '5px solid ' + activeEnvironment.color
               : undefined,
-        }}>
+        }}
+      >
         {renderPageHeader && <ErrorBoundary showAlert>{renderPageHeader()}</ErrorBoundary>}
 
         {renderPageSidebar && (
@@ -121,7 +122,8 @@ class PageLayout extends PureComponent<Props> {
               unseenWorkspaces={unseenWorkspaces}
               gitVCS={gitVCS}
               width={sidebarWidth}
-              workspaces={workspaces}>
+              workspaces={workspaces}
+            >
               {renderPageSidebar()}
             </Sidebar>
 

packages/insomnia-app/app/ui/components/panes/placeholder-request-pane.tsx

@@ -34,7 +34,8 @@ const PlaceholderRequestPane: FC<Props> = ({
                   <code>
                     <Hotkey
                       keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_SHOW_CREATE.id]}
-                      useFallbackMessage />
+                      useFallbackMessage
+                    />
                   </code>
                 </td>
               </tr>
@@ -44,7 +45,8 @@ const PlaceholderRequestPane: FC<Props> = ({
                   <code>
                     <Hotkey
                       keyBindings={hotKeyRegistry[hotKeyRefs.REQUEST_QUICK_SWITCH.id]}
-                      useFallbackMessage />
+                      useFallbackMessage
+                    />
                   </code>
                 </td>
               </tr>
@@ -54,7 +56,8 @@ const PlaceholderRequestPane: FC<Props> = ({
                   <code>
                     <Hotkey
                       keyBindings={hotKeyRegistry[hotKeyRefs.ENVIRONMENT_SHOW_EDITOR.id]}
-                      useFallbackMessage />
+                      useFallbackMessage
+                    />
                   </code>
                 </td>
               </tr>

packages/insomnia-app/app/ui/components/panes/request-pane.tsx

@@ -205,7 +205,8 @@ class RequestPane extends PureComponent<Props> {
                 onChange={updateRequestMimeType}
                 contentType={request.body.mimeType}
                 request={request}
-                className="tall">
+                className="tall"
+              >
                 {typeof request.body.mimeType === 'string'
                   ? getContentTypeName(request.body.mimeType)
                   : 'Body'}
@@ -217,7 +218,8 @@ class RequestPane extends PureComponent<Props> {
               <AuthDropdown
                 onChange={updateRequestAuthentication}
                 request={request}
-                className="tall">
+                className="tall"
+              >
                 {getAuthTypeName(request.authentication.type) || 'Auth'}
                 <i className="fa fa-caret-down space-left" />
               </AuthDropdown>
@@ -283,7 +285,8 @@ class RequestPane extends PureComponent<Props> {
               <code className="txt-sm block faint">
                 <ErrorBoundary
                   key={uniqueKey}
-                  errorClassName="tall wide vertically-align font-error pad text-center">
+                  errorClassName="tall wide vertically-align font-error pad text-center"
+                >
                   <RenderedQueryString handleRender={handleRender} request={request} />
                 </ErrorBoundary>
               </code>
@@ -291,7 +294,8 @@ class RequestPane extends PureComponent<Props> {
             <div className="query-editor__editor">
               <ErrorBoundary
                 key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center">
+                errorClassName="tall wide vertically-align font-error pad text-center"
+              >
                 <RequestParametersEditor
                   key={headerEditorKey}
                   handleRender={handleRender}
@@ -311,12 +315,14 @@ class RequestPane extends PureComponent<Props> {
               <button
                 className="margin-top-sm btn btn--clicky"
                 title={urlHasQueryParameters ? 'Import querystring' : 'No query params to import'}
-                onClick={this._handleImportQueryFromUrl}>
+                onClick={this._handleImportQueryFromUrl}
+              >
                 Import from URL
               </button>
               <button
                 className="margin-top-sm btn btn--clicky space-left"
-                onClick={this._handleUpdateSettingsUseBulkParametersEditor}>
+                onClick={this._handleUpdateSettingsUseBulkParametersEditor}
+              >
                 {settings.useBulkParametersEditor ? 'Regular Edit' : 'Bulk Edit'}
               </button>
             </div>
@@ -341,7 +347,8 @@ class RequestPane extends PureComponent<Props> {
             <div className="pad-right text-right">
               <button
                 className="margin-top-sm btn btn--clicky"
-                onClick={this._handleUpdateSettingsUseBulkHeaderEditor}>
+                onClick={this._handleUpdateSettingsUseBulkHeaderEditor}
+              >
                 {settings.useBulkHeaderEditor ? 'Regular Edit' : 'Bulk Edit'}
               </button>
             </div>
@@ -382,7 +389,8 @@ class RequestPane extends PureComponent<Props> {
                   <br />
                   <button
                     className="btn btn--clicky faint"
-                    onClick={this._handleEditDescriptionAdd}>
+                    onClick={this._handleEditDescriptionAdd}
+                  >
                     Add Description
                   </button>
                 </p>

packages/insomnia-app/app/ui/components/panes/response-pane.tsx

@@ -247,7 +247,8 @@ class ResponsePane extends PureComponent<Props> {
         <Tabs
           className={classnames(paneBodyClasses, 'react-tabs')}
           onSelect={this._handleTabSelect}
-          forceRenderTabPanel>
+          forceRenderTabPanel
+        >
           <TabList>
             <Tab tabIndex="-1">
               <PreviewModeDropdown

packages/insomnia-app/app/ui/components/proto-file/proto-directory-list-item.tsx

@@ -31,7 +31,8 @@ const ProtoDirectoryListItem: FunctionComponent<Props> = ({ dir, indentLevel, ha
             variant="text"
             title="Delete Directory"
             onClick={handleDeleteCallback}
-            bg="danger">
+            bg="danger"
+          >
             <i className="fa fa-trash-o" />
           </Button>
         </div>

packages/insomnia-app/app/ui/components/proto-file/proto-file-list-item.tsx

@@ -61,7 +61,8 @@ const ProtoFileListItem: FunctionComponent<Props> = ({
       selectable
       isSelected={isSelected}
       onClick={handleSelectCallback}
-      indentLevel={indentLevel}>
+      indentLevel={indentLevel}
+    >
       {isReadOnly && (
         <span className="wide">
           <i className="fa fa-file-o pad-right-sm" />
@@ -80,14 +81,16 @@ const ProtoFileListItem: FunctionComponent<Props> = ({
               title="Re-upload Proto File"
               onClick={handleUpdateCallback}
               loadingNode={spinner}
-              className="space-right">
+              className="space-right"
+            >
               <i className="fa fa-upload" />
             </AsyncButton>
             <Button
               variant="text"
               title="Delete Proto File"
               bg="danger"
-              onClick={handleDeleteCallback}>
+              onClick={handleDeleteCallback}
+            >
               <i className="fa fa-trash-o" />
             </Button>
           </div>

packages/insomnia-app/app/ui/components/rendered-query-string.tsx

@@ -91,7 +91,8 @@ class RenderedQueryString extends PureComponent<Props, State> {
           content={this.state.string}
           className="pull-right"
           title="Copy URL"
-          confirmMessage="">
+          confirmMessage=""
+        >
           <i className="fa fa-copy" />
         </CopyButton>
         {inner}

packages/insomnia-app/app/ui/components/rendered-text.tsx

@@ -51,7 +51,8 @@ class RenderedText extends PureComponent<Props, State> {
           style={{
             fontSize: '0.9em',
             fontStyle: 'italic',
-          }}>
+          }}
+        >
           {this.state.error || 'Unknown Error'}
         </span>
       );

packages/insomnia-app/app/ui/components/request-url-bar.tsx

@@ -282,7 +282,8 @@ class RequestUrlBar extends PureComponent<Props, State> {
           type="button"
           key="cancel-interval"
           className="urlbar__send-btn danger"
-          onClick={this._handleStopInterval}>
+          onClick={this._handleStopInterval}
+        >
           Stop
         </button>
       );
@@ -292,7 +293,8 @@ class RequestUrlBar extends PureComponent<Props, State> {
           type="button"
           key="cancel-timeout"
           className="urlbar__send-btn danger"
-          onClick={this._handleStopTimeout}>
+          onClick={this._handleStopTimeout}
+        >
           Cancel
         </button>
       );
@@ -306,7 +308,8 @@ class RequestUrlBar extends PureComponent<Props, State> {
           <DropdownButton
             className="urlbar__send-btn"
             onContextMenu={this._handleMetaClickSend}
-            onClick={this._handleClickSend}>
+            onClick={this._handleClickSend}
+          >
             {downloadPath ? 'Download' : 'Send'}
           </DropdownButton>
           <DropdownDivider>Basic</DropdownDivider>
@@ -329,7 +332,8 @@ class RequestUrlBar extends PureComponent<Props, State> {
               stayOpenAfterClick
               addIcon
               buttonClass={PromptButton}
-              onClick={this._handleClearDownloadLocation}>
+              onClick={this._handleClearDownloadLocation}
+            >
               <i className="fa fa-stop-circle" /> Stop Auto-Download
             </DropdownItem>
           ) : (
@@ -364,7 +368,8 @@ class RequestUrlBar extends PureComponent<Props, State> {
           <MethodDropdown
             ref={this._setMethodDropdownRef}
             onChange={this._handleMethodChange}
-            method={method}>
+            method={method}
+          >
             {method} <i className="fa fa-caret-down" />
           </MethodDropdown>
           <form onSubmit={this._handleFormSubmit}>

packages/insomnia-app/app/ui/components/settings/account.tsx

@@ -145,7 +145,8 @@ class Account extends PureComponent<{}, State> {
             <Link
               button
               className="margin-left-sm btn btn--clicky"
-              href="https://insomnia.rest/pricing">
+              href="https://insomnia.rest/pricing"
+            >
               Plus for Teams <i className="fa fa-external-link" />
             </Link>
           </div>
@@ -187,7 +188,8 @@ class Account extends PureComponent<{}, State> {
           </PromptButton>
           <button
             className="space-left btn btn--clicky"
-            onClick={this._handleShowChangePasswordForm}>
+            onClick={this._handleShowChangePasswordForm}
+          >
             Change Password
           </button>
         </div>
@@ -243,7 +245,8 @@ class Account extends PureComponent<{}, State> {
                 <button
                   type="submit"
                   className="btn btn--clicky"
-                  disabled={!code || !password || password !== password2}>
+                  disabled={!code || !password || password !== password2}
+                >
                   Submit Change
                 </button>
               </div>

packages/insomnia-app/app/ui/components/settings/general.tsx

@@ -239,7 +239,8 @@ class General extends PureComponent<Props, State> {
                 defaultValue={settings.environmentHighlightColorStyle}
                 name="environmentHighlightColorStyle"
                 // @ts-expect-error -- TSCONVERSION
-                onChange={this._handleUpdateSetting}>
+                onChange={this._handleUpdateSetting}
+              >
                 <option value="sidebar-indicator">Sidebar indicator</option>
                 <option value="sidebar-edge">Sidebar edge</option>
                 <option value="window-top">Window top</option>
@@ -280,7 +281,8 @@ class General extends PureComponent<Props, State> {
                   name="fontInterface"
                   value={settings.fontInterface || '__NULL__'}
                   // @ts-expect-error -- TSCONVERSION
-                  onChange={this._handleFontChange}>
+                  onChange={this._handleFontChange}
+                >
                   <option value="__NULL__">-- System Default --</option>
                   {fonts.map((item, index) => (
                     <option key={index} value={item.family}>
@@ -311,7 +313,8 @@ class General extends PureComponent<Props, State> {
                   name="fontMonospace"
                   value={settings.fontMonospace || '__NULL__'}
                   // @ts-expect-error -- TSCONVERSION
-                  onChange={this._handleFontChange}>
+                  onChange={this._handleFontChange}
+                >
                   <option value="__NULL__">-- System Default --</option>
                   {fontsMono.map((item, index) => (
                     <option key={index} value={item.family}>
@@ -351,7 +354,8 @@ class General extends PureComponent<Props, State> {
                 defaultValue={settings.editorKeyMap}
                 name="editorKeyMap"
                 // @ts-expect-error -- TSCONVERSION
-                onChange={this._handleUpdateSetting}>
+                onChange={this._handleUpdateSetting}
+              >
                 <option value={EDITOR_KEY_MAP_DEFAULT}>Default</option>
                 <option value={EDITOR_KEY_MAP_VIM}>Vim</option>
                 <option value={EDITOR_KEY_MAP_EMACS}>Emacs</option>
@@ -460,7 +464,8 @@ class General extends PureComponent<Props, State> {
             style={{
               padding: 0,
             }}
-            onClick={initNewOAuthSession}>
+            onClick={initNewOAuthSession}
+          >
             Clear OAuth 2 session
           </button>
         </div>
@@ -475,7 +480,8 @@ class General extends PureComponent<Props, State> {
               maxWidth: '20rem',
               // @ts-expect-error -- TSCONVERSION
               lineWrap: 'word',
-            }}>
+            }}
+          >
             Enable global network proxy. Supports authentication via Basic Auth, digest, or NTLM
           </HelpTooltip>
         </h2>
@@ -525,7 +531,8 @@ class General extends PureComponent<Props, State> {
                   value={settings.updateChannel}
                   name="updateChannel"
                   // @ts-expect-error -- TSCONVERSION
-                  onChange={this._handleUpdateSetting}>
+                  onChange={this._handleUpdateSetting}
+                >
                   <option value={UPDATE_CHANNEL_STABLE}>Release (Recommended)</option>
                   <option value={UPDATE_CHANNEL_BETA}>Early Access (Beta)</option>
                 </select>

packages/insomnia-app/app/ui/components/settings/plugins.tsx

@@ -242,7 +242,8 @@ class Plugins extends PureComponent<Props, State> {
                     <td
                       style={{
                         width: '4rem',
-                      }}>
+                      }}
+                    >
                       {this.renderToggleSwitch(plugin)}
                     </td>
                     <td>
@@ -261,18 +262,21 @@ class Plugins extends PureComponent<Props, State> {
                       className="no-wrap"
                       style={{
                         width: '10rem',
-                      }}>
+                      }}
+                    >
                       <CopyButton
                         size="small"
                         variant="contained"
                         title={plugin.directory}
-                        content={plugin.directory}>
+                        content={plugin.directory}
+                      >
                         Copy Path
                       </CopyButton>{' '}
                       <Button
                         size="small"
                         variant="contained"
-                        onClick={Plugins._handleOpenDirectory.bind(this, plugin.directory)}>
+                        onClick={Plugins._handleOpenDirectory.bind(this, plugin.directory)}
+                      >
                         Reveal Folder
                       </Button>
                     </td>
@@ -332,7 +336,8 @@ class Plugins extends PureComponent<Props, State> {
           <Button
             disabled={isRefreshingPlugins}
             className="space-left"
-            onClick={this._handleClickRefreshPlugins}>
+            onClick={this._handleClickRefreshPlugins}
+          >
             Reload Plugins
             {isRefreshingPlugins && <i className="fa fa-refresh fa-spin space-left" />}
           </Button>

packages/insomnia-app/app/ui/components/settings/shortcuts.tsx

@@ -141,7 +141,8 @@ class Shortcuts extends PureComponent<Props> {
                       keyComb: keyComb,
                     }}
                     buttonClass={PromptButton}
-                    onClick={this.handleRemoveKeyCombination}>
+                    onClick={this.handleRemoveKeyCombination}
+                  >
                     <i className="fa fa-trash-o" /> {display}
                   </DropdownItem>
                 );
@@ -153,7 +154,8 @@ class Shortcuts extends PureComponent<Props> {
               <DropdownItem
                 value={def.id}
                 buttonClass={PromptButton}
-                onClick={this.handleResetKeyBindings}>
+                onClick={this.handleResetKeyBindings}
+              >
                 <i className="fa fa-empty" /> Reset keyboard shortcuts
               </DropdownItem>
             )}

packages/insomnia-app/app/ui/components/sidebar/sidebar-children.tsx

@@ -166,7 +166,8 @@ class UnconnectedSidebarChildren extends PureComponent<Props> {
     return (
       <ul
         className="sidebar__list sidebar__list-root theme--sidebar__list"
-        onContextMenu={this._handleContextMenu}>
+        onContextMenu={this._handleContextMenu}
+      >
         {this._renderChildren(children, pinnedList)}
       </ul>
     );

packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx

@@ -127,7 +127,8 @@ class UnconnectedSidebarRequestGroupRow extends PureComponent<Props, State> {
               ref={this.expandTagRef}
               className={classnames('sidebar__expand', {
                 'sidebar__expand-hint': isDraggingOver && isCollapsed,
-              })}>
+              })}
+            >
               <div className="tag tag--no-bg tag--small">
                 <span className="tag__inner">OPEN</span>
               </div>
@@ -141,7 +142,8 @@ class UnconnectedSidebarRequestGroupRow extends PureComponent<Props, State> {
         <div
           className={classnames('sidebar__item sidebar__item--big', {
             'sidebar__item--active': isActive,
-          })}>
+          })}
+        >
           {button}
           <div className="sidebar__actions">
             <RequestGroupActionsDropdown
@@ -160,7 +162,8 @@ class UnconnectedSidebarRequestGroupRow extends PureComponent<Props, State> {
         <ul
           className={classnames('sidebar__list', {
             'sidebar__list--collapsed': isCollapsed,
-          })}>
+          })}
+        >
           {!isCollapsed && React.Children.count(children) > 0 ? (
             children
           ) : (

packages/insomnia-app/app/ui/components/sidebar/sidebar-request-row.tsx

@@ -242,11 +242,13 @@ class UnconnectedSidebarRequestRow extends PureComponent<Props, State> {
           <div
             className={classnames('sidebar__item', 'sidebar__item--request', {
               'sidebar__item--active': isActive,
-            })}>
+            })}
+          >
             <button
               className="wide"
               onClick={this._handleRequestActivate}
-              onContextMenu={this._handleShowRequestActions}>
+              onContextMenu={this._handleShowRequestActions}
+            >
               <div className="sidebar__clickable">
                 {methodTag}
                 <Editable

packages/insomnia-app/app/ui/components/sidebar/sidebar.tsx

@@ -49,7 +49,8 @@ class Sidebar extends PureComponent<Props> {
             environmentHighlightColorStyle === 'sidebar-edge'
               ? '5px solid ' + activeEnvironment.color
               : undefined,
-        }}>
+        }}
+      >
         {children}
       </aside>
     );

packages/insomnia-app/app/ui/components/tags/grpc-status-tag.tsx

@@ -20,7 +20,8 @@ class GrpcStatusTag extends PureComponent<Props> {
       <div
         className={classnames('tag', colorClass, {
           'tag--small': small,
-        })}>
+        })}
+      >
         <Tooltip message={message} position="bottom" delay={tooltipDelay}>
           <strong>{statusCode} </strong>
           {message}

packages/insomnia-app/app/ui/components/tags/grpc-tag.tsx

@@ -4,7 +4,8 @@ const GrpcTag = () => (
   <div
     style={{
       position: 'relative',
-    }}>
+    }}
+  >
     <div className="tag tag--no-bg tag--small method-grpc">
       <span className="tag__inner">gRPC</span>
     </div>

packages/insomnia-app/app/ui/components/tags/method-tag.tsx

@@ -23,14 +23,16 @@ class MethodTag extends PureComponent<Props> {
       <div
         style={{
           position: 'relative',
-        }}>
+        }}
+      >
         {overrideName && (
           <div className={'tag tag--no-bg tag--superscript http-method-' + method}>
             <span>{methodName}</span>
           </div>
         )}
         <div
-          className={'tag tag--no-bg tag--small http-method-' + (overrideName ? override : method)}>
+          className={'tag tag--no-bg tag--small http-method-' + (overrideName ? override : method)}
+        >
           <span className="tag__inner">{overrideName || methodName}</span>
         </div>
       </div>

packages/insomnia-app/app/ui/components/tags/size-tag.tsx

@@ -42,7 +42,8 @@ class SizeTag extends PureComponent<Props> {
             'tag--small': small,
           },
           className,
-        )}>
+        )}
+      >
         <Tooltip message={message} position="bottom" delay={tooltipDelay}>
           {responseSizeReadStringShort}
         </Tooltip>

packages/insomnia-app/app/ui/components/tags/status-tag.tsx

@@ -55,7 +55,8 @@ class StatusTag extends PureComponent<Props> {
       <div
         className={classnames('tag', colorClass, {
           'tag--small': small,
-        })}>
+        })}
+      >
         <Tooltip message={description} position="bottom" delay={tooltipDelay}>
           <strong>{statusCodeToDisplay}</strong>{' '}
           {statusMessage || RESPONSE_CODE_REASONS[statusCode]}

packages/insomnia-app/app/ui/components/tags/time-tag.tsx

@@ -42,7 +42,8 @@ class TimeTag extends PureComponent<Props> {
             'tag--small': small,
           },
           className,
-        )}>
+        )}
+      >
         <Tooltip message={description} position="bottom" delay={tooltipDelay}>
           {number}&nbsp;{unit}
         </Tooltip>

packages/insomnia-app/app/ui/components/tags/url-tag.tsx

@@ -30,7 +30,8 @@ class URLTag extends PureComponent<Props> {
             'tag--small': small,
           },
           className,
-        )}>
+        )}
+      >
         <Tooltip wide message={url} position="bottom" delay={tooltipDelay}>
           <strong>{method || 'URL'}</strong> {shortUrl}
         </Tooltip>

packages/insomnia-app/app/ui/components/templating/tag-editor.tsx

@@ -664,7 +664,8 @@ class TagEditor extends PureComponent<Props, State> {
           <div
             className={classnames('form-control form-control--outlined width-auto', {
               'form-control--no-label': argDefinition.type !== 'boolean',
-            })}>
+            })}
+          >
             <Dropdown right>
               <DropdownButton className="btn btn--clicky">
                 <i className="fa fa-gear" />
@@ -675,7 +676,8 @@ class TagEditor extends PureComponent<Props, State> {
                   variable: false,
                   argIndex,
                 }}
-                onClick={this._handleChangeArgVariable}>
+                onClick={this._handleChangeArgVariable}
+              >
                 <i className={'fa ' + (isVariable ? '' : 'fa-check')} /> Static Value
               </DropdownItem>
               <DropdownItem
@@ -683,7 +685,8 @@ class TagEditor extends PureComponent<Props, State> {
                   variable: true,
                   argIndex,
                 }}
-                onClick={this._handleChangeArgVariable}>
+                onClick={this._handleChangeArgVariable}
+              >
                 <i className={'fa ' + (isVariable ? 'fa-check' : '')} /> Environment Variable
               </DropdownItem>
             </Dropdown>
@@ -712,7 +715,8 @@ class TagEditor extends PureComponent<Props, State> {
         key={name}
         className="btn btn--clicky btn--largest"
         type="button"
-        onClick={() => this._handleActionClick(action)}>
+        onClick={() => this._handleActionClick(action)}
+      >
         {icon}
         {name}
       </button>
@@ -752,7 +756,8 @@ class TagEditor extends PureComponent<Props, State> {
             <select
               ref={this._setSelectRef}
               onChange={this._handleChangeTag}
-              value={activeTagDefinition ? activeTagDefinition.name : ''}>
+              value={activeTagDefinition ? activeTagDefinition.name : ''}
+            >
               {this.state.tagDefinitions.map((tagDefinition, i) => (
                 <option key={`${i}::${tagDefinition.name}`} value={tagDefinition.name}>
                   {tagDefinition.displayName} – {tagDefinition.description}
@@ -791,7 +796,8 @@ class TagEditor extends PureComponent<Props, State> {
                 position: 'relative',
               }}
               className="txt-sm pull-right icon inline-block"
-              onClick={this._handleRefresh}>
+              onClick={this._handleRefresh}
+            >
               refresh{' '}
               <i
                 className={classnames('fa fa-refresh', {

packages/insomnia-app/app/ui/components/toast.tsx

@@ -217,7 +217,8 @@ class Toast extends PureComponent<{}, State> {
       <div
         className={classnames('toast theme--dialog', {
           'toast--show': visible,
-        })}>
+        })}
+      >
         <StyledLogo>
           <img src={imgSrcCore} alt={appName} />
         </StyledLogo>
@@ -226,7 +227,8 @@ class Toast extends PureComponent<{}, State> {
           <StyledFooter>
             <button
               className="btn btn--super-duper-compact btn--outlined"
-              onClick={this._handleCancelClick}>
+              onClick={this._handleCancelClick}
+            >
               Dismiss
             </button>
             &nbsp;&nbsp;
@@ -234,7 +236,8 @@ class Toast extends PureComponent<{}, State> {
               button
               className="btn btn--super-duper-compact btn--outlined no-wrap"
               onClick={this._handlePostCTACleanup}
-              href={notification.url}>
+              href={notification.url}
+            >
               {notification.cta}
             </Link>
           </StyledFooter>

packages/insomnia-app/app/ui/components/tooltip.tsx

@@ -190,14 +190,16 @@ class Tooltip extends PureComponent<Props, State> {
         ref={this._setTooltipRef}
         id={this._id}
         onMouseEnter={this._handleMouseEnter}
-        onMouseLeave={this._handleMouseLeave}>
+        onMouseLeave={this._handleMouseLeave}
+      >
         <div
           className={bubbleClasses}
           onClick={this._handleStopClick}
           role="tooltip"
           aria-hidden={!visible}
           aria-describedby={this._id}
-          ref={this._setBubbleRef}>
+          ref={this._setBubbleRef}
+        >
           {message}
         </div>
         {children}

packages/insomnia-app/app/ui/components/viewers/grpc-tabbed-messages.tsx

@@ -68,14 +68,16 @@ const GrpcTabbedMessages: FunctionComponent<Props> = ({
             {handleStream && (
               <Button
                 className="btn btn--compact btn--clicky margin-sm bg-default"
-                onClick={handleStream}>
+                onClick={handleStream}
+              >
                 Stream <i className="fa fa-plus" />
               </Button>
             )}
             {handleCommit && (
               <Button
                 className="btn btn--compact btn--clicky margin-sm bg-surprise"
-                onClick={handleCommit}>
+                onClick={handleCommit}
+              >
                 Commit <i className="fa fa-arrow-right" />
               </Button>
             )}

packages/insomnia-app/app/ui/components/viewers/response-error.tsx

@@ -40,7 +40,8 @@ class ResponseError extends PureComponent<Props> {
           className="selectable pad force-pre-wrap"
           style={{
             fontSize: `${fontSize}px`,
-          }}>
+          }}
+        >
           {error}
         </pre>
         <hr />
@@ -51,7 +52,8 @@ class ResponseError extends PureComponent<Props> {
           <Link
             button
             className="btn btn--clicky margin-top-sm"
-            href="https://insomnia.rest/support">
+            href="https://insomnia.rest/support"
+          >
             Contact Support
           </Link>
         </div>

packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.tsx

@@ -39,14 +39,16 @@ class ResponseHeadersViewer extends PureComponent<Props> {
                   style={{
                     width: '50%',
                   }}
-                  className="force-wrap">
+                  className="force-wrap"
+                >
                   {h.name}
                 </td>
                 <td
                   style={{
                     width: '50%',
                   }}
-                  className="force-wrap">
+                  className="force-wrap"
+                >
                   {validateURL(h.value) ? <Link href={h.value}>{h.value}</Link> : h.value}
                 </td>
               </tr>

packages/insomnia-app/app/ui/components/viewers/response-multipart.tsx

@@ -236,7 +236,8 @@ class ResponseMultipart extends PureComponent<Props, State> {
           className="pad monospace"
           style={{
             fontSize: editorFontSize,
-          }}>
+          }}
+        >
           Failed to parse multipart response: {error}
         </div>
       );
@@ -249,13 +250,15 @@ class ResponseMultipart extends PureComponent<Props, State> {
         style={{
           display: 'grid',
           gridTemplateRows: 'auto minmax(0, 1fr)',
-        }}>
+        }}
+      >
         <div
           className="pad-bottom-sm"
           style={{
             display: 'grid',
             gridTemplateColumns: 'minmax(0, 1fr) auto',
-          }}>
+          }}
+        >
           <div>
             <Dropdown wide>
               <DropdownButton className="btn btn--clicky">
@@ -263,7 +266,8 @@ class ResponseMultipart extends PureComponent<Props, State> {
                   style={{
                     minWidth: '200px',
                     display: 'inline-block',
-                  }}>
+                  }}
+                >
                   {selectedPart ? this._describePart(selectedPart) : 'Unknown'}
                 </div>
                 <i className="fa fa-caret-down fa--skinny space-left" />

packages/insomnia-app/app/ui/components/viewers/response-viewer.tsx

@@ -252,14 +252,16 @@ class ResponseViewer extends Component<Props, State> {
                 <button
                   onClick={this._handleDismissBlocker}
                   disabled={wayTooLarge}
-                  className=" inline-block btn btn--clicky margin-xs">
+                  className=" inline-block btn btn--clicky margin-xs"
+                >
                   Show Anyway
                 </button>
               </div>
               <div className="pad-top-sm">
                 <button
                   className="faint inline-block btn btn--super-compact"
-                  onClick={this._handleDisableBlocker}>
+                  onClick={this._handleDisableBlocker}
+                >
                   Always Show
                 </button>
               </div>

packages/insomnia-app/app/ui/components/wrapper-analytics.tsx

@@ -20,7 +20,8 @@ const WrapperAnalytics: FunctionComponent<Props> = ({ wrapperProps }) => {
     <OnboardingContainer
       wrapperProps={wrapperProps}
       header={'Welcome to ' + getAppLongName()}
-      subHeader={getAppSynopsis()}>
+      subHeader={getAppSynopsis()}
+    >
       <Analytics wrapperProps={wrapperProps} handleDone={navigateHome} />
     </OnboardingContainer>
   );

packages/insomnia-app/app/ui/components/wrapper-debug.tsx

@@ -73,7 +73,8 @@ class WrapperDebug extends PureComponent<Props> {
         workspaceMeta={activeWorkspaceMeta}
         space={activeSpace}
         vcs={vcs}
-        syncItems={syncItems} />;
+        syncItems={syncItems}
+      />;
     }
 
     const gitSync = design && gitSyncDropdown;

packages/insomnia-app/app/ui/components/wrapper-design.tsx

@@ -206,7 +206,8 @@ class WrapperDesign extends PureComponent<Props, State> {
                 can be previewed.
               </p>
             </div>
-          )}>
+          )}
+        >
           <SwaggerUI
             spec={swaggerUiSpec}
             supportedSubmitMethods={[
@@ -263,7 +264,8 @@ class WrapperDesign extends PureComponent<Props, State> {
               can be rendered.
             </p>
           </div>
-        )}>
+        )}
+      >
         <SpecEditorSidebar apiSpec={activeApiSpec} handleSetSelection={this._handleSetSelection} />
       </ErrorBoundary>
     );

packages/insomnia-app/app/ui/components/wrapper-migration.tsx

@@ -174,7 +174,8 @@ const Options = ({ start, cancel }: OptionsProps) => {
           size="medium"
           variant="contained"
           onClick={() => start(options)}
-          disabled={!canStart}>
+          disabled={!canStart}
+        >
           Start Migration
         </Button>
         <button key="cancel" className="btn btn--super-compact" onClick={cancel}>
@@ -298,7 +299,8 @@ const WrapperMigration: FunctionComponent<Props> = ({ wrapperProps }) => (
   <OnboardingContainer
     wrapperProps={wrapperProps}
     header="Migrate from Insomnia Designer"
-    subHeader="Insomnia Designer and Core are now Insomnia!">
+    subHeader="Insomnia Designer and Core are now Insomnia!"
+  >
     <MigrationBody />
   </OnboardingContainer>
 );

packages/insomnia-app/app/ui/components/wrapper-onboarding.tsx

@@ -157,7 +157,8 @@ class WrapperOnboarding extends PureComponent<Props, State> {
       <OnboardingContainer
         wrapperProps={this.props.wrapperProps}
         header={'Welcome to ' + getAppLongName()}
-        subHeader={getAppSynopsis()}>
+        subHeader={getAppSynopsis()}
+      >
         {stepBody}
       </OnboardingContainer>
     );

packages/insomnia-app/app/ui/components/wrapper-unit-test.tsx

@@ -431,7 +431,8 @@ class WrapperUnitTest extends PureComponent<Props, State> {
             onSubmit={this._handleChangeTestName.bind(this, unitTest)}
             value={unitTest.name}
           />
-        }>
+        }
+      >
         <CodeEditor
           dynamicHeight
           manualPrettify
@@ -484,7 +485,7 @@ class WrapperUnitTest extends PureComponent<Props, State> {
             disabled={testsRunning}
           >
             {testsRunning ? 'Running... ' : 'Run Tests'}
-            <i className="fa fa-play space-left"></i>
+            <i className="fa fa-play space-left" />
           </Button>
         </div>
         <ListGroup>{activeUnitTests.map(this.renderUnitTest)}</ListGroup>
@@ -510,7 +511,8 @@ class WrapperUnitTest extends PureComponent<Props, State> {
                 key={s._id}
                 className={classnames({
                   active: s._id === activeId,
-                })}>
+                })}
+              >
                 <button key={s._id} onClick={this._handleSetActiveUnitTestSuite.bind(this, s)}>
                   {s.name}
                 </button>
@@ -520,12 +522,14 @@ class WrapperUnitTest extends PureComponent<Props, State> {
                     <button className="unit-tests__sidebar__action">
                       <i className="fa fa-caret-down" />
                     </button>
-                  )}>
+                  )}
+                >
                   <DropdownItem
                     stayOpenAfterClick
                     onClick={this._handleRunTests}
                     // @ts-expect-error -- TSCONVERSION
-                    disabled={testsRunning}>
+                    disabled={testsRunning}
+                  >
                     {testsRunning ? 'Running... ' : 'Run Tests'}
                   </DropdownItem>
                   <DropdownItem onClick={this._handleDeleteUnitTestSuite.bind(this, s)}>

packages/insomnia-components/src/button/circle-button.stories.tsx

@@ -35,7 +35,8 @@ export const dimensions = () => {
       width={selectWidth()}
       height={selectHeight()}
       variant={select('Variant', ButtonVariantEnum, 'outlined')}
-      bg={select('Background', ButtonThemeEnum, 'default')}>
+      bg={select('Background', ButtonThemeEnum, 'default')}
+    >
       <SvgIcon icon={select('Icon', IconEnum, IconEnum.gear)} />
     </CircleButton>
   );

packages/insomnia-components/src/dropdown/dropdown-item.tsx

@@ -146,7 +146,8 @@ export class DropdownItem<T> extends PureComponent<DropdownItemProps<T>> {
         type="button"
         onClick={this._handleClick}
         disabled={disabled}
-        selected={selected}>
+        selected={selected}
+      >
         {icon && <StyledIconContainer>{icon}</StyledIconContainer>}
         {inner}
         {right && <StyledRightNode>{right}</StyledRightNode>}

packages/insomnia-components/src/dropdown/dropdown.stories.tsx

@@ -64,7 +64,8 @@ export const manyItems = () => {
         <Button>
           {numItems} Items <SvgIcon icon="chevron-down" />
         </Button>
-      )}>
+      )}
+    >
       {items}
     </Dropdown>
   );

packages/insomnia-components/src/dropdown/dropdown.tsx

@@ -548,7 +548,8 @@ export class Dropdown extends PureComponent<DropdownProps, State> {
           <div
             key="item"
             className={menuClasses}
-            aria-hidden={!open}>
+            aria-hidden={!open}
+          >
             {open && <StyledBackdrop className="theme--transparent-overlay" />}
             {open && (
               <StyledMenu
@@ -576,7 +577,8 @@ export class Dropdown extends PureComponent<DropdownProps, State> {
                 <ul
                   className={classnames({
                     hide: noResults,
-                  })}>
+                  })}
+                >
                   {dropdownItems}
                 </ul>
               </StyledMenu>

packages/insomnia-components/src/list-group/list-group.stories.tsx

@@ -13,7 +13,8 @@ export const _default = () => (
   <div
     style={{
       width: '350px',
-    }}>
+    }}
+  >
     <ListGroup>
       <ListGroupItem>List</ListGroupItem>
       <ListGroupItem>of</ListGroupItem>
@@ -26,7 +27,8 @@ export const _bordered = () => (
   <div
     style={{
       width: '350px',
-    }}>
+    }}
+  >
     <ListGroup bordered>
       <ListGroupItem>Bordered</ListGroupItem>
       <ListGroupItem>list</ListGroupItem>
@@ -40,7 +42,8 @@ export const _indented = () => (
   <div
     style={{
       width: '350px',
-    }}>
+    }}
+  >
     <ListGroup bordered>
       <ListGroupItem indentLevel={0}>Indent 0</ListGroupItem>
       <ListGroupItem indentLevel={1}>Indent 1</ListGroupItem>
@@ -61,7 +64,8 @@ export const _selectable = () => {
     <div
       style={{
         width: '350px',
-      }}>
+      }}
+    >
       <ListGroup>
         <ListGroupItem selectable isSelected={selected === 0} onClick={() => setSelected(0)}>
           Selectable
@@ -244,7 +248,8 @@ export const _unitTests = () => (
   <div
     style={{
       width: '100%',
-    }}>
+    }}
+  >
     <ListGroup>
       {unitTests.map(test => (
         <UnitTestItem
@@ -253,13 +258,15 @@ export const _unitTests = () => (
           key={test._id}
           onSetActiveRequest={_handleRequestSelected}
           // @ts-expect-error -- TSCONVERSION
-          selectableRequests={unitTestRequests}>
+          selectableRequests={unitTestRequests}
+        >
           <div
             style={{
               padding: '10px 15px',
               border: '1px solid #eee',
               margin: '10px',
-            }}>
+            }}
+          >
             CodeMirror instance.
           </div>
         </UnitTestItem>
@@ -271,7 +278,8 @@ export const _unitTestResults = () => (
   <div
     style={{
       width: '350px',
-    }}>
+    }}
+  >
     <ListGroup>
       {unitTestResults.map(test => (
         <UnitTestResultItem item={test} key={test._id} />

packages/insomnia-components/src/list-group/unit-test-request-selector.tsx

@@ -46,7 +46,8 @@ export const UnitTestRequestSelector: FunctionComponent<UnitTestRequestSelectorP
         name="request"
         id="request"
         onChange={onSetActiveRequest}
-        defaultValue={selectedRequestId || '__NULL__'}>
+        defaultValue={selectedRequestId || '__NULL__'}
+      >
         <option value="__NULL__">
           {selectableRequests.length ? '-- Select Request --' : '-- No Requests --'}
         </option>

packages/insomnia-components/src/notice-table.tsx

@@ -163,14 +163,16 @@ export class NoticeTable extends PureComponent<NoticeTableProps, State> {
                     style={{
                       minWidth: '3em',
                     }}
-                    align="center">
+                    align="center"
+                  >
                     Line
                   </TableHeader>
                   <TableHeader
                     style={{
                       width: '100%',
                     }}
-                    align="left">
+                    align="left"
+                  >
                     Message
                   </TableHeader>
                 </TableRow>

packages/insomnia-components/src/sidebar/sidebar-filter.tsx

@@ -52,7 +52,8 @@ export const SidebarFilter: FunctionComponent<SidebarFilterProps> = ({ filter, o
       }}
       animate={{
         height: filter ? '100%' : '0px',
-      }}>
+      }}
+    >
       <input type="text" placeholder="Filter..." onChange={onChange} ref={filterField} />
     </StyledFilter>
   );