Fixing the modal dialog and some architecture issues :)

tabby-ssh/src/components/sftpCreateDirectoryModal.component.pug

@@ -1,7 +1,6 @@
 .modal-body
     label(translate) Name for the new directory
     .form-group.w-100.mr-2
-        label(translate) Name
         input.form-control(
             type='text',
             [(ngModel)]='directoryName',

tabby-ssh/src/components/sftpCreateDirectoryModal.component.ts

@@ -1,18 +1,12 @@
 import { Component } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import path from 'path'
 import { BaseComponent } from 'tabby-core'
-import { SFTPFile, SFTPSession } from '../session/sftp'
-import { SFTPPanelComponent } from './sftpPanel.component'
 
 /** @hidden */
 @Component({
     template: require('./sftpCreateDirectoryModal.component.pug'),
 })
 export class SFTPCreateDirectoryModalComponent extends BaseComponent {
-    sftp: SFTPSession
-    item: SFTPFile
-    panel: SFTPPanelComponent
     directoryName: string
 
     constructor (
@@ -22,17 +16,9 @@ export class SFTPCreateDirectoryModalComponent extends BaseComponent {
     }
 
     create (): void {
-        this.createDirectory(this.item.directory)
+        this.modalInstance.close(this.directoryName)
     }
     cancel (): void {
-        this.modalInstance.close()
-    }
-
-    async createDirectory (currentDirectory: string): Promise<void> {
-        this.sftp.mkdir(path.join(currentDirectory, this.directoryName)).finally(() => {
-            this.panel.navigate(path.join(currentDirectory, this.directoryName))
-            this.cancel()
-        })
-
+        this.modalInstance.close('')
     }
 }

tabby-ssh/src/components/sftpPanel.component.pug

@@ -6,6 +6,10 @@
             (click)='navigate(segment.path)'
         ) {{segment.name}}
 
+    button.btn.btn-link.btn-sm.d-flex((click)='openCreateDirectoryModal()')
+        i.fas.fa-plus.mr-1
+        div(translate) Create Directory
+
     button.btn.btn-link.btn-sm.d-flex((click)='upload()')
         i.fas.fa-upload.mr-1
         div(translate) Upload

tabby-ssh/src/components/sftpPanel.component.ts

@@ -5,6 +5,8 @@ import { FileUpload, MenuItemOptions, NotificationsService, PlatformService } fr
 import { SFTPSession, SFTPFile } from '../session/sftp'
 import { SSHSession } from '../session/ssh'
 import { SFTPContextMenuItemProvider } from '../api'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { SFTPCreateDirectoryModalComponent } from './sftpCreateDirectoryModal.component'
 
 interface PathSegment {
     name: string
@@ -26,6 +28,7 @@ export class SFTPPanelComponent {
     pathSegments: PathSegment[] = []
 
     constructor (
+        private ngbModal: NgbModal,
         private platform: PlatformService,
         private notifications: NotificationsService,
         @Optional() @Inject(SFTPContextMenuItemProvider) protected contextMenuProviders: SFTPContextMenuItemProvider[],
@@ -106,6 +109,16 @@ export class SFTPPanelComponent {
         }
     }
 
+    async openCreateDirectoryModal (): Promise<void> {
+        const modal = this.ngbModal.open(SFTPCreateDirectoryModalComponent)
+        const directoryName = await modal.result
+        if (directoryName !== '') {
+            this.sftp.mkdir(path.join(this.path, directoryName)).finally(() => {
+                this.navigate(path.join(this.path, directoryName))
+            })
+        }
+    }
+
     async upload (): Promise<void> {
         const transfers = await this.platform.startUpload({ multiple: true })
         await Promise.all(transfers.map(t => this.uploadOne(t)))
@@ -113,10 +126,6 @@ export class SFTPPanelComponent {
 
     async uploadOne (transfer: FileUpload): Promise<void> {
         await this.sftp.upload(path.join(this.path, transfer.getName()), transfer)
-        const savedPath = this.path
-        if (this.path === savedPath) {
-            await this.navigate(this.path)
-        }
     }
 
     async download (itemPath: string, mode: number, size: number): Promise<void> {

tabby-ssh/src/sftpContextMenu.ts

@@ -5,7 +5,6 @@ import { SFTPSession, SFTPFile } from './session/sftp'
 import { SFTPContextMenuItemProvider } from './api'
 import { SFTPDeleteModalComponent } from './components/sftpDeleteModal.component'
 import { SFTPPanelComponent } from './components/sftpPanel.component'
-import { SFTPCreateDirectoryModalComponent } from './components/sftpCreateDirectoryModal.component'
 
 
 /** @hidden */
@@ -25,7 +24,7 @@ export class CommonSFTPContextMenu extends SFTPContextMenuItemProvider {
         return [
             {
                 click: async () => {
-                    await this.createDirectory(item, panel)
+                    await panel.openCreateDirectoryModal()
                 },
                 label: this.translate.instant('Create directory'),
             },
@@ -56,12 +55,4 @@ export class CommonSFTPContextMenu extends SFTPContextMenuItemProvider {
         modal.componentInstance.sftp = session
         await modal.result
     }
-
-    async createDirectory (item: SFTPFile, panel: SFTPPanelComponent): Promise<void> {
-        const modal = this.ngbModal.open(SFTPCreateDirectoryModalComponent)
-        modal.componentInstance.item = item
-        modal.componentInstance.sftp = panel.sftp
-        modal.componentInstance.panel = panel
-        await modal.result
-    }
 }