[ENG-9770] Expand File Picker for Preprints Submissions

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

@@ -92,13 +92,15 @@ <h2>{{ 'preprints.preprintStepper.file.title' | translate }}</h2>
       <osf-files-tree
         [currentFolder]="currentFolder()!"
         [files]="projectFiles()"
-        [totalCount]="projectFiles().length"
+        [totalCount]="filesTotalCount()"
         [storage]="null"
         [selectionMode]="null"
         [isLoading]="areProjectFilesLoading() || isCurrentFolderLoading()"
         [resourceId]="selectedProjectId()!"
+        [scrollHeight]="'500px'"
         (entryFileClicked)="selectProjectFile($event)"
         (setCurrentFolder)="setCurrentFolder($event)"
+        (loadFiles)="onLoadFiles($event)"
       />
     }
   </section>

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

@@ -99,6 +99,7 @@ export class FileStepComponent implements OnInit {
   areAvailableProjectsLoading = select(PreprintStepperSelectors.areAvailableProjectsLoading);
 
   projectFiles = select(PreprintStepperSelectors.getProjectFiles);
+  filesTotalCount = select(PreprintStepperSelectors.getFilesTotalCount);
   areProjectFilesLoading = select(PreprintStepperSelectors.areProjectFilesLoading);
 
   currentFolder = select(PreprintStepperSelectors.getCurrentFolder);
@@ -190,7 +191,7 @@ export class FileStepComponent implements OnInit {
         switchMap(() => {
           const filesLink = this.currentFolder()?.links.filesLink;
           if (filesLink) {
-            return this.actions.getProjectFilesByLink(filesLink);
+            return this.actions.getProjectFilesByLink(filesLink, 1);
           } else {
             return EMPTY;
           }
@@ -232,6 +233,10 @@ export class FileStepComponent implements OnInit {
       return;
     }
     this.actions.setCurrentFolder(folder);
-    this.actions.getProjectFilesByLink(folder.links.filesLink);
+    this.actions.getProjectFilesByLink(folder.links.filesLink, 1);
+  }
+
+  onLoadFiles(event: { link: string; page: number }) {
+    this.actions.getProjectFilesByLink(event.link, event.page);
   }
 }

src/app/features/preprints/services/preprints-projects.service.ts

@@ -12,6 +12,7 @@ import {
   NodesResponseJsonApi,
 } from '@osf/shared/models/nodes/nodes-json-api.model';
 import { JsonApiService } from '@osf/shared/services/json-api.service';
+import { replaceBadEncodedChars } from '@shared/helpers/format-bad-encoding.helper';
 
 import { PreprintsMapper } from '../mappers';
 import {
@@ -44,7 +45,7 @@ export class PreprintsProjectsService {
       map((response) => {
         return response.data.map((item) => ({
           id: item.id,
-          name: item.attributes.title,
+          name: replaceBadEncodedChars(item.attributes.title),
         }));
       })
     );
@@ -55,7 +56,7 @@ export class PreprintsProjectsService {
       map((response) => {
         return {
           id: response.data.id,
-          name: response.data.attributes.title,
+          name: replaceBadEncodedChars(response.data.attributes.title),
         };
       })
     );

src/app/features/preprints/store/preprint-stepper/preprint-stepper.actions.ts

@@ -90,7 +90,10 @@ export class SetProjectRootFolder {
 export class FetchProjectFilesByLink {
   static readonly type = '[Preprint Stepper] Get Project Files By Link';
 
-  constructor(public filesLink: string) {}
+  constructor(
+    public filesLink: string,
+    public page: number
+  ) {}
 }
 
 export class FetchLicenses {

src/app/features/preprints/store/preprint-stepper/preprint-stepper.model.ts

@@ -4,6 +4,7 @@ import { FileModel } from '@osf/shared/models/files/file.model';
 import { FileFolderModel } from '@osf/shared/models/files/file-folder.model';
 import { LicenseModel } from '@osf/shared/models/license/license.model';
 import { AsyncStateModel } from '@osf/shared/models/store/async-state.model';
+import { AsyncStateWithTotalCount } from '@osf/shared/models/store/async-state-with-total-count.model';
 
 import { PreprintFileSource } from '../../enums';
 import { PreprintFilesLinks, PreprintModel } from '../../models';
@@ -15,7 +16,7 @@ export interface PreprintStepperStateModel {
   preprintFilesLinks: AsyncStateModel<PreprintFilesLinks | null>;
   preprintFile: AsyncStateModel<FileModel | null>;
   availableProjects: AsyncStateModel<IdNameModel[]>;
-  projectFiles: AsyncStateModel<FileModel[]>;
+  projectFiles: AsyncStateWithTotalCount<FileModel[]>;
   licenses: AsyncStateModel<LicenseModel[]>;
   currentFolder: AsyncStateModel<FileFolderModel | null>;
   preprintProject: AsyncStateModel<IdNameModel | null>;
@@ -51,6 +52,7 @@ export const DEFAULT_PREPRINT_STEPPER_STATE: PreprintStepperStateModel = {
     data: [],
     isLoading: false,
     error: null,
+    totalCount: 0,
   },
   licenses: {
     data: [],

src/app/features/preprints/store/preprint-stepper/preprint-stepper.selectors.ts

@@ -53,6 +53,11 @@ export class PreprintStepperSelectors {
     return state.projectFiles.data;
   }
 
+  @Selector([PreprintStepperState])
+  static getFilesTotalCount(state: PreprintStepperStateModel) {
+    return state.projectFiles.totalCount;
+  }
+
   @Selector([PreprintStepperState])
   static areProjectFilesLoading(state: PreprintStepperStateModel) {
     return state.projectFiles.isLoading;

src/app/features/preprints/store/preprint-stepper/preprint-stepper.state.ts

@@ -255,18 +255,24 @@ export class PreprintStepperState {
 
   @Action(FetchProjectFilesByLink)
   getProjectFilesByLink(ctx: StateContext<PreprintStepperStateModel>, action: FetchProjectFilesByLink) {
-    ctx.setState(patch({ projectFiles: patch({ isLoading: true }) }));
-
-    return this.fileService.getFilesWithoutFiltering(action.filesLink, 1).pipe(
+    const state = ctx.getState();
+    ctx.patchState({
+      projectFiles: {
+        ...state.projectFiles,
+        isLoading: true,
+      },
+    });
+    return this.fileService.getFilesWithoutFiltering(action.filesLink, action.page).pipe(
       tap((response) => {
-        ctx.setState(
-          patch({
-            projectFiles: patch({
-              data: response.data,
-              isLoading: false,
-            }),
-          })
-        );
+        const newData = action.page === 1 ? response.data : [...(state.projectFiles.data ?? []), ...response.data];
+        ctx.patchState({
+          projectFiles: {
+            data: newData,
+            isLoading: false,
+            totalCount: response.totalCount,
+            error: null,
+          },
+        });
       }),
       catchError((error) => handleSectionError(ctx, 'projectFiles', error))
     );