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

* [ADF-4327] added templating for content dialog

* [ADF-4327] added unit test and documentation

demo-shell/resources/i18n/en.json

@@ -94,7 +94,8 @@
     "ICONS": "Icons",
     "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
     "PEOPLE_CLOUD": "People Cloud Component",
-    "GROUPS_CLOUD": "Groups Cloud Component"
+    "GROUPS_CLOUD": "Groups Cloud Component",
+    "CONFIRM-DIALOG": "Confirmation Dialog"
   },
   "TRASHCAN": {
     "ACTIONS": {

demo-shell/src/app/app.module.ts

@@ -81,6 +81,7 @@ import { TemplateDemoComponent } from './components/template-list/template-demo.
 import { PeopleGroupCloudDemoComponent } from './components/cloud/people-groups-cloud-demo.component';
 import { CloudSettingsComponent } from './components/cloud/cloud-settings.component';
 import { NestedMenuPositionDirective } from './components/cloud/directives/nested-menu-position.directive';
+import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 
 @NgModule({
     imports: [
@@ -148,7 +149,8 @@ import { NestedMenuPositionDirective } from './components/cloud/directives/neste
         TemplateDemoComponent,
         PeopleGroupCloudDemoComponent,
         CloudSettingsComponent,
-        NestedMenuPositionDirective
+        NestedMenuPositionDirective,
+        ConfirmDialogExampleComponent
     ],
     providers: [
         {

demo-shell/src/app/app.routes.ts

@@ -49,6 +49,7 @@ import { StartProcessCloudDemoComponent } from './components/cloud/start-process
 import { TaskDetailsCloudDemoComponent } from './components/cloud/task-details-cloud-demo.component';
 import { ProcessDetailsCloudDemoComponent } from './components/cloud/process-details-cloud-demo.component';
 import { TemplateDemoComponent } from './components/template-list/template-demo.component';
+import { ConfirmDialogExampleComponent } from './components/confirm-dialog/confirm-dialog-example.component';
 
 export const appRoutes: Routes = [
     { path: 'login', component: LoginComponent },
@@ -209,6 +210,10 @@ export const appRoutes: Routes = [
                 path: 'node-selector',
                 loadChildren: 'app/components/content-node-selector/content-node-selector.module#AppContentNodeSelectorModule'
             },
+            {
+                path: 'confirm-dialog',
+                component: ConfirmDialogExampleComponent
+            },
             {
                 path: 'settings-layout',
                 loadChildren: 'app/components/settings/settings.module#AppSettingsModule'

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -41,6 +41,7 @@ export class AppLayoutComponent implements OnInit {
         { href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
         { href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS' },
         { href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW' },
+        { href: '/confirm-dialog', icon: 'view_headline', title: 'APP_LAYOUT.CONFIRM-DIALOG' },
         { href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA' },
         { href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
         { href: '/sites', icon: 'format_list_bulleted', title: 'APP_LAYOUT.SITES' },

demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.html

@@ -0,0 +1,18 @@
+<mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Confirm Dialog Default Behaviour
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <button mat-raised-button (click)="openConfirmDefaultDialog()">Open Default Dialog</button>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Confirm Dialog Custom Template
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <button mat-raised-button (click)="openConfirmCustomDialog()">Open Custom Dialog</button>
+    </mat-expansion-panel>
+  </mat-accordion>

demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts

@@ -0,0 +1,51 @@
+/*!
+ * @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 { Component } from '@angular/core';
+import { MatDialog } from '@angular/material';
+import { ConfirmDialogComponent } from '@alfresco/adf-content-services';
+
+@Component({
+    selector: 'app-confirm-dialog-example',
+    templateUrl: 'confirm-dialog-example.component.html',
+    styleUrls: ['confirm-dialog-example.component.scss']
+})
+export class ConfirmDialogExampleComponent {
+
+    constructor(private dialog: MatDialog) { }
+
+    openConfirmDefaultDialog() {
+        this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title: 'Upload',
+                message: `This is the default message`
+            },
+            minWidth: '250px'
+        });
+    }
+
+    openConfirmCustomDialog() {
+        this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title: 'Upload',
+                message: `This is the default message`,
+                htmlContent: '<div> <p>A</p> <p>Custom</p> <p>Content</p> </div>'
+            },
+            minWidth: '250px'
+        });
+    }
+}

docs/content-services/dialogs/confirm.dialog.md

@@ -37,6 +37,34 @@ dialogRef.afterClosed().subscribe((result) => {
 });
 ```
 
+### Rendering custom html body
+It is possible now to render a custom html instead of a plain message as confirm body via the attribute `htmlContent`. The html will be sanitized and then showed. 
+
+
+```ts
+constructor(private dialog: MatDialog) {}
+
+...
+
+let files = [
+    // Files defined here...
+];
+
+const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+    data: {
+        title: 'Upload',
+        htmlContent: '<div> <p>A</p> <p>Custom</p> <p>Content</p> </div>'
+    },
+    minWidth: '250px'
+});
+
+dialogRef.afterClosed().subscribe((result) => {
+    if (result === true) {
+        event.resumeUpload();
+    }
+});
+```
+
 ## Details
 
 This component lets the user make a yes/no choice to confirm an action. Use the

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: `
+    templateUrl: './confirm.dialog.html',
-        <h1 mat-dialog-title>{{ title | translate }}</h1>
+    styleUrls: ['./confirm.dialog.scss'],
-        <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;
-        }
-    `],
     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);
     }
 }