mirror/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-08-04 11:52:33 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* fix: skip file name collision validation when file name is unchanged

The validate callback parameter shadowed the outer `fileName` variable
(which holds the original name with extension). The folder-children
filter compared against the bare input value instead of the full
`fileName`, so the current file was never excluded — causing a false
"already exists" error whenever only the workspace name was edited.

Renaming the parameter to `inputValue` restores access to the outer
`fileName` so the filter correctly excludes the existing file before
checking for collisions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: make .yaml extension shift with input text in workspace settings

The invisible sizer span that drives the CSS grid column width had
static content (the initial filename), so the column never resized
as the user typed and the .yaml suffix stayed at a fixed position.

Switching the TextField to controlled mode (value + onChange) lets
the sizer span reflect the live input value, causing the .yaml label
to follow the text as characters are added or removed. Also removed
the excess pr-7 right-padding since the extension is now positioned
by the grid rather than by padding offset.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: allow workspace filename input to adapt down to zero width inputs

* fix: sanitize file name value in workspace settings modal

Apply safeToUseInsomniaFileName to the TextField value prop so the
displayed and submitted value is always sanitized, matching the pattern
used in new-workspace-modal. Previously the controlled value reflected
raw input directly, bypassing character replacement.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: minor right padding correction for consistency between new/edit workspace settings filename input

* fix: remove unnecessary w-min from new workspace modal as well

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vivek Thuravupala
2026-06-05 11:37:59 -07:00
committed by GitHub
parent 4bc34bba99
commit bece18552e
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
View File

@@ -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"
/>
<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>

17
packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx
View File

@@ -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
@@ -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>