Fix/contributors update

src/app/features/analytics/components/view-duplicates/view-duplicates.component.html

@@ -54,12 +54,8 @@ <h2 class="flex align-items-center gap-2">
 
             <div class="flex flex-wrap align-items-center gap-1">
               <span class="font-bold">{{ 'common.labels.contributors' | translate }}:</span>
-              @for (contributor of duplicate.contributors; track contributor.id) {
-                <div>
-                  <a class="font-bold" [routerLink]="['/user', contributor.userId]"> {{ contributor.fullName }}</a>
-                  <span>{{ $last ? '' : ',' }}</span>
-                </div>
-              }
+
+              <osf-contributors-list [contributors]="duplicate.contributors"></osf-contributors-list>
             </div>
 
             <div class="component-description">

src/app/features/analytics/components/view-duplicates/view-duplicates.component.spec.ts

@@ -14,6 +14,7 @@ import { ResourceType } from '@osf/shared/enums';
 import { IS_SMALL } from '@osf/shared/helpers';
 import { DuplicatesSelectors } from '@osf/shared/stores';
 import {
+  ContributorsListComponent,
   CustomPaginatorComponent,
   IconComponent,
   LoadingSpinnerComponent,
@@ -52,7 +53,8 @@ describe('Component: View Duplicates', () => {
           TruncatedTextComponent,
           LoadingSpinnerComponent,
           CustomPaginatorComponent,
-          IconComponent
+          IconComponent,
+          ContributorsListComponent
         ),
       ],
       providers: [

src/app/features/analytics/components/view-duplicates/view-duplicates.component.ts

@@ -31,6 +31,7 @@ import {
   RegistryOverviewSelectors,
 } from '@osf/features/registry/store/registry-overview';
 import {
+  ContributorsListComponent,
   CustomPaginatorComponent,
   IconComponent,
   LoadingSpinnerComponent,
@@ -56,6 +57,7 @@ import { ClearDuplicates, DuplicatesSelectors, GetAllDuplicates } from '@osf/sha
     RouterLink,
     CustomPaginatorComponent,
     IconComponent,
+    ContributorsListComponent,
   ],
   templateUrl: './view-duplicates.component.html',
   styleUrl: './view-duplicates.component.scss',

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.html

@@ -37,12 +37,12 @@ <h3>{{ 'collections.addToCollection.projectContributors' | translate }}</h3>
   <p-step-panel [value]="targetStepValue()" class="p-0">
     <ng-template class="m-0" #content>
       <div class="pt-4 w-full">
-        <osf-contributors-list
+        <osf-contributors-table
           class="w-full"
           [contributors]="projectContributors()"
           [isLoading]="isContributorsLoading()"
           (remove)="handleRemoveContributor($event)"
-        ></osf-contributors-list>
+        ></osf-contributors-table>
 
         <div class="flex justify-content-end gap-3 mt-4 w-full">
           <p-button

src/app/features/collections/components/add-to-collection/project-contributors-step/project-contributors-step.component.spec.ts

@@ -9,7 +9,7 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ContributorsListComponent } from '@shared/components/contributors';
+import { ContributorsTableComponent } from '@shared/components/contributors';
 import { TranslateServiceMock } from '@shared/mocks';
 import { ToastService } from '@shared/services';
 import { ContributorsState, ProjectsState } from '@shared/stores';
@@ -22,7 +22,7 @@ describe.skip('ProjectContributorsStepComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ProjectContributorsStepComponent, MockComponent(ContributorsListComponent), MockPipe(TranslatePipe)],
+      imports: [ProjectContributorsStepComponent, MockComponent(ContributorsTableComponent), MockPipe(TranslatePipe)],
       providers: [
         provideHttpClient(),
         provideHttpClientTesting(),

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

@@ -17,7 +17,7 @@ import { InfoIconComponent } from '@osf/shared/components';
 import {
   AddContributorDialogComponent,
   AddUnregisteredContributorDialogComponent,
-  ContributorsListComponent,
+  ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
 import { AddContributorType, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
@@ -33,7 +33,7 @@ import {
 
 @Component({
   selector: 'osf-project-contributors-step',
-  imports: [Button, Step, StepItem, StepPanel, Tooltip, TranslatePipe, ContributorsListComponent, InfoIconComponent],
+  imports: [Button, Step, StepItem, StepPanel, Tooltip, TranslatePipe, ContributorsTableComponent, InfoIconComponent],
   templateUrl: './project-contributors-step.component.html',
   styleUrl: './project-contributors-step.component.scss',
   providers: [DialogService],

src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.html

@@ -4,22 +4,23 @@
   <a [href]="item.nodeUrl">
     <p class="card-title font-bold">{{ item?.title }}</p>
   </a>
-  <p>
-    {{ 'collections.common.by' | translate }}
-    @for (contributor of item?.contributors; track contributor.id) {
-      <a [routerLink]="['/user', contributor.id]" class="font-bold cursor-pointer">
-        {{ contributor.fullName }}{{ $last ? '' : ', ' }}
-      </a>
-    }
-  </p>
+
+  <div class="flex gap-1">
+    <p>{{ 'collections.common.by' | translate }}</p>
+
+    <osf-contributors-list [contributors]="item?.contributors || []"></osf-contributors-list>
+  </div>
+
   <p class="card-description">{{ item?.description }}</p>
+
   <p class="flex gap-1 flex-wrap">
     <span>{{ 'collections.common.dateCreated' | translate }}</span>
     <span>{{ item?.dateCreated | date: 'longDate' }}</span>
     <span>|</span>
     <span>{{ 'collections.common.dateModified' | translate }}</span>
     <span>{{ item?.dateModified | date: 'longDate' }}</span>
   </p>
+
   <div class="font-bold flex flex-wrap">
     @for (attribute of presentSubmissionAttributes(); track attribute.key) {
       @if (!$first) {

src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.spec.ts

@@ -1,10 +1,12 @@
 import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipes } from 'ng-mocks';
+import { MockComponent, MockPipes } from 'ng-mocks';
 
 import { DatePipe } from '@angular/common';
 import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { ContributorsListComponent } from '@osf/shared/components';
+
 import { CollectionsSearchResultCardComponent } from './collections-search-result-card.component';
 
 describe('CollectionsResultCardComponent', () => {
@@ -14,7 +16,11 @@ describe('CollectionsResultCardComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CollectionsSearchResultCardComponent, MockPipes(TranslatePipe, DatePipe)],
+      imports: [
+        CollectionsSearchResultCardComponent,
+        MockPipes(TranslatePipe, DatePipe),
+        MockComponent(ContributorsListComponent),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CollectionsSearchResultCardComponent);

src/app/features/collections/components/collections-search-result-card/collections-search-result-card.component.ts

@@ -2,14 +2,14 @@ import { TranslatePipe } from '@ngx-translate/core';
 
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 import { collectionFilterNames } from '@osf/features/collections/constants';
+import { ContributorsListComponent } from '@osf/shared/components';
 import { CollectionSubmissionWithGuid } from '@shared/models';
 
 @Component({
   selector: 'osf-collections-search-result-card',
-  imports: [DatePipe, TranslatePipe, RouterLink],
+  imports: [DatePipe, TranslatePipe, ContributorsListComponent],
   templateUrl: './collections-search-result-card.component.html',
   styleUrl: './collections-search-result-card.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/files/components/file-resource-metadata/file-resource-metadata.component.html

@@ -98,18 +98,11 @@ <h4>{{ 'files.detail.resourceMetadata.fields.dateModified' | translate }}</h4>
   @if (isResourceContributorsLoading()) {
     <p-skeleton width="100%" height="4rem" />
   } @else {
-    @if (contributors()?.length && !hasViewOnly()) {
+    @if (contributors().length && !hasViewOnly()) {
       <div class="flex flex-column gap-2">
-        <h4>{{ 'files.detail.resourceMetadata.fields.contributors' | translate }}</h4>
+        <h4>{{ 'common.labels.contributors' | translate }}</h4>
 
-        <div class="flex flex-wrap">
-          @for (contributor of contributors(); track $index) {
-            <a [routerLink]="['/user', contributor.userId]" class="font-bold">{{ contributor.fullName }}</a>
-            @if (!$last) {
-              <span>,&nbsp;</span>
-            }
-          }
-        </div>
+        <osf-contributors-list [contributors]="contributors()"></osf-contributors-list>
       </div>
     }
   }

src/app/features/files/components/file-resource-metadata/file-resource-metadata.component.ts

@@ -6,15 +6,16 @@ import { Skeleton } from 'primeng/skeleton';
 
 import { DatePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
-import { Router, RouterLink } from '@angular/router';
+import { Router } from '@angular/router';
 
+import { ContributorsListComponent } from '@osf/shared/components';
 import { hasViewOnlyParam } from '@osf/shared/helpers';
 
 import { FilesSelectors } from '../../store';
 
 @Component({
   selector: 'osf-file-resource-metadata',
-  imports: [DatePipe, TranslatePipe, Skeleton, RouterLink],
+  imports: [DatePipe, TranslatePipe, Skeleton, ContributorsListComponent],
   templateUrl: './file-resource-metadata.component.html',
   styleUrl: './file-resource-metadata.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/features/files/store/files.model.ts

@@ -17,7 +17,7 @@ export interface FilesStateModel {
   openedFile: AsyncStateModel<OsfFile | null>;
   fileMetadata: AsyncStateModel<OsfFileCustomMetadata | null>;
   resourceMetadata: AsyncStateModel<ResourceMetadata | null>;
-  contributors: AsyncStateModel<Partial<ContributorModel>[] | null>;
+  contributors: AsyncStateModel<ContributorModel[] | null>;
   fileRevisions: AsyncStateModel<OsfFileRevision[] | null>;
   tags: AsyncStateModel<string[]>;
   rootFolders: AsyncStateModel<OsfFile[] | null>;

src/app/features/files/store/files.selectors.ts

@@ -90,8 +90,8 @@ export class FilesSelectors {
   }
 
   @Selector([FilesState])
-  static getContributors(state: FilesStateModel): Partial<ContributorModel>[] | null {
-    return state.contributors.data;
+  static getContributors(state: FilesStateModel): ContributorModel[] {
+    return state.contributors.data || [];
   }
 
   @Selector([FilesState])

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.html

@@ -14,14 +14,7 @@ <h2>{{ 'project.overview.metadata.contributors' | translate }}</h2>
 
   @if (contributors()) {
     <div class="inline-flex flex-wrap gap-1 line-height-2 mt-4">
-      @for (contributor of contributors(); track contributor.id) {
-        <div>
-          <a class="font-bold" [routerLink]="['/user', contributor.userId]" data-test-contributor-name>
-            {{ contributor.fullName }}
-          </a>
-          <span>{{ $last ? '' : ',' }}</span>
-        </div>
-      }
+      <osf-contributors-list [contributors]="contributors()"></osf-contributors-list>
     </div>
   }
 </p-card>

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.spec.ts

@@ -1,8 +1,9 @@
-import { MockProvider } from 'ng-mocks';
+import { MockComponent, MockProvider } from 'ng-mocks';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 
+import { ContributorsListComponent } from '@osf/shared/components';
 import { ContributorModel } from '@osf/shared/models';
 import { MOCK_CONTRIBUTOR, TranslateServiceMock } from '@shared/mocks';
 
@@ -16,7 +17,7 @@ describe('MetadataContributorsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MetadataContributorsComponent],
+      imports: [MetadataContributorsComponent, MockComponent(ContributorsListComponent)],
       providers: [TranslateServiceMock, MockProvider(ActivatedRoute)],
     }).compileComponents();
 

src/app/features/metadata/components/metadata-contributors/metadata-contributors.component.ts

@@ -4,13 +4,13 @@ import { Button } from 'primeng/button';
 import { Card } from 'primeng/card';
 
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
+import { ContributorsListComponent } from '@osf/shared/components';
 import { ContributorModel } from '@osf/shared/models';
 
 @Component({
   selector: 'osf-metadata-contributors',
-  imports: [Button, Card, TranslatePipe, RouterLink],
+  imports: [Button, Card, TranslatePipe, ContributorsListComponent],
   templateUrl: './metadata-contributors.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.html

@@ -14,7 +14,7 @@
     <osf-search-input [control]="searchControl" [placeholder]="searchPlaceholder | translate" />
   </div>
 
-  <osf-contributors-list
+  <osf-contributors-table
     class="w-full"
     [contributors]="contributors()"
     [showEducation]="false"
@@ -23,7 +23,7 @@
     [isCurrentUserAdminContributor]="isCurrentUserAdminContributor()"
     [currentUserId]="currentUser()?.id"
     (remove)="removeContributor($event)"
-  ></osf-contributors-list>
+  ></osf-contributors-table>
 
   @if (hasChanges) {
     <div class="flex gap-2 w-full">

src/app/features/metadata/dialogs/contributors-dialog/contributors-dialog.component.ts

@@ -25,7 +25,7 @@ import { SearchInputComponent } from '@osf/shared/components';
 import {
   AddContributorDialogComponent,
   AddUnregisteredContributorDialogComponent,
-  ContributorsListComponent,
+  ContributorsTableComponent,
 } from '@osf/shared/components/contributors';
 import { AddContributorType, ContributorPermission, ResourceType } from '@osf/shared/enums';
 import { findChangedItems } from '@osf/shared/helpers';
@@ -43,7 +43,7 @@ import {
 
 @Component({
   selector: 'osf-contributors-dialog',
-  imports: [Button, SearchInputComponent, TranslatePipe, FormsModule, ContributorsListComponent],
+  imports: [Button, SearchInputComponent, TranslatePipe, FormsModule, ContributorsTableComponent],
   templateUrl: './contributors-dialog.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [DialogService],

src/app/features/my-projects/mappers/my-resources.mapper.ts

@@ -10,7 +10,7 @@ export class MyResourcesMapper {
       dateCreated: response.attributes.date_created,
       dateModified: response.attributes.date_modified,
       isPublic: response.attributes.public,
-      contributors: ContributorsMapper.getContributorShortInfo(response.embeds?.bibliographic_contributors?.data),
+      contributors: ContributorsMapper.getContributors(response.embeds?.bibliographic_contributors?.data),
     };
   }
 }

src/app/features/preprints/components/preprint-details/general-information/general-information.component.html

@@ -25,18 +25,7 @@ <h3>{{ 'preprints.details.supplementalMaterials' | translate }}</h3>
         <h3>{{ 'preprints.preprintStepper.review.sections.metadata.authors' | translate }}</h3>
 
         <div class="flex flex-column gap-1 line-height-2 md:flex-row">
-          @for (contributor of bibliographicContributors(); track contributor.id) {
-            <div>
-              @if (contributor.isUnregisteredContributor) {
-                <span>{{ contributor.fullName }}</span>
-              } @else {
-                <a class="font-bold" [routerLink]="['/user', contributor.userId]">
-                  {{ contributor.fullName }}
-                </a>
-              }
-              <span>{{ $last ? '' : ',' }}</span>
-            </div>
-          }
+          <osf-contributors-list [contributors]="bibliographicContributors()"></osf-contributors-list>
 
           @if (areContributorsLoading()) {
             <p-skeleton width="10rem" height="1.25rem" />

src/app/features/preprints/components/preprint-details/general-information/general-information.component.spec.ts

@@ -3,13 +3,19 @@ import { MockComponents, MockProvider } from 'ng-mocks';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { PreprintDoiSectionComponent } from '@osf/features/preprints/components/preprint-details/preprint-doi-section/preprint-doi-section.component';
 import { PreprintProviderDetails } from '@osf/features/preprints/models';
 import { PreprintSelectors } from '@osf/features/preprints/store/preprint';
-import { AffiliatedInstitutionsViewComponent, IconComponent, TruncatedTextComponent } from '@shared/components';
+import {
+  AffiliatedInstitutionsViewComponent,
+  ContributorsListComponent,
+  IconComponent,
+  TruncatedTextComponent,
+} from '@shared/components';
 import { MOCK_CONTRIBUTOR, MOCK_INSTITUTION } from '@shared/mocks';
 import { ContributorsSelectors, InstitutionsSelectors } from '@shared/stores';
 
+import { PreprintDoiSectionComponent } from '../preprint-doi-section/preprint-doi-section.component';
+
 import { GeneralInformationComponent } from './general-information.component';
 
 import { PREPRINT_MOCK } from '@testing/mocks/preprint.mock';
@@ -36,7 +42,8 @@ describe('GeneralInformationComponent', () => {
           TruncatedTextComponent,
           PreprintDoiSectionComponent,
           IconComponent,
-          AffiliatedInstitutionsViewComponent
+          AffiliatedInstitutionsViewComponent,
+          ContributorsListComponent
         ),
       ],
       providers: [