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

Merged
godfrzero merged 7 commits into from
Jun 5, 2026
+13 −10
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b64904d
fix: skip file name collision validation when file name is unchanged
godfrzero May 20, 2026
525fbcd
fix: make .yaml extension shift with input text in workspace settings
godfrzero May 20, 2026
c6c50d0
fix: allow workspace filename input to adapt down to zero width inputs
godfrzero May 21, 2026
9d0ceca
fix: sanitize file name value in workspace settings modal
godfrzero May 21, 2026
00a057a
fix: minor right padding correction for consistency between new/edit …
godfrzero May 25, 2026
a990046
fix: remove unnecessary w-min from new workspace modal as well
godfrzero Jun 3, 2026
0b22d18
Merge branch 'develop' into fix/ws-settings-edit
godfrzero Jun 5, 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 @@ -267,12 +267,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).

Copy link
Copy Markdown
Contributor Author

@godfrzero godfrzero Jun 3, 2026

Choose a reason for hiding this comment

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

I've removed it from here as well. It shouldn't make a difference in practice since min-content and the default would behave the same if we're disallowing spaces and replacing other characters like . with _.

/>
<span className="-z-10 w-min truncate opacity-0 [grid-area:input]">
<span className="pointer-events-none truncate opacity-0 [grid-area:input]">
{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