refactor(files): updated files and related components

Author: nsemets

src/app/features/files/pages/files/files.component.html

@@ -24,7 +24,7 @@
       @if (!isMoveDialogOpened()) {
         <osf-files-selection-actions
           [canUpdateFiles]="canUploadFiles()"
-          [selectedFiles]="filesSelection"
+          [selectedFilesCount]="filesSelection.length"
           [hasViewOnly]="hasViewOnly()"
           (deleteSelected)="onDeleteSelected()"
           (moveSelected)="onMoveSelected()"
@@ -130,10 +130,12 @@
       [viewOnly]="!canEdit()"
       [supportUpload]="canUploadFiles()"
       [resourceId]="resourceId()"
+      [resourceType]="currentResourceType()"
       [provider]="provider()"
       [allowedMenuActions]="allowedMenuActions()"
       [scrollHeight]="'500px'"
       [selectedFiles]="filesSelection"
+      [(foldersStack)]="foldersStack"
       (selectFile)="onFileTreeSelected($event)"
       (unselectFile)="onFileTreeUnselected($event)"
       (clearSelection)="onClearSelection()"
@@ -144,7 +146,6 @@
       (loadFiles)="onLoadFiles($event)"
       (setCurrentFolder)="setCurrentFolder($event)"
       (setMoveDialogCurrentFolder)="setMoveDialogCurrentFolder($event)"
-      (updateFoldersStack)="onUpdateFoldersStack($event)"
       (resetFilesProvider)="resetOnDialogClose()"
     >
     </osf-files-tree>

src/app/features/files/pages/files/files.component.ts

@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
-import { TreeDragDropService } from 'primeng/api';
 import { Button } from 'primeng/button';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
@@ -51,7 +50,7 @@ import { FILE_SIZE_LIMIT } from '@osf/shared/constants/files-limits.const';
 import { ALL_SORT_OPTIONS } from '@osf/shared/constants/sort-options.const';
 import { SupportedFeature } from '@osf/shared/enums/addon-supported-features.enum';
 import { FileMenuType } from '@osf/shared/enums/file-menu-type.enum';
-import { ResourceType } from '@osf/shared/enums/resource-type.enum';
+import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { FilePageLinkModel } from '@osf/shared/models/files/file-page-link.model';
 import { RenamedFileLinkModel } from '@osf/shared/models/files/renamed-file-link.model';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
@@ -112,7 +111,6 @@ import {
   templateUrl: './files.component.html',
   styleUrl: './files.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [TreeDragDropService],
 })
 export class FilesComponent {
   googleFilePickerComponent = viewChild(GoogleFilePickerComponent);
@@ -162,6 +160,9 @@ export class FilesComponent {
   readonly supportedFeatures = select(FilesSelectors.getStorageSupportedFeatures);
   readonly hasWriteAccess = select(CurrentResourceSelectors.hasResourceWriteAccess);
   readonly hasAdminAccess = select(CurrentResourceSelectors.hasResourceAdminAccess);
+  readonly currentResourceType = computed<CurrentResourceType>(
+    () => (this.resourceMetadata()?.type as CurrentResourceType) ?? CurrentResourceType.Projects
+  );
 
   readonly isGoogleDrive = signal<boolean>(false);
   readonly accountId = signal<string>('');
@@ -428,8 +429,11 @@ export class FilesComponent {
   }
 
   onFileTreeSelected(file: FileModel): void {
-    this.filesSelection.push(file);
-    this.filesSelection = [...new Set(this.filesSelection)];
+    if (this.filesSelection.some((selectedFile) => selectedFile.id === file.id)) {
+      return;
+    }
+
+    this.filesSelection = [...this.filesSelection, file];
   }
 
   onFileTreeUnselected(file: FileModel): void {
@@ -610,13 +614,24 @@ export class FilesComponent {
   }
 
   navigateToFile(file: FileModel) {
+    if (file.guid) {
+      this.openFile(file.guid);
+      return;
+    }
+
+    this.filesService.getFileGuid(file.id).subscribe((file) => {
+      if (file.guid) {
+        this.openFile(file.guid);
+      }
+    });
+  }
+
+  private openFile(guid: string): void {
     const extras = this.hasViewOnly()
       ? { queryParams: { view_only: this.viewOnlyService.getViewOnlyParamFromUrl(this.router.url) } }
       : undefined;
 
-    const url = this.router.serializeUrl(this.router.createUrlTree(['/', file.guid], extras));
-
-    window.open(url, '_blank');
+    window.open(this.router.serializeUrl(this.router.createUrlTree(['/', guid], extras)), '_blank');
   }
 
   getAddonName(addons: ConfiguredAddonModel[], provider: string): string {
@@ -632,9 +647,7 @@ export class FilesComponent {
     const googleDrive = addons?.find((addon) => addon.externalServiceName === FileProvider.GoogleDrive);
     if (googleDrive) {
       this.accountId.set(googleDrive.baseAccountId);
-      this.selectedRootFolder.set({
-        itemId: googleDrive.selectedStorageItemId,
-      });
+      this.selectedRootFolder.set({ itemId: googleDrive.selectedStorageItemId });
     }
   }
 
@@ -643,10 +656,6 @@ export class FilesComponent {
     this.updateFilesList();
   }
 
-  onUpdateFoldersStack(newStack: FileFolderModel[]): void {
-    this.foldersStack = [...newStack];
-  }
-
   handleRootFolderChange(selectedFolder: FileLabelModel) {
     const provider = selectedFolder.folder?.provider;
     const resourceId = this.resourceId();

src/app/features/preprints/components/stepper/file-step/file-step.component.html

@@ -95,6 +95,7 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
         [files]="projectFiles()"
         [totalCount]="filesTotalCount()"
         [storage]="null"
+        [resourceType]="resourceType"
         [selectionMode]="null"
         [isLoading]="areProjectFilesLoading() || isCurrentFolderLoading()"
         [resourceId]="selectedProjectId()!"

src/app/features/preprints/components/stepper/file-step/file-step.component.ts

@@ -43,6 +43,7 @@ import {
 import { FilesTreeComponent } from '@osf/shared/components/files-tree/files-tree.component';
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { ClearFileDirective } from '@osf/shared/directives/clear-file.directive';
+import { CurrentResourceType } from '@osf/shared/enums/resource-type.enum';
 import { StringOrNull } from '@osf/shared/helpers/types.helper';
 import { FileModel } from '@osf/shared/models/files/file.model';
 import { FileFolderModel } from '@osf/shared/models/files/file-folder.model';
@@ -89,6 +90,7 @@ export class FileStepComponent implements OnInit {
   });
 
   readonly PreprintFileSource = PreprintFileSource;
+  readonly resourceType = CurrentResourceType.Preprints;
 
   provider = input.required<PreprintProviderDetails>();
   preprint = select(PreprintStepperSelectors.getPreprint);

src/app/features/project/overview/components/files-widget/files-widget.component.html

@@ -39,6 +39,7 @@ <h2>{{ 'project.overview.files.filesPreview' | translate }}</h2>
     [storage]="currentRootFolder()!"
     [isLoading]="isFilesLoading() || isStorageLoading"
     [resourceId]="selectedRoot!"
+    [resourceType]="resourceType"
     [provider]="provider()"
     [selectionMode]="null"
     [scrollHeight]="'300px'"

src/app/features/project/overview/components/files-widget/files-widget.component.ts

@@ -31,7 +31,7 @@ import {
 } from '@osf/features/files/store';
 import { FilesTreeComponent } from '@osf/shared/components/files-tree/files-tree.component';
 import { SelectComponent } from '@osf/shared/components/select/select.component';
-import { ResourceType } from '@osf/shared/enums/resource-type.enum';
+import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { Primitive } from '@osf/shared/helpers/types.helper';
 import { ConfiguredAddonModel } from '@osf/shared/models/addons/configured-addon.model';
 import { FileModel } from '@osf/shared/models/files/file.model';
@@ -41,6 +41,7 @@ import { FilePageLinkModel } from '@osf/shared/models/files/file-page-link.model
 import { NodeShortInfoModel } from '@osf/shared/models/nodes/node-with-children.model';
 import { ProjectModel } from '@osf/shared/models/projects/projects.model';
 import { SelectOption } from '@osf/shared/models/select-option.model';
+import { FilesService } from '@osf/shared/services/files.service';
 import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-helper.service';
 
 @Component({
@@ -59,6 +60,7 @@ export class FilesWidgetComponent {
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly viewOnlyService = inject(ViewOnlyLinkHelperService);
+  private readonly filesService = inject(FilesService);
   private readonly platformId = inject(PLATFORM_ID);
   private readonly isBrowser = isPlatformBrowser(this.platformId);
 
@@ -76,6 +78,7 @@ export class FilesWidgetComponent {
   pageNumber = signal(1);
 
   readonly osfStorageLabel = 'OSF Storage';
+  readonly resourceType = CurrentResourceType.Projects;
 
   readonly options = computed(() => {
     const components = this.components().filter((component) => this.rootOption().value !== component.id);
@@ -222,13 +225,24 @@ export class FilesWidgetComponent {
   }
 
   navigateToFile(file: FileModel) {
+    if (file.guid) {
+      this.openFile(file.guid);
+      return;
+    }
+
+    this.filesService.getFileGuid(file.id).subscribe((file) => {
+      if (file.guid) {
+        this.openFile(file.guid);
+      }
+    });
+  }
+
+  private openFile(guid: string): void {
     const extras = this.hasViewOnly()
       ? { queryParams: { view_only: this.viewOnlyService.getViewOnlyParamFromUrl(this.router.url) } }
       : undefined;
 
-    const url = this.router.serializeUrl(this.router.createUrlTree(['/', file.guid], extras));
-
-    window.open(url, '_blank');
+    window.open(this.router.serializeUrl(this.router.createUrlTree(['/', guid], extras)), '_blank');
   }
 
   onLoadFiles(event: FilePageLinkModel) {

src/app/features/registries/components/files-control/files-control.component.html

@@ -49,6 +49,7 @@
       [scrollHeight]="'500px'"
       [viewOnly]="filesViewOnly()"
       [resourceId]="projectId()"
+      [resourceType]="resourceType"
       [provider]="provider()"
       [selectedFiles]="filesSelection"
       (selectFile)="onFileTreeSelected($event)"

src/app/features/registries/components/files-control/files-control.component.spec.ts

@@ -2,8 +2,6 @@ import { Store } from '@ngxs/store';
 
 import { MockComponents, MockProvider } from 'ng-mocks';
 
-import { TreeDragDropService } from 'primeng/api';
-
 import { of, Subject } from 'rxjs';
 
 import { Mock } from 'vitest';
@@ -70,7 +68,6 @@ describe('FilesControlComponent', () => {
         MockProvider(CustomConfirmationService),
         MockProvider(FilesService, mockFilesService),
         MockProvider(CustomDialogService, mockDialogService),
-        MockProvider(TreeDragDropService),
         provideMockStore({
           signals: [
             { selector: RegistriesSelectors.getFiles, value: [] },

src/app/features/registries/components/files-control/files-control.component.ts

@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { TreeDragDropService } from 'primeng/api';
 import { Button } from 'primeng/button';
 
 import { filter, finalize, switchMap, take } from 'rxjs';
@@ -17,6 +16,7 @@ import { FilesTreeComponent } from '@osf/shared/components/files-tree/files-tree
 import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
 import { FILE_SIZE_LIMIT } from '@osf/shared/constants/files-limits.const';
 import { ClearFileDirective } from '@osf/shared/directives/clear-file.directive';
+import { CurrentResourceType } from '@osf/shared/enums/resource-type.enum';
 import { FilePageLinkModel } from '@osf/shared/models/files/file-page-link.model';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { FilesService } from '@osf/shared/services/files.service';
@@ -46,7 +46,6 @@ import {
   templateUrl: './files-control.component.html',
   styleUrl: './files-control.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [TreeDragDropService],
 })
 export class FilesControlComponent {
   attachedFiles = input.required<Partial<FileModel>[]>();
@@ -69,6 +68,7 @@ export class FilesControlComponent {
   readonly progress = signal(0);
   readonly fileName = signal('');
   readonly dataLoaded = signal(false);
+  readonly resourceType = CurrentResourceType.Registrations;
 
   fileIsUploading = signal(false);
   filesSelection: FileModel[] = [];