[ENG-10048] Add Registry Name to Registration Metadata

src/app/features/metadata/components/metadata-date-info/metadata-date-info.component.html

@@ -5,7 +5,7 @@ <h2>
         {{ 'project.overview.metadata.dateCreated' | translate }}
       </h2>
 
-      <p class="m-0">
+      <p class="mt-4">
         {{ dateCreated() | date: dateFormat }}
       </p>
     </div>
@@ -15,7 +15,7 @@ <h2>
         {{ 'project.overview.metadata.dateUpdated' | translate }}
       </h2>
 
-      <p class="m-0">
+      <p class="mt-4">
         {{ dateModified() | date: dateFormat }}
       </p>
     </div>

src/app/features/metadata/components/metadata-registry-info/metadata-registry-info.component.html

@@ -0,0 +1,13 @@
+<p-card>
+  <div class="flex justify-content-between flex-wrap gap-4">
+    <div class="flex flex-column gap-2 flex-1">
+      <h2>{{ 'registry.overview.metadata.type' | translate }}</h2>
+      <p data-test-display-registry-type class="mt-4">{{ type() }}</p>
+    </div>
+
+    <div class="flex flex-column gap-2 flex-1">
+      <h2>{{ 'registry.overview.metadata.registry' | translate }}</h2>
+      <p data-test-display-registry-provider class="mt-4">{{ provider()?.name }}</p>
+    </div>
+  </div>
+</p-card>

src/app/features/metadata/components/metadata-registry-info/metadata-registry-info.component.spec.ts

@@ -0,0 +1,130 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistryProviderDetails } from '@osf/shared/models/provider/registry-provider.model';
+
+import { MetadataRegistryInfoComponent } from './metadata-registry-info.component';
+
+import { OSFTestingModule } from '@testing/osf.testing.module';
+
+describe('MetadataRegistryInfoComponent', () => {
+  let component: MetadataRegistryInfoComponent;
+  let fixture: ComponentFixture<MetadataRegistryInfoComponent>;
+
+  const mockProvider: RegistryProviderDetails = {
+    id: 'test-provider-id',
+    name: 'Test Registry Provider',
+    descriptionHtml: '<p>Test description</p>',
+    permissions: [],
+    brand: null,
+    iri: 'https://example.com/registry',
+    reviewsWorkflow: 'standard',
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MetadataRegistryInfoComponent, OSFTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MetadataRegistryInfoComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with default values', () => {
+    expect(component.type()).toBe('');
+    expect(component.provider()).toBeUndefined();
+  });
+
+  it('should set type input', () => {
+    const mockType = 'Clinical Trial';
+    fixture.componentRef.setInput('type', mockType);
+    fixture.detectChanges();
+
+    expect(component.type()).toBe(mockType);
+  });
+
+  it('should set provider input', () => {
+    fixture.componentRef.setInput('provider', mockProvider);
+    fixture.detectChanges();
+
+    expect(component.provider()).toEqual(mockProvider);
+  });
+
+  it('should handle undefined type input', () => {
+    fixture.componentRef.setInput('type', undefined);
+    fixture.detectChanges();
+
+    expect(component.type()).toBeUndefined();
+  });
+
+  it('should handle null provider input', () => {
+    fixture.componentRef.setInput('provider', null);
+    fixture.detectChanges();
+
+    expect(component.provider()).toBeNull();
+  });
+
+  it('should render type in template', () => {
+    const mockType = 'Preprint';
+    fixture.componentRef.setInput('type', mockType);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const typeElement = compiled.querySelector('[data-test-display-registry-type]');
+    expect(typeElement).toBeTruthy();
+    expect(typeElement.textContent.trim()).toBe(mockType);
+  });
+
+  it('should render provider name in template', () => {
+    fixture.componentRef.setInput('provider', mockProvider);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const providerElement = compiled.querySelector('[data-test-display-registry-provider]');
+    expect(providerElement).toBeTruthy();
+    expect(providerElement.textContent.trim()).toBe(mockProvider.name);
+  });
+
+  it('should display empty string when type is empty', () => {
+    fixture.componentRef.setInput('type', '');
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const typeElement = compiled.querySelector('[data-test-display-registry-type]');
+    expect(typeElement.textContent.trim()).toBe('');
+  });
+
+  it('should display empty string when provider is null', () => {
+    fixture.componentRef.setInput('provider', null);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const providerElement = compiled.querySelector('[data-test-display-registry-provider]');
+    expect(providerElement.textContent.trim()).toBe('');
+  });
+
+  it('should display both type and provider when both are set', () => {
+    const mockType = 'Registered Report';
+    fixture.componentRef.setInput('type', mockType);
+    fixture.componentRef.setInput('provider', mockProvider);
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const typeElement = compiled.querySelector('[data-test-display-registry-type]');
+    const providerElement = compiled.querySelector('[data-test-display-registry-provider]');
+
+    expect(typeElement.textContent.trim()).toBe(mockType);
+    expect(providerElement.textContent.trim()).toBe(mockProvider.name);
+  });
+
+  it('should display translated labels', () => {
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const headings = compiled.querySelectorAll('h2');
+    expect(headings.length).toBe(2);
+  });
+});

src/app/features/metadata/components/metadata-registry-info/metadata-registry-info.component.ts

@@ -0,0 +1,19 @@
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { Card } from 'primeng/card';
+
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { RegistryProviderDetails } from '@osf/shared/models/provider/registry-provider.model';
+
+@Component({
+  selector: 'osf-metadata-registry-info',
+  imports: [Card, TranslatePipe],
+  templateUrl: './metadata-registry-info.component.html',
+  styleUrl: './metadata-registry-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MetadataRegistryInfoComponent {
+  type = input<string | undefined>('');
+  provider = input<RegistryProviderDetails | null>();
+}

src/app/features/metadata/mappers/metadata.mapper.ts

@@ -25,6 +25,7 @@ export class MetadataMapper {
       provider: response.embeds?.provider?.data.id,
       public: response.attributes.public,
       currentUserPermissions: response.attributes.current_user_permissions,
+      registrationSupplement: response.attributes.registration_supplement,
     };
   }
 

src/app/features/metadata/metadata.component.html

@@ -33,6 +33,10 @@
           [readonly]="!hasWriteAccess()"
         />
 
+        @if (isRegistrationType()) {
+          <osf-metadata-registry-info [type]="metadata()?.registrationSupplement" [provider]="registryProvider()" />
+        }
+
         <osf-metadata-date-info [dateCreated]="metadata()?.dateCreated" [dateModified]="metadata()?.dateModified" />
 
         <osf-metadata-contributors

src/app/features/metadata/metadata.component.spec.ts

@@ -24,6 +24,7 @@ import { ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { ToastService } from '@osf/shared/services/toast.service';
+import { RegistrationProviderSelectors } from '@osf/shared/stores/registration-provider';
 
 import { MetadataComponent } from './metadata.component';
 
@@ -106,6 +107,7 @@ describe('MetadataComponent', () => {
             { selector: MetadataSelectors.getSubmitting, value: false },
             { selector: MetadataSelectors.getCedarRecords, value: [] },
             { selector: MetadataSelectors.getCedarTemplates, value: null },
+            { selector: RegistrationProviderSelectors.getBrandedProvider, value: null },
           ],
         }),
       ],

src/app/features/metadata/metadata.component.ts

@@ -37,6 +37,7 @@ import {
   InstitutionsSelectors,
   UpdateResourceInstitutions,
 } from '@osf/shared/stores/institutions';
+import { RegistrationProviderSelectors } from '@osf/shared/stores/registration-provider';
 import {
   FetchChildrenSubjects,
   FetchSelectedSubjects,
@@ -48,6 +49,7 @@ import { MetadataTabsModel } from '@shared/models/metadata-tabs.model';
 import { SubjectModel } from '@shared/models/subject/subject.model';
 
 import { MetadataCollectionsComponent } from './components/metadata-collections/metadata-collections.component';
+import { MetadataRegistryInfoComponent } from './components/metadata-registry-info/metadata-registry-info.component';
 import { EditTitleDialogComponent } from './dialogs/edit-title-dialog/edit-title-dialog.component';
 import {
   MetadataAffiliatedInstitutionsComponent,
@@ -112,6 +114,7 @@ import {
     MetadataTitleComponent,
     MetadataRegistrationDoiComponent,
     MetadataCollectionsComponent,
+    MetadataRegistryInfoComponent,
   ],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
@@ -150,6 +153,7 @@ export class MetadataComponent implements OnInit {
   affiliatedInstitutions = select(InstitutionsSelectors.getResourceInstitutions);
   areInstitutionsLoading = select(InstitutionsSelectors.areResourceInstitutionsLoading);
   areResourceInstitutionsSubmitting = select(InstitutionsSelectors.areResourceInstitutionsSubmitting);
+  registryProvider = select(RegistrationProviderSelectors.getBrandedProvider);
 
   projectSubmissions = select(CollectionsSelectors.getCurrentProjectSubmissions);
   isProjectSubmissionsLoading = select(CollectionsSelectors.getCurrentProjectSubmissionsLoading);

src/app/features/metadata/models/metadata-json-api.model.ts

@@ -21,6 +21,7 @@ export interface MetadataAttributesJsonApi {
   category?: string;
   node_license?: LicenseRecordJsonApi;
   public?: boolean;
+  registration_supplement?: string;
   current_user_permissions: UserPermissions[];
 }
 

src/app/features/metadata/models/metadata.model.ts

@@ -24,6 +24,7 @@ export interface MetadataModel {
   };
   public?: boolean;
   currentUserPermissions: UserPermissions[];
+  registrationSupplement?: string;
 }
 
 export interface CustomItemMetadataRecord {

src/app/features/registry/components/registry-overview-metadata/registry-overview-metadata.component.html

@@ -42,6 +42,11 @@ <h3>{{ 'registry.overview.metadata.type' | translate }}</h3>
       <p>{{ resource.registrationSupplement }}</p>
     </div>
 
+    <div class="flex flex-column gap-2">
+      <h3>{{ 'registry.overview.metadata.registry' | translate }}</h3>
+      <p>{{ registryProvider()?.name }}</p>
+    </div>
+
     @if (resource.associatedProjectId) {
       <div class="flex flex-column gap-2">
         <h3>{{ 'registry.overview.metadata.associatedProject' | translate }}</h3>

src/app/features/registry/components/registry-overview-metadata/registry-overview-metadata.component.spec.ts

@@ -17,6 +17,7 @@ import { SubjectsListComponent } from '@osf/shared/components/subjects-list/subj
 import { TagsListComponent } from '@osf/shared/components/tags-list/tags-list.component';
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { ContributorsSelectors, LoadMoreBibliographicContributors } from '@osf/shared/stores/contributors';
+import { RegistrationProviderSelectors } from '@osf/shared/stores/registration-provider';
 import { FetchSelectedSubjects, SubjectsSelectors } from '@osf/shared/stores/subjects';
 
 import {
@@ -79,6 +80,7 @@ describe('RegistryOverviewMetadataComponent', () => {
             { selector: RegistrySelectors.isIdentifiersLoading, value: false },
             { selector: RegistrySelectors.getInstitutions, value: [] },
             { selector: RegistrySelectors.isInstitutionsLoading, value: false },
+            { selector: RegistrationProviderSelectors.getBrandedProvider, value: null },
             { selector: SubjectsSelectors.getSubjects, value: [] },
             { selector: SubjectsSelectors.getSubjectsLoading, value: false },
             { selector: ContributorsSelectors.getBibliographicContributors, value: [] },

src/app/features/registry/components/registry-overview-metadata/registry-overview-metadata.component.ts

@@ -19,6 +19,7 @@ import { TagsListComponent } from '@osf/shared/components/tags-list/tags-list.co
 import { TruncatedTextComponent } from '@osf/shared/components/truncated-text/truncated-text.component';
 import { CurrentResourceType, ResourceType } from '@osf/shared/enums/resource-type.enum';
 import { ContributorsSelectors, LoadMoreBibliographicContributors } from '@osf/shared/stores/contributors';
+import { RegistrationProviderSelectors } from '@osf/shared/stores/registration-provider';
 import { FetchSelectedSubjects, SubjectsSelectors } from '@osf/shared/stores/subjects';
 
 import {
@@ -54,6 +55,7 @@ export class RegistryOverviewMetadataComponent {
   private readonly router = inject(Router);
 
   readonly registry = select(RegistrySelectors.getRegistry);
+  readonly registryProvider = select(RegistrationProviderSelectors.getBrandedProvider);
   readonly isAnonymous = select(RegistrySelectors.isRegistryAnonymous);
 
   canEdit = select(RegistrySelectors.hasWriteAccess);

src/assets/i18n/en.json

@@ -2644,6 +2644,7 @@
       },
       "metadata": {
         "type": "Registration Type",
+        "registry": "Registry",
         "registeredDate": "Date registered",
         "doi": "Registration DOI",
         "associatedProject": "Associated project"