fix: collection env modal dropdown and add test

Kong · Oct 14, 2024 · 1a265c6 · 1a265c6
1 parent bf5181c
commit 1a265c6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts
@@ -34,6 +34,14 @@ test.describe('Environment Editor', async () => {
     await page.getByText('baseenv1').click();
   });
 
+  test.only('duplicate an environment', async ({ page }) => {
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
+    await page.getByRole('row', { name: 'ExampleA' }).getByLabel('Environment Actions').click();
+    await page.getByText('Duplicate').click();
+    await page.getByLabel('Environments', { exact: true }).getByText('ExampleA (Copy)').click();
+  });
+
   // rename an existing environment
   test('Rename an existing environment', async ({ page }) => {
     // Rename the environment

diff --git a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx
@@ -1,6 +1,6 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { useMemo, useRef, useState } from 'react';
-import { Button, Dialog, DropIndicator, GridList, GridListItem, Heading, Label, ListBoxItem, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover, Text, useDragAndDrop } from 'react-aria-components';
+import { Button, Dialog, DropIndicator, GridList, GridListItem, Heading, Label, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover, Text, useDragAndDrop } from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { docsAfterResponseScript, docsTemplateTags } from '../../../common/documentation';
@@ -315,15 +315,15 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                                 className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
                               >
                                 {item => (
-                                  <ListBoxItem
+                                  <MenuItem
                                     key={item.id}
                                     id={item.id}
                                     className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
                                     aria-label={item.name}
                                   >
                                     <Icon className='w-5' icon={item.icon} />
                                     <span>{item.name}</span>
-                                  </ListBoxItem>
+                                  </MenuItem>
                                 )}
                               </Menu>
                             </Popover>