refactor(files): updated files tree and related logic

Author: nsemets

src/app/features/files/components/confirm-move-file-dialog/confirm-move-file-dialog.component.html

@@ -3,9 +3,14 @@
     [innerHTML]="'files.dialogs.moveFile.message' | translate: { dropNodeName: currentFolder.name, dragNodeName }"
   ></div>
   <div class="flex justify-content-end gap-2 mt-4">
-    <p-button severity="info" [label]="'common.buttons.cancel' | translate" (onClick)="dialogRef.close()"></p-button>
+    <p-button
+      severity="info"
+      [disabled]="isLoading()"
+      [label]="'common.buttons.cancel' | translate"
+      (onClick)="dialogRef.close()"
+    ></p-button>
 
-    <p-button [label]="'common.buttons.move' | translate" (onClick)="moveFiles()"></p-button>
-    <p-button [label]="'common.buttons.copy' | translate" (onClick)="copyFiles()"></p-button>
+    <p-button [disabled]="isLoading()" [label]="'common.buttons.move' | translate" (onClick)="moveFiles()"></p-button>
+    <p-button [disabled]="isLoading()" [label]="'common.buttons.copy' | translate" (onClick)="copyFiles()"></p-button>
   </div>
 </div>

src/app/features/files/components/confirm-move-file-dialog/confirm-move-file-dialog.component.spec.ts

@@ -1,52 +1,147 @@
 import { MockProvider } from 'ng-mocks';
 
-import { DynamicDialogConfig } from 'primeng/dynamicdialog';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { Subject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
-import { FilesService } from '@osf/shared/services/files.service';
-import { ToastService } from '@osf/shared/services/toast.service';
+import { FileModel } from '@osf/shared/models/files/file.model';
 
+import { FileModelMock } from '@testing/mocks/file.model.mock';
 import { provideOSFCore } from '@testing/osf.testing.provider';
-import { CustomConfirmationServiceMock } from '@testing/providers/custom-confirmation-provider.mock';
 import { provideDynamicDialogRefMock } from '@testing/providers/dynamic-dialog-ref.mock';
-import { ToastServiceMock } from '@testing/providers/toast-provider.mock';
+import {
+  FilesMoveCopyServiceMock,
+  FilesMoveCopyServiceMockType,
+} from '@testing/providers/files-move-copy-service.mock';
+
+import { MoveCopyAction } from '../../enums/move-copy-action.enum';
+import { ConfirmMoveFilesOptions } from '../../models/files-actions-options.model';
+import { FilesMoveCopyService } from '../../services/files-move-copy.service';
 
 import { ConfirmMoveFileDialogComponent } from './confirm-move-file-dialog.component';
 
-describe('ConfirmConfirmMoveFileDialogComponent', () => {
+describe('ConfirmMoveFileDialogComponent', () => {
   let component: ConfirmMoveFileDialogComponent;
   let fixture: ComponentFixture<ConfirmMoveFileDialogComponent>;
+  let dialogRefMock: DynamicDialogRef;
+  let dialogConfigMock: DynamicDialogConfig & { data: ConfirmMoveFilesOptions };
+  let filesMoveCopyService: FilesMoveCopyServiceMockType;
+
+  interface SetupOverrides {
+    files?: FileModel[];
+    destination?: FileModel;
+  }
 
-  beforeEach(() => {
-    const dialogConfigMock = {
-      data: { files: [], destination: { name: 'files' } },
+  function setup(overrides: SetupOverrides = {}) {
+    const defaultFile = FileModelMock.simple({ name: 'a.txt' });
+    const defaultDestination = FileModelMock.simple({ name: 'folder' });
+    const files = overrides.files ?? [defaultFile];
+    const destination = overrides.destination ?? defaultDestination;
+
+    const data: ConfirmMoveFilesOptions = {
+      files,
+      destination,
+      resourceId: 'resource-1',
+      storageProvider: 'osfstorage',
     };
 
+    filesMoveCopyService = FilesMoveCopyServiceMock.simple();
+    dialogConfigMock = { header: 'files.dialogs.moveFile.title', data };
+
     TestBed.configureTestingModule({
       imports: [ConfirmMoveFileDialogComponent],
       providers: [
         provideOSFCore(),
         provideDynamicDialogRefMock(),
         MockProvider(DynamicDialogConfig, dialogConfigMock),
-        MockProvider(FilesService),
-        MockProvider(ToastService, ToastServiceMock.simple()),
-        MockProvider(CustomConfirmationService, CustomConfirmationServiceMock.simple()),
+        MockProvider(FilesMoveCopyService, filesMoveCopyService),
       ],
     });
 
     fixture = TestBed.createComponent(ConfirmMoveFileDialogComponent);
     component = fixture.componentInstance;
+    dialogRefMock = TestBed.inject(DynamicDialogRef);
     fixture.detectChanges();
-  });
+  }
 
   it('should create', () => {
+    setup();
     expect(component).toBeTruthy();
   });
 
-  it('should initialize with correct properties', () => {
-    expect(component.config).toBeDefined();
-    expect(component.dialogRef).toBeDefined();
+  it('should read currentFolder from dialog data', () => {
+    const dest = FileModelMock.simple({ name: 'target' });
+    setup({ destination: dest });
+    expect(component.currentFolder).toBe(dest);
+  });
+
+  it('should set dragNodeName to the file name when one file is selected', () => {
+    setup({ files: [FileModelMock.simple({ name: 'readme.md' })] });
+    expect(component.dragNodeName).toBe('readme.md');
+  });
+
+  it('should close without a result when cancel is clicked', () => {
+    setup();
+    const buttons = fixture.nativeElement.querySelectorAll('button');
+    buttons[0].click();
+    expect(dialogRefMock.close).toHaveBeenCalledWith();
+  });
+
+  it('should call move copy service with move action and close with true on success', () => {
+    const file = FileModelMock.simple({ name: 'a.txt' });
+    const dest = FileModelMock.simple({ name: 'folder' });
+    setup({ files: [file], destination: dest });
+    component.moveFiles();
+    expect(filesMoveCopyService.execute).toHaveBeenCalledWith({
+      files: [file],
+      destination: dest,
+      resourceId: 'resource-1',
+      storageProvider: 'osfstorage',
+      action: MoveCopyAction.Move,
+    });
+    expect(dialogRefMock.close).toHaveBeenCalledWith(true);
+    expect(component.isLoading()).toBe(false);
+  });
+
+  it('should call move copy service with copy action and close with true on success', () => {
+    const file = FileModelMock.simple({ name: 'a.txt' });
+    const dest = FileModelMock.simple({ name: 'folder' });
+    setup({ files: [file], destination: dest });
+    component.copyFiles();
+    expect(filesMoveCopyService.execute).toHaveBeenCalledWith({
+      files: [file],
+      destination: dest,
+      resourceId: 'resource-1',
+      storageProvider: 'osfstorage',
+      action: MoveCopyAction.Copy,
+    });
+    expect(dialogRefMock.close).toHaveBeenCalledWith(true);
+    expect(component.isLoading()).toBe(false);
+  });
+
+  it('should ignore a second move while the first is in progress', () => {
+    setup();
+    const pending = new Subject<boolean>();
+    filesMoveCopyService.execute.mockReturnValue(pending.asObservable());
+    component.moveFiles();
+    component.moveFiles();
+    expect(filesMoveCopyService.execute).toHaveBeenCalledTimes(1);
+    pending.next(true);
+    pending.complete();
+    fixture.detectChanges();
+  });
+
+  it('should keep loading true until move finishes', () => {
+    setup();
+    const pending = new Subject<boolean>();
+    filesMoveCopyService.execute.mockReturnValue(pending.asObservable());
+    component.moveFiles();
+    expect(component.isLoading()).toBe(true);
+    pending.next(true);
+    pending.complete();
+    fixture.detectChanges();
+    expect(component.isLoading()).toBe(false);
   });
 });

src/app/features/files/components/confirm-move-file-dialog/confirm-move-file-dialog.component.ts

@@ -3,17 +3,15 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Button } from 'primeng/button';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
-import { finalize, forkJoin, of } from 'rxjs';
-import { catchError } from 'rxjs/operators';
+import { finalize, tap } from 'rxjs';
 
-import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
-import { FilesService } from '@osf/shared/services/files.service';
-import { ToastService } from '@osf/shared/services/toast.service';
-import { FileMenuType } from '@shared/enums/file-menu-type.enum';
-import { FileModel } from '@shared/models/files/file.model';
+import { FileModel } from '@osf/shared/models/files/file.model';
+
+import { MoveCopyAction } from '../../enums/move-copy-action.enum';
+import { FilesMoveCopyService } from '../../services/files-move-copy.service';
 
 @Component({
   selector: 'osf-confirm-move-file-dialog',
@@ -26,124 +24,54 @@ export class ConfirmMoveFileDialogComponent {
   readonly config = inject(DynamicDialogConfig);
   readonly dialogRef = inject(DynamicDialogRef);
 
-  private readonly filesService = inject(FilesService);
   private readonly destroyRef = inject(DestroyRef);
   private readonly translateService = inject(TranslateService);
-  private readonly toastService = inject(ToastService);
-  private readonly customConfirmationService = inject(CustomConfirmationService);
+  private readonly filesMoveCopyService = inject(FilesMoveCopyService);
 
-  readonly provider = this.config.data.storageProvider;
+  readonly currentFolder = this.config.data.destination as FileModel;
 
-  private fileProjectId = this.config.data.resourceId;
-  protected currentFolder = this.config.data.destination;
+  readonly dragNodeName =
+    this.config.data.files.length > 1
+      ? this.translateService.instant('files.dialogs.moveFile.multipleFiles', { count: this.config.data.files.length })
+      : (this.config.data.files[0]?.name ?? '');
 
-  get dragNodeName() {
-    const filesCount = this.config.data.files.length;
-    if (filesCount > 1) {
-      return this.translateService.instant('files.dialogs.moveFile.multipleFiles', { count: filesCount });
-    } else {
-      return this.config.data.files[0]?.name;
-    }
-  }
+  readonly isLoading = signal(false);
 
   copyFiles(): void {
-    return this.copyOrMoveFiles(FileMenuType.Copy);
+    this.copyOrMoveFiles(MoveCopyAction.Copy);
   }
 
   moveFiles(): void {
-    return this.copyOrMoveFiles(FileMenuType.Move);
+    this.copyOrMoveFiles(MoveCopyAction.Move);
   }
 
-  private copyOrMoveFiles(action: FileMenuType): void {
-    const path = this.currentFolder.path;
-    if (!path) {
-      throw new Error(this.translateService.instant('files.dialogs.moveFile.pathError'));
+  private copyOrMoveFiles(action: MoveCopyAction): void {
+    if (this.isLoading()) {
+      return;
     }
-    const isMoveAction = action === FileMenuType.Move;
 
-    const headerKey = isMoveAction ? 'files.dialogs.moveFile.movingHeader' : 'files.dialogs.moveFile.copingHeader';
-    this.config.header = this.translateService.instant(headerKey);
-    const files: FileModel[] = this.config.data.files;
-    const totalFiles = files.length;
-    let completed = 0;
-    const conflictFiles: { file: FileModel; link: string }[] = [];
-
-    files.forEach((file) => {
-      const link = file.links.move;
-      this.filesService
-        .moveFile(link, path, this.fileProjectId, this.provider, action)
-        .pipe(
-          takeUntilDestroyed(this.destroyRef),
-          catchError((error) => {
-            if (error.status === 409) {
-              conflictFiles.push({ file, link });
-            } else {
-              this.showErrorToast(action, error.error?.message);
-            }
-            return of(null);
-          }),
-          finalize(() => {
-            completed++;
-            if (completed === totalFiles) {
-              if (conflictFiles.length > 0) {
-                this.openReplaceMoveDialog(conflictFiles, path, action);
-              } else {
-                this.showSuccessToast(action);
-                this.config.header = this.translateService.instant('files.dialogs.moveFile.title');
-                this.completeMove();
-              }
-            }
-          })
-        )
-        .subscribe();
-    });
-  }
+    this.isLoading.set(true);
 
-  private openReplaceMoveDialog(
-    conflictFiles: { file: FileModel; link: string }[],
-    path: string,
-    action: string
-  ): void {
-    this.customConfirmationService.confirmDelete({
-      headerKey: conflictFiles.length > 1 ? 'files.dialogs.replaceFile.multiple' : 'files.dialogs.replaceFile.single',
-      messageKey: 'files.dialogs.replaceFile.message',
-      messageParams: { name: conflictFiles.map((c) => c.file.name).join(', ') },
-      acceptLabelKey: 'common.buttons.replace',
-      onConfirm: () => {
-        const replaceRequests$ = conflictFiles.map(({ link }) =>
-          this.filesService.moveFile(link, path, this.fileProjectId, this.provider, action, true).pipe(
-            takeUntilDestroyed(this.destroyRef),
-            catchError(() => of(null))
-          )
-        );
-        forkJoin(replaceRequests$).subscribe({
-          next: () => {
-            this.showSuccessToast(action);
-            this.completeMove();
-          },
-        });
-      },
-      onReject: () => {
-        const totalFiles = this.config.data.files.length;
-        if (totalFiles > conflictFiles.length) {
-          this.showErrorToast(action);
-        }
-        this.completeMove();
-      },
-    });
-  }
-
-  private showSuccessToast(action: string) {
-    const messageType = action === 'move' ? 'moveFile' : 'copyFile';
-    this.toastService.showSuccess(`files.dialogs.${messageType}.success`);
-  }
-
-  private showErrorToast(action: string, errorMessage?: string) {
-    const messageType = action === 'move' ? 'moveFile' : 'copyFile';
-    this.toastService.showError(errorMessage ?? `files.dialogs.${messageType}.error`);
-  }
+    const headerKey =
+      action === MoveCopyAction.Move ? 'files.dialogs.moveFile.movingHeader' : 'files.dialogs.moveFile.copingHeader';
+    this.config.header = this.translateService.instant(headerKey);
 
-  private completeMove(): void {
-    this.dialogRef.close(true);
+    this.filesMoveCopyService
+      .execute({
+        files: this.config.data.files,
+        destination: this.currentFolder,
+        resourceId: this.config.data.resourceId,
+        storageProvider: this.config.data.storageProvider,
+        action,
+      })
+      .pipe(
+        tap(() => this.dialogRef.close(true)),
+        finalize(() => {
+          this.isLoading.set(false);
+          this.config.header = this.translateService.instant('files.dialogs.moveFile.title');
+        }),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe();
   }
 }

src/app/features/files/components/file-metadata/file-metadata.component.html

@@ -1,8 +1,10 @@
+@let metadata = fileMetadata();
+
 <div class="p-4 flex flex-column gap-3">
   <div class="flex justify-content-between">
     <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
 
-    @if (!hasViewOnly()) {
+    @if (!hasViewOnly) {
       <div class="flex gap-2">
         <p-button
           severity="secondary"
@@ -29,11 +31,11 @@ <h2>{{ 'files.detail.fileMetadata.title' | translate }}</h2>
     <p-skeleton width="100%" height="4rem" />
   } @else {
     @for (field of metadataFields; track field.key) {
-      @if (fileMetadata()?.[field.key]) {
+      @if (metadata?.[field.key]) {
         <div class="flex flex-column gap-2">
           <h4>{{ field.label | translate }}</h4>
           <p>
-            {{ field.key === 'language' ? getLanguageName(fileMetadata()?.[field.key]!) : fileMetadata()?.[field.key] }}
+            {{ field.key === 'language' ? (metadata?.[field.key] | languageLabel) : metadata?.[field.key] }}
           </p>
         </div>
       }