[ENG-6719] Show Funder and Grant ID information on registries moderation cards (#855)

mkovalua · web-flow · commit 4d85d5166167 · 2026-01-30T11:40:56.000-05:00
- Ticket: https://openscience.atlassian.net/browse/ENG-6719 - Feature flag: n/a ## Purpose Some registries members use funder information to determine priority or relevance of submissions. They currently must drill down several layers within their moderation workflow to find this information.
diff --git a/src/app/features/metadata/services/index.ts b/src/app/features/metadata/services/index.ts
diff --git a/src/app/features/metadata/store/metadata.state.ts b/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,
diff --git a/src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.html b/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>
diff --git a/src/app/features/moderation/components/registry-pending-submissions/registry-pending-submissions.component.ts b/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);
diff --git a/src/app/features/moderation/components/registry-submission-item/registry-submission-item.component.html b/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>
diff --git a/src/app/features/moderation/components/registry-submission-item/registry-submission-item.component.ts b/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();
   }
 }
diff --git a/src/app/features/moderation/components/registry-submissions/registry-submissions.component.html b/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>
diff --git a/src/app/features/moderation/components/registry-submissions/registry-submissions.component.ts b/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);
diff --git a/src/app/features/moderation/models/registry-moderation.model.ts b/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;
 }
diff --git a/src/app/features/moderation/store/registry-moderation/registry-moderation.actions.ts b/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) {}
+}
diff --git a/src/app/features/moderation/store/registry-moderation/registry-moderation.state.ts b/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);
+      })
+    );
+  }
 }
diff --git a/src/app/shared/funder-awards-list/funder-awards-list.component.html b/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>
diff --git a/src/app/shared/funder-awards-list/funder-awards-list.component.scss b/src/app/shared/funder-awards-list/funder-awards-list.component.scss
diff --git a/src/app/shared/funder-awards-list/funder-awards-list.component.spec.ts b/src/app/shared/funder-awards-list/funder-awards-list.component.spec.ts
@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter } from '@angular/router';
+
+import { FunderAwardsListComponent } from './funder-awards-list.component';
+
+import { MOCK_FUNDERS } from '@testing/mocks/funder.mock';
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
+describe('FunderAwardsListComponent', () => {
+  let component: FunderAwardsListComponent;
+  let fixture: ComponentFixture<FunderAwardsListComponent>;
+
+  const MOCK_REGISTRY_ID = 'test-registry-123';
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FunderAwardsListComponent, OSFTestingModule],
+      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-1234567');
+  });
+
+  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');
+  });
+});
diff --git a/src/app/shared/funder-awards-list/funder-awards-list.component.ts b/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);
+}
diff --git a/src/app/shared/services/metadata.service.ts b/src/app/shared/services/metadata.service.ts
@@ -4,24 +4,25 @@ import { map } from 'rxjs/operators';
 import { inject, Injectable } from '@angular/core';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { ResourceType } from '@osf/shared/enums/resource-type.enum';
-import { IdentifierModel } from '@osf/shared/models/identifiers/identifier.model';
-import { LicenseOptions } from '@osf/shared/models/license/license.model';
-import { BaseNodeAttributesJsonApi } from '@osf/shared/models/nodes/base-node-attributes-json-api.model';
-import { JsonApiService } from '@osf/shared/services/json-api.service';
-
-import { CedarRecordsMapper, MetadataMapper } from '../mappers';
+import { CedarRecordsMapper, MetadataMapper } from '@osf/features/metadata/mappers';
 import {
   CedarMetadataRecord,
   CedarMetadataRecordJsonApi,
   CedarMetadataTemplateJsonApi,
   CedarRecordDataBinding,
+  CrossRefFundersResponse,
+  CustomItemMetadataRecord,
   CustomMetadataJsonApi,
   CustomMetadataJsonApiResponse,
   MetadataJsonApi,
   MetadataJsonApiResponse,
-} from '../models';
-import { CrossRefFundersResponse, CustomItemMetadataRecord, MetadataModel } from '../models/metadata.model';
+  MetadataModel,
+} from '@osf/features/metadata/models';
+import { ResourceType } from '@osf/shared/enums/resource-type.enum';
+import { IdentifierModel } from '@osf/shared/models/identifiers/identifier.model';
+import { LicenseOptions } from '@osf/shared/models/license/license.model';
+import { BaseNodeAttributesJsonApi } from '@osf/shared/models/nodes/base-node-attributes-json-api.model';
+import { JsonApiService } from '@osf/shared/services/json-api.service';
 
 @Injectable({
   providedIn: 'root',
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json

Original file line number	Diff line number	Diff line change
`@@ -27,3 +27,9 @@ export class LoadMoreRegistrySubmissionContributors {`
`27`	`27`
`28`	`28`	`constructor(public registryId: string) {}`
`29`	`29`	`}`
	`30`	`+`
	`31`	`+export class GetRegistrySubmissionFunders {`
	`32`	+ static readonly type = `${ACTION_SCOPE} Get Registry Submission Funders`;
	`33`	`+`
	`34`	`+ constructor(public registryId: string) {}`
	`35`	`+}`