Merge pull request #857 from catenax-ng/chore/TRACEFOSS-2317-adjust-n…

…otification-status-approval

Chore/tracefoss 2317 adjust notification status approval

CHANGELOG.md

@@ -17,8 +17,10 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - bump org.apache.maven.plugins:maven-checkstyle-plugin from 3.3.0 to 3.3.1
 - bump schedlock.version from 5.9.1 to 5.10.0
 - fixed bug where filter was reset when sorting filtered notifications
+- redesigned notification status confirmation modal
 - bump irs version from 6.9.1 to 6.12.0
 
+
 ## [10.0.0 - 12.12.2024]
 ### Added
 - new filtering capabilities ( receivedQualityAlertIdsInStatusActive, sentQualityAlertIdsInStatusActive, receivedQualityInvestigationIdsInStatusActive, sentQualityInvestigationIdsInStatusActive )

frontend/src/app/modules/shared/modules/modal/component/modal.component.html

@@ -19,7 +19,7 @@
 SPDX-License-Identifier: Apache-2.0
 -->
 
-<div class="bg-dustyGrayShadeWildSand">
+<div class="bg-dustyGrayShadeWildSand modal--container">
   <div class="modal--header">
     <h1 mat-dialog-title>{{ data.title | i18n }}</h1>
     <app-button (click)="cancel()" variant="icon" iconName="close" color="primary"></app-button>
@@ -29,13 +29,17 @@ <h1 mat-dialog-title>{{ data.title | i18n }}</h1>
     <ng-container *ngTemplateOutlet="data.template"></ng-container>
   </mat-dialog-content>
 
-  <mat-dialog-actions>
+  <mat-dialog-actions [class]="'actions-container'">
+    <ng-container *ngIf="data?.notificationId" >
+      <mat-checkbox [class]="'checkbox-container'" [(ngModel)]="isValid">{{data?.type | i18n}} {{data?.notificationId}} </mat-checkbox>
+    </ng-container>
     <app-button *ngIf="data.buttonLeft" (click)="cancel()" variant="raised">{{ data.buttonLeft | i18n }}</app-button>
     <app-button [ngClass]="data.buttonLeft ? '' : 'centered-button'"
                 *ngIf="data.buttonRight"
                 (click)="confirm()"
                 [color]="data.primaryButtonColour || 'primary'"
                 variant="raised"
+                [isDisabled]="data?.notificationId ? !isValid : false"
     >{{ data.buttonRight | i18n }}</app-button
     >
   </mat-dialog-actions>

frontend/src/app/modules/shared/modules/modal/component/modal.component.scss

@@ -35,3 +35,21 @@
   justify-content: center;
   width: 100%;
 }
+
+.checkbox-container {
+  @apply font-medium;
+  display: flex;
+  justify-content: center;
+  padding-top: 5px;
+}
+
+.actions-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: rgb(237, 240, 244);
+}
+
+.modal--container {
+  background-color: white;
+}

frontend/src/app/modules/shared/modules/modal/component/modal.component.ts

@@ -22,6 +22,7 @@
 import { Component, HostListener, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ModalData } from '@shared/modules/modal/core/modal.model';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-confirm',
@@ -34,10 +35,15 @@ export class ModalComponent {
     this.close(false);
   }
 
+  isValid: boolean = true;
+  notValidSubscription: Subscription;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public readonly data: ModalData,
     private readonly matDialogRef: MatDialogRef<ModalComponent>,
   ) {
+    this.notValidSubscription?.unsubscribe();
+    this.isValid = !data?.notificationId;
   }
 
   public close(value: boolean): void {

frontend/src/app/modules/shared/modules/modal/core/modal.model.ts

@@ -24,9 +24,11 @@ import { UntypedFormGroup } from '@angular/forms';
 
 export interface ModalData {
   title: string;
+  type?: string;
   buttonLeft?: string;
   buttonRight: string;
   primaryButtonColour?: 'primary' | 'accent' | 'warn';
+  notificationId?: string;
 
   template: TemplateRef<unknown>;
   onConfirm: (isConfirmed: boolean) => void;

frontend/src/app/modules/shared/modules/modal/core/modal.service.ts

@@ -37,8 +37,8 @@ export class ModalService {
   }
 
   public open(modalData: ModalData): void {
-    const { title, template, buttonLeft, buttonRight, onConfirm, formGroup, primaryButtonColour } = modalData;
-    const data = { title, template, buttonLeft, buttonRight, primaryButtonColour, formGroup };
+    const { title, template, buttonLeft, buttonRight, onConfirm, formGroup, primaryButtonColour, notificationId, type } = modalData;
+    const data = { title, template, buttonLeft, buttonRight, primaryButtonColour, formGroup, notificationId, type };
 
     this.dialogRef = this.matDialog.open(ModalComponent, { data });
 

frontend/src/app/modules/shared/modules/modal/modal.module.ts

@@ -19,17 +19,19 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatDialogModule } from '@angular/material/dialog';
-import { ModalService } from '@shared/modules/modal/core/modal.service';
-import { SharedModule } from '@shared/shared.module';
-import { ModalComponent } from './component/modal.component';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatDialogModule} from '@angular/material/dialog';
+import {ModalService} from '@shared/modules/modal/core/modal.service';
+import {SharedModule} from '@shared/shared.module';
+import {ModalComponent} from './component/modal.component';
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [ ModalComponent ],
   exports: [ ModalComponent ],
-  imports: [ CommonModule, MatDialogModule, SharedModule ],
+    imports: [CommonModule, MatDialogModule, SharedModule, MatCheckboxModule, FormsModule],
   providers: [ ModalService ],
 })
 export class ModalModule {

frontend/src/app/modules/shared/modules/notification/modal/cancel/cancel-notification-modal.component.html

@@ -21,9 +21,4 @@
 
 <ng-template #Modal>
   <app-notification-modal-content [notification]="notification"></app-notification-modal-content>
-
-  <form [formGroup]="formGroup" class="mt-4">
-    <mat-hint>{{ translationContext + '.modal.cancellationHint' | i18n }}</mat-hint>
-    <app-input formControlName="notificationId" [label]="notification?.id"></app-input>
-  </form>
 </ng-template>

frontend/src/app/modules/shared/modules/notification/modal/cancel/cancel-notification-modal.component.spec.ts

@@ -22,17 +22,15 @@
 import { NotificationStatus } from '@shared/model/notification.model';
 import { CancelNotificationModalComponent } from '@shared/modules/notification/modal/cancel/cancel-notification-modal.component';
 import { renderCancelModal } from '@shared/modules/notification/modal/modalTestHelper.spec';
-import { fireEvent, screen, waitFor } from '@testing-library/angular';
+import { screen, waitFor } from '@testing-library/angular';
 
 describe('CancelNotificationModalComponent', () => {
   it('should create cancel modal', async () => {
     await renderCancelModal(NotificationStatus.CREATED);
     const title = await waitFor(() => screen.getByText('commonInvestigation.modal.cancellationTitle'));
-    const hint2 = await waitFor(() => screen.getByText('commonInvestigation.modal.cancellationHint'));
     const buttonR = await waitFor(() => screen.getByText('actions.cancellationConfirm'));
 
     expect(title).toBeInTheDocument();
-    expect(hint2).toBeInTheDocument();
     expect(buttonR).toBeInTheDocument();
   });
 
@@ -42,30 +40,4 @@ describe('CancelNotificationModalComponent', () => {
 
     expect(description).toBeInTheDocument();
   });
-
-  it('should check validation of textarea', async () => {
-    const { notification } = await renderCancelModal(NotificationStatus.CREATED);
-
-    fireEvent.click(await waitFor(() => screen.getByText('actions.cancellationConfirm')));
-    const errorMessage_1 = await waitFor(() => screen.getByText('errorMessage.required'));
-    expect(errorMessage_1).toBeInTheDocument();
-
-    const textArea: HTMLTextAreaElement = await waitFor(() => screen.getByTestId('BaseInputElement-0'));
-    fireEvent.input(textArea, { target: { value: 'error' } });
-    const errorMessage_2 = await waitFor(() => screen.getByText('errorMessage.pattern'));
-    expect(errorMessage_2).toBeInTheDocument();
-
-    fireEvent.input(textArea, { target: { value: notification.id } });
-    expect(errorMessage_2).not.toBeInTheDocument();
-  });
-
-  it('should call cancel function', async () => {
-    const { notification } = await renderCancelModal(NotificationStatus.CREATED);
-
-    const textArea: HTMLTextAreaElement = await waitFor(() => screen.getByTestId('BaseInputElement-0'));
-    fireEvent.input(textArea, { target: { value: notification.id } });
-
-    fireEvent.click(await waitFor(() => screen.getByText('actions.cancellationConfirm')));
-    await waitFor(() => expect(screen.getByText('commonInvestigation.modal.successfullyCanceled')).toBeInTheDocument());
-  });
 });

frontend/src/app/modules/shared/modules/notification/modal/cancel/cancel-notification-modal.component.ts

@@ -20,7 +20,6 @@
  ********************************************************************************/
 
 import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
-import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { ToastService } from '@shared/components/toasts/toast.service';
 import { Notification } from '@shared/model/notification.model';
 import { TranslationContext } from '@shared/model/translation-context.model';
@@ -38,19 +37,17 @@ export class CancelNotificationModalComponent {
   @Input() translationContext: TranslationContext;
   @Output() confirmActionCompleted = new EventEmitter<void>();
 
+
   public notification: Notification;
-  public readonly formGroup;
-  private readonly textAreaControl = new UntypedFormControl();
 
   constructor(private readonly toastService: ToastService, private readonly confirmModalService: ModalService) {
-    this.formGroup = new UntypedFormGroup({ notificationId: this.textAreaControl });
   }
 
   public show(notification: Notification): void {
     this.notification = notification;
-    this.textAreaControl.setValidators([ Validators.required, Validators.pattern(this.notification.id.toString()) ]);
+
     const onConfirm = (isConfirmed: boolean) => {
-      this.formGroup.reset();
+
       if (!isConfirmed) return;
 
       this.cancelCall(notification.id).subscribe({
@@ -66,11 +63,11 @@ export class CancelNotificationModalComponent {
 
     const options: ModalData = {
       title: this.translationContext + '.modal.cancellationTitle',
+      type: this.translationContext + '.modal.cancellationConfirmationLabel',
       buttonRight: 'actions.cancellationConfirm',
       primaryButtonColour: 'warn',
-
+      notificationId: this.notification.id,
       template: this.modal,
-      formGroup: this.formGroup,
       onConfirm,
     };
 

frontend/src/assets/locales/de/common.json

@@ -214,6 +214,7 @@
       "closeReasonHint": "Geben Sie den Grund für das Schließen ein.",
       "cancellationTitle": "Abbruch der Untersuchung",
       "cancellationHint": "Geben Sie die ID der Untersuchung ein, um Ihre Abbruchanfrage zu bestätigen.",
+      "cancellationConfirmationLabel": "Ja, ich bestätige die Stornierung der Untersuchung mit der ID: ",
       "declineTitle": "Ablehnung der Untersuchung",
       "declineReasonHint": "Geben Sie den Grund für die Ablehnung dieser Untersuchung ein.",
       "successfullyAccepted": "Untersuchung wurde erfolgreich angenommen.",
@@ -255,6 +256,7 @@
       "closeReasonHint": "Geben Sie den Grund für das Schließen ein.",
       "cancellationTitle": "Abbruch der Qualitätswarnung",
       "cancellationHint": "Geben Sie die ID der Qualitätswarnung ein, um Ihre Abbruchanfrage zu bestätigen.",
+      "cancellationConfirmationLabel": "Ja, ich bestätige die Stornierung der Warnung mit der ID: ",
       "declineTitle": "Ablehnung der Qualitätswarnung",
       "declineReasonHint": "Geben Sie den Grund für die Ablehnung dieser Qualitätswarnung ein.",
       "successfullyAccepted": "Qualitätswarnung wurde erfolgreich angenommen.",

frontend/src/assets/locales/en/common.json

@@ -217,6 +217,7 @@
       "closeReasonHint": "Enter the reason for close action.",
       "cancellationTitle": "Cancellation of investigation",
       "cancellationHint": "Enter the ID of the investigation to confirm your cancellation.",
+      "cancellationConfirmationLabel": "Yes, I confirm that I want to cancel the investigation with the ID: ",
       "declineTitle": "Decline of investigation",
       "declineReasonHint": "Enter the reason for declining this investigation.",
       "successfullyAccepted": "Investigation was accepted successfully.",
@@ -258,6 +259,7 @@
       "closeReasonHint": "Enter the reason for close action.",
       "cancellationTitle": "Cancellation of alert",
       "cancellationHint": "Enter the ID of the alert to confirm your cancellation.",
+      "cancellationConfirmationLabel": "Yes, I confirm that I want to cancel the alert with the ID: ",
       "declineTitle": "Decline of alert",
       "declineReasonHint": "Enter the reason for declining this alert.",
       "successfullyAccepted": "Alert was accepted successfully.",