[ACS-8312] Display warning about losing response (#10059)

* [ACS-8312] Display warning about losing response

* [ACS-8312] Display warning about losing response - fixes

lib/core/src/lib/app-config/app-config.service.ts

@@ -47,7 +47,8 @@ export enum AppConfigValues {
     STORAGE_PREFIX = 'application.storagePrefix',
     NOTIFY_DURATION = 'notificationDefaultDuration',
     CONTENT_TICKET_STORAGE_LABEL = 'ticket-ECM',
-    PROCESS_TICKET_STORAGE_LABEL = 'ticket-BPM'
+    PROCESS_TICKET_STORAGE_LABEL = 'ticket-BPM',
+    UNSAVED_CHANGES_MODAL_HIDDEN = 'unsaved_changes__modal_hidden'
 }
 
 // eslint-disable-next-line no-shadow

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.html

@@ -1,29 +1,35 @@
-<h1 mat-dialog-title class="adf-unsaved-changes-dialog-title">
+<h1 mat-dialog-title class="adf-unsaved-changes-dialog-header">
-    {{ 'CORE.DIALOG.UNSAVED_CHANGES.TITLE' | translate }}
+    {{ dialogData.headerText | translate }}
     <button
         data-automation-id="adf-unsaved-changes-dialog-close-button"
+        class="adf-unsaved-changes-dialog-header-close-button"
         mat-icon-button
         [title]="'CLOSE' | translate"
         [mat-dialog-close]="false">
         <mat-icon>close</mat-icon>
     </button>
 </h1>
-<mat-dialog-content>
+<mat-dialog-content class="adf-unsaved-changes-dialog-content">
-    {{ 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION' | translate }}
+    {{ dialogData.descriptionText | translate }}
+    <div class="adf-unsaved-changes-dialog-content-checkbox" *ngIf="dialogData.checkboxText.length">
+        <mat-checkbox data-automation-id="adf-unsaved-changes-dialog-content-checkbox"
+                      (change)="onToggleCheckboxPreferences($event)"
+        >{{ dialogData.checkboxText | translate }}</mat-checkbox>
+    </div>
 </mat-dialog-content>
-<mat-dialog-actions align="end">
+<mat-dialog-actions align="end" class="adf-unsaved-changes-dialog-actions">
     <button
         data-automation-id="adf-unsaved-changes-dialog-cancel-button"
         mat-button
         [mat-dialog-close]="false"
-        class="adf-unsaved-changes-dialog-cancel-button">
+        class="adf-unsaved-changes-dialog-actions-cancel-button">
         {{ 'CANCEL' | translate | titlecase }}
     </button>
     <button
         data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"
         mat-button
         [mat-dialog-close]="true"
-        class="adf-unsaved-changes-dialog-discard-changes-button">
+        class="adf-unsaved-changes-dialog-actions-discard-changes-button">
-        {{ 'CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON' | translate }}
+        {{ dialogData.confirmButtonText | translate }}
     </button>
 </mat-dialog-actions>

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.scss

@@ -1,33 +1,60 @@
-adf-unsaved-changes-dialog {
+.adf-unsaved-changes-dialog {
-    margin-top: -4px;
-    display: block;
-
     .adf-unsaved-changes-dialog {
-        &-title {
+        &-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            font-size: 16px;
+            font-size: 18px;
-            font-weight: bold;
+            font-weight: 700;
+            margin-bottom: 16px;
+            height: 24px;
+
+            &-close-button {
+                margin-right: -16px;
+                margin-bottom: 2px;
+            }
+
+            &::before {
+                display: none;
+            }
         }
 
-        &-cancel-button {
+        &-content {
-            background-color: var(--adf-secondary-button-background);
+            padding: 0 8px 0 0;
-            margin-right: 4px;
+            overflow: unset;
+            color: var(--adf-secondary-modal-text-color);
+
+            &-checkbox {
+                margin-top: 20px;
+
+                label {
+                    color: var(--adf-secondary-modal-text-color);
+                }
+            }
         }
 
-        &-discard-changes-button {
+        &-actions {
-            color: var(--theme-warn-color-default-contrast);
+            margin-top: 18px;
-            background-color: var(--adf-error-color);
+            margin-bottom: 4px;
-            min-width: 143px;
+            padding: 0;
-        }
 
-        &-cancel-button,
+            &-cancel-button {
-        &-discard-changes-button {
+                background-color: var(--adf-secondary-button-background);
-            padding: 4px 14px;
+                margin-right: 4px;
-            height: 32px;
+            }
-            display: flex;
+
-            align-items: center;
+            &-discard-changes-button {
+                color: white;
+                background-color: var(--adf-error-color);
+            }
+
+            &-cancel-button,
+            &-discard-changes-button {
+                padding: 4px 12px;
+                height: 32px;
+                display: flex;
+                align-items: center;
+            }
         }
     }
 }

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.spec.ts

@@ -16,39 +16,66 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CoreTestingModule, UnsavedChangesDialogComponent } from '@alfresco/adf-core';
+import { CoreTestingModule, StorageService, UnsavedChangesDialogComponent } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import { MatDialogClose } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog';
+import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model';
 
 describe('UnsavedChangesDialog', () => {
     let fixture: ComponentFixture<UnsavedChangesDialogComponent>;
+    let storageServiceMock: any;
+    let savePreferenceCheckbox: DebugElement;
+
+    const setupBeforeEach = (unsavedChangesDialogData?: UnsavedChangesDialogData) => {
+        storageServiceMock = {
+            getItem: jasmine.createSpy('getItem'),
+            setItem: jasmine.createSpy('setItem')
+        };
 
-    beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule]
+            imports: [CoreTestingModule],
+            providers: [
+                { provide: StorageService, useValue: storageServiceMock },
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: unsavedChangesDialogData ?? {}
+                }
+            ]
         });
+
         fixture = TestBed.createComponent(UnsavedChangesDialogComponent);
         fixture.detectChanges();
-    });
+        savePreferenceCheckbox = fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-content-checkbox"]'));
+    };
 
-    describe('Close icon button', () => {
+    const getElements = (): { header: HTMLElement; content: HTMLElement; discardChangesButton: HTMLElement } => {
-        let closeIconButton: DebugElement;
+        const header = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-header');
+        const content = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-content');
+        const discardChangesButton = fixture.nativeElement.querySelector('.adf-unsaved-changes-dialog-actions-discard-changes-button');
+        return { header, content, discardChangesButton };
+    };
 
+    describe('when data is not present in dialog', () => {
         beforeEach(() => {
-            closeIconButton = fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-close-button"]'));
+            setupBeforeEach();
         });
 
-        it('should have assigned dialog close button with false as result', () => {
+        it('should display correct text if there is no data object', () => {
-            expect(closeIconButton.injector.get(MatDialogClose).dialogResult).toBeFalse();
+            const { header, content, discardChangesButton } = getElements();
+            expect(header.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.TITLE');
+            expect(content.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION');
+            expect(discardChangesButton.textContent).toContain('CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON');
         });
 
-        it('should have displayed correct icon', () => {
+        it('should have assigned dialog close button with true as result', () => {
-            expect(closeIconButton.nativeElement.textContent).toBe('close');
+            expect(
+                fixture.debugElement
+                    .query(By.css('[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]'))
+                    .injector.get(MatDialogClose).dialogResult
+            ).toBeTrue();
         });
-    });
 
-    describe('Cancel button', () => {
         it('should have assigned dialog close button with false as result', () => {
             expect(
                 fixture.debugElement.query(By.css('[data-automation-id="adf-unsaved-changes-dialog-cancel-button"]')).injector.get(MatDialogClose)
@@ -57,13 +84,35 @@ describe('UnsavedChangesDialog', () => {
         });
     });
 
-    describe('Discard changes button', () => {
+    describe('when data is present in dialog', () => {
-        it('should have assigned dialog close button with true as result', () => {
+        beforeEach(() => {
-            expect(
+            setupBeforeEach({
-                fixture.debugElement
+                headerText: 'headerText',
-                    .query(By.css('[data-automation-id="adf-unsaved-changes-dialog-discard-changes-button"]'))
+                descriptionText: 'descriptionText',
-                    .injector.get(MatDialogClose).dialogResult
+                confirmButtonText: 'confirmButtonText',
-            ).toBeTrue();
+                checkboxText: 'checkboxText'
+            });
+            fixture.detectChanges();
+        });
+
+        it('should display correct text if there is data object', () => {
+            const { header, content, discardChangesButton } = getElements();
+
+            expect(header.textContent).toContain('headerText');
+            expect(content.textContent).toContain('descriptionText checkboxText');
+            expect(discardChangesButton.textContent).toContain('confirmButtonText');
+        });
+
+        it('should update storageService to true when checkbox is checked', () => {
+            const event = { checked: true };
+            savePreferenceCheckbox.triggerEventHandler('change', event);
+            expect(storageServiceMock.setItem).toHaveBeenCalledWith(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, 'true');
+        });
+
+        it('should update storageService to false when checkbox is unchecked', () => {
+            const event = { checked: false };
+            savePreferenceCheckbox.triggerEventHandler('change', event);
+            expect(storageServiceMock.setItem).toHaveBeenCalledWith(UnsavedChangesDialogComponent.UNSAVED_CHANGES_MODAL_HIDDEN, 'false');
         });
     });
 });

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.component.ts

@@ -15,22 +15,57 @@
  * limitations under the License.
  */
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model';
+import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
+import { ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { StorageService } from '../../common';
+import { AppConfigValues } from '../../app-config';
 
 /**
  * Dialog which informs about unsaved changes. Allows discard them and proceed or close dialog and stop proceeding.
+ * Can be customized with data object - UnsavedChangesDialogData.
+ * If data.checkboxText is provided, checkbox will be displayed with the checkbox description.
+ * If data.confirmButtonText is provided, it will be displayed on the confirm button.
+ * If data.headerText is provided, it will be displayed as the header.
+ * If data.descriptionText is provided, it will be displayed as dialog content.
  */
 @Component({
+    standalone: true,
     selector: 'adf-unsaved-changes-dialog',
     standalone: true,
     imports: [CommonModule, MatDialogModule, TranslateModule, MatButtonModule, MatIconModule],
     encapsulation: ViewEncapsulation.None,
     templateUrl: './unsaved-changes-dialog.component.html',
-    styleUrls: ['./unsaved-changes-dialog.component.scss']
+    styleUrls: ['./unsaved-changes-dialog.component.scss'],
+    host: { class: 'adf-unsaved-changes-dialog' },
+    imports: [MatDialogModule, TranslateModule, MatButtonModule, MatIconModule, CommonModule, MatCheckboxModule, ReactiveFormsModule]
 })
-export class UnsavedChangesDialogComponent {}
+export class UnsavedChangesDialogComponent implements OnInit {
+    dialogData: UnsavedChangesDialogData;
+
+    constructor(@Inject(MAT_DIALOG_DATA) public data: UnsavedChangesDialogData, private storageService: StorageService) {}
+
+    ngOnInit() {
+        this.dialogData = {
+            headerText: this.data?.headerText ?? 'CORE.DIALOG.UNSAVED_CHANGES.TITLE',
+            descriptionText: this.data?.descriptionText ?? 'CORE.DIALOG.UNSAVED_CHANGES.DESCRIPTION',
+            confirmButtonText: this.data?.confirmButtonText ?? 'CORE.DIALOG.UNSAVED_CHANGES.DISCARD_CHANGES_BUTTON',
+            checkboxText: this.data?.checkboxText ?? ''
+        };
+    }
+
+    /**
+     * Sets 'unsaved_ai_changes__modal_visible' checked state (true or false string) as new item in local storage.
+     *
+     * @param savePreferences - MatCheckboxChange object with information about checkbox state.
+     */
+    onToggleCheckboxPreferences(savePreferences: MatCheckboxChange) {
+        this.storageService.setItem(AppConfigValues.UNSAVED_CHANGES_MODAL_HIDDEN, savePreferences.checked.toString());
+    }
+}

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes-dialog.model.ts

@@ -0,0 +1,23 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface UnsavedChangesDialogData {
+    checkboxText?: string;
+    confirmButtonText?: string;
+    descriptionText?: string;
+    headerText?: string;
+}

lib/core/src/lib/dialogs/unsaved-changes-dialog/unsaved-changes.guard.ts

@@ -21,6 +21,7 @@ import { Observable } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { UnsavedChangesDialogComponent } from './unsaved-changes-dialog.component';
 import { tap } from 'rxjs/operators';
+import { UnsavedChangesDialogData } from './unsaved-changes-dialog.model';
 
 /**
  * Guard responsible for protecting leaving page with unsaved changes.
@@ -30,6 +31,7 @@ import { tap } from 'rxjs/operators';
 })
 export class UnsavedChangesGuard implements CanDeactivate<any> {
     unsaved = false;
+    data: UnsavedChangesDialogData;
 
     constructor(private dialog: MatDialog) {}
 
@@ -39,9 +41,14 @@ export class UnsavedChangesGuard implements CanDeactivate<any> {
      * @returns boolean | Observable<boolean> true when there is no unsaved changes or changes can be discarded, false otherwise.
      */
     canDeactivate(): boolean | Observable<boolean> {
-        return this.unsaved ?
+        return this.unsaved
-            this.dialog.open<UnsavedChangesDialogComponent, undefined, boolean>(UnsavedChangesDialogComponent, {
+            ? this.dialog
-                maxWidth: 346
+                  .open<UnsavedChangesDialogComponent>(UnsavedChangesDialogComponent, {
-            }).afterClosed().pipe(tap((confirmed) => this.unsaved = !confirmed)) : true;
+                      maxWidth: 346,
+                      data: this.data
+                  })
+                  .afterClosed()
+                  .pipe(tap((confirmed) => (this.unsaved = !confirmed)))
+            : true;
     }
 }

lib/core/src/lib/styles/_components-variables.scss

@@ -88,6 +88,7 @@
         --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
         --adf-error-color: $adf-error-color,
         --adf-secondary-button-background: $adf-secondary-button-background,
+        --adf-secondary-modal-text-color: $adf-secondary-modal-text-color,
 
         --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );

lib/core/src/lib/styles/_reference-variables.scss

@@ -27,3 +27,4 @@ $adf-ref-header-icon-color: inherit;
 $adf-ref-header-icon-border-radius: 50%;
 $adf-error-color: #ba1b1b;
 $adf-secondary-button-background: #2121210d;
+$adf-secondary-modal-text-color: #212121;