add filename input field when creating a new workspace

Kong · Mar 6, 2025 · 7db47d3 · 7db47d3
1 parent 68fc2c4
commit 7db47d3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx b/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
@@ -20,6 +20,7 @@ import { useFetcher, useParams } from 'react-router-dom';
 
 import { isGitProject, ORG_STORAGE_RULE, type Project } from '../../../models/project';
 import { type WorkspaceScope, WorkspaceScopeKeys } from '../../../models/workspace';
+import { safeToUseInsomniaFileNameWithExt } from '../../routes/actions';
 import type { GetRepositoryDirectoryTreeResult } from '../../routes/git-project-actions';
 import { Icon } from '../icon';
 
@@ -67,10 +68,12 @@ export const NewWorkspaceModal = ({
     folderPath?: string;
     mockServerType?: 'self-hosted' | 'cloud';
     mockServerUrl?: string;
+    fileName?: string;
   }>({
     name: defaultNameByScope[scope],
     scope,
     folderPath: '',
+    fileName: '',
     mockServerType: canOnlyCreateSelfHosted ? 'self-hosted' : 'cloud',
     mockServerUrl: '',
   });
@@ -152,6 +155,21 @@ export const NewWorkspaceModal = ({
                 </TextField>
                 {isGitProject(project) && gitRepoTreeFetcher.data && (
                   <>
+                    <TextField
+                      name="fileName"
+                      value={workspaceData.fileName}
+                      onChange={fileName => setWorkspaceData({ ...workspaceData, fileName })}
+                      className="group relative flex flex-col gap-2"
+                    >
+                      <Label className='text-sm text-[--hl]'>
+                        File name
+                      </Label>
+                      <Input
+                        pattern="^[a-zA-Z0-9-_]+$"
+                        placeholder={workspaceData.name ? safeToUseInsomniaFileNameWithExt(workspaceData.name) : 'Enter the filename for your file in the repository...'}
+                        className="py-1 placeholder:italic w-full pl-2 pr-7 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"
+                      />
+                    </TextField>
                     <Label className="text-sm text-[--hl]">
                       Folder where the file will be saved in the repository:
                     </Label>

diff --git a/packages/insomnia/src/ui/routes/actions.tsx b/packages/insomnia/src/ui/routes/actions.tsx
@@ -412,6 +412,17 @@ export const moveProjectAction: ActionFunction = async ({ request, params }) =>
   return null;
 };
 
+export function safeToUseInsomniaFileNameWithExt(fileName: string) {
+  const fileNameWithoutExt = fileName.replace('.yaml', '').replace('.yml', '');
+  const fileNameWithSafeCharacters = fileNameWithoutExt
+    .toLowerCase()
+    .trim()
+    // Replace all non-alphanumeric characters with underscores
+    .replace(/[^a-z0-9_]/g, '_');
+
+  return `${fileNameWithSafeCharacters}.yaml`;
+}
+
 // Workspace
 export const createNewWorkspaceAction: ActionFunction = async ({
   params,
@@ -446,8 +457,12 @@ export const createNewWorkspaceAction: ActionFunction = async ({
   if (isGitProject(project)) {
     const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspace._id);
 
+    const fileName = formData.get('fileName')?.toString() || workspace.name;
+
+    const safeToUseFileNameWithExtension = safeToUseInsomniaFileNameWithExt(fileName);
+
     await models.workspaceMeta.update(workspaceMeta, {
-      gitRepoPath: path.join(formData.get('folderPath')?.toString() || '', `insomnia.${workspace._id}.yaml`),
+      gitRepoPath: path.join(formData.get('folderPath')?.toString() || '', safeToUseFileNameWithExtension),
     });
   }
 
@@ -700,6 +715,21 @@ export const updateWorkspaceAction: ActionFunction = async ({ request }) => {
     });
   }
 
+  // When we change the workspace name, we update the file path
+  if (patch.name !== workspace.name) {
+    const project = await models.project.getById(workspace.parentId);
+    invariant(project, 'Project not found');
+    if (isGitProject(project)) {
+      const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspace._id);
+      if (workspaceMeta.gitRepoPath) {
+        const existingPathDir = path.dirname(workspaceMeta.gitRepoPath);
+        await models.workspaceMeta.update(workspaceMeta, {
+          gitRepoPath: path.join(existingPathDir, safeToUseInsomniaFileNameWithExt(patch.name)),
+        });
+      }
+    }
+  }
+
   patch.name = patch.name || workspace.name || (workspace.scope === 'collection' ? 'My Collection' : 'my-spec.yaml');
 
   await models.workspace.update(workspace, patch);