[ENG-9770] Expand File Picker for Preprints Submissions (#806)

- Ticket: https://openscience.atlassian.net/browse/ENG-9770
- Feature flag: n/a

## Purpose

When submitting a preprint, users select their manuscript file through the preprint upload step. However, the file picker currently displays only the first 10 files stored in the associated OSF project. This prevents users from accessing additional files that may contain the correct manuscript or supplemental materials, limiting their ability to complete the submission.

## Summary of Changes

Expand File Picker for Preprints Submissions

Author: mkovalua

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))
     );