fix(files): added reset pagination trigger

angular.json

@@ -29,7 +29,8 @@
               "cedar-embeddable-editor",
               "cedar-artifact-viewer",
               "markdown-it-video",
-              "ace-builds/src-noconflict/ext-language_tools"
+              "ace-builds/src-noconflict/ext-language_tools",
+              "@traptitech/markdown-it-katex"
             ],
             "assets": [
               "src/assets",
@@ -63,7 +64,7 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "7MB",
+                  "maximumWarning": "9MB",
                   "maximumError": "10MB"
                 },
                 {

src/app/features/collections/components/add-to-collection/add-to-collection.component.ts

@@ -93,6 +93,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   constructor() {
     this.initializeProvider();
     this.setupEffects();
+    this.setupCleanup();
   }
 
   handleProjectSelected(): void {
@@ -154,16 +155,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
   }
 
   private setupEffects(): void {
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.clearAddToCollectionState();
-        this.allowNavigation.set(false);
-
-        HeaderStyleHelper.resetToDefaults();
-        BrandService.resetBranding();
-      });
-    });
-
     effect(() => {
       const provider = this.collectionProvider();
 
@@ -174,6 +165,16 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
     });
   }
 
+  private setupCleanup() {
+    this.destroyRef.onDestroy(() => {
+      this.actions.clearAddToCollectionState();
+      this.allowNavigation.set(false);
+
+      HeaderStyleHelper.resetToDefaults();
+      BrandService.resetBranding();
+    });
+  }
+
   @HostListener('window:beforeunload', ['$event'])
   onBeforeUnload($event: BeforeUnloadEvent): boolean {
     $event.preventDefault();

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

@@ -102,22 +102,11 @@
       </div>
     </div>
 
-    <div class="flex absolute upload-dialog">
-      <p-dialog
-        [header]="'files.dialogs.uploadFile.title' | translate"
-        [modal]="true"
-        [(visible)]="fileIsUploading"
-        class="upload-dialog"
-      >
-        <div class="flex flex-column align-items-center justify-content-center gap-3 w-full">
-          <span class="p-text-secondary filename">{{ fileName() }}</span>
-          <div class="w-6">
-            <osf-loading-spinner></osf-loading-spinner>
-          </div>
-          <p>{{ progress() }} %</p>
-        </div>
-      </p-dialog>
-    </div>
+    <osf-file-upload-dialog
+      [(visible)]="fileIsUploading"
+      [fileName]="fileName()"
+      [progress]="progress()"
+    ></osf-file-upload-dialog>
 
     <osf-files-tree
       [files]="files()"

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

@@ -4,7 +4,6 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
 import { TreeDragDropService } from 'primeng/api';
 import { Button } from 'primeng/button';
-import { Dialog } from 'primeng/dialog';
 import { Select } from 'primeng/select';
 import { TableModule } from 'primeng/table';
 
@@ -18,7 +17,6 @@ import {
   forkJoin,
   Observable,
   of,
-  skip,
   switchMap,
   take,
 } from 'rxjs';
@@ -63,6 +61,7 @@ import { getViewOnlyParamFromUrl, hasViewOnlyParam, IS_MEDIUM } from '@osf/share
 import { CurrentResourceSelectors, GetResourceDetails } from '@osf/shared/stores';
 import {
   FilesTreeComponent,
+  FileUploadDialogComponent,
   FormSelectComponent,
   GoogleFilePickerComponent,
   LoadingSpinnerComponent,
@@ -82,7 +81,7 @@ import { FilesSelectors } from '../../store';
   selector: 'osf-files',
   imports: [
     Button,
-    Dialog,
+    FileUploadDialogComponent,
     FilesTreeComponent,
     FormSelectComponent,
     FormsModule,
@@ -104,6 +103,7 @@ import { FilesSelectors } from '../../store';
 })
 export class FilesComponent {
   googleFilePickerComponent = viewChild(GoogleFilePickerComponent);
+  filesTree = viewChild<FilesTreeComponent>(FilesTreeComponent);
 
   @HostBinding('class') classes = 'flex flex-column flex-1 w-full h-full';
 
@@ -297,6 +297,7 @@ export class FilesComponent {
         }
         this.actions.setCurrentProvider(provider ?? FileProvider.OsfStorage);
         this.actions.setCurrentFolder(currentRootFolder.folder);
+        this.filesTree()?.resetPagination();
       }
     });
 
@@ -307,25 +308,27 @@ export class FilesComponent {
     });
 
     this.searchControl.valueChanges
-      .pipe(skip(1), takeUntilDestroyed(this.destroyRef), distinctUntilChanged(), debounceTime(500))
+      .pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged(), debounceTime(500))
       .subscribe((searchText) => {
         this.actions.setSearch(searchText ?? '');
+        this.filesTree()?.resetPagination();
+
         if (!this.isFolderOpening()) {
           this.updateFilesList();
         }
       });
 
-    this.sortControl.valueChanges.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe((sort) => {
+    this.sortControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sort) => {
       this.actions.setSort(sort ?? '');
+      this.filesTree()?.resetPagination();
+
       if (!this.isFolderOpening()) {
         this.updateFilesList();
       }
     });
 
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.resetState();
-      });
+    this.destroyRef.onDestroy(() => {
+      this.actions.resetState();
     });
   }
 
@@ -491,15 +494,15 @@ export class FilesComponent {
     });
   }
 
-  public updateFilesList = (): Observable<void> => {
+  updateFilesList(): Observable<void> {
     const currentFolder = this.currentFolder();
     if (currentFolder?.relationships.filesLink) {
       this.filesTreeActions.setFilesIsLoading?.(true);
       return this.actions.getFiles(currentFolder?.relationships.filesLink).pipe(take(1));
     }
 
     return EMPTY;
-  };
+  }
 
   folderIsOpening(value: boolean): void {
     this.isFolderOpening.set(value);

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

@@ -16,6 +16,7 @@ import {
   input,
   model,
   signal,
+  viewChild,
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -50,6 +51,8 @@ import { ProjectModel } from '@osf/shared/models/projects';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilesWidgetComponent {
+  filesTree = viewChild<FilesTreeComponent>(FilesTreeComponent);
+
   rootOption = input.required<SelectOption>();
   components = input.required<NodeShortInfoModel[]>();
   areComponentsLoading = input<boolean>(false);
@@ -144,13 +147,12 @@ export class FilesWidgetComponent {
       const currentRootFolder = this.currentRootFolder();
       if (currentRootFolder) {
         this.actions.setCurrentFolder(currentRootFolder.folder);
+        this.filesTree()?.resetPagination();
       }
     });
 
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.resetState();
-      });
+    this.destroyRef.onDestroy(() => {
+      this.actions.resetState();
     });
   }
 

src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts

@@ -120,10 +120,8 @@ export class ConfigureAddonComponent implements OnInit {
   constructor() {
     this.initializeAddon();
 
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.clearOperationInvocations();
-      });
+    this.destroyRef.onDestroy(() => {
+      this.actions.clearOperationInvocations();
     });
 
     effect(() => {

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

@@ -33,22 +33,11 @@
       </div>
     }
 
-    <div class="flex absolute">
-      <p-dialog
-        [header]="'files.dialogs.uploadFile.title' | translate"
-        [modal]="true"
-        [(visible)]="fileIsUploading"
-        class="upload-dialog"
-      >
-        <div class="flex flex-column align-items-center justify-content-center gap-3 w-full">
-          <span class="p-text-secondary filename">{{ fileName() }}</span>
-          <div class="w-6">
-            <osf-loading-spinner></osf-loading-spinner>
-          </div>
-          <p>{{ progress() }} %</p>
-        </div>
-      </p-dialog>
-    </div>
+    <osf-file-upload-dialog
+      [(visible)]="fileIsUploading"
+      [fileName]="fileName()"
+      [progress]="progress()"
+    ></osf-file-upload-dialog>
 
     <osf-files-tree
       [files]="files()"

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

@@ -4,7 +4,6 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { TreeDragDropService } from 'primeng/api';
 import { Button } from 'primeng/button';
-import { Dialog } from 'primeng/dialog';
 
 import { EMPTY, filter, finalize, Observable, shareReplay, take } from 'rxjs';
 
@@ -25,7 +24,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { HelpScoutService } from '@core/services/help-scout.service';
 import { CreateFolderDialogComponent } from '@osf/features/files/components';
-import { FilesTreeComponent, LoadingSpinnerComponent } from '@osf/shared/components';
+import { FilesTreeComponent, FileUploadDialogComponent, LoadingSpinnerComponent } from '@osf/shared/components';
 import { FILE_SIZE_LIMIT } from '@osf/shared/constants';
 import { ClearFileDirective } from '@osf/shared/directives';
 import { FilesTreeActions, OsfFile } from '@osf/shared/models';
@@ -47,7 +46,7 @@ import {
     FilesTreeComponent,
     Button,
     LoadingSpinnerComponent,
-    Dialog,
+    FileUploadDialogComponent,
     FormsModule,
     ReactiveFormsModule,
     TranslatePipe,

src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts

@@ -138,10 +138,8 @@ export class StorageItemSelectorComponent implements OnInit {
       }
     });
 
-    effect(() => {
-      this.destroyRef.onDestroy(() => {
-        this.actions.clearOperationInvocations();
-      });
+    this.destroyRef.onDestroy(() => {
+      this.actions.clearOperationInvocations();
     });
   }
 

src/app/shared/components/file-upload-dialog/file-upload-dialog.component.html

@@ -0,0 +1,14 @@
+<p-dialog
+  [header]="'files.dialogs.uploadFile.title' | translate"
+  [modal]="true"
+  [(visible)]="visible"
+  class="upload-dialog"
+>
+  <div class="flex flex-column align-items-center justify-content-center gap-3 w-full">
+    <span class="p-text-secondary filename">{{ fileName() }}</span>
+    <div class="w-6">
+      <osf-loading-spinner></osf-loading-spinner>
+    </div>
+    <p>{{ progress() }} %</p>
+  </div>
+</p-dialog>

src/app/shared/components/file-upload-dialog/file-upload-dialog.component.scss

@@ -0,0 +1,3 @@
+.filename {
+  word-break: break-all;
+}

src/app/shared/components/file-upload-dialog/file-upload-dialog.component.ts

@@ -0,0 +1,20 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { DialogModule } from 'primeng/dialog';
+
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+
+import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
+
+@Component({
+  selector: 'osf-file-upload-dialog',
+  imports: [DialogModule, TranslatePipe, LoadingSpinnerComponent],
+  templateUrl: './file-upload-dialog.component.html',
+  styleUrl: './file-upload-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileUploadDialogComponent {
+  visible = model<boolean>(false);
+  fileName = input<string>('');
+  progress = input<number>(0);
+}

src/app/shared/components/index.ts

@@ -12,6 +12,7 @@ export { EducationHistoryDialogComponent } from './education-history-dialog/educ
 export { EmploymentHistoryComponent } from './employment-history/employment-history.component';
 export { EmploymentHistoryDialogComponent } from './employment-history-dialog/employment-history-dialog.component';
 export { FileMenuComponent } from './file-menu/file-menu.component';
+export { FileUploadDialogComponent } from './file-upload-dialog/file-upload-dialog.component';
 export { FilesTreeComponent } from './files-tree/files-tree.component';
 export { FilterChipsComponent } from './filter-chips/filter-chips.component';
 export { FormSelectComponent } from './form-select/form-select.component';

src/app/shared/components/resource-citations/resource-citations.component.ts

@@ -104,7 +104,7 @@ export class ResourceCitationsComponent {
     this.setupFilterDebounce();
     this.setupDefaultCitationsEffect();
     this.setupCitationStylesEffect();
-    this.setupDestroyEffect();
+    this.setupCleanup();
   }
 
   setupDefaultCitationsEffect(): void {
@@ -210,7 +210,7 @@ export class ResourceCitationsComponent {
     });
   }
 
-  private setupDestroyEffect(): void {
+  private setupCleanup(): void {
     this.destroyRef.onDestroy(() => {
       this.destroy$.next();
       this.destroy$.complete();