local: UI to support single "command line" in profiles

tabby-local/package.json

@@ -22,13 +22,11 @@
   },
   "devDependencies": {
     "@types/deep-equal": "^1.0.0",
-    "@types/shell-escape": "^0.2.0",
     "ansi-colors": "^4.1.1",
     "dataurl": "0.1.0",
     "deep-equal": "2.0.5",
     "ps-node": "^0.1.6",
     "runes": "^0.4.2",
-    "shell-escape": "^0.2.0",
     "utils-decorators": "^1.8.3"
   },
   "peerDependencies": {

tabby-local/src/components/commandLineEditor.component.pug

@@ -0,0 +1,41 @@
+ng-container(*ngIf='!argvMode')
+    .form-group
+        label Command line
+        .input-group
+            .input-group-prepend
+                button.btn.btn-secondary((click)='switchToArgv()', title='Switch to split arguments')
+                    i.fas.fa-fw.fa-caret-right
+            input.form-control.text-monospace(
+                [(ngModel)]='command',
+                (ngModelChange)='parseCommand()'
+            )
+
+ng-container(*ngIf='argvMode')
+    .form-group
+        label Program
+        .input-group
+            .input-group-prepend
+                button.btn.btn-secondary((click)='switchToCommand()', title='Switch to a single-line command')
+                    i.fas.fa-fw.fa-caret-down
+            input.form-control.text-monospace(
+                type='text',
+                [(ngModel)]='_model.command',
+            )
+
+    .form-group
+        label Arguments
+        .input-group(
+            *ngFor='let arg of _model.args; index as i; trackBy: trackByIndex',
+        )
+            input.form-control.text-monospace(
+                type='text',
+                [(ngModel)]='_model.args[i]',
+            )
+            .input-group-append
+                button.btn.btn-secondary((click)='_model.args.splice(i, 1)')
+                    i.fas.fa-fw.fa-trash
+
+        .mt-2
+            button.btn.btn-secondary((click)='_model.args.push("")')
+                i.fas.fa-plus.mr-2
+                | Add

tabby-local/src/components/commandLineEditor.component.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import * as shellQuote from 'shell-quote'
+import { Component, Input } from '@angular/core'
+import { SessionOptions } from '../api'
+
+/** @hidden */
+@Component({
+    selector: 'command-line-editor',
+    template: require('./commandLineEditor.component.pug'),
+})
+export class CommandLineEditorComponent {
+    @Input() argvMode = false
+    @Input() _model: SessionOptions
+    command = ''
+
+    @Input() get model (): SessionOptions {
+        return this._model
+    }
+
+    set model (value: SessionOptions) {
+        this._model = value
+        this.updateCommand()
+    }
+
+    switchToCommand () {
+        this.updateCommand()
+        this.argvMode = false
+    }
+
+    switchToArgv () {
+        this.argvMode = true
+    }
+
+    parseCommand () {
+        const args = shellQuote.parse(this.command)
+        this.model.command = args[0] ?? ''
+        this.model.args = args.slice(1)
+    }
+
+    updateCommand () {
+        this.command = shellQuote.quote([
+            this.model.command,
+            ...this.model.args ?? [],
+        ])
+    }
+
+    trackByIndex (index) {
+        return index
+    }
+}

tabby-local/src/components/environmentEditor.component.pug

@@ -1,12 +1,12 @@
 .mb-2.d-flex.align-items-center(*ngFor='let pair of vars')
     .input-group
-        input.form-control.w-25([(ngModel)]='pair.key', (blur)='emitUpdate()', placeholder='Variable name')
+        input.form-control.w-25.text-monospace([(ngModel)]='pair.key', (blur)='emitUpdate()', placeholder='Variable name')
         .input-group-append
             .input-group-text =
-        input.form-control.w-50([(ngModel)]='pair.value', (blur)='emitUpdate()', placeholder='Value')
+        input.form-control.w-50.text-monospace([(ngModel)]='pair.value', (blur)='emitUpdate()', placeholder='Value')
         .input-group-append
             button.btn.btn-secondary((click)='removeEnvironmentVar(pair.key)')
-                i.fas.fa-trash
+                i.fas.fa-fw.fa-trash
 
 button.btn.btn-secondary((click)='addEnvironmentVar()')
     i.fas.fa-plus.mr-2

tabby-local/src/components/localProfileSettings.component.pug

@@ -1,27 +1,4 @@
-.form-group
-    label Command
-    input.form-control(
-        type='text',
-        [(ngModel)]='profile.options.command',
-    )
-
-.form-group
-    label Arguments
-    .input-group(
-        *ngFor='let arg of profile.options.args; index as i; trackBy: trackByIndex',
-    )
-        input.form-control(
-            type='text',
-            [(ngModel)]='profile.options.args[i]',
-        )
-        .input-group-append
-            button.btn.btn-secondary((click)='profile.options.args.splice(i, 1)')
-                i.fas.fa-trash
-
-    .mt-2
-        button.btn.btn-secondary((click)='profile.options.args.push("")')
-            i.fas.fa-plus.mr-2
-            | Add
+command-line-editor([model]='profile.options')
 
 .form-line(*ngIf='uac.isAvailable')
     .header

tabby-local/src/components/localProfileSettings.component.ts

@@ -40,8 +40,4 @@ export class LocalProfileSettingsComponent implements ProfileSettingsComponent<L
         )).filePaths
         this.profile.options.cwd = paths[0]
     }
-
-    trackByIndex (index) {
-        return index
-    }
 }

tabby-local/src/index.ts

@@ -13,6 +13,7 @@ import { TerminalTabComponent } from './components/terminalTab.component'
 import { ShellSettingsTabComponent } from './components/shellSettingsTab.component'
 import { EnvironmentEditorComponent } from './components/environmentEditor.component'
 import { LocalProfileSettingsComponent } from './components/localProfileSettings.component'
+import { CommandLineEditorComponent } from './components/commandLineEditor.component'
 
 import { TerminalService } from './services/terminal.service'
 import { DockMenuService } from './services/dockMenu.service'
@@ -96,11 +97,13 @@ import { LocalProfilesService } from './profiles'
         TerminalTabComponent,
         ShellSettingsTabComponent,
         EnvironmentEditorComponent,
+        CommandLineEditorComponent,
         LocalProfileSettingsComponent,
     ],
     exports: [
         TerminalTabComponent,
         EnvironmentEditorComponent,
+        CommandLineEditorComponent,
     ],
 })
 export default class LocalTerminalModule { // eslint-disable-line @typescript-eslint/no-extraneous-class

tabby-local/yarn.lock

@@ -7,11 +7,6 @@
   resolved "https://registry.yarnpkg.com/@types/deep-equal/-/deep-equal-1.0.1.tgz#71cfabb247c22bcc16d536111f50c0ed12476b03"
   integrity sha512-mMUu4nWHLBlHtxXY17Fg6+ucS/MnndyOWyOe7MmwkoMYxvfQU2ajtRaEvqSUv+aVkMqH/C0NCI8UoVfRNQ10yg==
 
-"@types/shell-escape@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@types/shell-escape/-/shell-escape-0.2.0.tgz#cd2f0df814388599dd07196dcc510de2669d1ed2"
-  integrity sha512-7kUdtJtUylvyISJbe9FMcvMTjRdP0EvNDO1WbT0lT22k/IPBiPRTpmWaKu5HTWLCGLQRWVHrzVHZktTDvvR23g==
-
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -357,11 +352,6 @@ runes@^0.4.2:
   resolved "https://registry.yarnpkg.com/runes/-/runes-0.4.3.tgz#32f7738844bc767b65cc68171528e3373c7bb355"
   integrity sha512-K6p9y4ZyL9wPzA+PMDloNQPfoDGTiFYDvdlXznyGKgD10BJpcAosvATKrExRKOrNLgD8E7Um7WGW0lxsnOuNLg==
 
-shell-escape@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/shell-escape/-/shell-escape-0.2.0.tgz#68fd025eb0490b4f567a027f0bf22480b5f84133"
-  integrity sha1-aP0CXrBJC09WegJ/C/IkgLX4QTM=
-
 side-channel@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"