[ADF-4327] added templating for content dialog (#4549)

* [ADF-4327] added templating for content dialog

* [ADF-4327] added unit test and documentation

lib/content-services/dialogs/confirm.dialog.html

@@ -0,0 +1,17 @@
+<h1 mat-dialog-title data-automation-id="adf-confirm-dialog-title">{{ title | translate }}</h1>
+<mat-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>
+</mat-dialog-content>
+<mat-dialog-actions>
+    <span class="adf-dialog-spacer" data-automation-id="adf-confirm-dialog-spacer"></span>
+    <button id="adf-confirm-accept" mat-button color="primary" data-automation-id="adf-confirm-dialog-confirmation"
+        [mat-dialog-close]="true">{{ yesLabel | translate }}</button>
+    <button id="adf-confirm-cancel" mat-button [mat-dialog-close]="false" data-automation-id="adf-confirm-dialog-reject"
+        cdkFocusInitial>{{ noLabel | translate }}</button>
+</mat-dialog-actions>

lib/content-services/dialogs/confirm.dialog.scss

@@ -0,0 +1,7 @@
+.adf-dialog-spacer {
+    flex: 1 1 auto;
+}
+
+.adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
+    text-transform: uppercase;
+}

lib/content-services/dialogs/confirm.dialog.spec.ts

@@ -0,0 +1,143 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * 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 } from '@angular/core/testing';
+import { ComponentFixture } from '@angular/core/testing';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { setupTestBed } from '@alfresco/adf-core';
+import { ConfirmDialogComponent } from './confirm.dialog';
+import { ContentTestingModule } from '../testing/content.testing.module';
+import { By } from '@angular/platform-browser';
+
+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'
+    };
+
+    setupTestBed({
+        imports: [ContentTestingModule],
+        providers: [
+            { provide: MatDialogRef, useValue: dialogRef },
+            { provide: MAT_DIALOG_DATA, useValue: data }
+        ]
+    });
+
+    beforeEach(() => {
+        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');
+        });
+    });
+});

lib/content-services/dialogs/confirm.dialog.ts

@@ -15,29 +15,14 @@
  * limitations under the License.
  */
 
-import { Component, Inject, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, ViewEncapsulation, SecurityContext } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
     selector: 'adf-confirm-dialog',
-    template: `
-        <h1 mat-dialog-title>{{ title | translate }}</h1>
-        <mat-dialog-content>
-            <p>{{ message | translate }}</p>
-        </mat-dialog-content>
-        <mat-dialog-actions>
-            <span class="spacer"></span>
-            <button id="adf-confirm-accept" mat-button color="primary" [mat-dialog-close]="true">{{ yesLabel | translate }}</button>
-            <button id="adf-confirm-cancel" mat-button [mat-dialog-close]="false" cdkFocusInitial>{{ noLabel | translate }}</button>
-        </mat-dialog-actions>
-    `,
-    styles: [`
-        .spacer { flex: 1 1 auto; }
-
-        .adf-confirm-dialog .mat-dialog-actions .mat-button-wrapper {
-            text-transform: uppercase;
-        }
-    `],
+    templateUrl: './confirm.dialog.html',
+    styleUrls: ['./confirm.dialog.scss'],
     host: { 'class': 'adf-confirm-dialog' },
     encapsulation: ViewEncapsulation.None
 })
@@ -47,12 +32,18 @@ export class ConfirmDialogComponent {
     message: string;
     yesLabel: string;
     noLabel: string;
+    htmlContent: string;
 
-    constructor(@Inject(MAT_DIALOG_DATA) data) {
+    constructor(@Inject(MAT_DIALOG_DATA) data, private sanitizer: DomSanitizer) {
         data = data || {};
         this.title = data.title || 'ADF_CONFIRM_DIALOG.CONFIRM';
         this.message = data.message || 'ADF_CONFIRM_DIALOG.MESSAGE';
         this.yesLabel = data.yesLabel || 'ADF_CONFIRM_DIALOG.YES_LABEL';
         this.noLabel = data.noLabel || 'ADF_CONFIRM_DIALOG.NO_LABEL';
+        this.htmlContent = data.htmlContent;
+    }
+
+    public sanitizedHtmlContent() {
+        return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent);
     }
 }