From ee54114a7183aec13ed1f32d9ca44418b106b280 Mon Sep 17 00:00:00 2001
From: NickHackman <snickhackman@gmail.com>
Date: Fri, 18 Jun 2021 15:12:39 -0500
Subject: [PATCH] refactor(request-group-settings-modal): port to typescript

---
 .../request-group-actions-dropdown.tsx        |   3 +-
 ...al.js => request-group-settings-modal.tsx} | 143 +++++----
 .../sidebar/sidebar-request-group-row.tsx     |  42 +--
 .../insomnia-app/app/ui/containers/app.tsx    | 295 ++++++------------
 4 files changed, 188 insertions(+), 295 deletions(-)
 rename packages/insomnia-app/app/ui/components/modals/{request-group-settings-modal.js => request-group-settings-modal.tsx} (76%)

diff --git a/packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.tsx
index ad5377f0b36..d9b8a4e5d5d 100644
--- a/packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.tsx
+++ b/packages/insomnia-app/app/ui/components/dropdowns/request-group-actions-dropdown.tsx
@@ -30,8 +30,7 @@ interface Props {
   activeEnvironment?: Environment | null;
   handleCreateRequest: (id: string) => any;
   handleDuplicateRequestGroup: (requestGroup: RequestGroup) => any;
-  // TODO: fix type, more explicit
-  handleShowSettings: Function,
+  handleShowSettings: (requestGroup: RequestGroup) => any,
   handleMoveRequestGroup: (requestGroup: RequestGroup) => any;
   handleCreateRequestGroup: (requestGroup: string) => any;
 }
diff --git a/packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.js b/packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.tsx
similarity index 76%
rename from packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.js
rename to packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.tsx
index f38c648c78d..b335efac7ab 100644
--- a/packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.js
+++ b/packages/insomnia-app/app/ui/components/modals/request-group-settings-modal.tsx
@@ -9,61 +9,60 @@ import HelpTooltip from '../help-tooltip';
 import * as models from '../../../models';
 import DebouncedInput from '../base/debounced-input';
 import MarkdownEditor from '../markdown-editor';
-import * as db from '../../../common/database';
+import { database as db } from '../../../common/database';
 import type { Workspace } from '../../../models/workspace';
 import type { RequestGroup } from '../../../models/request-group';
+import { HandleGetRenderContext, HandleRender } from '../../../common/render';
+
+interface Props {
+  editorFontSize: number;
+  editorIndentSize: number;
+  editorKeyMap: string;
+  editorLineWrapping: boolean;
+  nunjucksPowerUserMode: boolean;
+  isVariableUncovered: boolean;
+  handleRender: HandleRender;
+  handleGetRenderContext: HandleGetRenderContext;
+  workspaces: Workspace[];
+}
+
+interface State {
+  requestGroup: RequestGroup | null;
+  showDescription: boolean;
+  defaultPreviewMode: boolean;
+  activeWorkspaceIdToCopyTo: string | null;
+  workspace?: Workspace;
+  workspaces: Workspace[];
+  justCopied: boolean;
+  justMoved: boolean;
+}
 
-type Props = {
-  editorFontSize: number,
-  editorIndentSize: number,
-  editorKeyMap: string,
-  editorLineWrapping: boolean,
-  nunjucksPowerUserMode: boolean,
-  isVariableUncovered: boolean,
-  handleRender: Function,
-  handleGetRenderContext: Function,
-  workspaces: Array<Workspace>,
-};
-
-type State = {
-  requestGroupGroup: RequestGroup | null,
-  showDescription: boolean,
-  defaultPreviewMode: boolean,
-  activeWorkspaceIdToCopyTo: string | null,
-  workspace: Workspace | null,
-  justCopied: boolean,
-  justMoved: boolean,
-};
-
-type RequestGroupSettingsModalOptions = {
-  requestGroup: RequestGroup,
-  forceEditMode: boolean,
-};
+interface RequestGroupSettingsModalOptions {
+  requestGroup: RequestGroup;
+  forceEditMode: boolean;
+}
 
 @autoBindMethodsForReact(AUTOBIND_CFG)
 class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
-  modal: ?Modal;
-  _editor: ?MarkdownEditor;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      requestGroup: null,
-      showDescription: false,
-      defaultPreviewMode: false,
-      activeWorkspaceIdToCopyTo: null,
-      workspace: null,
-      workspaces: [],
-      justCopied: false,
-      justMoved: false,
-    };
-  }
-
-  _setModalRef(n: ?Modal) {
+  modal: Modal | null = null;
+  _editor: MarkdownEditor | null = null;
+
+  state: State = {
+    requestGroup: null,
+    showDescription: false,
+    defaultPreviewMode: false,
+    activeWorkspaceIdToCopyTo: null,
+    workspace: undefined,
+    workspaces: [],
+    justCopied: false,
+    justMoved: false,
+  };
+
+  _setModalRef(n: Modal) {
     this.modal = n;
   }
 
-  _setEditorRef(n: ?MarkdownEditor) {
+  _setEditorRef(n: MarkdownEditor) {
     this._editor = n;
   }
 
@@ -75,7 +74,10 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     }
     const patch = { name };
 
-    const updatedRequestGroup = models.requestGroup.update(originalRequestGroup, patch);
+    const updatedRequestGroup = await models.requestGroup.update(
+      originalRequestGroup,
+      patch,
+    );
     this.setState({ requestGroup: updatedRequestGroup });
   }
 
@@ -83,9 +85,12 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     if (!this.state.requestGroup) {
       return;
     }
-    const requestGroup = await models.requestGroup.update(this.state.requestGroup, {
-      description,
-    });
+    const requestGroup = await models.requestGroup.update(
+      this.state.requestGroup,
+      {
+        description,
+      },
+    );
     this.setState({ requestGroup, defaultPreviewMode: false });
   }
 
@@ -93,7 +98,7 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     this.setState({ showDescription: true });
   }
 
-  _handleUpdateMoveCopyWorkspace(e: SyntheticEvent<HTMLSelectElement>) {
+  _handleUpdateMoveCopyWorkspace(e: React.SyntheticEvent<HTMLSelectElement>) {
     const { value } = e.currentTarget;
     const workspaceId = value === '__NULL__' ? null : value;
     this.setState({ activeWorkspaceIdToCopyTo: workspaceId });
@@ -154,16 +159,19 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     models.stats.incrementCreatedRequests();
   }
 
-  async show({ requestGroup, forceEditMode }: RequestGroupSettingsModalOptions) {
+  async show({
+    requestGroup,
+    forceEditMode,
+  }: RequestGroupSettingsModalOptions) {
     const { workspaces } = this.props;
 
     const hasDescription = !!requestGroup.description;
 
     // Find workspaces for use with moving workspace
     const ancestors = await db.withAncestors(requestGroup);
-    const doc = ancestors.find(doc => doc.type === models.workspace.type);
+    const doc = ancestors.find((doc) => doc.type === models.workspace.type);
     const workspaceId = doc ? doc._id : 'should-never-happen';
-    const workspace = workspaces.find(w => w._id === workspaceId);
+    const workspace = workspaces.find((w) => w._id === workspaceId);
 
     this.setState(
       {
@@ -189,7 +197,7 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     this.modal && this.modal.hide();
   }
 
-  _renderDescription(): React.Node {
+  _renderDescription() {
     const {
       editorLineWrapping,
       editorFontSize,
@@ -227,13 +235,14 @@ class RequestGroupSettingsModal extends React.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>
     );
   }
 
-  _renderMoveCopy(): React.Node {
+  _renderMoveCopy() {
     const { workspaces } = this.props;
 
     const {
@@ -254,14 +263,15 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
           <label>
             Move/Copy to Workspace
             <HelpTooltip position="top" className="space-left">
-              Copy or move the current folder to a new workspace. It will be placed at the root of
-              the new workspace's folder structure.
+              Copy or move the current folder to a new workspace. It will be
+              placed at the root of the new workspace's folder structure.
             </HelpTooltip>
             <select
               value={activeWorkspaceIdToCopyTo || '__NULL__'}
-              onChange={this._handleUpdateMoveCopyWorkspace}>
+              onChange={this._handleUpdateMoveCopyWorkspace}
+            >
               <option value="__NULL__">-- Select Workspace --</option>
-              {workspaces.map(w => {
+              {workspaces.map((w) => {
                 if (workspace && workspace._id === w._id) {
                   return null;
                 }
@@ -279,7 +289,8 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
           <button
             disabled={justCopied || !activeWorkspaceIdToCopyTo}
             className="btn btn--clicky"
-            onClick={this._handleCopyToWorkspace}>
+            onClick={this._handleCopyToWorkspace}
+          >
             {justCopied ? 'Copied!' : 'Copy'}
           </button>
         </div>
@@ -287,7 +298,8 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
           <button
             disabled={justMoved || !activeWorkspaceIdToCopyTo}
             className="btn btn--clicky"
-            onClick={this._handleMoveToWorkspace}>
+            onClick={this._handleMoveToWorkspace}
+          >
             {justMoved ? 'Moved!' : 'Move'}
           </button>
         </div>
@@ -295,7 +307,7 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
     );
   }
 
-  renderModalBody(): React.Node {
+  renderModalBody() {
     const { requestGroup } = this.state;
 
     if (!requestGroup) {
@@ -309,8 +321,9 @@ class RequestGroupSettingsModal extends React.PureComponent<Props, State> {
             Name
             <DebouncedInput
               delay={500}
+              // @ts-expect-error -- TSCONVERSION props expand into an input but are difficult to type
               type="text"
-              placeholder={requestGroup.url || 'My Folder'}
+              placeholder={requestGroup.name || 'My Folder'}
               defaultValue={requestGroup.name}
               onChange={this._handleNameChange}
             />
diff --git a/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx b/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx
index 96d455196e4..42c6aab23be 100644
--- a/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx
+++ b/packages/insomnia-app/app/ui/components/sidebar/sidebar-request-group-row.tsx
@@ -45,7 +45,7 @@ interface State {
 class SidebarRequestGroupRow extends PureComponent<Props, State> {
   state: State = {
     dragDirection: 0,
-  };
+  }
 
   _requestGroupActionsDropdown: RequestGroupActionsDropdown | null = null;
   _expandTag: HTMLDivElement | null = null;
@@ -63,11 +63,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
   }
 
   _handleCollapse() {
-    const {
-      requestGroup,
-      handleSetRequestGroupCollapsed,
-      isCollapsed,
-    } = this.props;
+    const { requestGroup, handleSetRequestGroupCollapsed, isCollapsed } = this.props;
     handleSetRequestGroupCollapsed(requestGroup._id, !isCollapsed);
   }
 
@@ -125,10 +121,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
     const button = connectDragSource(
       // @ts-expect-error -- TSCONVERSION
       connectDropTarget(
-        <button
-          onClick={this._handleCollapse}
-          onContextMenu={this._handleShowActions}
-        >
+        <button onClick={this._handleCollapse} onContextMenu={this._handleShowActions}>
           <div className="sidebar__clickable">
             <i
               className={classnames(
@@ -143,8 +136,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
               ref={this._setExpandTagRef}
               className={classnames('sidebar__expand', {
                 'sidebar__expand-hint': isDraggingOver && isCollapsed,
-              })}
-            >
+              })}>
               <div className="tag tag--no-bg tag--small">
                 <span className="tag__inner">OPEN</span>
               </div>
@@ -158,8 +150,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
         <div
           className={classnames('sidebar__item sidebar__item--big', {
             'sidebar__item--active': isActive,
-          })}
-        >
+          })}>
           {button}
           <div className="sidebar__actions">
             <RequestGroupActionsDropdown
@@ -181,8 +172,7 @@ class SidebarRequestGroupRow extends PureComponent<Props, State> {
         <ul
           className={classnames('sidebar__list', {
             'sidebar__list--collapsed': isCollapsed,
-          })}
-        >
+          })}>
           {!isCollapsed && React.Children.count(children) > 0 ? (
             children
           ) : (
@@ -241,8 +231,7 @@ function isOnExpandTag(monitor, component) {
 
 const dragTarget = {
   drop(props, monitor, component) {
-    const movingDoc =
-      monitor.getItem().requestGroup || monitor.getItem().request;
+    const movingDoc = monitor.getItem().requestGroup || monitor.getItem().request;
     const parentId = props.requestGroup.parentId;
     const targetId = props.requestGroup._id;
 
@@ -255,10 +244,7 @@ const dragTarget = {
 
   hover(props, monitor, component) {
     if (props.isCollapsed && isOnExpandTag(monitor, component)) {
-      component.props.handleSetRequestGroupCollapsed(
-        props.requestGroup._id,
-        false,
-      );
+      component.props.handleSetRequestGroupCollapsed(props.requestGroup._id, false);
       component.setDragDirection(0);
     } else if (isAbove(monitor, component)) {
       component.setDragDirection(1);
@@ -282,13 +268,5 @@ function targetCollect(connect, monitor) {
   };
 }
 
-const source = DragSource(
-  'SIDEBAR_REQUEST_ROW',
-  dragSource,
-  sourceCollect,
-)(SidebarRequestGroupRow);
-export default DropTarget(
-  'SIDEBAR_REQUEST_ROW',
-  dragTarget,
-  targetCollect,
-)(source);
+const source = DragSource('SIDEBAR_REQUEST_ROW', dragSource, sourceCollect)(SidebarRequestGroupRow);
+export default DropTarget('SIDEBAR_REQUEST_ROW', dragTarget, targetCollect)(source);
diff --git a/packages/insomnia-app/app/ui/containers/app.tsx b/packages/insomnia-app/app/ui/containers/app.tsx
index e393301d346..e80245584ce 100644
--- a/packages/insomnia-app/app/ui/containers/app.tsx
+++ b/packages/insomnia-app/app/ui/containers/app.tsx
@@ -31,9 +31,7 @@ import WorkspaceEnvironmentsEditModal from '../components/modals/workspace-envir
 import Toast from '../components/toast';
 import CookiesModal from '../components/modals/cookies-modal';
 import RequestSwitcherModal from '../components/modals/request-switcher-modal';
-import SettingsModal, {
-  TAB_INDEX_SHORTCUTS,
-} from '../components/modals/settings-modal';
+import SettingsModal, { TAB_INDEX_SHORTCUTS } from '../components/modals/settings-modal';
 import {
   importUri,
   loadRequestStart,
@@ -103,12 +101,7 @@ import * as themes from '../../plugins/misc';
 import FileSystemDriver from '../../sync/store/drivers/file-system-driver';
 import { VCS } from '../../sync/vcs/vcs';
 import SyncMergeModal from '../components/modals/sync-merge-modal';
-import {
-  GitVCS,
-  GIT_CLONE_DIR,
-  GIT_INSOMNIA_DIR,
-  GIT_INTERNAL_DIR,
-} from '../../sync/git/git-vcs';
+import { GitVCS, GIT_CLONE_DIR, GIT_INSOMNIA_DIR, GIT_INTERNAL_DIR } from '../../sync/git/git-vcs';
 import { NeDBClient } from '../../sync/git/ne-db-client';
 import { fsClient } from '../../sync/git/fs-client';
 import { routableFSClient } from '../../sync/git/routable-fs-client';
@@ -122,11 +115,7 @@ import getWorkspaceName from '../../models/helpers/get-workspace-name';
 import * as workspaceOperations from '../../models/helpers/workspace-operations';
 import { Settings } from '../../models/settings';
 import { isCollection, isWorkspace, Workspace } from '../../models/workspace';
-import {
-  GrpcRequest,
-  isGrpcRequest,
-  isGrpcRequestId,
-} from '../../models/grpc-request';
+import { GrpcRequest, isGrpcRequest, isGrpcRequestId } from '../../models/grpc-request';
 import { Environment, isEnvironment } from '../../models/environment';
 import { GrpcRequestMeta } from '../../models/grpc-request-meta';
 import { RequestMeta } from '../../models/request-meta';
@@ -139,24 +128,24 @@ import { Response } from '../../models/response';
 import { RenderContextAndKeys } from '../../common/render';
 
 interface OwnProps {
-  activeApiSpec: ApiSpec;
-  activeCookieJar: CookieJar;
-  activeEnvironment?: Environment;
-  activeGitRepository: GitRepository;
-  activeRequest?: Request | GrpcRequest;
-  activeWorkspace: Workspace;
-  activeWorkspaceMeta: WorkspaceMeta;
-  activity: GlobalActivity;
-  apiSpecs: ApiSpec[];
-  environments: Environment[];
-  isLoggedIn: boolean;
-  isVariableUncovered: boolean;
-  paneHeight: number;
-  paneWidth: number;
-  settings: Settings;
-  sidebarHidden: boolean;
-  sidebarWidth: number;
-  workspaces: Workspace[];
+  activeApiSpec: ApiSpec,
+  activeCookieJar: CookieJar,
+  activeEnvironment?: Environment,
+  activeGitRepository: GitRepository,
+  activeRequest?: Request | GrpcRequest,
+  activeWorkspace: Workspace,
+  activeWorkspaceMeta: WorkspaceMeta,
+  activity: GlobalActivity,
+  apiSpecs: ApiSpec[],
+  environments: Environment[],
+  isLoggedIn: boolean,
+  isVariableUncovered: boolean,
+  paneHeight: number,
+  paneWidth: number,
+  settings: Settings,
+  sidebarHidden: boolean,
+  sidebarWidth: number,
+  workspaces: Workspace[],
 }
 
 export interface ReduxDispatchProps {
@@ -177,19 +166,19 @@ export interface ReduxDispatchProps {
 type Props = OwnProps & ReduxDispatchProps;
 
 interface State {
-  showDragOverlay: boolean;
-  draggingSidebar: boolean;
-  draggingPaneHorizontal: boolean;
-  draggingPaneVertical: boolean;
-  sidebarWidth: number;
-  paneWidth: number;
-  paneHeight: number;
-  isVariableUncovered: boolean;
-  vcs: VCS | null;
-  gitVCS: GitVCS | null;
-  forceRefreshCounter: number;
-  forceRefreshHeaderCounter: number;
-  isMigratingChildren: boolean;
+  showDragOverlay: boolean,
+  draggingSidebar: boolean,
+  draggingPaneHorizontal: boolean,
+  draggingPaneVertical: boolean,
+  sidebarWidth: number,
+  paneWidth: number,
+  paneHeight: number,
+  isVariableUncovered: boolean,
+  vcs: VCS | null,
+  gitVCS: GitVCS | null,
+  forceRefreshCounter: number,
+  forceRefreshHeaderCounter: number,
+  isMigratingChildren: boolean,
 }
 
 @autoBindMethodsForReact(AUTOBIND_CFG)
@@ -225,17 +214,17 @@ class App extends PureComponent<Props, State> {
     };
 
     this._getRenderContextPromiseCache = {};
-    this._savePaneWidth = debounce((paneWidth) =>
+    this._savePaneWidth = debounce(paneWidth =>
       this._updateActiveWorkspaceMeta({
         paneWidth,
       }),
     );
-    this._savePaneHeight = debounce((paneHeight) =>
+    this._savePaneHeight = debounce(paneHeight =>
       this._updateActiveWorkspaceMeta({
         paneHeight,
       }),
     );
-    this._saveSidebarWidth = debounce((sidebarWidth) =>
+    this._saveSidebarWidth = debounce(sidebarWidth =>
       this._updateActiveWorkspaceMeta({
         sidebarWidth,
       }),
@@ -315,9 +304,7 @@ class App extends PureComponent<Props, State> {
         hotKeyRefs.REQUEST_QUICK_CREATE,
         async () => {
           const { activeRequest, activeWorkspace } = this.props;
-          const parentId = activeRequest
-            ? activeRequest.parentId
-            : activeWorkspace._id;
+          const parentId = activeRequest ? activeRequest.parentId : activeWorkspace._id;
           const request = await models.request.create({
             parentId,
             name: 'New Request',
@@ -331,9 +318,7 @@ class App extends PureComponent<Props, State> {
         hotKeyRefs.REQUEST_SHOW_CREATE,
         () => {
           const { activeRequest, activeWorkspace } = this.props;
-          const parentId = activeRequest
-            ? activeRequest.parentId
-            : activeWorkspace._id;
+          const parentId = activeRequest ? activeRequest.parentId : activeWorkspace._id;
 
           this._requestCreate(parentId);
         },
@@ -350,7 +335,7 @@ class App extends PureComponent<Props, State> {
           showModal(AskModal, {
             title: 'Delete Request?',
             message: `Really delete ${activeRequest.name}?`,
-            onDone: async (confirmed) => {
+            onDone: async confirmed => {
               if (!confirmed) {
                 return;
               }
@@ -365,9 +350,7 @@ class App extends PureComponent<Props, State> {
         hotKeyRefs.REQUEST_SHOW_CREATE_FOLDER,
         () => {
           const { activeRequest, activeWorkspace } = this.props;
-          const parentId = activeRequest
-            ? activeRequest.parentId
-            : activeWorkspace._id;
+          const parentId = activeRequest ? activeRequest.parentId : activeWorkspace._id;
 
           this._requestGroupCreate(parentId);
         },
@@ -397,13 +380,8 @@ class App extends PureComponent<Props, State> {
           const entitiesToCheck = isGrpcRequest(activeRequest)
             ? entities.grpcRequestMetas
             : entities.requestMetas;
-          const meta = Object.values<GrpcRequestMeta | RequestMeta>(
-            entitiesToCheck,
-          ).find((m) => m.parentId === activeRequest._id);
-          await this._handleSetRequestPinned(
-            this.props.activeRequest,
-            !meta?.pinned,
-          );
+          const meta = Object.values<GrpcRequestMeta | RequestMeta>(entitiesToCheck).find(m => m.parentId === activeRequest._id);
+          await this._handleSetRequestPinned(this.props.activeRequest, !meta?.pinned);
         },
       ],
       [hotKeyRefs.PLUGIN_RELOAD, this._handleReloadPlugins],
@@ -449,7 +427,7 @@ class App extends PureComponent<Props, State> {
       submitName: 'Create',
       label: 'Name',
       selectText: true,
-      onComplete: async (name) => {
+      onComplete: async name => {
         const requestGroup = await models.requestGroup.create({
           parentId,
           name,
@@ -474,9 +452,7 @@ class App extends PureComponent<Props, State> {
     });
   }
 
-  async _recalculateMetaSortKey(
-    docs: (RequestGroup | Request | GrpcRequest)[],
-  ) {
+  async _recalculateMetaSortKey(docs: (RequestGroup | Request | GrpcRequest)[]) {
     function __updateDoc(doc, metaSortKey) {
       // @ts-expect-error -- TSCONVERSION the fetched model will only ever be a RequestGroup, Request, or GrpcRequest
       // Which all have the .update method. How do we better filter types?
@@ -503,9 +479,7 @@ class App extends PureComponent<Props, State> {
     ].sort(sortMethodMap[order]);
     await this._recalculateMetaSortKey(docs);
     // sort RequestGroups recursively
-    await Promise.all(
-      docs.filter(isRequestGroup).map((g) => this._sortSidebar(order, g._id)),
-    );
+    await Promise.all(docs.filter(isRequestGroup).map(g => this._sortSidebar(order, g._id)));
 
     if (flushId) {
       await db.flushChanges(flushId);
@@ -520,12 +494,9 @@ class App extends PureComponent<Props, State> {
       label: 'New Name',
       selectText: true,
       onComplete: async (name: string) => {
-        const newRequestGroup = await models.requestGroup.duplicate(
-          requestGroup,
-          {
-            name,
-          },
-        );
+        const newRequestGroup = await models.requestGroup.duplicate(requestGroup, {
+          name,
+        });
         models.stats.incrementCreatedRequestsForDescendents(newRequestGroup);
       },
     });
@@ -553,8 +524,8 @@ class App extends PureComponent<Props, State> {
   }
 
   _workspaceDuplicateById(callback: () => void, workspaceId: string) {
-    const workspace = this.props.workspaces.find((w) => w._id === workspaceId);
-    const apiSpec = this.props.apiSpecs.find((s) => s.parentId === workspaceId);
+    const workspace = this.props.workspaces.find(w => w._id === workspaceId);
+    const apiSpec = this.props.apiSpecs.find(s => s.parentId === workspaceId);
     showPrompt({
       // @ts-expect-error -- TSCONVERSION workspace can be null
       title: `Duplicate ${getWorkspaceLabel(workspace).singular}`,
@@ -563,7 +534,7 @@ class App extends PureComponent<Props, State> {
       submitName: 'Create',
       selectText: true,
       label: 'New Name',
-      onComplete: async (name) => {
+      onComplete: async name => {
         // @ts-expect-error -- TSCONVERSION workspace can be null
         const newWorkspace = await workspaceOperations.duplicate(workspace, name);
         await this.props.handleSetActiveWorkspace(newWorkspace._id);
@@ -640,9 +611,7 @@ class App extends PureComponent<Props, State> {
   }
 
   static async _updateRequestGroupMetaByParentId(requestGroupId, patch) {
-    const requestGroupMeta = await models.requestGroupMeta.getByParentId(
-      requestGroupId,
-    );
+    const requestGroupMeta = await models.requestGroupMeta.getByParentId(requestGroupId);
 
     if (requestGroupMeta) {
       await models.requestGroupMeta.update(requestGroupMeta, patch);
@@ -787,9 +756,7 @@ class App extends PureComponent<Props, State> {
     }, 2000);
   }
 
-  async _handleUpdateRequestMimeType(
-    mimeType: string | null,
-  ): Promise<Request | null> {
+  async _handleUpdateRequestMimeType(mimeType: string | null): Promise<Request | null> {
     if (!this.props.activeRequest) {
       console.warn('Tried to update request mime-type when no active request');
       return null;
@@ -824,9 +791,7 @@ class App extends PureComponent<Props, State> {
       title: 'Select Download Location',
       buttonLabel: 'Save',
     };
-    const defaultPath = window.localStorage.getItem(
-      'insomnia.sendAndDownloadLocation',
-    );
+    const defaultPath = window.localStorage.getItem('insomnia.sendAndDownloadLocation');
 
     if (defaultPath) {
       // NOTE: An error will be thrown if defaultPath is supplied but not a String
@@ -839,11 +804,7 @@ class App extends PureComponent<Props, State> {
     return filePath || null;
   }
 
-  async _handleSendAndDownloadRequestWithEnvironment(
-    requestId: string,
-    environmentId: string,
-    dir: string,
-  ) {
+  async _handleSendAndDownloadRequestWithEnvironment(requestId: string, environmentId: string, dir: string) {
     const { settings, handleStartLoading, handleStopLoading } = this.props;
     const request = await models.request.getById(requestId);
 
@@ -872,8 +833,7 @@ class App extends PureComponent<Props, State> {
         // @ts-expect-error -- TSCONVERSION contentType can be undefined
         const extension = mime.extension(responsePatch.contentType) || 'unknown';
         const name =
-          nameFromHeader ||
-          `${request.name.replace(/\s/g, '-').toLowerCase()}.${extension}`;
+          nameFromHeader || `${request.name.replace(/\s/g, '-').toLowerCase()}.${extension}`;
         let filename;
 
         if (dir) {
@@ -898,29 +858,16 @@ class App extends PureComponent<Props, State> {
 
         readStream.on('end', async () => {
           responsePatch.error = `Saved to ${filename}`;
-          await models.response.create(
-            responsePatch,
-            settings.maxHistoryResponses,
-          );
+          await models.response.create(responsePatch, settings.maxHistoryResponses);
         });
 
-        readStream.on('error', async (err) => {
-          console.warn(
-            'Failed to download request after sending',
-            responsePatch.bodyPath,
-            err,
-          );
-          await models.response.create(
-            responsePatch,
-            settings.maxHistoryResponses,
-          );
+        readStream.on('error', async err => {
+          console.warn('Failed to download request after sending', responsePatch.bodyPath, err);
+          await models.response.create(responsePatch, settings.maxHistoryResponses);
         });
       } else {
         // Save the bad responses so failures are shown still
-        await models.response.create(
-          responsePatch,
-          settings.maxHistoryResponses,
-        );
+        await models.response.create(responsePatch, settings.maxHistoryResponses);
       }
     } catch (err) {
       showAlert({
@@ -989,10 +936,7 @@ class App extends PureComponent<Props, State> {
     handleStopLoading(requestId);
   }
 
-  async _handleSetActiveResponse(
-    requestId: string,
-    activeResponse: Response | null = null,
-  ) {
+  async _handleSetActiveResponse(requestId: string, activeResponse: Response | null = null) {
     const { activeEnvironment } = this.props;
     const activeResponseId = activeResponse ? activeResponse._id : null;
     await App._updateRequestMetaByParentId(requestId, {
@@ -1007,10 +951,7 @@ class App extends PureComponent<Props, State> {
     } else {
       const environmentId = activeEnvironment ? activeEnvironment._id : null;
       // @ts-expect-error -- TSCONVERSION can return null if not found
-      response = await models.response.getLatestForRequest(
-        requestId,
-        environmentId,
-      );
+      response = await models.response.getLatestForRequest(requestId, environmentId);
     }
 
     const requestVersionId = response ? response.requestVersionId : 'n/a';
@@ -1117,10 +1058,7 @@ class App extends PureComponent<Props, State> {
       // @ts-expect-error -- TSCONVERSION
       const pixelOffset = e.clientY - requestPane.offsetTop;
       let paneHeight = pixelOffset / (requestPaneHeight + responsePaneHeight);
-      paneHeight = Math.min(
-        Math.max(paneHeight, MIN_PANE_HEIGHT),
-        MAX_PANE_HEIGHT,
-      );
+      paneHeight = Math.min(Math.max(paneHeight, MIN_PANE_HEIGHT), MAX_PANE_HEIGHT);
 
       this._handleSetPaneHeight(paneHeight);
     } else if (this.state.draggingSidebar) {
@@ -1221,9 +1159,7 @@ class App extends PureComponent<Props, State> {
     if (activity === ACTIVITY_HOME || activity === ACTIVITY_MIGRATION) {
       title = getAppName();
     } else {
-      title = isCollection(activeWorkspace)
-        ? activeWorkspace.name
-        : activeApiSpec.fileName;
+      title = isCollection(activeWorkspace) ? activeWorkspace.name : activeApiSpec.fileName;
 
       if (activeEnvironment) {
         title += ` (${activeEnvironment.name})`;
@@ -1244,15 +1180,14 @@ class App extends PureComponent<Props, State> {
 
     // Force app refresh if login state changes
     if (prevProps.isLoggedIn !== this.props.isLoggedIn) {
-      this.setState((state) => ({
+      this.setState(state => ({
         forceRefreshCounter: state.forceRefreshCounter + 1,
       }));
     }
 
     // Check on VCS things
     const { activeWorkspace, activeGitRepository } = this.props;
-    const changingWorkspace =
-      prevProps.activeWorkspace._id !== activeWorkspace._id;
+    const changingWorkspace = prevProps.activeWorkspace._id !== activeWorkspace._id;
 
     // Update VCS if needed
     if (changingWorkspace) {
@@ -1353,11 +1288,11 @@ class App extends PureComponent<Props, State> {
         directory,
       });
 
-      vcs = new VCS(driver, async (conflicts) => {
-        return new Promise((resolve) => {
+      vcs = new VCS(driver, async conflicts => {
+        return new Promise(resolve => {
           showModal(SyncMergeModal, {
             conflicts,
-            handleDone: (conflicts) => resolve(conflicts),
+            handleDone: conflicts => resolve(conflicts),
           });
         });
       });
@@ -1438,14 +1373,14 @@ class App extends PureComponent<Props, State> {
     // NOTE: This is required for "drop" event to trigger.
     document.addEventListener(
       'dragover',
-      (e) => {
+      e => {
         e.preventDefault();
       },
       false,
     );
     document.addEventListener(
       'drop',
-      async (e) => {
+      async e => {
         e.preventDefault();
         const { activeWorkspace, handleImportUriToWorkspace } = this.props;
 
@@ -1500,17 +1435,10 @@ class App extends PureComponent<Props, State> {
       environments,
       activeApiSpec,
     } = this.props;
-    const baseEnvironments = environments.filter(
-      (e) => e.parentId === activeWorkspace._id,
-    );
+    const baseEnvironments = environments.filter(e => e.parentId === activeWorkspace._id);
 
     // Nothing to do
-    if (
-      baseEnvironments.length &&
-      activeCookieJar &&
-      activeApiSpec &&
-      activeWorkspaceMeta
-    ) {
+    if (baseEnvironments.length && activeCookieJar && activeApiSpec && activeWorkspaceMeta) {
       return;
     }
 
@@ -1579,13 +1507,9 @@ class App extends PureComponent<Props, State> {
                 paneWidth={paneWidth}
                 paneHeight={paneHeight}
                 sidebarWidth={sidebarWidth}
-                handleCreateRequestForWorkspace={
-                  this._requestCreateForWorkspace
-                }
+                handleCreateRequestForWorkspace={this._requestCreateForWorkspace}
                 handleSetRequestPinned={this._handleSetRequestPinned}
-                handleSetRequestGroupCollapsed={
-                  this._handleSetRequestGroupCollapsed
-                }
+                handleSetRequestGroupCollapsed={this._handleSetRequestGroupCollapsed}
                 handleActivateRequest={this._handleSetActiveRequest}
                 handleSetRequestPaneRef={this._setRequestPaneRef}
                 handleSetResponsePaneRef={this._setResponsePaneRef}
@@ -1604,17 +1528,11 @@ class App extends PureComponent<Props, State> {
                 handleDuplicateWorkspace={this._workspaceDuplicate}
                 handleCreateRequestGroup={this._requestGroupCreate}
                 handleGenerateCode={App._handleGenerateCode}
-                handleGenerateCodeForActiveRequest={
-                  this._handleGenerateCodeForActiveRequest
-                }
+                handleGenerateCodeForActiveRequest={this._handleGenerateCodeForActiveRequest}
                 handleCopyAsCurl={this._handleCopyAsCurl}
-                handleSetResponsePreviewMode={
-                  this._handleSetResponsePreviewMode
-                }
+                handleSetResponsePreviewMode={this._handleSetResponsePreviewMode}
                 handleSetResponseFilter={this._handleSetResponseFilter}
-                handleSendRequestWithEnvironment={
-                  this._handleSendRequestWithEnvironment
-                }
+                handleSendRequestWithEnvironment={this._handleSendRequestWithEnvironment}
                 handleSendAndDownloadRequestWithEnvironment={
                   this._handleSendAndDownloadRequestWithEnvironment
                 }
@@ -1637,9 +1555,7 @@ class App extends PureComponent<Props, State> {
             </ErrorBoundary>
 
             {/* Block all mouse activity by showing an overlay while dragging */}
-            {this.state.showDragOverlay ? (
-              <div className="blocker-overlay" />
-            ) : null}
+            {this.state.showDragOverlay ? <div className="blocker-overlay" /> : null}
           </div>
         </GrpcProvider>
       </KeydownBinder>
@@ -1701,9 +1617,7 @@ async function _moveDoc(docToMove, parentId, targetId, targetOffset) {
       }
 
       const beforeKey = before ? before.metaSortKey : docs[0].metaSortKey - 100;
-      const afterKey = after
-        ? after.metaSortKey
-        : docs[docs.length - 1].metaSortKey + 100;
+      const afterKey = after ? after.metaSortKey : docs[docs.length - 1].metaSortKey + 100;
 
       if (Math.abs(afterKey - beforeKey) < 0.000001) {
         // If sort keys get too close together, we need to redistribute the list. This is
@@ -1801,8 +1715,7 @@ function mapStateToProps(state, props) {
   // @ts-expect-error -- TSCONVERSION https://github.com/reduxjs/reselect#accessing-react-props-in-selectors
   const oAuth2Token = selectActiveOAuth2Token(state, props);
   // Find other meta things
-  const loadStartTime =
-    loadingRequestIds[activeRequest ? activeRequest._id : 'n/a'] || -1;
+  const loadStartTime = loadingRequestIds[activeRequest ? activeRequest._id : 'n/a'] || -1;
   // @ts-expect-error -- TSCONVERSION https://github.com/reduxjs/reselect#accessing-react-props-in-selectors
   const sidebarChildren = selectSidebarChildren(state, props);
   // @ts-expect-error -- TSCONVERSION https://github.com/reduxjs/reselect#accessing-react-props-in-selectors
@@ -1813,9 +1726,7 @@ function mapStateToProps(state, props) {
   // @ts-expect-error -- TSCONVERSION https://github.com/reduxjs/reselect#accessing-react-props-in-selectors
   const syncItems = selectSyncItems(state, props);
   // Api spec stuff
-  const activeApiSpec = apiSpecs.find(
-    (s) => s.parentId === activeWorkspace._id,
-  );
+  const activeApiSpec = apiSpecs.find(s => s.parentId === activeWorkspace._id);
   // Test stuff
   // @ts-expect-error -- TSCONVERSION https://github.com/reduxjs/reselect#accessing-react-props-in-selectors
   const activeUnitTests = selectActiveUnitTests(state, props);
@@ -1872,9 +1783,7 @@ function mapStateToProps(state, props) {
   });
 }
 
-const mapDispatchToProps = (
-  dispatch: Dispatch<Action<any>>,
-): ReduxDispatchProps => {
+const mapDispatchToProps = (dispatch: Dispatch<Action<any>>): ReduxDispatchProps => {
   const {
     importUri: handleImportUriToWorkspace,
     loadRequestStart: handleStartLoading,
@@ -1887,22 +1796,19 @@ const mapDispatchToProps = (
     importClipBoard: handleImportClipBoardToWorkspace,
     exportRequestsToFile: handleExportRequestsToFile,
     initialize: handleInitializeEntities,
-  } = bindActionCreators(
-    {
-      importUri,
-      loadRequestStart,
-      loadRequestStop,
-      newCommand,
-      setActiveWorkspace,
-      setActiveActivity,
-      goToNextActivity,
-      importFile,
-      importClipBoard,
-      exportRequestsToFile,
-      initialize,
-    },
-    dispatch,
-  );
+  } = bindActionCreators({
+    importUri,
+    loadRequestStart,
+    loadRequestStop,
+    newCommand,
+    setActiveWorkspace,
+    setActiveActivity,
+    goToNextActivity,
+    importFile,
+    importClipBoard,
+    exportRequestsToFile,
+    initialize,
+  }, dispatch);
   return {
     handleCommand,
     handleImportUriToWorkspace,
@@ -1919,7 +1825,4 @@ const mapDispatchToProps = (
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(withDragDropContext(App));
+export default connect(mapStateToProps, mapDispatchToProps)(withDragDropContext(App));