fix: Export popup has small z-index

packages/insomnia/src/ui/components/base/modal.tsx

@@ -2,10 +2,8 @@ import classnames from 'classnames';
 import React, { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 
+import { useGlobalModalZIndex } from '../../hooks/use-global-modal-zIndex';
 import { createKeybindingsHandler } from '../keydown-binder';
-// Keep global z-index reference so that every modal will
-// appear over top of an existing one.
-let globalZIndex = 1000;
 
 export interface ModalProps {
   centered?: boolean;
@@ -36,15 +34,16 @@ export const Modal = forwardRef<ModalHandle, ModalProps>(({
 }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
-  const [zIndex, setZIndex] = useState(globalZIndex);
   const [onHideArgument, setOnHideArgument] = useState<() => void>();
 
+  const { globalModalZIndex, increaseModalZIndex } = useGlobalModalZIndex();
+
   const show: ModalHandle['show'] = useCallback(options => {
     options?.onHide && setOnHideArgument(options.onHide);
     setOpen(true);
-    setZIndex(globalZIndex++);
+    increaseModalZIndex();
     onShow?.();
-  }, [onShow]);
+  }, [onShow, increaseModalZIndex]);
 
   const hide = useCallback(() => {
     setOpen(false);
@@ -100,7 +99,7 @@ export const Modal = forwardRef<ModalHandle, ModalProps>(({
         onKeyDown={handleKeydown}
         tabIndex={-1}
         className={classes}
-        style={{ zIndex }}
+        style={{ zIndex: globalModalZIndex }}
         aria-hidden={false}
         role="dialog"
       >

packages/insomnia/src/ui/components/modals/export-requests-modal.tsx

@@ -9,6 +9,7 @@ import { isRequest, Request } from '../../../models/request';
 import { RequestGroup } from '../../../models/request-group';
 import { isWebSocketRequest, WebSocketRequest } from '../../../models/websocket-request';
 import { Workspace } from '../../../models/workspace';
+import { useGlobalModalZIndex } from '../../hooks/use-global-modal-zIndex';
 import { Child, WorkspaceLoaderData } from '../../routes/workspace';
 import { Icon } from '../icon';
 import { getMethodShortHand } from '../tags/method-tag';
@@ -176,6 +177,12 @@ export const ExportRequestsModal = ({ workspace, onClose }: { workspace: Workspa
     treeRoot: Node | null;
   }>();
 
+  const { globalModalZIndex, increaseModalZIndex } = useGlobalModalZIndex();
+
+  useEffect(() => {
+    increaseModalZIndex();
+  }, [increaseModalZIndex]);
+
   useEffect(() => {
     const isIdleAndUninitialized = workspaceFetcher.state === 'idle' && !workspaceFetcher.data;
     if (isIdleAndUninitialized) {
@@ -265,7 +272,8 @@ export const ExportRequestsModal = ({ workspace, onClose }: { workspace: Workspa
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="w-full h-[--visual-viewport-height] fixed top-0 left-0 flex items-center justify-center bg-black/30"
+      style={{ zIndex: globalModalZIndex }}
     >
       <Modal
         onOpenChange={isOpen => {

packages/insomnia/src/ui/hooks/use-global-modal-zIndex.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from 'react';
+
+// Keep global z-index reference so that every modal will
+// appear over top of an existing one.
+export let globalModalZIndex = 1000;
+
+export const useGlobalModalZIndex = () => {
+  const [zIndex, setZIndex] = useState(globalModalZIndex);
+
+  const increaseModalZIndex = useCallback(() => {
+    setZIndex(globalModalZIndex++);
+  }, []);
+
+  return {
+    globalModalZIndex: zIndex,
+    increaseModalZIndex,
+  };
+};