Merge branch 'develop'

europeana · Feb 20, 2023 · 2eca2fd · 2eca2fd
2 parents 38a20b2 + e4a78c3
commit 2eca2fd
Show file tree

Hide file tree

Showing 37 changed files with 548 additions and 430 deletions.
diff --git a/projects/metis/cypress/e2e/dataset-log.cy.ts b/projects/metis/cypress/e2e/dataset-log.cy.ts
@@ -0,0 +1,28 @@
+import { cleanupUser, setupUser } from '../support/helpers';
+
+context('metis-ui', () => {
+  describe('log', () => {
+    const force = { force: true };
+    const selectorModal = '.modal';
+    const selectorOpener = '[data-e2e="open-log"]';
+
+    beforeEach(() => {
+      cy.server();
+      setupUser();
+      cy.visit('/dataset/edit/0');
+      cy.wait(1000);
+    });
+
+    afterEach(() => {
+      cleanupUser();
+    });
+
+    it('should open the log', () => {
+      cy.get(selectorModal).should('not.exist');
+      cy.get(selectorOpener)
+        .eq(0)
+        .click(force);
+      cy.get(selectorModal).should('have.length', 1);
+    });
+  });
+});
diff --git a/projects/metis/cypress/e2e/depublications.cy.ts b/projects/metis/cypress/e2e/depublications.cy.ts
@@ -4,8 +4,8 @@ context('metis-ui', () => {
   describe('depublication', () => {
     const force = { force: true };
     const selDialogClose = '.modal .btn-close';
-    const selDialogFile = '.dialog-file';
-    const selDialogInput = '.dialog-input';
+    const selDialogFile = '.modal [type="file"]';
+    const selDialogInput = '.modal textarea';
     const selGrid = '.depublications-grid';
     const selCtrls = '.depublication-ctrls';
     const selCheckbox = `${selGrid} .checkbox [type="checkbox"]`;
@@ -67,7 +67,7 @@ context('metis-ui', () => {
           .scrollIntoView()
           .click(force);
         cy.get('[name=recordIds]').type(entries);
-        cy.get('.submit-form').click();
+        cy.get('.modal [type="button"]').click();
       };
 
       it('should open and close the file dialog form', () => {

diff --git a/projects/metis/src/app/app.component.html b/projects/metis/src/app/app.component.html
@@ -2,7 +2,7 @@
 <div class="pusher pusher-{{ bodyClass }}">
   <div class="metis-main-content"><router-outlet></router-outlet></div>
 </div>
-<lib-modal id="{{ modalConfirmId }}" title="{{ 'cancel' | translate }}">
+<lib-modal buttonClass="button-filled" id="{{ modalConfirmId }}" title="{{ 'cancel' | translate }}">
   <ng-container *ngIf="cancellationRequest">
     <p
       i18n="

diff --git a/projects/metis/src/app/dataset/actionbar/actionbar.component.html b/projects/metis/src/app/dataset/actionbar/actionbar.component.html
@@ -88,6 +88,7 @@
       <li class="nav-ctrl">
         <a
           class="nav-btn log-btn svg-icon-log tooltip"
+          data-e2e="open-log"
           title="{{ 'log' | translate }}"
           (click)="showLog()"
           *ngIf="currentStatus !== 'INQUEUE' && currentExternalTaskId && currentTopology"

diff --git a/projects/metis/src/app/dataset/datasetlog/datasetlog.component.html b/projects/metis/src/app/dataset/datasetlog/datasetlog.component.html
@@ -1,20 +1,22 @@
-<div class="modal-wrapper">
-  <div class="modal">
-    <div class="head">
-      {{ 'log' | translate }} {{ showPluginLog.pluginType
-      }}<a class="btn-close" (click)="closeLog()"></a>
-    </div>
-    <div class="content">
-      <app-load-animation [resources]="{ logs: true }" *ngIf="isFirstLoading"></app-load-animation>
-      <p *ngIf="noLogMessage">{{ noLogMessage }}</p>
-      <p *ngFor="let msg of logMessages">
-        {{ msg.resourceNum }} <strong>{{ msg.state }} {{ msg.info }}</strong
-        ><br />
-        {{ msg.resource !== 'null' ? msg.resource : '' }}
-        {{ msg.resultResource !== 'null' ? msg.resultResource : '' }}
-        <br *ngIf="msg.resource !== 'null' || msg.resultResource !== 'null'" />
-        {{ msg.additionalInformations }}
-      </p>
-    </div>
-  </div>
-</div>
+<lib-modal
+  [buttons]="[
+    {
+      label: 'Close',
+      cssClass: 'button-filled'
+    }
+  ]"
+  [id]="modalIdLog"
+  [isSmall]="false"
+  title="{{ 'log' | translate }} ({{ showPluginLog.pluginType | renameWorkflow }})"
+>
+  <app-load-animation [resources]="{ logs: true }" *ngIf="isFirstLoading"></app-load-animation>
+  <p *ngIf="noLogMessage">{{ noLogMessage }}</p>
+  <p *ngFor="let msg of logMessages">
+    {{ msg.resourceNum }} <strong>{{ msg.state }} {{ msg.info }}</strong
+    ><br />
+    {{ msg.resource !== 'null' ? msg.resource : '' }}
+    {{ msg.resultResource !== 'null' ? msg.resultResource : '' }}
+    <br *ngIf="msg.resource !== 'null' || msg.resultResource !== 'null'" />
+    {{ msg.additionalInformations }}
+  </p>
+</lib-modal>
diff --git a/projects/metis/src/app/dataset/datasetlog/datasetlog.component.spec.ts b/projects/metis/src/app/dataset/datasetlog/datasetlog.component.spec.ts
@@ -1,5 +1,8 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { of } from 'rxjs';
+// sonar-disable-next-statement (sonar doesn't read tsconfig paths entry)
+import { MockModalConfirmService, ModalConfirmService } from 'shared';
 import {
   createMockPipe,
   MockErrorService,
@@ -19,20 +22,27 @@ describe('DatasetlogComponent', () => {
   let component: DatasetlogComponent;
   let fixture: ComponentFixture<DatasetlogComponent>;
   let errors: ErrorService;
+  let modalConfirms: ModalConfirmService;
 
   const configureTestingModule = (errorMode = false): void => {
     TestBed.configureTestingModule({
-      declarations: [DatasetlogComponent, createMockPipe('translate')],
+      declarations: [
+        DatasetlogComponent,
+        createMockPipe('translate'),
+        createMockPipe('renameWorkflow')
+      ],
       providers: [
         {
           provide: WorkflowService,
           useClass: errorMode ? MockWorkflowServiceErrors : MockWorkflowService
         },
         { provide: ErrorService, useClass: MockErrorService },
-        { provide: TranslateService, useClass: MockTranslateService }
+        { provide: TranslateService, useClass: MockTranslateService },
+        { provide: ModalConfirmService, useClass: MockModalConfirmService }
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     }).compileComponents();
+    modalConfirms = TestBed.inject(ModalConfirmService);
   };
 
   const b4Each = (): void => {
@@ -97,6 +107,10 @@ describe('DatasetlogComponent', () => {
     });
 
     it('should close the logs', () => {
+      // supply a user close action
+      spyOn(modalConfirms, 'open').and.callFake(() => {
+        return of(true);
+      });
       spyOn(component.closed, 'emit');
       component.closeLog();
       expect(component.closed.emit).toHaveBeenCalled();

diff --git a/projects/metis/src/app/dataset/datasetlog/datasetlog.component.ts b/projects/metis/src/app/dataset/datasetlog/datasetlog.component.ts
@@ -3,7 +3,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { of, Subscription } from 'rxjs';
 import { filter, map, switchMap } from 'rxjs/operators';
 // sonar-disable-next-statement (sonar doesn't read tsconfig paths entry)
-import { DataPollingComponent } from 'shared';
+import { DataPollingComponent, ModalConfirmService } from 'shared';
 import { environment } from '../../../environments/environment';
 import { isPluginCompleted, PluginExecution, SubTaskInfo } from '../../_models';
 import { ErrorService, WorkflowService } from '../../_services';
@@ -17,6 +17,7 @@ export class DatasetlogComponent extends DataPollingComponent implements OnInit
   constructor(
     private readonly workflows: WorkflowService,
     private readonly errors: ErrorService,
+    private readonly modalConfirms: ModalConfirmService,
     private readonly translate: TranslateService
   ) {
     super();
@@ -30,6 +31,7 @@ export class DatasetlogComponent extends DataPollingComponent implements OnInit
   noLogs: string;
   noLogMessage?: string;
   isFirstLoading = true;
+  modalIdLog = 'modal-id-log';
 
   private _showPluginLog: PluginExecution;
 
@@ -69,6 +71,13 @@ export class DatasetlogComponent extends DataPollingComponent implements OnInit
   */
   ngOnInit(): void {
     this.noLogs = this.translate.instant('noLogs');
+    setTimeout(() => {
+      this.subs.push(
+        this.modalConfirms.open(this.modalIdLog).subscribe(() => {
+          this.closeLog();
+        })
+      );
+    });
   }
 
   /** closeLog

diff --git a/projects/metis/src/app/dataset/depublication/depublication.component.html b/projects/metis/src/app/dataset/depublication/depublication.component.html
@@ -1,10 +1,90 @@
-<lib-modal id="{{ modalDatasetDepublish }}" title="Depublish">
+<ng-template #tmpIdsByFile>
+  <form [formGroup]="formFile">
+    <lib-file-upload
+      formControlName="depublicationFile"
+      [form]="formFile"
+      [acceptedTypes]="'.txt'"
+    ></lib-file-upload>
+    <div class="form-ctrls">
+      <div
+        class="errors"
+        *ngIf="
+          formFile.get('depublicationFile')!.errors && formFile.get('depublicationFile')!.dirty
+        "
+      >
+        <div *ngIf="formRawText.get('recordIds')!.errors!.required">
+          {{ 'depublicationFormErrorExtension' | translate }}
+        </div>
+      </div>
+    </div>
+  </form>
+</ng-template>
+
+<ng-template #tmpIdsByInput>
+  <form [formGroup]="formRawText" class="dialog-input">
+    <textarea
+      formControlName="recordIds"
+      name="recordIds"
+      placeholder="{{ 'depublicationFormPlaceholderRecordIds' | translate }}"
+    ></textarea>
+    <div class="form-ctrls">
+      <div
+        class="errors"
+        *ngIf="formRawText.get('recordIds')!.errors && formRawText.get('recordIds')!.dirty"
+      >
+        <div *ngIf="formRawText.get('recordIds')!.errors!.required">
+          {{ 'depublicationFormErrorBlank' | translate }}
+        </div>
+        <div *ngIf="formRawText.get('recordIds')!.errors!.whitespace">
+          {{ 'depublicationFormErrorWhitespace' | translate }}
+        </div>
+        <div *ngIf="formRawText.get('recordIds')!.errors!.invalidIdFmt">
+          {{ 'depublicationFormErrorInvalidFmt' | translate }}
+        </div>
+      </div>
+    </div>
+  </form>
+</ng-template>
+
+<lib-modal
+  [buttons]="[
+    {
+      label: 'depublicationSubmitButtonText' | translate,
+      disabled: !(formRawText.valid && formRawText.dirty),
+      cssClass: 'button-filled right-aligned',
+      clickVal: true
+    }
+  ]"
+  [id]="modalIdAddByInput"
+  [isSmall]="false"
+  [title]="'depublicationModalTitle' | translate"
+>
+  <ng-content *ngTemplateOutlet="tmpIdsByInput"></ng-content>
+</lib-modal>
+
+<lib-modal
+  [buttons]="[
+    {
+      label: 'depublicationSubmitButtonText' | translate,
+      disabled: !(formFile.valid && formFile.dirty),
+      cssClass: 'button-filled right-aligned',
+      clickVal: true
+    }
+  ]"
+  [id]="modalIdAddByFile"
+  [isSmall]="false"
+  [title]="'depublicationModalTitle' | translate"
+>
+  <ng-content *ngTemplateOutlet="tmpIdsByFile"></ng-content>
+</lib-modal>
+
+<lib-modal buttonClass="button-filled" id="{{ modalDatasetDepublish }}" title="Depublish">
   <p i18n="confirm dataset depublish|show modal to get user confirmation@@confirmDatasetDepublish">
     Are you sure you want to depublish "{{ datasetName }}"?
   </p>
 </lib-modal>
 
-<lib-modal id="{{ modalRecIdDepublish }}" title="Depublish">
+<lib-modal buttonClass="button-filled" id="{{ modalRecIdDepublish }}" title="Depublish">
   <p
     i18n="
        confirm record id depublish|show modal to get user confirmation@@confirmRecordIdsDepublish
@@ -14,7 +94,7 @@
   </p>
 </lib-modal>
 
-<lib-modal id="{{ modalAllRecDepublish }}" title="Depublish">
+<lib-modal buttonClass="button-filled" id="{{ modalAllRecDepublish }}" title="Depublish">
   <p
     i18n="
        confirm all record id depublish|show modal to get user
@@ -91,79 +171,6 @@
     </li>
   </ul>
 </div>
-<div class="modal-wrapper" *ngIf="dialogInputOpen || dialogFileOpen">
-  <div
-    class="modal"
-    [ngClass]="{
-      'dialog-file': dialogFileOpen,
-      'dialog-input': dialogInputOpen
-    }"
-  >
-    <div class="head">
-      {{ 'depublicationModalTitle' | translate }} <a class="btn-close" (click)="closeDialogs()"></a>
-    </div>
-    <ng-container *ngIf="dialogFileOpen">
-      <form [formGroup]="formFile" (ngSubmit)="onSubmitFormFile()">
-        <lib-file-upload
-          formControlName="depublicationFile"
-          [form]="formFile"
-          [acceptedTypes]="'.txt'"
-        ></lib-file-upload>
-        <div class="form-ctrls">
-          <div
-            class="errors"
-            *ngIf="
-              formFile.get('depublicationFile')!.errors && formFile.get('depublicationFile')!.dirty
-            "
-          >
-            <div *ngIf="formRawText.get('recordIds')!.errors!.required">
-              {{ 'depublicationFormErrorExtension' | translate }}
-            </div>
-          </div>
-          <button
-            class="button-filled submit-form"
-            type="submit"
-            [disabled]="!(formFile.valid && formFile.dirty)"
-          >
-            {{ 'depublicationSubmitButtonText' | translate }}
-          </button>
-        </div>
-      </form>
-    </ng-container>
-    <ng-container *ngIf="dialogInputOpen">
-      <form [formGroup]="formRawText" (ngSubmit)="onSubmitRawText()">
-        <textarea
-          formControlName="recordIds"
-          name="recordIds"
-          placeholder="{{ 'depublicationFormPlaceholderRecordIds' | translate }}"
-        ></textarea>
-        <div class="form-ctrls">
-          <div
-            class="errors"
-            *ngIf="formRawText.get('recordIds')!.errors && formRawText.get('recordIds')!.dirty"
-          >
-            <div *ngIf="formRawText.get('recordIds')!.errors!.required">
-              {{ 'depublicationFormErrorBlank' | translate }}
-            </div>
-            <div *ngIf="formRawText.get('recordIds')!.errors!.whitespace">
-              {{ 'depublicationFormErrorWhitespace' | translate }}
-            </div>
-            <div *ngIf="formRawText.get('recordIds')!.errors!.invalidIdFmt">
-              {{ 'depublicationFormErrorInvalidFmt' | translate }}
-            </div>
-          </div>
-          <button
-            class="button-filled submit-form"
-            type="submit"
-            [disabled]="!(formRawText.valid && formRawText.dirty)"
-          >
-            {{ 'depublicationSubmitButtonText' | translate }}
-          </button>
-        </div>
-      </form>
-    </ng-container>
-  </div>
-</div>
 
 <div class="depublications-grid">
   <ng-container>