[ENG-9224] Add contributors in preprint submission

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

@@ -1,35 +1,54 @@
-<div class="flex align-items-baseline gap-2 p-3">
-  <osf-icon [class]="reviewStatusIcon[status()].value" [iconClass]="reviewStatusIcon[status()].icon"></osf-icon>
+<div class="resource">
+  <p-accordion (onOpen)="handleOpen()">
+    <p-accordion-panel value="0">
+      <p-accordion-header class="flex flex-row align-items-start gap-3 p-3">
+        <div osfStopPropagation class="flex align-items-baseline gap-2 font-normal">
+          <osf-icon [class]="reviewStatusIcon[status()].value" [iconClass]="reviewStatusIcon[status()].icon"></osf-icon>
 
-  <div>
-    <p-button
-      class="link-btn-no-padding"
-      styleClass="text-left"
-      link
-      [label]="submission().title"
-      (onClick)="selected.emit()"
-    />
+          <div>
+            <p-button
+              class="link-btn-no-padding"
+              styleClass="text-left"
+              link
+              [label]="submission().title"
+              (onClick)="selected.emit()"
+            />
+            @for (action of showAll ? submission().actions : submission().actions.slice(0, limitValue); track $index) {
+              <div class="flex flex-wrap align-items-baseline gap-1 mt-2">
+                <span>{{ actionLabel[action.toState] | translate }}</span>
+                <span>{{ action.dateModified | dateAgo }}</span>
+                <span>{{ 'moderation.submissionReview.by' | translate }}</span>
+                <span>{{ action.creator?.name }}</span>
 
-    @for (action of showAll ? submission().actions : submission().actions.slice(0, limitValue); track $index) {
-      <div class="flex flex-wrap gap-1 mt-2">
-        <span>{{ actionLabel[action.toState] | translate }}</span>
-        <span>{{ action.dateModified | dateAgo }}</span>
-        <span>{{ 'moderation.submissionReview.by' | translate }}</span>
-        <span>{{ action.creator?.name }}</span>
+                @if (action.comment.length) {
+                  <osf-truncated-text class="font-italic" [text]="'- ' + action.comment" />
+                }
+              </div>
+            }
 
-        @if (action.comment.length) {
-          <osf-truncated-text class="font-italic" [text]="action.comment" />
-        }
-      </div>
-    }
+            @if (submission().actions.length > 1) {
+              <p-button
+                class="link-btn-no-padding block mt-2"
+                [link]="true"
+                [label]="(showAll ? 'common.buttons.hide' : 'moderation.showHistory') | translate"
+                (onClick)="toggleHistory()"
+              />
+            }
+          </div>
+        </div>
+      </p-accordion-header>
 
-    @if (submission().actions.length > 1) {
-      <p-button
-        class="link-btn-no-padding block mt-2"
-        [link]="true"
-        [label]="(showAll ? 'common.buttons.hide' : 'moderation.showHistory') | translate"
-        (onClick)="toggleHistory()"
-      />
-    }
-  </div>
+      <p-accordion-content>
+        <div class="flex align-items-center 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>
+          }
+        </div>
+      </p-accordion-content>
+    </p-accordion-panel>
+  </p-accordion>
 </div>

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

@@ -3,11 +3,11 @@ import { MockComponents, MockPipes } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { IconComponent } from '@osf/shared/components';
+import { ContributorsListComponent, IconComponent } from '@osf/shared/components';
 import { DateAgoPipe } from '@osf/shared/pipes';
 
 import { SubmissionReviewStatus } from '../../enums';
-import { PreprintSubmission } from '../../models';
+import { PreprintSubmissionModel } from '../../models';
 
 import { PreprintSubmissionItemComponent } from './preprint-submission-item.component';
 
@@ -18,14 +18,14 @@ describe('PreprintSubmissionItemComponent', () => {
   let component: PreprintSubmissionItemComponent;
   let fixture: ComponentFixture<PreprintSubmissionItemComponent>;
 
-  const mockSubmission: PreprintSubmission = MOCK_PREPRINT_SUBMISSION;
+  const mockSubmission: PreprintSubmissionModel = MOCK_PREPRINT_SUBMISSION;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
         PreprintSubmissionItemComponent,
         OSFTestingModule,
-        ...MockComponents(IconComponent),
+        ...MockComponents(IconComponent, ContributorsListComponent),
         MockPipes(DateAgoPipe, TranslatePipe),
       ],
     }).compileComponents();

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

@@ -1,27 +1,44 @@
 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 { IconComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { ContributorsListComponent, IconComponent, TruncatedTextComponent } from '@osf/shared/components';
+import { StopPropagationDirective } from '@osf/shared/directives';
 import { DateAgoPipe } from '@osf/shared/pipes';
 
 import { PREPRINT_ACTION_LABEL, ReviewStatusIcon } from '../../constants';
 import { ActionStatus, SubmissionReviewStatus } from '../../enums';
-import { PreprintSubmission, PreprintWithdrawalSubmission } from '../../models';
+import { PreprintSubmissionModel, PreprintWithdrawalSubmission } from '../../models';
 
 @Component({
   selector: 'osf-preprint-submission-item',
-  imports: [IconComponent, DateAgoPipe, Button, TranslatePipe, TruncatedTextComponent],
+  imports: [
+    IconComponent,
+    DateAgoPipe,
+    Button,
+    TranslatePipe,
+    TruncatedTextComponent,
+    Accordion,
+    AccordionPanel,
+    AccordionHeader,
+    AccordionContent,
+    ContributorsListComponent,
+    Skeleton,
+    StopPropagationDirective,
+  ],
   templateUrl: './preprint-submission-item.component.html',
   styleUrl: './preprint-submission-item.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PreprintSubmissionItemComponent {
   status = input.required<SubmissionReviewStatus>();
-  submission = input.required<PreprintSubmission | PreprintWithdrawalSubmission>();
+  submission = input.required<PreprintSubmissionModel | PreprintWithdrawalSubmission>();
   selected = output<void>();
+  loadContributors = output<void>();
 
   readonly reviewStatusIcon = ReviewStatusIcon;
   readonly actionLabel = PREPRINT_ACTION_LABEL;
@@ -33,4 +50,8 @@ export class PreprintSubmissionItemComponent {
   toggleHistory() {
     this.showAll = !this.showAll;
   }
+
+  handleOpen() {
+    this.loadContributors.emit();
+  }
 }

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

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

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

@@ -24,8 +24,12 @@ import {
 } from '@osf/shared/components';
 import { Primitive } from '@osf/shared/helpers';
 
-import { PreprintSubmission } from '../../models';
-import { GetPreprintSubmissions, PreprintModerationSelectors } from '../../store/preprint-moderation';
+import { PreprintSubmissionModel } from '../../models';
+import {
+  GetPreprintSubmissionContributors,
+  GetPreprintSubmissions,
+  PreprintModerationSelectors,
+} from '../../store/preprint-moderation';
 
 @Component({
   selector: 'osf-preprint-submissions',
@@ -53,7 +57,10 @@ export class PreprintSubmissionsComponent implements OnInit {
     this.route.parent?.params.pipe(map((params) => params['providerId'])) ?? of(undefined)
   );
 
-  readonly actions = createDispatchMap({ getPreprintSubmissions: GetPreprintSubmissions });
+  readonly actions = createDispatchMap({
+    getPreprintSubmissions: GetPreprintSubmissions,
+    getPreprintSubmissionContributors: GetPreprintSubmissionContributors,
+  });
 
   readonly submissions = select(PreprintModerationSelectors.getPreprintSubmissions);
   readonly isLoading = select(PreprintModerationSelectors.arePreprintSubmissionsLoading);
@@ -112,14 +119,18 @@ export class PreprintSubmissionsComponent implements OnInit {
     this.fetchSubmissions();
   }
 
-  navigateToPreprint(item: PreprintSubmission) {
+  navigateToPreprint(item: PreprintSubmissionModel) {
     const url = this.router.serializeUrl(
       this.router.createUrlTree(['/preprints/', this.providerId(), item.id], { queryParams: { mode: 'moderator' } })
     );
 
     window.open(url, '_blank');
   }
 
+  loadContributors(item: PreprintSubmissionModel) {
+    this.actions.getPreprintSubmissionContributors(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

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

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

@@ -24,7 +24,11 @@ import {
 import { Primitive } from '@osf/shared/helpers';
 
 import { PreprintWithdrawalSubmission } from '../../models';
-import { GetPreprintWithdrawalSubmissions, PreprintModerationSelectors } from '../../store/preprint-moderation';
+import {
+  GetPreprintWithdrawalSubmissionContributors,
+  GetPreprintWithdrawalSubmissions,
+  PreprintModerationSelectors,
+} from '../../store/preprint-moderation';
 import { PreprintSubmissionItemComponent } from '../preprint-submission-item/preprint-submission-item.component';
 
 @Component({
@@ -53,7 +57,10 @@ export class PreprintWithdrawalSubmissionsComponent implements OnInit {
     this.route.parent?.params.pipe(map((params) => params['providerId'])) ?? of(undefined)
   );
 
-  readonly actions = createDispatchMap({ getPreprintWithdrawalSubmissions: GetPreprintWithdrawalSubmissions });
+  readonly actions = createDispatchMap({
+    getPreprintWithdrawalSubmissions: GetPreprintWithdrawalSubmissions,
+    getPreprintWithdrawalSubmissionContributors: GetPreprintWithdrawalSubmissionContributors,
+  });
 
   readonly submissions = select(PreprintModerationSelectors.getPreprintWithdrawalSubmissions);
   readonly isLoading = select(PreprintModerationSelectors.arePreprintWithdrawalSubmissionsLoading);
@@ -117,6 +124,10 @@ export class PreprintWithdrawalSubmissionsComponent implements OnInit {
     window.open(url, '_blank');
   }
 
+  loadContributors(item: PreprintWithdrawalSubmission) {
+    this.actions.getPreprintWithdrawalSubmissionContributors(item.id, item.preprintId);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);

src/app/features/moderation/mappers/preprint-moderation.mapper.ts

@@ -66,6 +66,8 @@ export class PreprintModerationMapper {
         public: x.attributes.public,
         reviewsState: x.attributes.reviews_state,
         actions: [],
+        contributors: [],
+        totalContributors: 0,
       })),
       totalCount: response.meta.total,
       pageSize: response.meta.per_page,
@@ -85,6 +87,8 @@ export class PreprintModerationMapper {
         title: x.embeds.target.data.attributes.title,
         preprintId: x.embeds.target.data.id,
         actions: [],
+        contributors: [],
+        totalContributors: 0,
       })),
       totalCount: response.meta.total,
       pageSize: response.meta.per_page,

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

@@ -1,18 +1,21 @@
-import { PaginatedData } from '@osf/shared/models';
+import { ContributorModel, PaginatedData } from '@osf/shared/models';
 
 import { ReviewAction } from './review-action.model';
 
-export interface PreprintSubmissionPaginatedData extends PaginatedData<PreprintSubmission[]> {
+export interface PreprintSubmissionPaginatedData extends PaginatedData<PreprintSubmissionModel[]> {
   pendingCount: number;
   acceptedCount: number;
   rejectedCount: number;
   withdrawnCount: number;
 }
 
-export interface PreprintSubmission {
+export interface PreprintSubmissionModel {
   id: string;
   title: string;
   reviewsState: string;
   public: boolean;
   actions: ReviewAction[];
+  contributors: ContributorModel[];
+  totalContributors: number;
+  contributorsLoading?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { PaginatedData } from '@osf/shared/models';
+import { ContributorModel, PaginatedData } from '@osf/shared/models';
 
 import { ReviewAction } from './review-action.model';
 
@@ -13,4 +13,7 @@ export interface PreprintWithdrawalSubmission {
   title: string;
   preprintId: string;
   actions: ReviewAction[];
+  contributors: ContributorModel[];
+  totalContributors: number;
+  contributorsLoading?: boolean;
 }