[ENG-9641] Moderation queues do not show more than 10 contributors (#722)

- Ticket: [ENG-9641]
- Feature flag: n/a

## Summary of Changes
1. Added load more for preprint modetation.

Author: nsemets

src/app/features/moderation/components/preprint-submission-item/preprint-submission-item.component.html

@@ -39,14 +39,16 @@
       </p-accordion-header>
 
       <p-accordion-content>
-        <div class="flex align-items-baseline gap-1 p-3 pt-0 ml-3">
+        <div class="flex align-content-start gap-1 p-3 pt-0 ml-3">
           <p>{{ 'common.labels.contributors' | translate }}:</p>
 
-          @if (submission().contributorsLoading) {
-            <p-skeleton width="10rem" height="1.25rem" />
-          } @else {
-            <osf-contributors-list [contributors]="submission().contributors"></osf-contributors-list>
-          }
+          <osf-contributors-list
+            [contributors]="submission().contributors"
+            [isLoading]="!!submission().contributorsLoading"
+            [hasLoadMore]="hasMoreContributors()"
+            (loadMoreContributors)="loadMoreContributors.emit()"
+          >
+          </osf-contributors-list>
         </div>
       </p-accordion-content>
     </p-accordion-panel>

src/app/features/moderation/components/preprint-submission-item/preprint-submission-item.component.ts

@@ -2,9 +2,8 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { Accordion, AccordionContent, AccordionHeader, AccordionPanel } from 'primeng/accordion';
 import { Button } from 'primeng/button';
-import { Skeleton } from 'primeng/skeleton';
 
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 
 import { ContributorsListComponent, IconComponent, TruncatedTextComponent } from '@osf/shared/components';
 import { StopPropagationDirective } from '@osf/shared/directives';
@@ -27,7 +26,6 @@ import { PreprintSubmissionModel, PreprintWithdrawalSubmission } from '../../mod
     AccordionHeader,
     AccordionContent,
     ContributorsListComponent,
-    Skeleton,
     StopPropagationDirective,
   ],
   templateUrl: './preprint-submission-item.component.html',
@@ -39,6 +37,7 @@ export class PreprintSubmissionItemComponent {
   submission = input.required<PreprintSubmissionModel | PreprintWithdrawalSubmission>();
   selected = output<void>();
   loadContributors = output<void>();
+  loadMoreContributors = output<void>();
 
   readonly reviewStatusIcon = ReviewStatusIcon;
   readonly actionLabel = PREPRINT_ACTION_LABEL;
@@ -47,6 +46,11 @@ export class PreprintSubmissionItemComponent {
   limitValue = 1;
   showAll = false;
 
+  hasMoreContributors = computed(() => {
+    const submission = this.submission();
+    return submission.contributors.length < submission.totalContributors;
+  });
+
   toggleHistory() {
     this.showAll = !this.showAll;
   }

src/app/features/moderation/components/preprint-submissions/preprint-submissions.component.html

@@ -41,6 +41,7 @@
             [status]="selectedReviewOption()"
             (selected)="navigateToPreprint(item)"
             (loadContributors)="loadContributors(item)"
+            (loadMoreContributors)="loadMoreContributors(item)"
           ></osf-preprint-submission-item>
         </div>
       }

src/app/features/moderation/components/preprint-submissions/preprint-submissions.component.spec.ts

@@ -1,18 +1,24 @@
+import { Store } from '@ngxs/store';
+
 import { MockComponents, MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { PreprintSubmissionItemComponent } from '@osf/features/moderation/components';
-import { RegistryModeration } from '@osf/features/moderation/models';
+import { PreprintSubmissionModel } from '@osf/features/moderation/models';
 import { CustomPaginatorComponent, IconComponent, LoadingSpinnerComponent, SelectComponent } from '@shared/components';
 
 import { PreprintSubmissionsSort, SubmissionReviewStatus } from '../../enums';
-import { PreprintModerationSelectors } from '../../store/preprint-moderation';
+import {
+  GetPreprintSubmissionContributors,
+  LoadMorePreprintSubmissionContributors,
+  PreprintModerationSelectors,
+} from '../../store/preprint-moderation';
 
 import { PreprintSubmissionsComponent } from './preprint-submissions.component';
 
-import { MOCK_REGISTRY_MODERATIONS } from '@testing/mocks/registry-moderation.mock';
+import { MOCK_PREPRINT_SUBMISSIONS } from '@testing/mocks/preprint-submission.mock';
 import { OSFTestingModule } from '@testing/osf.testing.module';
 import { ActivatedRouteMockBuilder } from '@testing/providers/route-provider.mock';
 import { RouterMockBuilder } from '@testing/providers/router-provider.mock';
@@ -23,9 +29,10 @@ describe('PreprintSubmissionsComponent', () => {
   let fixture: ComponentFixture<PreprintSubmissionsComponent>;
   let mockRouter: ReturnType<RouterMockBuilder['build']>;
   let mockActivatedRoute: ReturnType<ActivatedRouteMockBuilder['build']>;
+  let store: Store;
 
   const mockProviderId = 'test-provider-id';
-  const mockSubmissions: RegistryModeration[] = MOCK_REGISTRY_MODERATIONS;
+  const mockSubmissions: PreprintSubmissionModel[] = MOCK_PREPRINT_SUBMISSIONS;
 
   beforeEach(async () => {
     mockRouter = RouterMockBuilder.create().build();
@@ -64,6 +71,7 @@ describe('PreprintSubmissionsComponent', () => {
 
     fixture = TestBed.createComponent(PreprintSubmissionsComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(Store);
     fixture.detectChanges();
   });
 
@@ -143,4 +151,22 @@ describe('PreprintSubmissionsComponent', () => {
     expect(component.currentPage()).toBe(1);
     expect(component.first()).toBe(0);
   });
+
+  it('should load contributors for a submission', () => {
+    const mockItem = mockSubmissions[0];
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    component.loadContributors(mockItem);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(new GetPreprintSubmissionContributors(mockItem.id));
+  });
+
+  it('should load more contributors for a submission', () => {
+    const mockItem = mockSubmissions[0];
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    component.loadMoreContributors(mockItem);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(new LoadMorePreprintSubmissionContributors(mockItem.id));
+  });
 });

src/app/features/moderation/components/preprint-submissions/preprint-submissions.component.ts

@@ -28,6 +28,7 @@ import { PreprintSubmissionModel } from '../../models';
 import {
   GetPreprintSubmissionContributors,
   GetPreprintSubmissions,
+  LoadMorePreprintSubmissionContributors,
   PreprintModerationSelectors,
 } from '../../store/preprint-moderation';
 
@@ -60,6 +61,7 @@ export class PreprintSubmissionsComponent implements OnInit {
   readonly actions = createDispatchMap({
     getPreprintSubmissions: GetPreprintSubmissions,
     getPreprintSubmissionContributors: GetPreprintSubmissionContributors,
+    loadMorePreprintSubmissionContributors: LoadMorePreprintSubmissionContributors,
   });
 
   readonly submissions = select(PreprintModerationSelectors.getPreprintSubmissions);
@@ -131,6 +133,10 @@ export class PreprintSubmissionsComponent implements OnInit {
     this.actions.getPreprintSubmissionContributors(item.id);
   }
 
+  loadMoreContributors(item: PreprintSubmissionModel) {
+    this.actions.loadMorePreprintSubmissionContributors(item.id);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);

src/app/features/moderation/components/preprint-withdrawal-submissions/preprint-withdrawal-submissions.component.html

@@ -41,6 +41,7 @@
             [status]="selectedReviewOption()"
             (selected)="navigateToPreprint(item)"
             (loadContributors)="loadContributors(item)"
+            (loadMoreContributors)="loadMoreContributors(item)"
           ></osf-preprint-submission-item>
         </div>
       }

src/app/features/moderation/components/preprint-withdrawal-submissions/preprint-withdrawal-submissions.component.spec.ts

@@ -1,3 +1,5 @@
+import { Store } from '@ngxs/store';
+
 import { MockComponents, MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -8,7 +10,11 @@ import { PreprintWithdrawalSubmission } from '@osf/features/moderation/models';
 import { CustomPaginatorComponent, IconComponent, LoadingSpinnerComponent, SelectComponent } from '@shared/components';
 
 import { PreprintSubmissionsSort, SubmissionReviewStatus } from '../../enums';
-import { PreprintModerationSelectors } from '../../store/preprint-moderation';
+import {
+  GetPreprintWithdrawalSubmissionContributors,
+  LoadMorePreprintWithdrawalSubmissionContributors,
+  PreprintModerationSelectors,
+} from '../../store/preprint-moderation';
 
 import { PreprintWithdrawalSubmissionsComponent } from './preprint-withdrawal-submissions.component';
 
@@ -23,6 +29,7 @@ describe('PreprintWithdrawalSubmissionsComponent', () => {
   let fixture: ComponentFixture<PreprintWithdrawalSubmissionsComponent>;
   let mockRouter: ReturnType<RouterMockBuilder['build']>;
   let mockActivatedRoute: ReturnType<ActivatedRouteMockBuilder['build']>;
+  let store: Store;
 
   const mockProviderId = 'test-provider-id';
   const mockSubmissions: PreprintWithdrawalSubmission[] = MOCK_PREPRINT_WITHDRAWAL_SUBMISSIONS;
@@ -74,6 +81,7 @@ describe('PreprintWithdrawalSubmissionsComponent', () => {
 
     fixture = TestBed.createComponent(PreprintWithdrawalSubmissionsComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(Store);
     fixture.detectChanges();
   });
 
@@ -164,4 +172,26 @@ describe('PreprintWithdrawalSubmissionsComponent', () => {
     expect(component.currentPage()).toBe(1);
     expect(component.first()).toBe(0);
   });
+
+  it('should load contributors for a withdrawal submission', () => {
+    const mockItem = mockSubmissions[0];
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    component.loadContributors(mockItem);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      new GetPreprintWithdrawalSubmissionContributors(mockItem.id, mockItem.preprintId)
+    );
+  });
+
+  it('should load more contributors for a withdrawal submission', () => {
+    const mockItem = mockSubmissions[0];
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    component.loadMoreContributors(mockItem);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      new LoadMorePreprintWithdrawalSubmissionContributors(mockItem.id, mockItem.preprintId)
+    );
+  });
 });

src/app/features/moderation/components/preprint-withdrawal-submissions/preprint-withdrawal-submissions.component.ts

@@ -27,6 +27,7 @@ import { PreprintWithdrawalSubmission } from '../../models';
 import {
   GetPreprintWithdrawalSubmissionContributors,
   GetPreprintWithdrawalSubmissions,
+  LoadMorePreprintWithdrawalSubmissionContributors,
   PreprintModerationSelectors,
 } from '../../store/preprint-moderation';
 import { PreprintSubmissionItemComponent } from '../preprint-submission-item/preprint-submission-item.component';
@@ -60,6 +61,7 @@ export class PreprintWithdrawalSubmissionsComponent implements OnInit {
   readonly actions = createDispatchMap({
     getPreprintWithdrawalSubmissions: GetPreprintWithdrawalSubmissions,
     getPreprintWithdrawalSubmissionContributors: GetPreprintWithdrawalSubmissionContributors,
+    loadMorePreprintWithdrawalSubmissionContributors: LoadMorePreprintWithdrawalSubmissionContributors,
   });
 
   readonly submissions = select(PreprintModerationSelectors.getPreprintWithdrawalSubmissions);
@@ -128,6 +130,10 @@ export class PreprintWithdrawalSubmissionsComponent implements OnInit {
     this.actions.getPreprintWithdrawalSubmissionContributors(item.id, item.preprintId);
   }
 
+  loadMoreContributors(item: PreprintWithdrawalSubmission) {
+    this.actions.loadMorePreprintWithdrawalSubmissionContributors(item.id, item.preprintId);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);

src/app/features/moderation/models/preprint-submission.model.ts

@@ -18,4 +18,5 @@ export interface PreprintSubmissionModel {
   contributors: ContributorModel[];
   totalContributors: number;
   contributorsLoading?: boolean;
+  contributorsPage?: number;
 }

src/app/features/moderation/models/preprint-withdrawal-submission.model.ts

@@ -16,4 +16,5 @@ export interface PreprintWithdrawalSubmission {
   contributors: ContributorModel[];
   totalContributors: number;
   contributorsLoading?: boolean;
+  contributorsPage?: number;
 }