Merge pull request #974 from nsemets/fix/ENG-10348

[ENG-10348] Funder information, Language, Subject and Resource type should be included on the registration and project overview page metadata panes

Author: nsemets

package-lock.json

@@ -8,7 +8,7 @@ import { Select } from 'primeng/select';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
-import { languageCodes } from '@osf/shared/constants/language.const';
+import { LANGUAGE_CODES } from '@osf/shared/constants/language.const';
 import { resourceTypes } from '@osf/shared/constants/resource-types.const';
 
 import { OsfFileCustomMetadata, PatchFileMetadata } from '../../models';
@@ -22,7 +22,7 @@ import { OsfFileCustomMetadata, PatchFileMetadata } from '../../models';
 })
 export class EditFileMetadataDialogComponent {
   readonly resourceTypes = resourceTypes;
-  readonly languages = languageCodes;
+  readonly languages = LANGUAGE_CODES;
 
   private readonly dialogRef = inject(DynamicDialogRef);
   readonly config = inject(DynamicDialogConfig);

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

@@ -3,7 +3,7 @@ import { MockProvider } from 'ng-mocks';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 
-import { languageCodes } from '@osf/shared/constants/language.const';
+import { LANGUAGE_CODES } from '@osf/shared/constants/language.const';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 
 import { provideOSFCore } from '@testing/osf.testing.provider';
@@ -64,7 +64,7 @@ describe('FileMetadataComponent', () => {
     expect(component.fileMetadata).toBeDefined();
     expect(component.isLoading).toBeDefined();
     expect(component.hasWriteAccess).toBeDefined();
-    expect(component.languageCodes).toBe(languageCodes);
+    expect(component.languageCodes).toBe(LANGUAGE_CODES);
     expect(component.metadataFields).toBe(FileMetadataFields);
   });
 

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

@@ -12,7 +12,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
-import { languageCodes } from '@osf/shared/constants/language.const';
+import { LANGUAGE_CODES } from '@osf/shared/constants/language.const';
 import { CustomDialogService } from '@osf/shared/services/custom-dialog.service';
 import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-helper.service';
 import { LanguageCodeModel } from '@shared/models/language-code.model';
@@ -44,7 +44,7 @@ export class FileMetadataComponent {
 
   hasViewOnly = computed(() => this.viewOnlyService.hasViewOnlyParam(this.router));
 
-  readonly languageCodes = languageCodes;
+  readonly languageCodes = LANGUAGE_CODES;
 
   readonly fileGuid = toSignal(this.route.params.pipe(map((params) => params['fileGuid'])));
 

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

@@ -26,12 +26,12 @@ <h2>
       <div class="flex-column flex gap-2">
         <p class="inline-block font-bold" data-test-display-resource-type-general>
           <span> {{ 'project.overview.metadata.resourceType' | translate }}: </span>
-          <span>{{ getResourceTypeName(customItemMetadata()?.resourceTypeGeneral!) }}</span>
+          <span>{{ customItemMetadata()?.resourceTypeGeneral | resourceTypeGeneralLabel }}</span>
         </p>
 
         <p class="inline-block font-bold" data-test-display-resource-language>
           <span> {{ 'project.overview.metadata.resourceLanguage' | translate }}: </span>
-          <span>{{ getLanguageName(customItemMetadata()?.language || '') }}</span>
+          <span>{{ customItemMetadata()?.language | languageLabel }}</span>
         </p>
       </div>
     } @else {

src/app/features/metadata/components/metadata-resource-information/metadata-resource-information.component.html

@@ -5,14 +5,13 @@ import { Card } from 'primeng/card';
 
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
-import { RESOURCE_TYPE_OPTIONS } from '@osf/features/metadata/constants';
 import { CustomItemMetadataRecord } from '@osf/features/metadata/models';
-import { languageCodes } from '@osf/shared/constants/language.const';
-import { LanguageCodeModel } from '@shared/models/language-code.model';
+import { LanguageLabelPipe } from '@osf/shared/pipes/language-label.pipe';
+import { ResourceTypeGeneralLabelPipe } from '@osf/shared/pipes/resource-type-general-label.pipe';
 
 @Component({
   selector: 'osf-metadata-resource-information',
-  imports: [Button, Card, TranslatePipe],
+  imports: [Button, Card, TranslatePipe, LanguageLabelPipe, ResourceTypeGeneralLabelPipe],
   templateUrl: './metadata-resource-information.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -22,17 +21,4 @@ export class MetadataResourceInformationComponent {
   customItemMetadata = input.required<CustomItemMetadataRecord | null>();
   readonly = input<boolean>(false);
   showResourceInfo = output<void>();
-
-  readonly languageCodes = languageCodes;
-  readonly resourceTypes = RESOURCE_TYPE_OPTIONS;
-
-  getLanguageName(languageCode: string): string {
-    const language = this.languageCodes.find((lang: LanguageCodeModel) => lang.code === languageCode);
-    return language ? language.name : languageCode;
-  }
-
-  getResourceTypeName(resourceType: string): string {
-    const resource = this.resourceTypes.find((res) => res.value === resourceType);
-    return resource ? resource.label : resourceType;
-  }
 }

src/app/features/metadata/components/metadata-resource-information/metadata-resource-information.component.ts

@@ -1,2 +1 @@
 export * from './cedar-config.const';
-export * from './resource-type-options.const';

src/app/features/metadata/constants/index.ts

@@ -6,14 +6,14 @@
 
     <p-select
       id="resourceType"
+      class="w-full"
+      appendTo="body"
+      data-test-select-resource-type
       [formControl]="resourceForm.controls.resourceType"
       [options]="resourceTypeOptions"
       optionLabel="label"
       optionValue="value"
       [placeholder]="'common.buttons.select' | translate"
-      appendTo="body"
-      class="w-full"
-      data-test-select-resource-type
     />
   </div>
 
@@ -24,22 +24,19 @@
 
     <p-select
       id="resourceLanguage"
+      class="w-full"
+      data-test-select-resource-language
+      appendTo="body"
       [filter]="true"
       filterBy="label"
       [formControl]="resourceForm.controls.resourceLanguage"
       [options]="languageOptions"
-      optionLabel="label"
-      optionValue="value"
+      optionLabel="name"
+      optionValue="code"
       [placeholder]="'common.buttons.select' | translate"
-      appendTo="body"
       [virtualScroll]="true"
       [virtualScrollItemSize]="35"
-      class="w-full"
-      data-test-select-resource-language
     >
-      <ng-template #item let-option>
-        <span>{{ option.label }}</span>
-      </ng-template>
     </p-select>
   </div>
 

src/app/features/metadata/dialogs/resource-information-dialog/resource-information-dialog.component.html

@@ -12,6 +12,8 @@ import { ResourceInformationDialogComponent } from './resource-information-dialo
 describe('ResourceInformationDialogComponent', () => {
   let component: ResourceInformationDialogComponent;
   let fixture: ComponentFixture<ResourceInformationDialogComponent>;
+  let dialogRef: DynamicDialogRef;
+  let config: DynamicDialogConfig;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -21,83 +23,58 @@ describe('ResourceInformationDialogComponent', () => {
 
     fixture = TestBed.createComponent(ResourceInformationDialogComponent);
     component = fixture.componentInstance;
+    dialogRef = TestBed.inject(DynamicDialogRef);
+    config = TestBed.inject(DynamicDialogConfig);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have resource type options', () => {
-    expect(component.resourceTypeOptions).toBeDefined();
-    expect(component.resourceTypeOptions.length).toBeGreaterThan(0);
-  });
-
-  it('should have language options', () => {
-    expect(component.languageOptions).toBeDefined();
-    expect(component.languageOptions.length).toBeGreaterThan(0);
-  });
+  it('should patch form values on init when metadata is provided', () => {
+    config.data = {
+      customItemMetadata: {
+        resourceTypeGeneral: 'Dataset',
+        language: 'eng',
+      },
+    };
 
-  it('should not save when form is invalid', () => {
-    const dialogRef = TestBed.inject(DynamicDialogRef);
-    const closeSpy = vi.spyOn(dialogRef, 'close');
+    component.ngOnInit();
 
-    component.resourceForm.patchValue({
-      resourceType: 'dataset',
-      resourceLanguage: 'en',
+    expect(component.resourceForm.getRawValue()).toEqual({
+      resourceType: 'Dataset',
+      resourceLanguage: 'eng',
     });
+  });
 
-    component.save();
+  it('should keep default empty values on init when metadata is not provided', () => {
+    config.data = {};
 
-    expect(closeSpy).toHaveBeenCalledWith({
-      resourceTypeGeneral: 'dataset',
-      language: 'en',
+    component.ngOnInit();
+
+    expect(component.resourceForm.getRawValue()).toEqual({
+      resourceType: '',
+      resourceLanguage: '',
     });
   });
 
-  it('should not save when resource type is missing', () => {
-    const dialogRef = TestBed.inject(DynamicDialogRef);
-    const closeSpy = vi.spyOn(dialogRef, 'close');
-
-    component.resourceForm.patchValue({
-      resourceType: '',
-      resourceLanguage: 'en',
+  it('should close dialog with mapped payload on save when form is valid', () => {
+    component.resourceForm.setValue({
+      resourceType: 'JournalArticle',
+      resourceLanguage: 'deu',
     });
 
     component.save();
 
-    expect(closeSpy).toHaveBeenCalledWith({
-      resourceTypeGeneral: '',
-      language: 'en',
+    expect(dialogRef.close).toHaveBeenCalledWith({
+      resourceTypeGeneral: 'JournalArticle',
+      language: 'deu',
     });
   });
 
-  it('should cancel dialog', () => {
-    const dialogRef = TestBed.inject(DynamicDialogRef);
-    const closeSpy = vi.spyOn(dialogRef, 'close');
-
+  it('should close dialog without payload on cancel', () => {
     component.cancel();
 
-    expect(closeSpy).toHaveBeenCalled();
-  });
-
-  it('should validate required fields', () => {
-    const resourceTypeControl = component.resourceForm.get('resourceType');
-
-    expect(resourceTypeControl?.hasError('required')).toBe(false);
-
-    resourceTypeControl?.setValue('dataset');
-
-    expect(resourceTypeControl?.hasError('required')).toBe(false);
-  });
-
-  it('should handle form validation state', () => {
-    expect(component.resourceForm.valid).toBe(true);
-
-    component.resourceForm.patchValue({
-      resourceType: 'dataset',
-      resourceLanguage: 'en',
-    });
-
-    expect(component.resourceForm.valid).toBe(true);
+    expect(dialogRef.close).toHaveBeenCalledWith();
   });
 });

src/app/features/metadata/dialogs/resource-information-dialog/resource-information-dialog.component.spec.ts

@@ -7,11 +7,10 @@ import { Select } from 'primeng/select';
 import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
-import { languageCodes } from '@osf/shared/constants/language.const';
-import { LanguageCodeModel } from '@shared/models/language-code.model';
+import { LANGUAGE_CODES } from '@osf/shared/constants/language.const';
+import { RESOURCE_TYPE_GENERAL_OPTIONS } from '@osf/shared/constants/resource-type-general-options.const';
 
-import { RESOURCE_TYPE_OPTIONS } from '../../constants';
-import { CustomItemMetadataRecord, ResourceInformationForm } from '../../models';
+import { ResourceInformationForm } from '../../models';
 
 @Component({
   selector: 'osf-resource-information-dialog',
@@ -28,26 +27,12 @@ export class ResourceInformationDialogComponent implements OnInit {
     resourceLanguage: new FormControl(''),
   });
 
-  resourceTypeOptions = RESOURCE_TYPE_OPTIONS;
-  languageOptions = languageCodes.map((lang: LanguageCodeModel) => ({
-    label: lang.name,
-    value: lang.code,
-  }));
-
-  get customItemMetadata(): CustomItemMetadataRecord | null {
-    return this.config.data?.customItemMetadata || null;
-  }
-
-  get isEditMode(): boolean {
-    return !!this.customItemMetadata;
-  }
-
-  getResourceTypeName(resourceType: string): string {
-    return Object.fromEntries(RESOURCE_TYPE_OPTIONS.map((item) => [item.value, item.label]))[resourceType];
-  }
+  resourceTypeOptions = RESOURCE_TYPE_GENERAL_OPTIONS;
+  languageOptions = LANGUAGE_CODES;
 
   ngOnInit(): void {
-    const metadata = this.customItemMetadata;
+    const metadata = this.config.data?.customItemMetadata;
+
     if (metadata) {
       this.resourceForm.patchValue({
         resourceType: metadata.resourceTypeGeneral || '',
@@ -57,13 +42,11 @@ export class ResourceInformationDialogComponent implements OnInit {
   }
 
   save(): void {
-    if (this.resourceForm.valid) {
-      const formValue = this.resourceForm.getRawValue();
-      this.dialogRef.close({
-        resourceTypeGeneral: formValue.resourceType,
-        language: formValue.resourceLanguage,
-      });
-    }
+    const formValue = this.resourceForm.getRawValue();
+    this.dialogRef.close({
+      resourceTypeGeneral: formValue.resourceType,
+      language: formValue.resourceLanguage,
+    });
   }
 
   cancel(): void {