feat: enhance Git credential handling for local repositories

Author: gatzjames

packages/insomnia/src/ui/components/git-credentials/git-credential-select.tsx

@@ -6,20 +6,18 @@ import { Icon } from '~/basic-components/icon';
 import type { GitProviderOption } from '~/sync/git/providers/types';
 import { showSettingsModal } from '~/ui/components/modals/settings-modal';
 
-const NONE_KEY = '__none__';
-
 interface Props {
   credentials: GitCredentials[];
   providers: GitProviderOption[];
   selectedCredentialsId: string | null | undefined;
-  onChange: (credentialsId: string | null) => void;
+  onChange: (credentialsId: string) => void;
   label?: string;
 }
 
 /**
- * Picker for the Git credentials associated with a repository. Includes a "No
- * credentials" option since local repositories may not need a remote. Used by
- * the "Open existing folder" flow.
+ * Picker for the Git credentials associated with a repository. Defaults to the
+ * native (system git) credentials, which require no remote configuration. Used
+ * by the "Open existing folder" flow.
  */
 export const GitCredentialSelect: FC<Props> = ({
   credentials,
@@ -37,8 +35,8 @@ export const GitCredentialSelect: FC<Props> = ({
       isOpen={isOpen}
       onOpenChange={setIsOpen}
       aria-label={label}
-      selectedKey={selected?._id || NONE_KEY}
-      onSelectionChange={key => onChange(key === NONE_KEY ? null : (key as string))}
+      selectedKey={selected?._id ?? null}
+      onSelectionChange={key => onChange(key as string)}
     >
       <Label className="mb-2 px-0.5 pt-0 text-sm text-(--color-font)">{label}</Label>
       <Button className="flex w-full flex-1 items-center justify-between gap-2 rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) px-2 py-1 text-(--color-font) ring-1 ring-transparent transition-colors hover:bg-(--hl-xs) focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden focus:ring-inset aria-pressed:bg-(--hl-sm)">
@@ -47,24 +45,21 @@ export const GitCredentialSelect: FC<Props> = ({
             <Fragment>
               {selectedProvider?.iconName && <Icon icon={selectedProvider.iconName} className="size-4" />}
               <span>{selectedProvider?.displayName}</span>
-              <Separator orientation="vertical" className="mx-2 h-4 border-l border-(--color-font)" />
-              <span className="truncate">{selected.author?.name}</span>
+              {selected.author?.name && (
+                <Fragment>
+                  <Separator orientation="vertical" className="mx-2 h-4 border-l border-(--color-font)" />
+                  <span className="truncate">{selected.author.name}</span>
+                </Fragment>
+              )}
             </Fragment>
           ) : (
-            'No credentials (set later)'
+            'Select credentials'
           )}
         </span>
         <Icon icon="caret-down" />
       </Button>
       <Popover className="isolate flex w-(--trigger-width) min-w-max flex-col overflow-hidden rounded-md border border-solid border-(--hl-sm) bg-(--color-bg) text-sm shadow-lg select-none">
         <ListBox className="min-w-max overflow-y-auto py-2 focus:outline-hidden">
-          <ListBoxItem
-            id={NONE_KEY}
-            textValue="No credentials"
-            className="flex h-(--line-height-xs) w-full items-center gap-2 bg-transparent px-(--padding-md) whitespace-nowrap text-(--color-font) transition-colors hover:bg-(--hl-sm) focus:bg-(--hl-xs) focus:outline-hidden aria-selected:font-bold"
-          >
-            No credentials (set later)
-          </ListBoxItem>
           {credentials.map(item => {
             const provider = providers.find(p => p.type === item.provider);
             return (
@@ -77,8 +72,12 @@ export const GitCredentialSelect: FC<Props> = ({
               >
                 {provider?.iconName && <Icon icon={provider.iconName} className="size-4" />}
                 <span>{provider?.displayName}</span>
-                <Separator orientation="vertical" className="mx-2 h-4 border-l border-(--color-font)" />
-                <span className="truncate">{item.author?.name}</span>
+                {item.author?.name && (
+                  <Fragment>
+                    <Separator orientation="vertical" className="mx-2 h-4 border-l border-(--color-font)" />
+                    <span className="truncate">{item.author.name}</span>
+                  </Fragment>
+                )}
               </ListBoxItem>
             );
           })}

packages/insomnia/src/ui/components/project/project-create-form.tsx

@@ -59,6 +59,10 @@ export const ProjectCreateForm: FC<Props> = ({
   const [gitMode, setGitMode] = useState<'clone' | 'open'>('clone');
   const [openExistingDir, setOpenExistingDir] = useState('');
 
+  // Local repositories default to the native (system git) credentials, which
+  // are always present as a seeded singleton and need no remote configuration.
+  const nativeCredentialsId = credentials.find(c => c.provider === 'native')?._id;
+
   const [projectData, setProjectData] = useState<ProjectData>({
     name: defaultProjectName,
     uri: '',
@@ -94,6 +98,14 @@ export const ProjectCreateForm: FC<Props> = ({
 
   const isGitOpen = storageType === 'git' && gitMode === 'open';
 
+  // Preselect native git credentials when adopting a local folder so the user
+  // isn't forced to pick before continuing.
+  useEffect(() => {
+    if (isGitOpen && !projectData.credentialsId && nativeCredentialsId) {
+      setProjectData(prev => ({ ...prev, credentialsId: nativeCredentialsId }));
+    }
+  }, [isGitOpen, projectData.credentialsId, nativeCredentialsId]);
+
   const onUpsertProject = async () => {
     if (!storageType) {
       return;
@@ -229,11 +241,9 @@ export const ProjectCreateForm: FC<Props> = ({
                   <GitCredentialSelect
                     credentials={credentials}
                     providers={providers}
-                    selectedCredentialsId={projectData.credentialsId}
-                    onChange={credentialsId =>
-                      setProjectData(prev => ({ ...prev, credentialsId: credentialsId ?? undefined }))
-                    }
-                    label="Git credentials (optional)"
+                    selectedCredentialsId={projectData.credentialsId ?? nativeCredentialsId}
+                    onChange={credentialsId => setProjectData(prev => ({ ...prev, credentialsId }))}
+                    label="Git credentials"
                   />
                 </div>
               )}