allow directly editing items from the profile selector - fixes #6039

tabby-core/src/api/profileProvider.ts

@@ -56,5 +56,9 @@ export abstract class ProfileProvider<P extends Profile> {
         return null
     }
 
+    intoQuickConnectString (profile: P): string|null {
+        return null
+    }
+
     deleteProfile (profile: P): void { }
 }

tabby-core/src/api/selector.ts

@@ -5,6 +5,7 @@ export interface SelectorOption<T> {
     result?: T
     icon?: string
     freeInputPattern?: string
+    freeInputEquivalent?: string
     color?: string
     weight?: number
     callback?: (string?) => void

tabby-core/src/components/selectorModal.component.pug

@@ -23,4 +23,10 @@
                 )
                 .title.mr-2 {{getOptionText(option)}}
                 .description.no-wrap.text-muted {{option.description}}
-                .no-wrap.badge.badge-secondary.text-muted.ml-auto(*ngIf='selectedIndex == i') Enter
+                .ml-auto
+                .no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i && canEditSelected()')
+                    span Backspace
+                    i.fas.fa-pencil.ml-1
+                .no-wrap.badge.badge-secondary.text-muted.ml-2(*ngIf='selectedIndex == i')
+                    span Enter
+                    i.fas.fa-arrow-right.ml-1

tabby-core/src/components/selectorModal.component.ts

@@ -27,7 +27,7 @@ export class SelectorModalComponent<T> {
         this.hasGroups = this.options.some(x => x.group)
     }
 
-    @HostListener('keyup', ['$event']) onKeyUp (event: KeyboardEvent): void {
+    @HostListener('keydown', ['$event']) onKeyUp (event: KeyboardEvent): void {
         if (event.key === 'ArrowUp') {
             this.selectedIndex--
             event.preventDefault()
@@ -42,6 +42,10 @@ export class SelectorModalComponent<T> {
         if (event.key === 'Escape') {
             this.close()
         }
+        if (event.key === 'Backspace' && this.canEditSelected()) {
+            this.filter = this.filteredOptions[this.selectedIndex].freeInputEquivalent!
+            this.onFilterChange()
+        }
 
         this.selectedIndex = (this.selectedIndex + this.filteredOptions.length) % this.filteredOptions.length
         Array.from(this.itemChildren)[this.selectedIndex]?.nativeElement.scrollIntoView({
@@ -85,6 +89,10 @@ export class SelectorModalComponent<T> {
         this.modalInstance.close(option.result)
     }
 
+    canEditSelected (): boolean {
+        return !this.filter && !!this.filteredOptions[this.selectedIndex].freeInputEquivalent && this.options.some(x => x.freeInputPattern)
+    }
+
     close (): void {
         this.modalInstance.dismiss()
     }

tabby-core/src/services/profiles.service.ts

@@ -90,9 +90,12 @@ export class ProfilesService {
 
     selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> {
         const fullProfile = this.getConfigProxyForProfile(profile)
+        const provider = this.providerForProfile(fullProfile)
+        const freeInputEquivalent = provider?.intoQuickConnectString(fullProfile) ?? undefined
         return {
             ...profile,
-            description: this.providerForProfile(fullProfile)?.getDescription(fullProfile),
+            freeInputEquivalent,
+            description: provider?.getDescription(fullProfile),
         }
     }
 

tabby-ssh/src/profiles.ts

@@ -141,4 +141,15 @@ export class SSHProfilesService extends ProfileProvider<SSHProfile> {
             },
         }
     }
+
+    intoQuickConnectString (profile: SSHProfile): string|null {
+        let s = profile.options.host
+        if (profile.options.user !== 'root') {
+            s = `${profile.options.user}@${s}`
+        }
+        if (profile.options.port !== 22) {
+            s = `${s}:${profile.options.port}`
+        }
+        return s
+    }
 }