Skip to content

Streamline workspace create & settings form [INS-2621] #9940

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

Open
godfrzero wants to merge 5 commits into
base: develop
Choose a base branch
from
+13 −10
Open

Streamline workspace create & settings form [INS-2621] #9940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5305555
fix: skip file name collision validation when file name is unchanged
godfrzero May 20, 2026
d2b2d38
fix: make .yaml extension shift with input text in workspace settings
godfrzero May 20, 2026
73f76f4
fix: allow workspace filename input to adapt down to zero width inputs
godfrzero May 21, 2026
b5e5086
fix: sanitize file name value in workspace settings modal
godfrzero May 21, 2026
682ce9e
fix: minor right padding correction for consistency between new/edit …
godfrzero May 25, 2026
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
6 changes: 3 additions & 3 deletions packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,12 +264,12 @@ export const NewWorkspaceModal = ({
<Label className="group relative flex flex-col gap-2 overflow-hidden">
<span className="text-sm text-(--hl)">File name</span>

<div className="grid w-full grid-cols-[min-content_auto] overflow-hidden rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) py-1 pr-7 pl-2 text-(--color-font) transition-colors [grid-template-areas:'input_extension'] focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
<div className="grid w-full grid-cols-[min-content_auto] overflow-hidden rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) py-1 pr-2 pl-2 text-(--color-font) transition-colors [grid-template-areas:'input_extension'] focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
<Input
placeholder={workspaceData.name ? safeToUseInsomniaFileName(workspaceData.name) : 'name'}
className="w-full min-w-[3ch] outline-hidden [grid-area:input] placeholder:italic focus:outline-hidden"
className="w-full outline-hidden [grid-area:input] placeholder:italic focus:outline-hidden"
Copy link
Copy Markdown
Contributor Author

@godfrzero godfrzero May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enforcing a minimum width on this was leading to a strange gap when typing short filenames one the hardcoded extension was allowed to move around freely:

Image

Copy link
Copy Markdown
Contributor

@pavkout pavkout Jun 1, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@godfrzero In workspace-settings-modal.tsx the invisible width-measuring span uses pointer-events-none truncate opacity-0, but the equivalent span here in new-workspace-modal.tsx keeps w-min (pointer-events-none w-min truncate opacity-0).

/>
<span className="-z-10 w-min truncate opacity-0 [grid-area:input]">
<span className="pointer-events-none w-min truncate opacity-0 [grid-area:input]">
Copy link
Copy Markdown
Contributor Author

@godfrzero godfrzero May 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replaced with pointer-events: none rather than messing with the stacking order since the intent here is to let the user "click through" the element.

{safeToUseInsomniaFileName(workspaceData.fileName || workspaceData.name || 'name')}
</span>
<span className="text-(--hl) [grid-area:extension]">.yaml</span>
Expand Down
17 changes: 10 additions & 7 deletions packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
const fileName = gitFilePath?.split('/').pop() || '';
const selectedFolderChildren = gitRepoTreeFetcher.data?.folderList[selectedFolder] || [];

const [fileNameValue, setFileNameValue] = useState<string>(safeToUseInsomniaFileName(fileName || ''));

return (
<ModalOverlay
isOpen
Expand Down Expand Up @@ -144,30 +146,31 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
<TextField
name="fileName"
isRequired
validate={fileName => {
value={safeToUseInsomniaFileName(fileNameValue || '')}
onChange={setFileNameValue}
validate={inputValue => {
if (
selectedFolderChildren
.filter(name => name !== fileName)
.includes(safeToUseInsomniaFileNameWithExt(fileName))
.includes(safeToUseInsomniaFileNameWithExt(inputValue))
) {
return 'A file with the same name already exists in the selected folder';
}

return null;
}}
defaultValue={safeToUseInsomniaFileName(fileName || '')}
className="group relative flex w-full max-w-full shrink-0 flex-col gap-2 overflow-hidden"
>
<Label className="group relative flex flex-col gap-2 overflow-hidden">
<span className="text-sm text-(--hl)">File name</span>

<div className="grid w-full grid-cols-[min-content_auto] overflow-hidden rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) py-1 pr-7 pl-2 text-(--color-font) transition-colors [grid-template-areas:'input_extension'] focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
<div className="grid w-full grid-cols-[min-content_auto] overflow-hidden rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) py-1 pr-2 pl-2 text-(--color-font) transition-colors [grid-template-areas:'input_extension'] focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
<Input
placeholder={workspace.name ? safeToUseInsomniaFileName(workspace.name) : 'name'}
className="w-full min-w-[3ch] outline-hidden [grid-area:input] placeholder:italic focus:outline-hidden"
className="w-full outline-hidden [grid-area:input] placeholder:italic focus:outline-hidden"
/>
<span className="-z-10 w-min truncate opacity-0 [grid-area:input]">
{safeToUseInsomniaFileName(fileName || workspace.name || 'name')}
<span className="pointer-events-none truncate opacity-0 [grid-area:input]">
{safeToUseInsomniaFileName(fileNameValue) || (workspace.name ? safeToUseInsomniaFileName(workspace.name) : 'name')}
</span>
<span className="text-(--hl) [grid-area:extension]">.yaml</span>
</div>
Expand Down
Loading