feat(submission): add configurable metadatafield visibility in external import preview #5151

Author: MMilosz

config/config.example.yml

@@ -253,6 +253,16 @@ submission:
         # The configured icon will be displayed next to the authority value in submission and on item page or search results.
         - source: orcid
         - path: assets/images/orcid.logo.icon.svg
+  # Settings for import item from an external source
+  importExternal:
+    # Toggle visibility of metadata field names in the external import preview modal.
+    # Possible values:
+    # - 'disable': show only the translated label
+    # - 'tooltip': (default) also show an info icon with the field name as tooltip
+    # - 'labeled': also show the field name in parentheses
+    # - 'full': show both the 'labeled' and 'tooltip' modes
+    viewMode: default
+
 #  Fallback language in which the UI will be rendered if the user's browser language is not an active language
 fallbackLanguage: en
 

src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html

@@ -18,8 +18,15 @@ <h2>{{'submission.import-external.preview.title.' + labelPrefix | translate}}</h
       </div>
       @for (metadata of metadataList; track metadata) {
         <div class="row">
-          <p class="col-md-12">
-            <strong class="">{{'item.preview.' + metadata.key | translate}}</strong><br>
+          <p id="{{metadata.key}}" class="col-md-12">
+            <strong class="">{{'item.preview.' + metadata.key | translate}}</strong>
+            @if ([MetadataFieldViewMode.Labeled, MetadataFieldViewMode.Full].includes(viewMode)) {
+              <span class="text-muted ps-2">({{metadata.key}})</span>
+            }
+            @if ([MetadataFieldViewMode.Tooltip, MetadataFieldViewMode.Full].includes(viewMode)) {
+              <i class="fas fa-info-circle text-primary ps-2" [ngbTooltip]="metadata.key"></i>
+            }
+            <br>
             @for (metadatum of metadata.values; track metadatum) {
               <span>{{metadatum.value}}</span><br>
             }

src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.spec.ts

@@ -8,7 +8,10 @@ import {
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import { APP_CONFIG } from '@dspace/config/app-config.interface';
+import { ImportExternalMetadataViewMode } from '@dspace/config/import-external-metadata-view.mode';
 import { NotificationsService } from '@dspace/core/notification-system/notifications.service';
 import { ExternalSourceEntry } from '@dspace/core/shared/external-source-entry.model';
 import { Metadata } from '@dspace/core/shared/metadata.utils';
@@ -25,6 +28,7 @@ import { getTestScheduler } from 'jasmine-marbles';
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
+import { environment } from '../../../../environments/environment.test';
 import { CollectionListEntry } from '../../../shared/collection-dropdown/collection-dropdown.component';
 import { SubmissionService } from '../../submission.service';
 import { SubmissionImportExternalCollectionComponent } from '../import-external-collection/submission-import-external-collection.component';
@@ -68,6 +72,7 @@ describe('SubmissionImportExternalPreviewComponent test suite', () => {
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
         { provide: NgbModal, useValue: ngbModal },
         { provide: NgbActiveModal, useValue: ngbActiveModal },
+        { provide: APP_CONFIG, useValue: environment },
         SubmissionImportExternalPreviewComponent,
       ],
       schemas: [NO_ERRORS_SCHEMA],
@@ -118,6 +123,7 @@ describe('SubmissionImportExternalPreviewComponent test suite', () => {
       fixture.detectChanges();
 
       expect(comp.metadataList).toEqual(expected);
+      expect(comp.viewMode).toEqual(environment.submission.importExternal.viewMode);
     });
 
     it('Should close the modal calling \'activeModal.dismiss\'', () => {
@@ -165,6 +171,61 @@ describe('SubmissionImportExternalPreviewComponent test suite', () => {
       done();
     });
   });
+
+  describe('Metadatafield View Modes UI rendering', () => {
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SubmissionImportExternalPreviewComponent);
+      comp = fixture.componentInstance;
+      comp.externalSourceEntry = externalEntry;
+      fixture.detectChanges();
+    });
+
+    it('should display tooltip only in Tooltip mode', () => {
+      comp.viewMode = ImportExternalMetadataViewMode.Tooltip;
+      fixture.detectChanges();
+
+      const tooltipIcon = fixture.debugElement.query(By.css('.fa-info-circle'));
+      const labelText = fixture.debugElement.query(By.css('span.text-muted'));
+
+      expect(tooltipIcon).toBeTruthy();
+      expect(labelText).toBeNull();
+    });
+
+    it('should display label only in Labeled mode', () => {
+      comp.viewMode = ImportExternalMetadataViewMode.Labeled;
+      fixture.detectChanges();
+
+      const tooltipIcon = fixture.debugElement.query(By.css('.fa-info-circle'));
+      const labelText = fixture.debugElement.query(By.css('span.text-muted'));
+
+      expect(tooltipIcon).toBeNull();
+      expect(labelText).toBeTruthy();
+      expect(labelText.nativeElement.textContent).toContain('(dc.identifier.uri)');
+    });
+
+    it('should display both in Full mode', () => {
+      comp.viewMode = ImportExternalMetadataViewMode.Full;
+      fixture.detectChanges();
+
+      const tooltipIcon = fixture.debugElement.query(By.css('.fa-info-circle'));
+      const labelText = fixture.debugElement.query(By.css('span.text-muted'));
+
+      expect(tooltipIcon).toBeTruthy();
+      expect(labelText).toBeTruthy();
+      expect(labelText.nativeElement.textContent).toContain('(dc.identifier.uri)');
+    });
+
+    it('should display neither in Disable mode', () => {
+      comp.viewMode = ImportExternalMetadataViewMode.Disable;
+      fixture.detectChanges();
+
+      const tooltipIcon = fixture.debugElement.query(By.css('.fa-info-circle'));
+      const labelText = fixture.debugElement.query(By.css('span.text-muted'));
+
+      expect(tooltipIcon).toBeNull();
+      expect(labelText).toBeNull();
+    });
+  });
 });
 
 // declare a test component

src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.ts

@@ -1,10 +1,15 @@
-
 import {
   Component,
+  Inject,
   Input,
   OnInit,
 } from '@angular/core';
 import { Router } from '@angular/router';
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '@dspace/config/app-config.interface';
+import { ImportExternalMetadataViewMode } from '@dspace/config/import-external-metadata-view.mode';
 import { NotificationsService } from '@dspace/core/notification-system/notifications.service';
 import { ExternalSourceEntry } from '@dspace/core/shared/external-source-entry.model';
 import { MetadataValue } from '@dspace/core/shared/metadata.models';
@@ -14,6 +19,7 @@ import {
   NgbActiveModal,
   NgbModal,
   NgbModalRef,
+  NgbTooltipModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { mergeMap } from 'rxjs/operators';
@@ -30,6 +36,7 @@ import { SubmissionImportExternalCollectionComponent } from '../import-external-
   styleUrls: ['./submission-import-external-preview.component.scss'],
   templateUrl: './submission-import-external-preview.component.html',
   imports: [
+    NgbTooltipModule,
     TranslateModule,
   ],
 })
@@ -51,26 +58,40 @@ export class SubmissionImportExternalPreviewComponent implements OnInit {
    */
   modalRef: NgbModalRef;
 
+  /**
+   * The view mode for the metadatafield names
+   */
+  public viewMode: ImportExternalMetadataViewMode;
+
+  /**
+   * The available view modes
+   */
+  public MetadataFieldViewMode = ImportExternalMetadataViewMode;
+
   /**
    * Initialize the component variables.
    * @param {NgbActiveModal} activeModal
    * @param {SubmissionService} submissionService
    * @param {NgbModal} modalService
    * @param {Router} router
    * @param {NotificationsService} notificationService
+   * @param {AppConfig} appConfig
    */
   constructor(
     private activeModal: NgbActiveModal,
     private submissionService: SubmissionService,
     private modalService: NgbModal,
     private router: Router,
     private notificationService: NotificationsService,
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) { }
 
   /**
    * Metadata initialization for HTML display.
    */
   ngOnInit(): void {
+    this.viewMode = this.appConfig.submission.importExternal.viewMode
+                    ?? this.MetadataFieldViewMode.Default;
     this.metadataList = [];
     const metadataKeys = Object.keys(this.externalSourceEntry.metadata);
     metadataKeys.forEach((key) => {

src/config/default-app-config.ts

@@ -1,3 +1,4 @@
+import { ImportExternalMetadataViewMode } from '@dspace/config/import-external-metadata-view.mode';
 import { LayoutConfig } from '@dspace/config/layout-config.interfaces';
 import { SearchResultConfig } from '@dspace/config/search-result-config.interface';
 
@@ -293,6 +294,10 @@ export class DefaultAppConfig implements AppConfig {
       // Icons that should remain visible even when no authority value is present for the metadata field
       iconsVisibleWithNoAuthority: ['fas fa-user'],
     },
+    importExternal: {
+      // Visibility of metadatafield names in preview item from an external source
+      viewMode: ImportExternalMetadataViewMode.Default,
+    },
   };
 
   // Fallback language in which the UI will be rendered if the user's browser language is not an active language

src/config/import-external-metadata-view.mode.ts

@@ -0,0 +1,23 @@
+/**
+ * Represents the view modes for metadatafield names in the external import preview modal.
+ */
+export enum ImportExternalMetadataViewMode {
+  /**
+   * Hide metadatafield names (show only labels).
+   */
+  Disable = 'disable',
+  /**
+   * Show tooltip with field name.
+   */
+  Tooltip = 'tooltip',
+  /**
+   * Show field name in parentheses.
+   */
+  Labeled = 'labeled',
+  /**
+   * Show both labeled and tooltip modes.
+   */
+  Full = 'full',
+
+  Default = Tooltip,
+}

src/config/submission-config.interface.ts

@@ -1,3 +1,5 @@
+import { ImportExternalMetadataViewMode } from '@dspace/config/import-external-metadata-view.mode';
+
 import { Config } from './config.interface';
 
 interface AutosaveConfig extends Config {
@@ -43,4 +45,7 @@ export interface SubmissionConfig extends Config {
   duplicateDetection: DuplicateDetectionConfig;
   typeBind: TypeBindConfig;
   icons: IconsConfig;
+  importExternal: {
+    viewMode: ImportExternalMetadataViewMode;
+  };
 }

src/environments/environment.test.ts

@@ -1,5 +1,6 @@
 // This configuration is only used for unit tests, end-to-end tests use environment.production.ts
 import { AdvancedAttachmentElementType } from '@dspace/config/advanced-attachment-rendering.config';
+import { ImportExternalMetadataViewMode } from '@dspace/config/import-external-metadata-view.mode';
 import { NotificationAnimationsType } from '@dspace/config/notifications-config.interfaces';
 import { RestRequestMethod } from '@dspace/config/rest-request-method';
 import { BuildConfig } from 'src/config/build-config.interface';
@@ -197,6 +198,10 @@ export const environment: BuildConfig = {
         ],
       },
     },
+    importExternal: {
+      // Visibility of metadatafield names in preview item from an external source
+      viewMode: ImportExternalMetadataViewMode.Default,
+    },
   },
 
   // NOTE: will log all redux actions and transfers in console