Merge pull request #344 from PermanentOrg/PER-8276-inform-user-about-…

…upload-destination

PEr-8276 inform user about upload destination

src/app/core/components/upload-progress/upload-progress.component.html

@@ -1,5 +1,11 @@
 <!-- @format -->
-<div class="upload-wrapper" [ngClass]="{ visible: visible, fade: useFade }">
+<div
+  class="upload-wrapper target-folder"
+  [ngClass]="{
+    visible: visible,
+    fade: useFade
+  }"
+>
   <div
     class="upload-progress"
     [ngStyle]="{ transform: getProgressTransform() }"
@@ -13,7 +19,10 @@
     class="upload"
     *ngIf="status === UploadSessionStatus.InProgress && currentItem"
   >
-    <div class="current-file">{{ currentItem.file.name }}</div>
+    <div class="current-file">
+      Uploading {{ currentItem.file.name }} to
+      {{ folderTargetName }}
+    </div>
     <div class="file-count">
       <strong>{{ fileCount.current }}</strong> of
       <strong>{{ fileCount.total }}</strong>

src/app/core/components/upload-progress/upload-progress.component.scss

@@ -120,5 +120,11 @@ $easing: $tweaked-ease;
     &.visible {
       opacity: 1;
     }
+
+    &.target-folder {
+      width: fit-content;
+      padding: 1.5rem 5rem;
+      transform: translate(-40%, -100%);
+    }
   }
 }

src/app/core/components/upload-progress/upload-progress.component.spec.ts

@@ -0,0 +1,115 @@
+/* @format */
+import { UploadService } from '@core/services/upload/upload.service';
+import { CoreModule } from '@core/core.module';
+import { EventEmitter } from '@angular/core';
+import { Shallow } from 'shallow-render';
+import {
+  UploadProgressEvent,
+  UploadSessionStatus,
+} from '@core/services/upload/upload.session';
+import { UploadItem } from '@core/services/upload/uploadItem';
+import { FolderVO } from '@models/index';
+import { UploadProgressComponent } from './upload-progress.component';
+
+class MockUploadSession {
+  public progress = new EventEmitter<UploadProgressEvent>();
+}
+
+const mockUploadService = {
+  registerComponent: () => {},
+  uploadSession: new MockUploadSession(),
+  getTargetFolderId: () => {
+    return 10;
+  },
+  getTargetFolderName: () => {
+    return 'testfolder';
+  },
+};
+
+describe('UploadProgressComponent', () => {
+  let shallow: Shallow<UploadProgressComponent>;
+
+  beforeEach(() => {
+    shallow = new Shallow(UploadProgressComponent, CoreModule).mock(
+      UploadService,
+      mockUploadService
+    );
+  });
+
+  it('should create', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance).toBeTruthy();
+  });
+
+  it('should become visible when show() is called', async () => {
+    const { instance } = await shallow.render();
+    instance.show();
+
+    expect(instance.visible).toBe(true);
+  });
+
+  it('should display the correct file name and the folder when dragging the file into a folder', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    const mockContent = new Uint8Array(10000);
+    const progressEvent = {
+      item: new UploadItem(
+        new File([mockContent], 'testfile.txt'),
+        new FolderVO({
+          displayName: 'testfolder',
+          pathAsArchiveNbr: [],
+          folderId: 10,
+        })
+      ),
+      statistics: { current: 1, total: 5, completed: 0, error: 0 },
+      sessionStatus: UploadSessionStatus.InProgress,
+    };
+
+    mockUploadService.uploadSession.progress.emit(progressEvent);
+
+    fixture.detectChanges();
+
+    expect(find('.current-file').nativeElement.textContent.trim()).toBe(
+      `Uploading ${progressEvent.item.file.name} to ${progressEvent.item.parentFolder.displayName}`
+    );
+
+    const fileCountElements = find('.file-count strong');
+
+    expect(fileCountElements[0].nativeElement.textContent).toEqual('1');
+
+    expect(fileCountElements[1].nativeElement.textContent).toEqual('5');
+  });
+
+  it('should display the correct file name, the target folder and the current folder when dragging a file  nested into a folder over a folder', async () => {
+    const { find, instance, fixture } = await shallow.render();
+
+    const mockContent = new Uint8Array(10000);
+    const progressEvent = {
+      item: new UploadItem(
+        new File([mockContent], 'testfile.txt'),
+        new FolderVO({
+          displayName: 'testfolder1',
+          pathAsArchiveNbr: [],
+          folderId: 9,
+        })
+      ),
+      statistics: { current: 1, total: 5, completed: 0, error: 0 },
+      sessionStatus: UploadSessionStatus.InProgress,
+    };
+
+    mockUploadService.uploadSession.progress.emit(progressEvent);
+
+    fixture.detectChanges();
+
+    expect(find('.current-file').nativeElement.textContent.trim()).toBe(
+      `Uploading ${progressEvent.item.file.name} to testfolder/${progressEvent.item.parentFolder.displayName}`
+    );
+
+    const fileCountElements = find('.file-count strong');
+
+    expect(fileCountElements[0].nativeElement.textContent).toEqual('1');
+
+    expect(fileCountElements[1].nativeElement.textContent).toEqual('5');
+  });
+});

src/app/core/components/upload-progress/upload-progress.component.ts

@@ -29,6 +29,9 @@ export class UploadProgressComponent {
   public currentItem: UploadItem;
   public fileCount: any;
 
+  public isUploadingFolder = false;
+  public folderTargetName = '';
+
   constructor(private upload: UploadService) {
     this.upload.registerComponent(this);
 
@@ -40,13 +43,16 @@ export class UploadProgressComponent {
             this.upload.showProgress();
             break;
           case UploadSessionStatus.Done:
-            this.upload.dismissProgress();
-            break;
           case UploadSessionStatus.DefaultError:
-            this.upload.dismissProgress();
-            break;
           case UploadSessionStatus.StorageError:
             this.upload.dismissProgress();
+            if (this.isUploadingFolder) {
+              this.isUploadingFolder = false;
+              this.folderTargetName = '';
+            }
+            break;
+          case UploadSessionStatus.InProgress:
+            this.displayFolderUploadDestination(progressEvent);
             break;
         }
 
@@ -74,4 +80,24 @@ export class UploadProgressComponent {
       return 'scaleX(0)';
     }
   }
+
+  displayFolderUploadDestination(progressEvent: UploadProgressEvent) {
+    this.isUploadingFolder =
+      this.upload.getTargetFolderId() !==
+      progressEvent.item?.parentFolder.folderId;
+    if (this.isUploadingFolder) {
+      this.folderTargetName = `${this.upload.getTargetFolderName()}/${
+        progressEvent.item?.parentFolder.displayName
+      }`;
+    } else {
+      if (
+        progressEvent.item?.parentFolder.displayName === 'My Files' &&
+        progressEvent.item?.parentFolder.pathAsArchiveNbr.length === 1
+      ) {
+        this.folderTargetName = 'Private';
+      } else {
+        this.folderTargetName = progressEvent.item?.parentFolder.displayName;
+      }
+    }
+  }
 }

src/app/core/services/upload/upload.service.ts

@@ -48,6 +48,8 @@ export class UploadService implements HasSubscriptions, OnDestroy {
   protected uploadStart: Date;
 
   private debug = debug('service:upload');
+  private targetFolderName = '';
+  private targetFolderId: number;
 
   constructor(
     private api: ApiService,
@@ -241,6 +243,10 @@ export class UploadService implements HasSubscriptions, OnDestroy {
       }
     }
 
+    const parentFolder = pathsByDepth.get(0)[0].folder;
+
+    this.setTargetFolderNameAndId(parentFolder);
+
     this.uploadSession.startFolders();
 
     // group folder creation at each depth
@@ -308,6 +314,34 @@ export class UploadService implements HasSubscriptions, OnDestroy {
     }
   }
 
+  private setTargetFolderName(folder: FolderVO): void {
+    if (
+      folder.displayName === 'My Files' &&
+      folder.pathAsArchiveNbr.length === 1
+    ) {
+      this.targetFolderName = 'Private';
+    } else {
+      this.targetFolderName = folder.displayName;
+    }
+  }
+
+  private setTargetFolderId(folderId: number): void {
+    this.targetFolderId = folderId;
+  }
+
+  private setTargetFolderNameAndId(folder: FolderVO) {
+    this.setTargetFolderName(folder);
+    this.setTargetFolderId(folder.folderId);
+  }
+
+  public getTargetFolderName(): string {
+    return this.targetFolderName;
+  }
+
+  public getTargetFolderId(): number {
+    return this.targetFolderId;
+  }
+
   showProgress() {
     if (this.component) {
       this.component.show();