[ENG-6719] Show Funder and Grant ID information on registries moderation cards

src/app/features/metadata/store/metadata.state.ts

@@ -5,9 +5,9 @@ import { catchError, finalize, tap } from 'rxjs';
 import { inject, Injectable } from '@angular/core';
 
 import { handleSectionError } from '@osf/shared/helpers/state-error.handler';
+import { MetadataService } from '@osf/shared/services/metadata.service';
 
 import { CedarMetadataRecord, CedarMetadataRecordJsonApi, MetadataModel } from '../models';
-import { MetadataService } from '../services';
 
 import {
   AddCedarMetadataRecordToState,

src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.html

@@ -39,7 +39,7 @@
             [submission]="item"
             [status]="selectedReviewOption()"
             (selected)="navigateToRegistration(item)"
-            (loadContributors)="loadContributors(item)"
+            (loadAdditionalData)="loadAdditionalData(item)"
             (loadMoreContributors)="loadMoreContributors(item)"
           ></osf-registry-submission-item>
         </div>

src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.ts

@@ -26,6 +26,7 @@ import { RegistrySort, SubmissionReviewStatus } from '../../enums';
 import { RegistryModeration } from '../../models';
 import {
   GetRegistrySubmissionContributors,
+  GetRegistrySubmissionFunders,
   GetRegistrySubmissions,
   LoadMoreRegistrySubmissionContributors,
   RegistryModerationSelectors,
@@ -63,6 +64,7 @@ export class RegistryPendingSubmissionsComponent implements OnInit {
     getRegistrySubmissions: GetRegistrySubmissions,
     getRegistrySubmissionContributors: GetRegistrySubmissionContributors,
     loadMoreRegistrySubmissionContributors: LoadMoreRegistrySubmissionContributors,
+    getRegistrySubmissionFunders: GetRegistrySubmissionFunders,
   });
 
   readonly submissions = select(RegistryModerationSelectors.getRegistrySubmissions);
@@ -129,6 +131,11 @@ export class RegistryPendingSubmissionsComponent implements OnInit {
     this.actions.loadMoreRegistrySubmissionContributors(item.id);
   }
 
+  loadAdditionalData(item: RegistryModeration) {
+    this.actions.getRegistrySubmissionContributors(item.id);
+    this.actions.getRegistrySubmissionFunders(item.id);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);

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

@@ -64,12 +64,19 @@ <h4>{{ submission().title }}</h4>
 
           <osf-contributors-list
             [contributors]="submission().contributors || []"
-            [isLoading]="!!submission().contributorsLoading || false"
+            [isLoading]="submission().contributorsLoading || false"
             [hasLoadMore]="hasMoreContributors()"
             (loadMoreContributors)="loadMoreContributors.emit()"
           >
           </osf-contributors-list>
         </div>
+        <div>
+          <osf-funder-awards-list
+            [funders]="submission().funders || []"
+            [isLoading]="submission().fundersLoading || false"
+            [registryId]="submission().id"
+          ></osf-funder-awards-list>
+        </div>
       </p-accordion-content>
     </p-accordion-panel>
   </p-accordion>

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

@@ -10,6 +10,7 @@ import { ContributorsListComponent } from '@osf/shared/components/contributors-l
 import { IconComponent } from '@osf/shared/components/icon/icon.component';
 import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/truncated-text.component';
 import { DateAgoPipe } from '@osf/shared/pipes/date-ago.pipe';
+import { FunderAwardsListComponent } from '@shared/funder-awards-list/funder-awards-list.component';
 
 import { REGISTRY_ACTION_LABEL, ReviewStatusIcon } from '../../constants';
 import { ActionStatus, SubmissionReviewStatus } from '../../enums';
@@ -29,6 +30,7 @@ import { RegistryModeration } from '../../models';
     AccordionHeader,
     AccordionContent,
     ContributorsListComponent,
+    FunderAwardsListComponent,
   ],
   templateUrl: './registry-submission-item.component.html',
   styleUrl: './registry-submission-item.component.scss',
@@ -37,9 +39,8 @@ import { RegistryModeration } from '../../models';
 export class RegistrySubmissionItemComponent {
   status = input.required<SubmissionReviewStatus>();
   submission = input.required<RegistryModeration>();
-  loadContributors = output<void>();
   loadMoreContributors = output<void>();
-
+  loadAdditionalData = output<void>();
   selected = output<void>();
 
   readonly reviewStatusIcon = ReviewStatusIcon;
@@ -67,6 +68,6 @@ export class RegistrySubmissionItemComponent {
   });
 
   handleOpen() {
-    this.loadContributors.emit();
+    this.loadAdditionalData.emit();
   }
 }

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

@@ -39,7 +39,7 @@
             [submission]="item"
             [status]="selectedReviewOption()"
             (selected)="navigateToRegistration(item)"
-            (loadContributors)="loadContributors(item)"
+            (loadAdditionalData)="loadAdditionalData(item)"
             (loadMoreContributors)="loadMoreContributors(item)"
           ></osf-registry-submission-item>
         </div>

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

@@ -26,6 +26,7 @@ import { RegistrySort, SubmissionReviewStatus } from '../../enums';
 import { RegistryModeration } from '../../models';
 import {
   GetRegistrySubmissionContributors,
+  GetRegistrySubmissionFunders,
   GetRegistrySubmissions,
   LoadMoreRegistrySubmissionContributors,
   RegistryModerationSelectors,
@@ -63,6 +64,7 @@ export class RegistrySubmissionsComponent implements OnInit {
     getRegistrySubmissions: GetRegistrySubmissions,
     getRegistrySubmissionContributors: GetRegistrySubmissionContributors,
     loadMoreRegistrySubmissionContributors: LoadMoreRegistrySubmissionContributors,
+    getRegistrySubmissionFunders: GetRegistrySubmissionFunders,
   });
 
   readonly submissions = select(RegistryModerationSelectors.getRegistrySubmissions);
@@ -129,6 +131,11 @@ export class RegistrySubmissionsComponent implements OnInit {
     this.actions.loadMoreRegistrySubmissionContributors(item.id);
   }
 
+  loadAdditionalData(item: RegistryModeration) {
+    this.actions.getRegistrySubmissionContributors(item.id);
+    this.actions.getRegistrySubmissionFunders(item.id);
+  }
+
   private getStatusFromQueryParams() {
     const queryParams = this.route.snapshot.queryParams;
     const statusValues = Object.values(SubmissionReviewStatus);

src/app/features/moderation/models/registry-moderation.model.ts

@@ -1,3 +1,4 @@
+import { Funder } from '@osf/features/metadata/models';
 import { RegistrationReviewStates } from '@osf/shared/enums/registration-review-states.enum';
 import { RevisionReviewStates } from '@osf/shared/enums/revision-review-states.enum';
 import { ContributorModel } from '@shared/models/contributors/contributor.model';
@@ -18,4 +19,6 @@ export interface RegistryModeration {
   contributors?: ContributorModel[];
   totalContributors?: number;
   contributorsPage?: number;
+  funders?: Funder[];
+  fundersLoading?: boolean;
 }

src/app/features/moderation/store/registry-moderation/registry-moderation.actions.ts

@@ -27,3 +27,9 @@ export class LoadMoreRegistrySubmissionContributors {
 
   constructor(public registryId: string) {}
 }
+
+export class GetRegistrySubmissionFunders {
+  static readonly type = `${ACTION_SCOPE} Get Registry Submission Funders`;
+
+  constructor(public registryId: string) {}
+}

src/app/features/moderation/store/registry-moderation/registry-moderation.state.ts

@@ -7,6 +7,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { handleSectionError } from '@osf/shared/helpers/state-error.handler';
 import { PaginatedData } from '@osf/shared/models/paginated-data.model';
+import { MetadataService } from '@osf/shared/services/metadata.service';
 import { DEFAULT_TABLE_PARAMS } from '@shared/constants/default-table-params.constants';
 import { ResourceType } from '@shared/enums/resource-type.enum';
 import { ContributorsService } from '@shared/services/contributors.service';
@@ -16,6 +17,7 @@ import { RegistryModerationService } from '../../services';
 
 import {
   GetRegistrySubmissionContributors,
+  GetRegistrySubmissionFunders,
   GetRegistrySubmissions,
   LoadMoreRegistrySubmissionContributors,
 } from './registry-moderation.actions';
@@ -29,7 +31,7 @@ import { REGISTRY_MODERATION_STATE_DEFAULTS, RegistryModerationStateModel } from
 export class RegistryModerationState {
   private readonly registryModerationService = inject(RegistryModerationService);
   private readonly contributorsService = inject(ContributorsService);
-
+  private readonly metadataService = inject(MetadataService);
   @Action(GetRegistrySubmissionContributors)
   getRegistrySubmissionContributors(
     ctx: StateContext<RegistryModerationStateModel>,
@@ -151,4 +153,59 @@ export class RegistryModerationState {
       catchError((error) => handleSectionError(ctx, 'submissions', error))
     );
   }
+
+  @Action(GetRegistrySubmissionFunders)
+  getRegistrySubmissionFunders(
+    ctx: StateContext<RegistryModerationStateModel>,
+    { registryId }: GetRegistrySubmissionFunders
+  ) {
+    const state = ctx.getState();
+    const submission = state.submissions.data.find((s) => s.id === registryId);
+
+    if (submission?.funders && submission.funders.length > 0) {
+      return;
+    }
+
+    ctx.setState(
+      patch({
+        submissions: patch({
+          data: updateItem<RegistryModeration>(
+            (submission) => submission.id === registryId,
+            patch({ fundersLoading: true })
+          ),
+        }),
+      })
+    );
+
+    return this.metadataService.getCustomItemMetadata(registryId).pipe(
+      tap((res) => {
+        ctx.setState(
+          patch({
+            submissions: patch({
+              data: updateItem<RegistryModeration>(
+                (submission) => submission.id === registryId,
+                patch({
+                  funders: res.funders,
+                  fundersLoading: false,
+                })
+              ),
+            }),
+          })
+        );
+      }),
+      catchError((error) => {
+        ctx.setState(
+          patch({
+            submissions: patch({
+              data: updateItem<RegistryModeration>(
+                (submission) => submission.id === registryId,
+                patch({ fundersLoading: false })
+              ),
+            }),
+          })
+        );
+        return handleSectionError(ctx, 'submissions', error);
+      })
+    );
+  }
 }

src/app/shared/funder-awards-list/funder-awards-list.component.html

@@ -0,0 +1,24 @@
+<div class="flex align-content-start gap-1 p-3 pt-0 ml-3">
+  @if (isLoading()) {
+    <div class="w-full">
+      <p-skeleton height="5rem" />
+    </div>
+  } @else {
+    @if (funders().length) {
+      <p>{{ 'resourceCard.labels.funderAwards' | translate }}</p>
+      <div class="flex flex-wrap gap-4">
+        @for (funder of funders(); track $index) {
+          <a
+            [routerLink]="['/', registryId(), 'metadata', 'osf']"
+            class="font-bold block line-height-3 mb-3"
+            target="_blank"
+          >
+            <div>{{ funder.funderName }}</div>
+
+            <div>{{ funder.awardNumber }}</div>
+          </a>
+        }
+      </div>
+    }
+  }
+</div>

src/app/shared/funder-awards-list/funder-awards-list.component.spec.ts

@@ -0,0 +1,85 @@
+import { TranslateModule } from '@ngx-translate/core';
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+
+import { Funder } from '@osf/features/metadata/models';
+
+import { FunderAwardsListComponent } from './funder-awards-list.component';
+
+describe('FunderAwardsListComponent', () => {
+  let component: FunderAwardsListComponent;
+  let fixture: ComponentFixture<FunderAwardsListComponent>;
+
+  const MOCK_REGISTRY_ID = 'test-registry-123';
+  const MOCK_FUNDERS: Funder[] = [
+    {
+      funderName: 'National Science Foundation',
+      awardNumber: 'NSF-2024-X',
+      funderIdentifier: '10.13039/100000001',
+      funderIdentifierType: 'Crossref Funder ID',
+      awardUri: 'https://nsf.gov/award/1',
+      awardTitle: 'Advanced Research Initiative',
+    },
+    {
+      funderName: 'European Research Council',
+      awardNumber: 'ERC-888',
+      funderIdentifier: '10.13039/501100000781',
+      funderIdentifierType: 'Crossref Funder ID',
+      awardUri: 'https://erc.europa.eu/award/2',
+      awardTitle: 'Future Fellowship',
+    },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FunderAwardsListComponent, TranslateModule.forRoot()],
+      providers: [provideRouter([])],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FunderAwardsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not render the list or label if funders array is empty', () => {
+    fixture.componentRef.setInput('funders', []);
+    fixture.detectChanges();
+    const label = fixture.debugElement.query(By.css('p'));
+    const links = fixture.debugElement.queryAll(By.css('a'));
+    expect(label).toBeNull();
+    expect(links.length).toBe(0);
+  });
+
+  it('should render a list of funders when data is provided', () => {
+    fixture.componentRef.setInput('funders', MOCK_FUNDERS);
+    fixture.componentRef.setInput('registryId', MOCK_REGISTRY_ID);
+    fixture.detectChanges();
+    const links = fixture.debugElement.queryAll(By.css('a'));
+    expect(links.length).toBe(2);
+    const firstItemText = links[0].nativeElement.textContent;
+    expect(firstItemText).toContain('National Science Foundation');
+    expect(firstItemText).toContain('NSF-2024-X');
+  });
+
+  it('should generate the correct router link', () => {
+    fixture.componentRef.setInput('funders', MOCK_FUNDERS);
+    fixture.componentRef.setInput('registryId', MOCK_REGISTRY_ID);
+    fixture.detectChanges();
+    const linkDebugEl = fixture.debugElement.query(By.css('a'));
+    const href = linkDebugEl.nativeElement.getAttribute('href');
+    expect(href).toContain(`/${MOCK_REGISTRY_ID}/metadata/osf`);
+  });
+
+  it('should open links in a new tab', () => {
+    fixture.componentRef.setInput('funders', MOCK_FUNDERS);
+    fixture.detectChanges();
+    const linkDebugEl = fixture.debugElement.query(By.css('a'));
+    expect(linkDebugEl.attributes['target']).toBe('_blank');
+  });
+});

src/app/shared/funder-awards-list/funder-awards-list.component.ts

@@ -0,0 +1,21 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Skeleton } from 'primeng/skeleton';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { Funder } from '@osf/features/metadata/models';
+
+@Component({
+  selector: 'osf-funder-awards-list',
+  imports: [RouterLink, TranslatePipe, Skeleton],
+  templateUrl: './funder-awards-list.component.html',
+  styleUrl: './funder-awards-list.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FunderAwardsListComponent {
+  funders = input<Funder[]>([]);
+  registryId = input<string | null>(null);
+  isLoading = input(false);
+}