[ADF-4406] - Confirm Dialog doesn't support a third extra button option to be customised (#4608)

* [ADF-4406] - Confirm Dialog doesn't support a third extra button option to be customised

* * comments fixed

* * docs and test added

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

@@ -15,4 +15,15 @@
       </mat-expansion-panel-header>
       <button mat-raised-button (click)="openConfirmCustomDialog()">Open Custom Dialog</button>
     </mat-expansion-panel>
+    <mat-expansion-panel>
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                Confirm Dialog Third Option
+            </mat-panel-title>
+            <mat-panel-description>
+                Provide extra button in the action section
+            </mat-panel-description>
+        </mat-expansion-panel-header>
+        <button mat-raised-button (click)="openConfirmCustomActionDialog()">Open Custom Dialog</button>
+    </mat-expansion-panel>
   </mat-accordion>

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

@@ -48,4 +48,22 @@ export class ConfirmDialogExampleComponent {
             minWidth: '250px'
         });
     }
+
+    openConfirmCustomActionDialog() {
+       const thirdOptionLabel = 'Yes. Don\'t Show it again';
+       const dialog =  this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title: 'Upload',
+                thirdOptionLabel: thirdOptionLabel,
+                message: `This is the default message`
+            },
+            minWidth: '250px'
+        });
+       dialog.afterClosed().subscribe((status) => {
+           // do the third option label operation
+           if ( status === thirdOptionLabel) {
+               // console.log('third option clicked');
+           }
+       });
+    }
 }

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

@@ -10,7 +10,19 @@ Last reviewed: 2019-01-22
 Requests a yes/no choice from the user.
 
 ![Confirm dialog](../../docassets/images/ConfirmDialog.png)
+![Confirm dialog](../../docassets/images/ConfirmDialogYesAll.png)
 
+## Dialog inputs
+| Name | Type  | Default value | Description |
+| ---- | ---- | ---- | ----------- |
+| title | `string` | `Confirm` | It will be placed in the dialog title section.  |
+| yesLabel | `string` | `yes` | It will be placed first in the dialog action section |
+| noLabel | `string`  | `no`| It will be placed last in the dialog action section |
+| thirdOptionLabel (optional) | `string` | |  It is not a mandatory input. it will be rendered in between yes and no label |
+| message | `string` | `Do you want to proceed?` | It will be rendered in the dialog content area |
+| htmlContent | `html` | |  It will be rendered in the dialog content area |
+
+*note*: `if input is not passed, default value will be rendered`
 ## Basic Usage
 
 ```ts
@@ -65,6 +77,26 @@ dialogRef.afterClosed().subscribe((result) => {
 });
 ```
 
+### Rendering with thirdOptionLabel
+
+```
+       const thirdOptionLabel = "YES. DON'T SHOW IT AGAIN";
+       const dialog =  this.dialog.open(ConfirmDialogComponent, {
+            data: {
+                title: 'Upload',
+                thirdOptionLabel: thirdOptionLabel,
+                message: `This is the default message`
+            },
+            minWidth: '250px'
+        });
+       dialog.afterClosed().subscribe((status) => {
+           // do the third option label operation
+           if ( status === thirdOptionLabel) {
+               // console.log('third option clicked');
+           }
+       });
+```
+
 ## Details
 
 This component lets the user make a yes/no choice to confirm an action. Use the

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

@@ -12,6 +12,7 @@
     <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-all" mat-button *ngIf="thirdOptionLabel" [mat-dialog-close]="thirdOptionLabel" data-automation-id="adf-confirm-dialog-confirm-all">{{ thirdOptionLabel | 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.spec.ts

@@ -26,6 +26,7 @@ import { By } from '@angular/platform-browser';
 describe('Confirm Dialog Component', () => {
     let fixture: ComponentFixture<ConfirmDialogComponent>;
     let component: ConfirmDialogComponent;
+
     const dialogRef = {
         close: jasmine.createSpy('close')
     };
@@ -140,4 +141,27 @@ describe('Confirm Dialog Component', () => {
             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).toBe('YES ALL');
+        });
+    });
+
 });

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

@@ -32,6 +32,7 @@ export class ConfirmDialogComponent {
     message: string;
     yesLabel: string;
     noLabel: string;
+    thirdOptionLabel: string;
     htmlContent: string;
 
     constructor(@Inject(MAT_DIALOG_DATA) data, private sanitizer: DomSanitizer) {
@@ -39,6 +40,7 @@ export class ConfirmDialogComponent {
         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.thirdOptionLabel = data.thirdOptionLabel;
         this.noLabel = data.noLabel || 'ADF_CONFIRM_DIALOG.NO_LABEL';
         this.htmlContent = data.htmlContent;
     }
@@ -46,4 +48,5 @@ export class ConfirmDialogComponent {
     public sanitizedHtmlContent() {
         return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent);
     }
+
 }