diff --git a/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts index ebc9f949a..e5512a8e9 100644 --- a/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts +++ b/packages/insomnia-smoke-test/tests/smoke/debug-sidebar-interactions.test.ts @@ -22,7 +22,6 @@ test.describe('Debug-Sidebar', async () => { await requestLocator.click(); await requestLocator.getByLabel('Request Actions').click(); await page.getByRole('menuitemradio', { name: 'Settings' }).click(); - await page.getByRole('tab', { name: 'Write' }).click(); // Close settings modal await page.locator('.app').press('Escape'); diff --git a/packages/insomnia/src/ui/components/environment-picker.tsx b/packages/insomnia/src/ui/components/environment-picker.tsx index b72f340c5..58a0252d1 100644 --- a/packages/insomnia/src/ui/components/environment-picker.tsx +++ b/packages/insomnia/src/ui/components/environment-picker.tsx @@ -3,7 +3,7 @@ import React, { Fragment } from 'react'; import { Button, ComboBox, Dialog, DialogTrigger, Heading, Input, ListBox, ListBoxItem, Popover } from 'react-aria-components'; import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom'; -import { fuzzyMatch } from '../../common/misc'; +import { fuzzyMatch, isNotNullOrUndefined } from '../../common/misc'; import { WorkspaceLoaderData } from '../routes/workspace'; import { Icon } from './icon'; @@ -14,7 +14,7 @@ export const EnvironmentPicker = ({ }: { isOpen: boolean; onOpenChange: (isOpen: boolean) => void; - onOpenEnvironmentSettingsModal: () => void; + onOpenEnvironmentSettingsModal: () => void; }) => { const { activeEnvironment, @@ -41,6 +41,13 @@ export const EnvironmentPicker = ({ const globalEnvironmentList = selectedGlobalBaseEnvironment ? [selectedGlobalBaseEnvironment, ...globalSubEnvironments.filter(e => e.parentId === selectedGlobalBaseEnvironment._id)].map(({ type, ...subenvironment }) => ({ ...subenvironment, id: subenvironment._id, isBase: subenvironment._id === selectedGlobalBaseEnvironment._id })) : []; + const activeGlobalBaseEnvironment = selectedGlobalBaseEnvironment; + const activeGlobalSubEnvironment = globalSubEnvironments.find(e => e._id === activeGlobalEnvironment?._id); + const activeBaseEnvironment = baseEnvironment; + const activeSubEnvironment = subEnvironments.find(e => e._id === activeEnvironment._id); + + const selectedEnvironments = [activeGlobalBaseEnvironment, activeGlobalSubEnvironment, activeBaseEnvironment, activeSubEnvironment].filter(isNotNullOrUndefined).map((environment, index) => ({ ...environment, id: environment._id, level: index + 1 })); + const navigate = useNavigate(); return ( @@ -49,182 +56,59 @@ export const EnvironmentPicker = ({ {activeGlobalEnvironment?._id || activeEnvironment._id ? 'Manage' : 'Add'} Environments - - -
- - Collection Environments - - - { - if (selection === 'all') { - return; - } - - const environmentId = selection.values().next().value; - - setActiveEnvironmentFetcher.submit( - { - environmentId, - }, - { - method: 'POST', - action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`, - } - ); - }} - selectedKeys={[activeEnvironment._id || '']} - className="p-2 select-none text-sm min-w-max overflow-y-auto focus:outline-none" - > - {item => ( - - {({ isSelected }) => ( - - - - - - {item.name} - - {isSelected && ( - - )} - - )} - - )} - -
- {globalBaseEnvironments.length > 0 && ( -
+ + +
+
- Global Environments - {selectedGlobalBaseEnvironment && ( - - )} + Collection Environments + - { - const match = Boolean(fuzzyMatch( - filter, - textValue, - { splitSpace: false, loose: true } - )?.indexes); - - return match; - }} - onSelectionChange={environmentId => { - if (environmentId === 'all' || !environmentId) { - return; - } - - if (environmentId === 'no-global-env') { - environmentId = ''; - } - - setActiveGlobalEnvironmentFetcher.submit( - { - environmentId, - }, - { - method: 'POST', - action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, - } - ); - }} - defaultInputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || ''} - defaultSelectedKey={selectedGlobalBaseEnvironmentId} - defaultItems={[...globalBaseEnvironments.map(baseEnv => { - return { - id: baseEnv._id, - icon: 'code', - name: baseEnv.workspaceName || baseEnv.name, - textValue: baseEnv.workspaceName || baseEnv.name, - }; - }), { id: 'no-global-env', icon: 'cancel', name: 'No Global Environment', textValue: 'No Global Environment' }]} - > -
- - -
- - - className="select-none text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none" - > - {item => ( - - - {item.name} - - )} - - - { - if (selection === 'all') { - return; - } + aria-label='Select a Collection Environment' + selectionMode='none' + key={activeEnvironment._id} + items={collectionEnvironmentList} + disabledKeys={selectedEnvironments.map(e => e.id)} + // disallowEmptySelection + // onSelectionChange={selection => { + // if (selection === 'all') { + // return; + // } - const environmentId = selection.values().next().value; + // const environmentId = selection.values().next().value; - setActiveGlobalEnvironmentFetcher.submit( + // setActiveEnvironmentFetcher.submit( + // { + // environmentId, + // }, + // { + // method: 'POST', + // action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`, + // } + // ); + // }} + // selectedKeys={[activeEnvironment._id || '']} + onAction={environmentId => { + setActiveEnvironmentFetcher.submit( { environmentId, }, { method: 'POST', - action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`, } ); }} - selectedKeys={[activeGlobalEnvironment?._id || '']} - className="select-none text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none" + className="p-2 select-none text-sm min-w-max overflow-y-auto focus:outline-none" > {item => ( - {({ isSelected }) => ( + {({ isSelected, isDisabled }) => ( {item.name} + {!isDisabled &&
+ +
} {isSelected && (
- )} + + Global Environments ({globalBaseEnvironments.length}) + {selectedGlobalBaseEnvironment && ( + + )} + + { + const match = Boolean(fuzzyMatch( + filter, + textValue, + { splitSpace: false, loose: true } + )?.indexes); + + return match; + }} + onSelectionChange={environmentId => { + if (environmentId === 'all' || !environmentId) { + return; + } + + setActiveGlobalEnvironmentFetcher.submit( + { + environmentId, + }, + { + method: 'POST', + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, + } + ); + }} + inputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || ''} + selectedKey={selectedGlobalBaseEnvironmentId} + defaultItems={[...globalBaseEnvironments.map(baseEnv => { + return { + id: baseEnv._id, + icon: 'code', + name: baseEnv.workspaceName || baseEnv.name, + textValue: baseEnv.workspaceName || baseEnv.name, + }; + }), { id: '', icon: 'cancel', name: 'No Global Environment', textValue: 'No Global Environment' }]} + > +
+ + +
+ + + className="select-none text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none" + > + {item => ( + + + {item.name} + + )} + + + + e.id)} + onAction={environmentId => { + setActiveGlobalEnvironmentFetcher.submit( + { + environmentId, + }, + { + method: 'POST', + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, + } + ); + }} + className="select-none empty:p-0 text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none" + > + {item => ( + + {({ isDisabled }) => ( + + + + + + {item.name} + + {!isDisabled &&
+ +
} + + )} + + )} + +
+
+ + Current selections ({selectedEnvironments.length}) + + { + if (environmentId === activeBaseEnvironment._id) { + return; + } + + if (subEnvironments.some(e => e._id === environmentId)) { + setActiveEnvironmentFetcher.submit( + { + environmentId: baseEnvironment._id, + }, + { + method: 'POST', + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`, + } + ); + + return; + } + + if (activeGlobalBaseEnvironment && globalSubEnvironments.some(e => e._id === environmentId)) { + setActiveGlobalEnvironmentFetcher.submit( + { + environmentId: activeGlobalBaseEnvironment._id, + }, + { + method: 'POST', + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, + } + ); + + return; + } + + if (environmentId === activeGlobalBaseEnvironment?._id) { + setActiveGlobalEnvironmentFetcher.submit( + { + environmentId: '', + }, + { + method: 'POST', + action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`, + } + ); + } + + }} + className="select-none empty:p-0 text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none" + > + {item => ( + + {({ isDisabled }) => ( + + + + + + {item.name} + + {!isDisabled &&
+ +
} + + )} + + )} + +