sftp: allow editing remote files locally - fixes #4311

tabby-electron/src/index.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { PlatformService, LogService, UpdaterService, DockingService, HostAppService, ThemesService, Platform, AppService, ConfigService, WIN_BUILD_FLUENT_BG_SUPPORTED, isWindowsBuild, HostWindowService, HotkeyProvider, ConfigProvider, FileProvider } from 'tabby-core'
 import { TerminalColorSchemeProvider } from 'tabby-terminal'
+import { SFTPContextMenuItemProvider } from 'tabby-ssh'
 
 import { HyperColorSchemes } from './colorSchemes'
 import { ElectronPlatformService } from './services/platform.service'
@@ -14,11 +15,12 @@ import { ElectronHostAppService } from './services/hostApp.service'
 import { ElectronService } from './services/electron.service'
 import { ElectronHotkeyProvider } from './hotkeys'
 import { ElectronConfigProvider } from './config'
+import { EditSFTPContextMenu } from './sftpContextMenu'
 
 @NgModule({
     providers: [
         { provide: TerminalColorSchemeProvider, useClass: HyperColorSchemes, multi: true },
-        { provide: PlatformService, useClass: ElectronPlatformService },
+        { provide: PlatformService, useExisting: ElectronPlatformService },
         { provide: HostWindowService, useExisting: ElectronHostWindow },
         { provide: HostAppService, useExisting: ElectronHostAppService },
         { provide: LogService, useClass: ElectronLogService },
@@ -27,6 +29,7 @@ import { ElectronConfigProvider } from './config'
         { provide: HotkeyProvider, useClass: ElectronHotkeyProvider, multi: true },
         { provide: ConfigProvider, useClass: ElectronConfigProvider, multi: true },
         { provide: FileProvider, useClass: ElectronFileProvider, multi: true },
+        { provide: SFTPContextMenuItemProvider, useClass: EditSFTPContextMenu, multi: true },
     ],
 })
 export default class ElectronModule {

tabby-electron/src/services/platform.service.ts

@@ -20,7 +20,7 @@ try {
     var wnr = require('windows-native-registry')
 } catch { }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class ElectronPlatformService extends PlatformService {
     supportsWindowControls = true
     private configPath: string
@@ -189,7 +189,7 @@ export class ElectronPlatformService extends PlatformService {
         this.electron.app.exit(0)
     }
 
-    async startUpload (options?: FileUploadOptions): Promise<FileUpload[]> {
+    async startUpload (options?: FileUploadOptions, paths?: string[]): Promise<FileUpload[]> {
         options ??= { multiple: false }
 
         const properties: any[] = ['openFile', 'treatPackageAsDirectory']
@@ -197,18 +197,21 @@ export class ElectronPlatformService extends PlatformService {
             properties.push('multiSelections')
         }
 
-        const result = await this.electron.dialog.showOpenDialog(
-            this.hostWindow.getWindow(),
-            {
-                buttonLabel: 'Select',
-                properties,
-            },
-        )
-        if (result.canceled) {
-            return []
+        if (!paths) {
+            const result = await this.electron.dialog.showOpenDialog(
+                this.hostWindow.getWindow(),
+                {
+                    buttonLabel: 'Select',
+                    properties,
+                },
+            )
+            if (result.canceled) {
+                return []
+            }
+            paths = result.filePaths
         }
 
-        return Promise.all(result.filePaths.map(async p => {
+        return Promise.all(paths.map(async p => {
             const transfer = new ElectronFileUpload(p, this.electron)
             await wrapPromise(this.zone, transfer.open())
             this.fileTransferStarted.next(transfer)
@@ -216,17 +219,20 @@ export class ElectronPlatformService extends PlatformService {
         }))
     }
 
-    async startDownload (name: string, mode: number, size: number): Promise<FileDownload|null> {
-        const result = await this.electron.dialog.showSaveDialog(
-            this.hostWindow.getWindow(),
-            {
-                defaultPath: name,
-            },
-        )
-        if (!result.filePath) {
-            return null
+    async startDownload (name: string, mode: number, size: number, filePath?: string): Promise<FileDownload|null> {
+        if (!filePath) {
+            const result = await this.electron.dialog.showSaveDialog(
+                this.hostWindow.getWindow(),
+                {
+                    defaultPath: name,
+                },
+            )
+            if (!result.filePath) {
+                return null
+            }
+            filePath = result.filePath
         }
-        const transfer = new ElectronFileDownload(result.filePath, mode, size, this.electron)
+        const transfer = new ElectronFileDownload(filePath, mode, size, this.electron)
         await wrapPromise(this.zone, transfer.open())
         this.fileTransferStarted.next(transfer)
         return transfer

tabby-electron/src/sftpContextMenu.ts

@@ -0,0 +1,59 @@
+import * as tmp from 'tmp-promise'
+import * as path from 'path'
+import * as fs from 'fs'
+import { Subject, debounceTime, debounce } from 'rxjs'
+import { Injectable } from '@angular/core'
+import { MenuItemOptions } from 'tabby-core'
+import { SFTPFile, SFTPPanelComponent, SFTPContextMenuItemProvider, SFTPSession } from 'tabby-ssh'
+import { ElectronPlatformService } from './services/platform.service'
+
+
+/** @hidden */
+@Injectable()
+export class EditSFTPContextMenu extends SFTPContextMenuItemProvider {
+    weight = 0
+
+    constructor (
+        private platform: ElectronPlatformService,
+    ) {
+        super()
+    }
+
+    async getItems (item: SFTPFile, panel: SFTPPanelComponent): Promise<MenuItemOptions[]> {
+        if (item.isDirectory) {
+            return []
+        }
+        return [
+            {
+                click: () => this.edit(item, panel.sftp),
+                label: 'Edit locally',
+            },
+        ]
+    }
+
+    private async edit (item: SFTPFile, sftp: SFTPSession) {
+        const tempDir = (await tmp.dir({ unsafeCleanup: true })).path
+        const tempPath = path.join(tempDir, item.name)
+        const transfer = await this.platform.startDownload(item.name, item.mode, item.size, tempPath)
+        if (!transfer) {
+            return
+        }
+        await sftp.download(item.fullPath, transfer)
+        this.platform.openPath(tempPath)
+
+        const events = new Subject<string>()
+        const watcher = fs.watch(tempPath, event => events.next(event))
+        events.pipe(debounceTime(1000), debounce(async event => {
+            if (event === 'rename') {
+                watcher.close()
+            }
+            const upload = await this.platform.startUpload({ multiple: false }, [tempPath])
+            if (!upload.length) {
+                return
+            }
+            sftp.upload(item.fullPath, upload[0])
+        })).subscribe()
+        watcher.on('close', () => events.complete())
+        sftp.closed$.subscribe(() => watcher.close())
+    }
+}