Merged in task/dspace-cris-2023_02_x/DSC-2715 (pull request DSpace#4043)

Task/dspace cris 2023 02 x/DSC-2715

Approved-by: Andrea Barbasso

Author: Mattia Vianelli

src/app/submission/form/submission-form.component.html

@@ -6,7 +6,8 @@
                                         [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
             <div class="clearfix"></div>
         </div>
-
+      <ds-submission-legend *ngIf="shouldShowLegend" class="submission-form-header-legend">
+      </ds-submission-legend>
         <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
           <ng-container *ngIf="!isSectionHidden">
             <ds-submission-form-collection [currentCollectionId]="collectionId"

src/app/submission/form/submission-form.component.scss

@@ -9,6 +9,10 @@
   flex-grow: 1;
 }
 
+.submission-form-header-legend {
+  width: 100%;
+}
+
 .submission-form-footer {
   border-radius: var(--bs-card-border-radius);
   bottom: 0;

src/app/submission/form/submission-form.component.spec.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA, SimpleChange } from '@angular/core';
 import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { of as observableOf } from 'rxjs';
 import { cold, getTestScheduler } from 'jasmine-marbles';
@@ -259,6 +260,44 @@ describe('SubmissionFormComponent Component', () => {
       done();
     });
 
+    describe('submission legend', () => {
+      beforeEach(() => {
+        comp.collectionId = collectionId;
+        comp.submissionId = submissionId;
+        comp.submissionDefinition = submissionDefinition;
+        comp.selfUrl = selfUrl;
+        comp.sections = sectionsData;
+        comp.item = new Item();
+        comp.entityType = 'publication';
+        submissionServiceStub.getSubmissionObject.and.returnValue(observableOf(submissionState));
+        submissionServiceStub.getSubmissionSections.and.returnValue(observableOf(sectionsList));
+
+        spyOn(comp, 'isLoading').and.returnValue(observableOf(false));
+
+        comp.uploadEnabled$ = observableOf(false);
+      });
+
+      it('should display submission legend when shouldShowLegend is true', () => {
+        spyOnProperty(comp, 'shouldShowLegend', 'get').and.returnValue(true);
+
+        fixture.detectChanges();
+
+        const legendElement = fixture.debugElement.query(By.css('ds-submission-legend'));
+        expect(legendElement).toBeTruthy();
+        expect(legendElement.nativeElement.classList.contains('submission-form-header-legend')).toBe(true);
+      });
+
+      it('should not display submission legend when shouldShowLegend is false', () => {
+        spyOnProperty(comp, 'shouldShowLegend', 'get').and.returnValue(false);
+
+        fixture.detectChanges();
+
+        const legendElement = fixture.debugElement.query(By.css('ds-submission-legend'));
+        expect(legendElement).toBeNull();
+      });
+
+    });
+
   });
 });
 

src/app/submission/form/submission-form.component.ts

@@ -27,6 +27,7 @@ import { SubmissionVisibility } from '../utils/visibility.util';
 import { MetadataSecurityConfiguration } from '../../core/submission/models/metadata-security-configuration';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { MetadataSecurityConfigurationService } from '../../core/submission/metadatasecurityconfig-data.service';
+import { environment } from '../../../environments/environment';
 
 /**
  * This component represents the submission form.
@@ -301,6 +302,13 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
     return this.loading;
   }
 
+  /**
+   * Check if submission legend should be shown
+   */
+  get shouldShowLegend(): boolean {
+    return environment.submission.showLegend;
+  }
+
   /**
    * Check if submission form is loading
    */

src/app/submission/submission-legend/submission-legend.component.html

@@ -0,0 +1 @@
+<p [innerHTML]="legendText | translate"></p>

src/app/submission/submission-legend/submission-legend.component.scss

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+p {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  background-color: rgba(0, 0, 0, 0.03);
+  font-size: 0.875rem;
+  color: #343a40;
+}

src/app/submission/submission-legend/submission-legend.component.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { SubmissionLegendComponent } from './submission-legend.component';
+
+describe('SubmissionLegendComponent', () => {
+  let component: SubmissionLegendComponent;
+  let fixture: ComponentFixture<SubmissionLegendComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      declarations: [ SubmissionLegendComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SubmissionLegendComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/submission/submission-legend/submission-legend.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ds-submission-legend',
+  templateUrl: './submission-legend.component.html',
+  styleUrls: ['./submission-legend.component.scss']
+})
+export class SubmissionLegendComponent {
+  legendText = 'submission.sections.general.legend';
+}

src/app/submission/submission.module.ts

@@ -73,6 +73,7 @@ import { SectionFormOperationsService } from './sections/form/section-form-opera
 import { SubmissionSectionIdentifiersComponent } from './sections/identifiers/section-identifiers.component';
 import { SubmissionSectionCorrectionComponent } from './sections/correction/section-correction.component';
 import { MyDspaceSearchModule } from '../my-dspace-page/my-dspace-search.module';
+import {SubmissionLegendComponent} from './submission-legend/submission-legend.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -115,7 +116,8 @@ const DECLARATIONS = [
   PublicationInformationComponent,
   MetadataInformationComponent,
   ThemedSubmissionSectionUploadFileComponent,
-  DuplicateMatchComponent
+  DuplicateMatchComponent,
+  SubmissionLegendComponent
 ];
 
 @NgModule({

src/assets/i18n/en.json5

@@ -6499,6 +6499,8 @@
 
   "submission.sections.general.sections_not_valid": "There are incomplete sections.",
 
+  "submission.sections.general.legend": "<h3><b>Mandatory Fields</b></h3><p>Fields marked with an asterisk (*) must be completed before the submission can be finalized.</p>",
+
   "submission.sections.identifiers.info": "The following identifiers will be created for your item:",
 
   "submission.sections.identifiers.no_handle": "No handles have been minted for this item.",