Merged in task/dspace-cris-2025_02_x/DSC-2716 (pull request DSpace#4232)

[DSC-2716] show markdown info panel in cms metadata edit

Approved-by: Francesco Molinaro

Author: Andrea Barbasso

package-lock.json

@@ -1,6 +1,8 @@
 <div class="container">
   <h2>{{'admin.edit-user-agreement.header' | translate}}</h2>
-  <ds-alert [type]="'alert-info'" [dismissible]="true" [content]="'admin.edit-user-agreement.markdown' | translate"></ds-alert>
+  @if (showMarkdownInfo) {
+    <ds-alert [type]="'alert-info'" [dismissible]="true" [content]="'admin.edit-user-agreement.markdown' | translate"></ds-alert>
+  }
   @for (userAgreementText of (userAgreementTexts | keyvalue); track userAgreementText) {
     <div class="form-group">
       <label>{{userAgreementText.value.languageLabel}}</label>

src/app/admin/admin-edit-user-agreement/admin-edit-user-agreement.component.html

@@ -22,6 +22,7 @@ import {
   of,
 } from 'rxjs';
 
+import { APP_CONFIG } from '../../../config/app-config.interface';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
 import { SiteDataService } from '../../core/data/site-data.service';
 import { Site } from '../../core/shared/site.model';
@@ -39,6 +40,7 @@ describe('AdminEditUserAgreementComponent', () => {
   let notificationService: NotificationsServiceStub;
   let siteService: any;
   let scriptDataService: any;
+  let mockAppConfig: any;
 
   const site: Site = Object.assign(new Site(), {
     metadata: {
@@ -62,6 +64,11 @@ describe('AdminEditUserAgreementComponent', () => {
         return of(site);
       },
     };
+    mockAppConfig = {
+      markdown: {
+        showInfoOnCMSMetadataEditPages: true,
+      },
+    };
 
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule,
@@ -74,7 +81,8 @@ describe('AdminEditUserAgreementComponent', () => {
       providers: [AdminEditUserAgreementComponent,
         { provide: NotificationsService, useValue: notificationService },
         { provide: SiteDataService, useValue: siteService },
-        { provide: ScriptDataService, useValue: scriptDataService }],
+        { provide: ScriptDataService, useValue: scriptDataService },
+        { provide: APP_CONFIG, useValue: mockAppConfig }],
       schemas: [NO_ERRORS_SCHEMA],
     }).overrideComponent(AdminEditUserAgreementComponent, { remove: { imports: [AlertComponent] } }).compileComponents();
   }));
@@ -94,4 +102,25 @@ describe('AdminEditUserAgreementComponent', () => {
     expect(component.userAgreementTexts.get('de').text).toEqual('Dies ist der Text der Endbenutzervereinbarung für diesen Test');
   }));
 
+  describe('showMarkdownInfo property', () => {
+    it('should initialize showMarkdownInfo from appConfig.markdown.showInfoOnCMSMetadataEditPages', () => {
+      expect(component.showMarkdownInfo).toBe(true);
+    });
+
+    it('should show markdown info alert box when showMarkdownInfo is true', () => {
+      component.showMarkdownInfo = true;
+      fixture.detectChanges();
+      const alertElement = fixture.debugElement.query((el) => el.name === 'ds-alert');
+      expect(alertElement).toBeTruthy();
+    });
+
+    it('should hide markdown info alert box when showMarkdownInfo is false', () => {
+      mockAppConfig.markdown.showInfoOnCMSMetadataEditPages = false;
+      component.showMarkdownInfo = false;
+      fixture.detectChanges();
+      const alertElement = fixture.debugElement.query((el) => el.name === 'ds-alert');
+      expect(alertElement).toBeFalsy();
+    });
+  });
+
 });

src/app/admin/admin-edit-user-agreement/admin-edit-user-agreement.component.spec.ts

@@ -1,6 +1,7 @@
 import { KeyValuePipe } from '@angular/common';
 import {
   Component,
+  Inject,
   OnDestroy,
   OnInit,
 } from '@angular/core';
@@ -13,6 +14,10 @@ import {
 import { Operation } from 'fast-json-patch';
 import { Subscription } from 'rxjs';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { ScriptDataService } from '../../core/data/processes/script-data.service';
 import { SiteDataService } from '../../core/data/site-data.service';
@@ -45,12 +50,18 @@ export class AdminEditUserAgreementComponent implements OnInit, OnDestroy {
 
   USER_AGREEMENT_METADATA = 'dspace.agreements.end-user';
 
+  /**
+   * show markdown info alert box
+   */
+  showMarkdownInfo = this.appConfig.markdown.showInfoOnCMSMetadataEditPages;
+
   constructor(private siteService: SiteDataService,
               private modalService: NgbModal,
               private translateService: TranslateService,
               private notificationsService: NotificationsService,
-              private scriptDataService: ScriptDataService ) {
-
+              private scriptDataService: ScriptDataService,
+              @Inject(APP_CONFIG) protected appConfig: AppConfig,
+  ) {
   }
 
   ngOnInit(): void {

src/app/admin/admin-edit-user-agreement/admin-edit-user-agreement.component.ts

@@ -1,6 +1,9 @@
 @if ((editMode | async)) {
   <div class="container">
     <h2 class=" mb-5">{{'admin.edit-cms-metadata.title' | translate}} '{{selectedMetadata}}'</h2>
+    @if (showMarkdownInfo) {
+      <ds-alert [type]="'alert-info'" [dismissible]="true" [content]="'admin.edit-cms-metadata.markdown' | translate"></ds-alert>
+    }
     <div class="row">
       <div class="col-md">
         @for (lang of languageList; track lang) {

src/app/admin/edit-cms-metadata/edit-cms-metadata.component.html

@@ -1,20 +1,22 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 import {
   TranslateLoader,
   TranslateModule,
 } from '@ngx-translate/core';
 import { of } from 'rxjs';
 
+import { APP_CONFIG } from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment.test';
 import { SiteDataService } from '../../core/data/site-data.service';
 import { Site } from '../../core/shared/site.model';
+import { AlertComponent } from '../../shared/alert/alert.component';
 import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
@@ -33,6 +35,12 @@ describe('EditCmsMetadataComponent', () => {
     patch: jasmine.createSpy('patch'),
   });
 
+  let mockAppConfig = {
+    markdown: {
+      showInfoOnCMSMetadataEditPages: true,
+    },
+  };
+
   const metadataValueMap = new Map([
     ['en', ''],
     ['de', ''],
@@ -45,6 +53,11 @@ describe('EditCmsMetadataComponent', () => {
     ['el', ''],
   ]);
   beforeEach(waitForAsync(() => {
+    mockAppConfig = {
+      markdown: {
+        showInfoOnCMSMetadataEditPages: true,
+      },
+    };
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
@@ -55,12 +68,14 @@ describe('EditCmsMetadataComponent', () => {
           },
         }),
         EditCmsMetadataComponent,
+        AlertComponent,
       ],
       providers: [
+        provideNoopAnimations(),
         { provide: NotificationsService, useValue: NotificationsServiceStub },
         { provide: SiteDataService, useValue: siteServiceStub },
+        { provide: APP_CONFIG, useValue: mockAppConfig },
       ],
-      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
@@ -157,4 +172,30 @@ describe('EditCmsMetadataComponent', () => {
 
     });
   });
+
+  describe('showMarkdownInfo property', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should initialize showMarkdownInfo from appConfig.markdown.showInfoOnCMSMetadataEditPages', () => {
+      expect(component.showMarkdownInfo).toBe(true);
+    });
+
+    it('should show markdown info alert box when showMarkdownInfo is true', () => {
+      component.editMode.next(true);
+      component.showMarkdownInfo = true;
+      fixture.detectChanges();
+      const alertElement = fixture.debugElement.query(By.directive(AlertComponent));
+      expect(alertElement).toBeTruthy();
+    });
+
+    it('should hide markdown info alert box when showMarkdownInfo is false', () => {
+      component.editMode.next(true);
+      component.showMarkdownInfo = false;
+      fixture.detectChanges();
+      const alertElement = fixture.debugElement.query(By.directive(AlertComponent));
+      expect(alertElement).toBeFalsy();
+    });
+  });
 });

src/app/admin/edit-cms-metadata/edit-cms-metadata.component.spec.ts

@@ -4,6 +4,7 @@ import {
 } from '@angular/common';
 import {
   Component,
+  Inject,
   OnInit,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -15,10 +16,15 @@ import { Operation } from 'fast-json-patch';
 import { BehaviorSubject } from 'rxjs';
 import { BtnDisabledDirective } from 'src/app/shared/btn-disabled.directive';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../config/app-config.interface';
 import { environment } from '../../../environments/environment';
 import { SiteDataService } from '../../core/data/site-data.service';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { Site } from '../../core/shared/site.model';
+import { AlertComponent } from '../../shared/alert/alert.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 
 /**
@@ -29,6 +35,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
   templateUrl: './edit-cms-metadata.component.html',
   styleUrls: ['./edit-cms-metadata.component.scss'],
   imports: [
+    AlertComponent,
     AsyncPipe,
     BtnDisabledDirective,
     FormsModule,
@@ -65,11 +72,16 @@ export class EditCmsMetadataComponent implements OnInit {
    * list of the metadata to be edited by the user
    */
   metadataList: string[] = [];
+  /**
+   * show markdown info alert box
+   */
+  showMarkdownInfo = this.appConfig.markdown.showInfoOnCMSMetadataEditPages;
 
   constructor(
     private siteService: SiteDataService,
     private notificationsService: NotificationsService,
     private translateService: TranslateService,
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
   }
 

src/app/admin/edit-cms-metadata/edit-cms-metadata.component.ts

@@ -317,7 +317,7 @@ describe('SearchComponent', () => {
   });
 
   it('should set the "configuration" and "fixedFilterQuery" parameters in the route service', () => {
-    spyOn(routeServiceStub, 'setParameter');
+    routeServiceStub.setParameter.calls.reset();
     comp.configuration = 'test-configuration';
     comp.fixedFilterQuery = 'test-fixed-filter-query';
 

src/app/shared/search/search.component.spec.ts

@@ -93,6 +93,8 @@
 
   "admin.edit-cms-metadata.back-button": "Back",
 
+  "admin.edit-cms-metadata.markdown": "CMS Metadata values support <a href=\"https://www.markdownguide.org/basic-syntax/\" target=\"_blank\">Markdown</a> language.",
+
   "admin.edit-cms-metadata.success": "Metadata successfully updated",
 
   "admin.edit-cms-metadata.error": "An error occurred while updating the metadata",

src/assets/i18n/en.json5

@@ -152,6 +152,9 @@
   // "admin.edit-cms-metadata.back-button": "Back",
   "admin.edit-cms-metadata.back-button": "Indietro",
 
+  // "admin.edit-cms-metadata.markdown": "CMS Metadata values support <a href=\"https://www.markdownguide.org/basic-syntax/\" target=\"_blank\">Markdown</a> language.",
+  "admin.edit-cms-metadata.markdown": "I valori dei metadati CMS supportano il formato <a href=\"https://www.markdownguide.org/basic-syntax/\" target=\"_blank\">Markdown</a>.",
+
   // "admin.edit-cms-metadata.success": "Metadata successfully updated",
   "admin.edit-cms-metadata.success": "Metadati aggiornati correttamente",