feat: rename to VariableMissingErrorModal

packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button, Dialog, Heading, Modal, ModalOverlay } from 'react-aria-components';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onOk: () => void;
+  okText?: string;
+  onCancel: () => void;
+  cancelText?: string;
+  isDismissable?: boolean;
+}
+
+export const VariableMissingErrorModal = ({ isOpen, title, cancelText, onCancel, okText, children, onOk, isDismissable = false }: Props) => {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={isOpen => {
+        !isOpen && onCancel?.();
+      }}
+      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+    >
+      <Modal
+        onOpenChange={isOpen => {
+          !isOpen && onCancel?.();
+        }}
+        isDismissable={isDismissable}
+        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] m-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+      >
+        <Dialog className="outline-none flex-1 h-full flex flex-col gap-4 overflow-hidden">
+          <>
+            <Heading
+              slot="title"
+              className="text-2xl"
+            >
+              {title}
+            </Heading>
+            <div className=''>
+              {children}
+            </div>
+            <div className="flex flex-shrink-0 flex-1 justify-end gap-2 items-center">
+              <Button
+                className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                onPress={onCancel}
+              >
+                {cancelText || 'Cancel'}
+              </Button>
+              <Button
+                className="hover:no-underline flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                onPress={onOk}
+              >
+                {okText || 'OK'}
+              </Button>
+            </div>
+          </>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  );
+};

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

@@ -20,9 +20,9 @@ import { Dropdown, DropdownButton, type DropdownHandle, DropdownItem, DropdownSe
 import { OneLineEditor, OneLineEditorHandle } from './codemirror/one-line-editor';
 import { MethodDropdown } from './dropdowns/method-dropdown';
 import { createKeybindingsHandler, useDocBodyKeyboardShortcuts } from './keydown-binder';
-import { CommonModal } from './modals/common-modal';
 import { GenerateCodeModal } from './modals/generate-code-modal';
 import { showAlert, showModal, showPrompt } from './modals/index';
+import { VariableMissingErrorModal } from './modals/variable-missing-error-modal';
 
 const StyledDropdownButton = styled(DropdownButton)({
   '&:hover:not(:disabled)': {
@@ -378,7 +378,7 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
           )}
         </div>
       </div>
-      <CommonModal
+      <VariableMissingErrorModal
         isOpen={showEnvVariableMissingModal}
         title="An environment variable is missing"
         okText='Execute anyways'
@@ -393,7 +393,7 @@ export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
           <Button className="bg-[--color-surprise] text-[--color-font-surprise] px-3 mx-3 rounded-sm">{missingKey}</Button>
           has been defined but has no value defined on a currently Active Environment
         </p>
-      </CommonModal>
+      </VariableMissingErrorModal>
     </div>
   );
 });