fix(files-component): updated files component and fixed some requests

Author: nsemets

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

@@ -1,24 +1,18 @@
-import { MockComponents, MockProvider } from 'ng-mocks';
+import { MockProvider } from 'ng-mocks';
 
 import { DynamicDialogConfig } from 'primeng/dynamicdialog';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { FileSelectDestinationComponent } from '@osf/shared/components/file-select-destination/file-select-destination.component';
-import { IconComponent } from '@osf/shared/components/icon/icon.component';
-import { LoadingSpinnerComponent } from '@osf/shared/components/loading-spinner/loading-spinner.component';
 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 { 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 { provideMockStore } from '@testing/providers/store-provider.mock';
 import { ToastServiceMock } from '@testing/providers/toast-provider.mock';
 
-import { FilesSelectors } from '../../store';
-
 import { ConfirmMoveFileDialogComponent } from './confirm-move-file-dialog.component';
 
 describe('ConfirmConfirmMoveFileDialogComponent', () => {
@@ -31,23 +25,14 @@ describe('ConfirmConfirmMoveFileDialogComponent', () => {
     };
 
     TestBed.configureTestingModule({
-      imports: [
-        ConfirmMoveFileDialogComponent,
-        ...MockComponents(IconComponent, LoadingSpinnerComponent, FileSelectDestinationComponent),
-      ],
+      imports: [ConfirmMoveFileDialogComponent],
       providers: [
         provideOSFCore(),
         provideDynamicDialogRefMock(),
         MockProvider(DynamicDialogConfig, dialogConfigMock),
         MockProvider(FilesService),
         MockProvider(ToastService, ToastServiceMock.simple()),
         MockProvider(CustomConfirmationService, CustomConfirmationServiceMock.simple()),
-        provideMockStore({
-          signals: [
-            { selector: FilesSelectors.getMoveDialogFiles, value: [] },
-            { selector: FilesSelectors.getProvider, value: null },
-          ],
-        }),
       ],
     });
 
@@ -63,10 +48,5 @@ describe('ConfirmConfirmMoveFileDialogComponent', () => {
   it('should initialize with correct properties', () => {
     expect(component.config).toBeDefined();
     expect(component.dialogRef).toBeDefined();
-    expect(component.files).toBeDefined();
-  });
-
-  it('should get files from store', () => {
-    expect(component.files()).toEqual([]);
   });
 });

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

@@ -1,5 +1,3 @@
-import { select } from '@ngxs/store';
-
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
@@ -11,7 +9,6 @@ import { catchError } from 'rxjs/operators';
 import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-import { FilesSelectors } from '@osf/features/files/store';
 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';
@@ -35,8 +32,6 @@ export class ConfirmMoveFileDialogComponent {
   private readonly toastService = inject(ToastService);
   private readonly customConfirmationService = inject(CustomConfirmationService);
 
-  readonly files = select(FilesSelectors.getMoveDialogFiles);
-
   readonly provider = this.config.data.storageProvider;
 
   private fileProjectId = this.config.data.resourceId;
@@ -112,9 +107,7 @@ export class ConfirmMoveFileDialogComponent {
     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(', '),
-      },
+      messageParams: { name: conflictFiles.map((c) => c.file.name).join(', ') },
       acceptLabelKey: 'common.buttons.replace',
       onConfirm: () => {
         const replaceRequests$ = conflictFiles.map(({ link }) =>

src/app/features/files/components/file-browser-info/file-browser-info.component.ts

@@ -24,7 +24,7 @@ export class FileBrowserInfoComponent {
 
   readonly infoItems = FILE_BROWSER_INFO_ITEMS;
 
-  readonly filteredInfoItems = computed(() => {
-    return this.infoItems.filter((item) => item.showForResourceTypes.includes(this.resourceType()));
-  });
+  readonly filteredInfoItems = computed(() =>
+    this.infoItems.filter((item) => item.showForResourceTypes.includes(this.resourceType()))
+  );
 }

src/app/features/files/components/file-keywords/file-keywords.component.spec.ts

@@ -1,4 +1,3 @@
-import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { provideOSFCore } from '@testing/osf.testing.provider';
@@ -26,10 +25,10 @@ describe('FileKeywordsComponent', () => {
         provideOSFCore(),
         provideMockStore({
           signals: [
-            { selector: FilesSelectors.getFileTags, value: signal(mockTags) },
-            { selector: FilesSelectors.isFileTagsLoading, value: signal(false) },
-            { selector: FilesSelectors.getOpenedFile, value: signal(mockFile) },
-            { selector: FilesSelectors.hasWriteAccess, value: signal(true) },
+            { selector: FilesSelectors.getFileTags, value: mockTags },
+            { selector: FilesSelectors.isFileTagsLoading, value: false },
+            { selector: FilesSelectors.getOpenedFile, value: mockFile },
+            { selector: FilesSelectors.hasWriteAccess, value: true },
           ],
         }),
       ],

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

@@ -9,7 +9,7 @@ <h2>
     <p-skeleton width="100%" height="4rem" />
     <p-skeleton width="100%" height="4rem" />
   } @else {
-    @for (funder of resourceMetadata()?.funders; track $index) {
+    @for (funder of resourceMetadata()?.funders; track funder.funderIdentifier) {
       <div class="flex flex-column gap-2">
         @if (funder.funderName) {
           <div class="flex flex-column gap-1">
@@ -23,10 +23,10 @@ <h4>{{ 'files.detail.resourceMetadata.fields.awardTitle' | translate }}</h4>
             <span>{{ funder.awardTitle }}</span>
           </div>
         }
-        @if (funder.awardTitle) {
+        @if (funder.awardNumber) {
           <div class="flex flex-column gap-1">
             <h4>{{ 'files.detail.resourceMetadata.fields.awardNumber' | translate }}</h4>
-            <span>{{ funder.awardTitle }}</span>
+            <span>{{ funder.awardNumber }}</span>
           </div>
         }
         @if (funder.awardUri) {
@@ -98,7 +98,7 @@ <h4>{{ 'files.detail.resourceMetadata.fields.dateModified' | translate }}</h4>
   @if (isResourceContributorsLoading()) {
     <p-skeleton width="100%" height="4rem" />
   } @else {
-    @if (hasViewOnly() || contributors().length) {
+    @if (contributors().length) {
       <div class="flex flex-column gap-2">
         <h4>{{ 'common.labels.contributors' | translate }}</h4>
 

src/app/features/files/files.routes.ts

@@ -29,11 +29,8 @@ export const filesRoutes: Routes = [
       {
         path: ':fileGuid',
         data: { canonicalPathTemplate: 'files/:fileGuid' },
-        loadComponent: () => {
-          return import('@osf/features/files/pages/file-detail/file-detail.component').then(
-            (c) => c.FileDetailComponent
-          );
-        },
+        loadComponent: () =>
+          import('@osf/features/files/pages/file-detail/file-detail.component').then((c) => c.FileDetailComponent),
       },
     ],
   },

src/app/features/files/store/files.actions.ts

@@ -1,4 +1,5 @@
 import { FileFolderModel } from '@osf/shared/models/files/file-folder.model';
+import { ResourceType } from '@shared/enums/resource-type.enum';
 
 import { PatchFileMetadata } from '../models';
 
@@ -131,25 +132,31 @@ export class DeleteEntry {
 export class GetRootFolders {
   static readonly type = '[Files] Get Folders';
 
-  constructor(public folderLink: string) {}
+  constructor(
+    public resourceId: string,
+    public resourceType: ResourceType
+  ) {}
 }
 
 export class GetConfiguredStorageAddons {
   static readonly type = '[Files] Get ConfiguredStorageAddons';
 
-  constructor(public resourceUri: string) {}
+  constructor(public resourceId: string) {}
 }
 
 export class GetMoveDialogRootFolders {
   static readonly type = '[Files] Get Move Dialog Folders';
 
-  constructor(public folderLink: string) {}
+  constructor(
+    public resourceId: string,
+    public resourceType: ResourceType
+  ) {}
 }
 
 export class GetMoveDialogConfiguredStorageAddons {
   static readonly type = '[Files] Get Move Dialog ConfiguredStorageAddons';
 
-  constructor(public resourceUri: string) {}
+  constructor(public resourceId: string) {}
 }
 
 export class GetStorageSupportedFeatures {

src/app/features/files/store/files.state.ts

@@ -7,7 +7,6 @@ import { inject, Injectable } from '@angular/core';
 import { SupportedFeature } from '@osf/shared/enums/addon-supported-features.enum';
 import { handleSectionError } from '@osf/shared/helpers/state-error.handler';
 import { FilesService } from '@osf/shared/services/files.service';
-import { ToastService } from '@osf/shared/services/toast.service';
 
 import { MapResourceMetadata } from '../mappers';
 
@@ -45,7 +44,6 @@ import { FILES_STATE_DEFAULTS, FilesStateModel } from './files.model';
 })
 export class FilesState {
   filesService = inject(FilesService);
-  toastService = inject(ToastService);
 
   @Action(GetFiles)
   getFiles(ctx: StateContext<FilesStateModel>, action: GetFiles) {
@@ -262,7 +260,7 @@ export class FilesState {
   getRootFolders(ctx: StateContext<FilesStateModel>, action: GetRootFolders) {
     const state = ctx.getState();
     ctx.patchState({ rootFolders: { ...state.rootFolders, isLoading: true } });
-    return this.filesService.getFolders(action.folderLink).pipe(
+    return this.filesService.getRootFolders(action.resourceId, action.resourceType).pipe(
       tap((response) =>
         ctx.patchState({
           rootFolders: {
@@ -282,7 +280,7 @@ export class FilesState {
     const state = ctx.getState();
     ctx.patchState({ moveDialogRootFolders: { ...state.moveDialogRootFolders, isLoading: true } });
 
-    return this.filesService.getFolders(action.folderLink).pipe(
+    return this.filesService.getRootFolders(action.resourceId, action.resourceType).pipe(
       tap((response) =>
         ctx.patchState({
           moveDialogRootFolders: {
@@ -302,7 +300,7 @@ export class FilesState {
     const state = ctx.getState();
     ctx.patchState({ configuredStorageAddons: { ...state.configuredStorageAddons, isLoading: true } });
 
-    return this.filesService.getConfiguredStorageAddons(action.resourceUri).pipe(
+    return this.filesService.getConfiguredStorageAddons(action.resourceId).pipe(
       tap((addons) =>
         ctx.patchState({
           configuredStorageAddons: {
@@ -326,7 +324,7 @@ export class FilesState {
       moveDialogConfiguredStorageAddons: { ...state.moveDialogConfiguredStorageAddons, isLoading: true },
     });
 
-    return this.filesService.getConfiguredStorageAddons(action.resourceUri).pipe(
+    return this.filesService.getConfiguredStorageAddons(action.resourceId).pipe(
       tap((addons) =>
         ctx.patchState({
           moveDialogConfiguredStorageAddons: {

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

@@ -46,6 +46,7 @@ import { ClearFileDirective } from '@osf/shared/directives/clear-file.directive'
 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';
+import { FilePageLinkModel } from '@osf/shared/models/files/file-page-link.model';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
 import { ToastService } from '@osf/shared/services/toast.service';
 
@@ -233,7 +234,7 @@ export class FileStepComponent implements OnInit {
     this.actions.getProjectFilesByLink(folder.links.filesLink, 1);
   }
 
-  onLoadFiles(event: { link: string; page: number }) {
+  onLoadFiles(event: FilePageLinkModel) {
     this.actions.getProjectFilesByLink(event.link, event.page);
   }
 }

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

@@ -20,7 +20,6 @@ import {
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { FileProvider } from '@osf/features/files/constants';
 import {
   FilesSelectors,
@@ -32,11 +31,13 @@ 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 { 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';
 import { FileFolderModel } from '@osf/shared/models/files/file-folder.model';
 import { FileLabelModel } from '@osf/shared/models/files/file-label.model';
+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';
@@ -56,7 +57,6 @@ export class FilesWidgetComponent {
   router = inject(Router);
   activeRoute = inject(ActivatedRoute);
 
-  private readonly environment = inject(ENVIRONMENT);
   private readonly destroyRef = inject(DestroyRef);
   private readonly viewOnlyService = inject(ViewOnlyLinkHelperService);
   private readonly platformId = inject(PLATFORM_ID);
@@ -160,11 +160,8 @@ export class FilesWidgetComponent {
   }
 
   private getStorageAddons(projectId: string) {
-    const resourcePath = 'nodes';
-    const folderLink = `${this.environment.apiDomainUrl}/v2/${resourcePath}/${projectId}/files/`;
-    const iriLink = `${this.environment.webUrl}/${projectId}`;
-    this.actions.getRootFolders(folderLink);
-    this.actions.getConfiguredStorageAddons(iriLink);
+    this.actions.getRootFolders(projectId, ResourceType.Project);
+    this.actions.getConfiguredStorageAddons(projectId);
   }
 
   private flatComponents(
@@ -234,7 +231,7 @@ export class FilesWidgetComponent {
     window.open(url, '_blank');
   }
 
-  onLoadFiles(event: { link: string; page: number }) {
+  onLoadFiles(event: FilePageLinkModel) {
     this.actions.getFiles(event.link, event.page);
   }