AAE 22837 Move confirm to core (#9750)

* confirm dialog is used in many places and should be part of the core

* fix

* Update confirm.dialog.spec.ts

* Update public-api.ts

lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.html

@@ -0,0 +1,20 @@
+<h1 mat-dialog-title data-automation-id="adf-confirm-dialog-title">{{ title | translate }}</h1>
+<mat-dialog-content>
+    <div class="adf-confirm-dialog-content">
+        <p *ngIf="!htmlContent; else cutomContent" data-automation-id="adf-confirm-dialog-base-message">
+            {{ message | translate }}
+        </p>
+        <ng-template #cutomContent>
+        <span [innerHTML]="sanitizedHtmlContent()" data-automation-id="adf-confirm-dialog-custom-content">
+        </span>
+        </ng-template>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <span class="adf-dialog-spacer" data-automation-id="adf-confirm-dialog-spacer"></span>
+    <button id="adf-confirm-accept" class="adf-confirm-dialog-button" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
+        [mat-dialog-close]="true">{{ yesLabel | translate }}</button>
+    <button id="adf-confirm-all" class="adf-confirm-dialog-button" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | translate }}</button>
+    <button id="adf-confirm-cancel" class="adf-confirm-dialog-button" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
+        cdkFocusInitial>{{ noLabel | translate }}</button>
+</mat-dialog-actions>

lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.module.ts

@@ -0,0 +1,37 @@
+/*!
+ * @license
+ * Copyright © 2005-2023 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.
+ */
+
+import { NgModule } from '@angular/core';
+import { ConfirmDialogComponent } from './confirm.dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+@NgModule({
+    declarations: [ConfirmDialogComponent],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        MatDialogModule,
+        MatButtonModule
+    ],
+    exports: [ConfirmDialogComponent]
+})
+export class ConfirmDialogModule {}

lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.scss

@@ -0,0 +1,13 @@
+.adf-dialog-spacer {
+    flex: 1 1 auto;
+}
+
+.adf-confirm-dialog {
+    & .adf-confirm-dialog-button {
+        text-transform: uppercase;
+    }
+
+    & .adf-confirm-dialog-content {
+        margin: 0 -24px;
+    }
+}

lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.spec.ts

@@ -0,0 +1,140 @@
+/*!
+ * @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.
+ */
+
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ConfirmDialogComponent } from './confirm.dialog';
+import { By } from '@angular/platform-browser';
+import { CoreTestingModule } from '@alfresco/adf-cor';
+
+describe('Confirm Dialog Component', () => {
+    let fixture: ComponentFixture<ConfirmDialogComponent>;
+    let component: ConfirmDialogComponent;
+
+    const dialogRef = {
+        close: jasmine.createSpy('close')
+    };
+
+    const data = {
+        title: 'Fake Title',
+        message: 'Base Message',
+        yesLabel: 'TAKE THIS',
+        noLabel: 'MAYBE NO'
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreTestingModule],
+            providers: [
+                { provide: MatDialogRef, useValue: dialogRef },
+                { provide: MAT_DIALOG_DATA, useValue: data }
+            ]
+        });
+        dialogRef.close.calls.reset();
+        fixture = TestBed.createComponent(ConfirmDialogComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    describe('When no html is given', () => {
+        beforeEach(() => {
+            fixture.detectChanges();
+        });
+
+        it('should init form with folder name and description', () => {
+            expect(component.title).toBe('Fake Title');
+            expect(component.message).toBe('Base Message');
+            expect(component.yesLabel).toBe('TAKE THIS');
+            expect(component.noLabel).toBe('MAYBE NO');
+        });
+
+        it('should render the title', () => {
+            const titleElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-title"]'));
+            expect(titleElement).not.toBeNull();
+            expect(titleElement.nativeElement.innerText).toBe('Fake Title');
+        });
+
+        it('should render the message', () => {
+            const messageElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-base-message"]'));
+            expect(messageElement).not.toBeNull();
+            expect(messageElement.nativeElement.innerText).toBe('Base Message');
+        });
+
+        it('should render the YES label', () => {
+            const messageElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-confirmation"]'));
+            expect(messageElement).not.toBeNull();
+            expect(messageElement.nativeElement.innerText).toBe('TAKE THIS');
+        });
+
+        it('should render the NO label', () => {
+            const messageElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-reject"]'));
+            expect(messageElement).not.toBeNull();
+            expect(messageElement.nativeElement.innerText).toBe('MAYBE NO');
+        });
+    });
+
+    describe('When custom html is given', () => {
+        beforeEach(() => {
+            component.htmlContent = `<div> I am about to do to you what Limp Bizkit did to music in the late ’90s.</div>`;
+            fixture.detectChanges();
+        });
+
+        it('should render the title', () => {
+            const titleElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-title"]'));
+            expect(titleElement).not.toBeNull();
+            expect(titleElement.nativeElement.innerText).toBe('Fake Title');
+        });
+
+        it('should render the custom html', () => {
+            const customElement = fixture.nativeElement.querySelector('[data-automation-id="adf-confirm-dialog-custom-content"] div');
+            expect(customElement).not.toBeNull();
+            expect(customElement.innerText).toBe('I am about to do to you what Limp Bizkit did to music in the late ’90s.');
+        });
+
+        it('should render the YES label', () => {
+            const messageElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-confirmation"]'));
+            expect(messageElement).not.toBeNull();
+            expect(messageElement.nativeElement.innerText).toBe('TAKE THIS');
+        });
+
+        it('should render the NO label', () => {
+            const messageElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-reject"]'));
+            expect(messageElement).not.toBeNull();
+            expect(messageElement.nativeElement.innerText).toBe('MAYBE NO');
+        });
+    });
+
+    describe('thirdOptionLabel is given', () => {
+        it('should NOT render the thirdOption if is thirdOptionLabel is not passed', () => {
+            component.thirdOptionLabel = undefined;
+            fixture.detectChanges();
+            const thirdOptionElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-confirm-all"]'));
+            expect(thirdOptionElement).toBeFalsy();
+        });
+
+        it('should render the thirdOption if thirdOptionLabel is passed', () => {
+            component.thirdOptionLabel = 'Yes All';
+            fixture.detectChanges();
+            const thirdOptionElement = fixture.debugElement.query(By.css('[data-automation-id="adf-confirm-dialog-confirm-all"]'));
+            expect(thirdOptionElement).not.toBeNull();
+            expect(thirdOptionElement.nativeElement.innerText.toUpperCase()).toBe('YES ALL');
+        });
+    });
+});

lib/core/src/lib/dialogs/confirm-dialog/confirm.dialog.ts

@@ -0,0 +1,61 @@
+/*!
+ * @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.
+ */
+
+import { Component, Inject, ViewEncapsulation, SecurityContext } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DomSanitizer } from '@angular/platform-browser';
+
+export interface ConfirmDialogComponentProps {
+    title?: string;
+    message?: string;
+    yesLabel?: string;
+    thirdOptionLabel?: string;
+    noLabel?: string;
+    htmlContent?: string;
+}
+
+@Component({
+    selector: 'adf-confirm-dialog',
+    templateUrl: './confirm.dialog.html',
+    styleUrls: ['./confirm.dialog.scss'],
+    host: { class: 'adf-confirm-dialog' },
+    encapsulation: ViewEncapsulation.None
+})
+export class ConfirmDialogComponent {
+
+    title: string;
+    message: string;
+    yesLabel: string;
+    noLabel: string;
+    thirdOptionLabel: string;
+    htmlContent: string;
+
+    constructor(@Inject(MAT_DIALOG_DATA) data: ConfirmDialogComponentProps, private sanitizer: DomSanitizer) {
+        data = data || {};
+        this.title = data.title || 'ADF_CONFIRM_DIALOG.TITLE';
+        this.message = data.message || 'ADF_CONFIRM_DIALOG.MESSAGE';
+        this.yesLabel = data.yesLabel || 'ADF_CONFIRM_DIALOG.YES_LABEL';
+        this.thirdOptionLabel = data.thirdOptionLabel;
+        this.noLabel = data.noLabel || 'ADF_CONFIRM_DIALOG.NO_LABEL';
+        this.htmlContent = data.htmlContent;
+    }
+
+    sanitizedHtmlContent(): string {
+        return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent);
+    }
+
+}

lib/core/src/lib/dialogs/public-api.ts

@@ -17,7 +17,12 @@
 
 export * from './edit-json/edit-json.dialog';
 export * from './edit-json/edit-json.dialog.module';
+
 export * from './unsaved-changes-dialog/unsaved-changes-dialog.component';
 export * from './unsaved-changes-dialog/unsaved-changes-dialog.module';
 export * from './unsaved-changes-dialog/unsaved-changes.guard';
+
+export * from './confirm-dialog/confirm.dialog';
+export * from './confirm-dialog/confirm.dialog.module';
+
 export * from './dialog';