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

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

Approved-by: Francesco Molinaro

Author: Andrea Barbasso

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

@@ -1,6 +1,6 @@
 <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>
+  <ds-alert *ngIf="showMarkdownInfo" [type]="'alert-info'" [dismissible]="true" [content]="'admin.edit-user-agreement.markdown' | translate"></ds-alert>
   <div *ngFor="let userAgreementText of (userAgreementTexts | keyvalue)" class="form-group">
     <label>{{userAgreementText.value.languageLabel}}</label>
     <textarea class="col-md-12 m-2" [(ngModel)]="userAgreementText.value.text" rows="10"></textarea>

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

@@ -1,16 +1,16 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
-  async,
   ComponentFixture,
   inject,
   TestBed,
+  waitForAsync,
 } from '@angular/core/testing';
 import {
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import {
@@ -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: {
@@ -53,7 +55,7 @@ describe('AdminEditUserAgreementComponent', () => {
     },
   });
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
 
     scriptDataService = {};
     notificationService = new NotificationsServiceStub();
@@ -62,21 +64,38 @@ describe('AdminEditUserAgreementComponent', () => {
         return of(site);
       },
     };
+    mockAppConfig = {
+      markdown: {
+        showInfoOnCMSMetadataEditPages: true,
+      },
+    };
 
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule,
+      imports: [
+        CommonModule,
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        BrowserModule,
+        NoopAnimationsModule,
+        RouterTestingModule,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
             useClass: TranslateLoaderMock,
           },
-        }), AdminEditUserAgreementComponent],
-      providers: [AdminEditUserAgreementComponent,
+        }),
+        AdminEditUserAgreementComponent,
+        AlertComponent,
+      ],
+      providers: [
+        AdminEditUserAgreementComponent,
         { provide: NotificationsService, useValue: notificationService },
         { provide: SiteDataService, useValue: siteService },
-        { provide: ScriptDataService, useValue: scriptDataService }],
-      schemas: [NO_ERRORS_SCHEMA],
-    }).overrideComponent(AdminEditUserAgreementComponent, { remove: { imports: [AlertComponent] } }).compileComponents();
+        { provide: ScriptDataService, useValue: scriptDataService },
+        { provide: APP_CONFIG, useValue: mockAppConfig },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -89,7 +108,7 @@ describe('AdminEditUserAgreementComponent', () => {
     expect(comp).toBeDefined();
   }));
 
-  it('should fill the text areas with the dc.rights values', async(() => {
+  it('should fill the text areas with the dc.rights values', waitForAsync(() => {
     expect(component.userAgreementTexts.get('en').text).toEqual('This is the End User Agreement text for this test');
     expect(component.userAgreementTexts.get('de').text).toEqual('Dies ist der Text der Endbenutzervereinbarung für diesen Test');
   }));

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

@@ -4,6 +4,7 @@ import {
 } from '@angular/common';
 import {
   Component,
+  Inject,
   OnDestroy,
   OnInit,
 } from '@angular/core';
@@ -16,6 +17,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';
@@ -50,12 +55,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/edit-cms-metadata/edit-cms-metadata.component.html

@@ -22,6 +22,7 @@ <h3 class="mb-4">{{'menu.section.cms.edit.metadata.head' | translate}}</h3>
 <ng-template #editMetadataTemplate>
   <div class="container">
     <h2 class=" mb-5">{{'admin.edit-cms-metadata.title' | translate}} '{{selectedMetadata}}'</h2>
+    <ds-alert *ngIf="showMarkdownInfo" [type]="'alert-info'" [dismissible]="true" [content]="'admin.edit-cms-metadata.markdown' | translate"></ds-alert>
     <div class="row">
       <div class="col-md">
         <div *ngFor="let lang of languageList" class="form-group">

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

@@ -6,15 +6,18 @@ import {
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } 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 +36,12 @@ describe('EditCmsMetadataComponent', () => {
     patch: jasmine.createSpy('patch'),
   });
 
+  const mockAppConfig = {
+    markdown: {
+      showInfoOnCMSMetadataEditPages: true,
+    },
+  };
+
   const metadataValueMap = new Map([
     ['en', ''],
     ['de', ''],
@@ -48,17 +57,20 @@ describe('EditCmsMetadataComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
+        NoopAnimationsModule,
         TranslateModule.forRoot({
           loader: {
             provide: TranslateLoader,
             useClass: TranslateLoaderMock,
           },
         }),
         EditCmsMetadataComponent,
+        AlertComponent,
       ],
       providers: [
         { provide: NotificationsService, useValue: NotificationsServiceStub },
         { provide: SiteDataService, useValue: siteServiceStub },
+        { provide: APP_CONFIG, useValue: mockAppConfig },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
@@ -157,4 +169,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.ts

@@ -6,6 +6,7 @@ import {
 } from '@angular/common';
 import {
   Component,
+  Inject,
   OnInit,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -17,10 +18,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';
 
 /**
@@ -31,6 +37,9 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
   templateUrl: './edit-cms-metadata.component.html',
   styleUrls: ['./edit-cms-metadata.component.scss'],
   imports: [
+    AlertComponent,
+    AsyncPipe,
+    BtnDisabledDirective,
     FormsModule,
     NgForOf,
     TranslateModule,
@@ -70,11 +79,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/shared/search/search.component.spec.ts

@@ -318,7 +318,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/assets/i18n/en.json5

@@ -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/it.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",
 

src/config/default-app-config.ts

@@ -611,6 +611,7 @@ export class DefaultAppConfig implements AppConfig {
   markdown: MarkdownConfig = {
     enabled: true,
     mathjax: true,
+    showInfoOnCMSMetadataEditPages: true,
   };
 
   // Which vocabularies should be used for which search filters