Skip to content

fix(key-value editor): Fix locked focus when the autocomplete is open and improve styling #7597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gatzjames merged 3 commits into from
Jun 27, 2024
Merged

fix(key-value editor): Fix locked focus when the autocomplete is open and improve styling #7597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b5ec0d
Fix locked focus when the autocomplete is open and improve styling
gatzjames Jun 27, 2024
8b9f09e
add await to delay snippet
gatzjames Jun 27, 2024
8557d88
display the workspace name on global environments
gatzjames Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/insomnia/src/ui/components/editors/request-script-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const updateRequestAuth =
'bearer'
);`;
const requireAModule = "const atob = require('atob');";
const delay = 'new Promise((resolve)=>setTimeout(resolve, 1000));';
const delay = 'await new Promise((resolve) => setTimeout(resolve, 1000));';

const getStatusCode = 'const statusCode = insomnia.response.code;';
const getStatusMsg = 'const status = insomnia.response.status;';
Expand Down
22 changes: 13 additions & 9 deletions packages/insomnia/src/ui/components/environment-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const EnvironmentPicker = ({
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 selectedEnvironments = [activeGlobalBaseEnvironment, activeGlobalSubEnvironment ? { ...activeGlobalSubEnvironment, workspaceName: activeGlobalBaseEnvironment?.workspaceName } : undefined, activeBaseEnvironment, activeSubEnvironment].filter(isNotNullOrUndefined).map((environment, index) => ({ ...environment, id: environment._id, level: index + 1 }));

const navigate = useNavigate();

Expand All @@ -59,7 +59,7 @@ export const EnvironmentPicker = ({
<span className='truncate'>{activeGlobalEnvironment?._id || activeEnvironment._id ? 'Manage' : 'Add'} Environments</span>
</Button>
<Popover className="min-w-max max-h-[90vh] flex flex-col !z-10" placement='bottom start' offset={8}>
<Dialog className="border h-full w-full grid grid-flow-col auto-cols-[min(250px,calc(45vw))] overflow-hidden divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] bg-[--color-bg] shadow-lg rounded-md focus:outline-none">
<Dialog className="border h-full w-full grid grid-flow-col [grid-auto-columns:min(260px,calc(40vw))_min(340px,calc(50vw))] overflow-hidden divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] bg-[--color-bg] shadow-lg rounded-md focus:outline-none">
<div className='relative w-full h-full flex flex-col overflow-hidden flex-1'>
<div className='relative w-full h-full flex flex-col overflow-hidden flex-1'>
<Heading className='text-sm flex-shrink-0 h-[--line-height-sm] font-bold text-[--hl] px-3 py-1 flex items-center gap-2 justify-between'>
Expand Down Expand Up @@ -165,16 +165,16 @@ export const EnvironmentPicker = ({

globalEnvironmentListBox.current?.focus();
}}
defaultInputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || ''}
defaultInputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || 'No Global Environment'}
selectedKey={selectedGlobalBaseEnvironmentId}
defaultItems={[...globalBaseEnvironments.map(baseEnv => {
defaultItems={[{ id: '', icon: 'cancel', name: 'No Global Environment', textValue: 'No Global Environment' }, ...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' }]}
})]}
>
<div className='px-2 mx-2 my-2 flex items-center gap-2 group rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'>
<Input aria-label='Global Environment' placeholder='Choose a global environment' className="py-1 placeholder:italic w-full pl-2 pr-7 " />
Expand Down Expand Up @@ -256,7 +256,7 @@ export const EnvironmentPicker = ({
<span>Current selections ({selectedEnvironments.length})</span>
</Heading>
<ListBox
aria-label='Select a Global Environment'
aria-label='Current selection of environments'
selectionMode='none'
disallowEmptySelection
key={activeGlobalEnvironment?._id}
Expand Down Expand Up @@ -308,18 +308,19 @@ export const EnvironmentPicker = ({
}

}}
className="select-none empty:p-0 text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none"
className="select-none w-full empty:p-0 text-sm p-2 flex flex-col overflow-y-auto overflow-x-hidden focus:outline-none"
>
{item => (
<ListBoxItem
className={'flex gap-2 pr-1 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] rounded focus:bg-[--hl-xs] focus:outline-none transition-colors'}
className={'flex gap-2 pr-1 overflow-hidden 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] rounded focus:bg-[--hl-xs] focus:outline-none transition-colors'}
style={{
paddingLeft: `${item.level * 8}px`,
}}
>
{({ isDisabled }) => (
<Fragment>
<span
className='flex-shrink-0'
style={{
borderColor: item.color ?? 'var(--color-font)',
}}
Expand All @@ -332,9 +333,12 @@ export const EnvironmentPicker = ({
}}
/>
</span>
<span className='flex-1 truncate'>
<span title={item.name} className='flex-grow truncate'>
{item.name}
</span>
{'workspaceName' in item && item.workspaceName && <span title={item.workspaceName} className='flex-shrink truncate text-xs text-[--hl]'>
{item.workspaceName}
</span>}
{!isDisabled && <div className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] outline-none hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
<Icon icon="minus-circle" />
</div>}
Expand Down
21 changes: 12 additions & 9 deletions packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import { CodePromptModal } from '../modals/code-prompt-modal';

function isCodeMirrorAutocompleteActive() {
const codeMirrorAutocomplete = document.querySelector('.CodeMirror-hints');
const isFocusedElementInsideCodeMirrorAutoComplete = document.activeElement?.closest('.CodeMirror-hints');

return codeMirrorAutocomplete && document.body.contains(codeMirrorAutocomplete);
return isFocusedElementInsideCodeMirrorAutoComplete && codeMirrorAutocomplete && document.body.contains(codeMirrorAutocomplete);
}

const EditableOneLineEditorModal = ({
Expand All @@ -43,15 +44,14 @@ const EditableOneLineEditorModal = ({
const [buttonDimensions, setButtonDimensions] = useState<{
width: number;
height: number;
top: number;
left: number;
} | null>(null);

const onResize = useCallback(() => {
if (buttonRef.current) {
const { top, left, height, width } = buttonRef.current.getBoundingClientRect();
const { left, height, width } = buttonRef.current.getBoundingClientRect();

setButtonDimensions({ width, height, top, left });
setButtonDimensions({ width, height, left });
}
}, [buttonRef]);

Expand Down Expand Up @@ -80,9 +80,6 @@ const EditableOneLineEditorModal = ({
<DialogTrigger
isOpen={isOpen}
onOpenChange={(isOpen => {
if (isCodeMirrorAutocompleteActive()) {
return;
}
setIsOpen(isOpen);
if (!isOpen) {
onChange(value);
Expand All @@ -106,13 +103,19 @@ const EditableOneLineEditorModal = ({
isNonModal
offset={0}
placement='start top'
shouldCloseOnInteractOutside={() => {
if (isCodeMirrorAutocompleteActive()) {
return false;
}

return true;
}}
style={{
'--trigger-width': buttonDimensions?.width ? `${buttonDimensions.width}px` : '0',
'--trigger-height': buttonDimensions?.height ? `${buttonDimensions.height}px` : '0',
'--trigger-top': buttonDimensions?.top ? `${buttonDimensions.top}px` : '0',
'--trigger-left': buttonDimensions?.left ? `${buttonDimensions.left}px` : '0',
} as React.CSSProperties}
className="transform text-[--color-font] px-2 !z-10 w-[--trigger-width] h-[--trigger-height] top-[--trigger-top] left-[--trigger-left] flex relative overflow-y-auto focus:outline-none"
className="transform text-[--color-font] px-2 !z-10 w-[--trigger-width] h-[--trigger-height] !left-[--trigger-left] flex relative overflow-y-auto focus:outline-none"
>
<Dialog className='w-full outline-none'>
<FocusScope autoFocus>
Expand Down