refactor: Action buttons to use in CancelAlert and minor refactors (#377)

Co-authored-by: tumms2021389 <[email protected]>

Author: tammy-a11y

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.html

@@ -4,13 +4,11 @@ <h3>{{ localizedVal('Discard unsaved changes?', localeCategory) }}</h3>
     <div>
       <p>{{ localizedVal('You have unsaved changes. You can discard them or go back to keep working.', localeCategory) }}</p>
     </div>
-    <mat-grid-list cols="2" rowHeight="6.25rem">
-      <mat-grid-tile>
-        <button mat-raised-button color="secondary" (click)="buttonClick('continue')">{{ localizedVal('Go back', localeCategory) }}</button>
-      </mat-grid-tile>
-      <mat-grid-tile>
-        <button mat-raised-button color="primary" (click)="buttonClick('discard')">{{ localizedVal('Discard', localeCategory) }}</button>
-      </mat-grid-tile>
-    </mat-grid-list>
+    <component-mapper
+      name="ActionButtons"
+      [props]="{ arMainButtons$: [discardButton], arSecondaryButtons$: [goBackButton] }"
+      [parent]="this"
+      [outputEvents]="{ actionButtonClick: buttonClick }"
+    ></component-mapper>
   </div>
 </div>

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.scss

@@ -13,7 +13,6 @@
 }
 
 .psdk-cancel-alert-top {
-  display: table;
   margin: auto;
   min-width: 550px;
   border: 1px solid var(--app-inverse-form-color);

packages/angular-sdk-components/src/lib/_components/field/cancel-alert/cancel-alert.component.ts

@@ -1,14 +1,15 @@
-import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { ProgressSpinnerService } from '../../../_messages/progress-spinner.service';
+import { ComponentMapperComponent } from 'packages/angular-sdk-components/src/public-api';
 
 @Component({
   selector: 'app-cancel-alert',
   templateUrl: './cancel-alert.component.html',
   styleUrls: ['./cancel-alert.component.scss'],
-  imports: [CommonModule, MatGridListModule, MatButtonModule]
+  imports: [CommonModule, MatGridListModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class CancelAlertComponent implements OnChanges {
   @Input() pConn$: typeof PConnect;
@@ -18,6 +19,8 @@ export class CancelAlertComponent implements OnChanges {
   itemKey: string;
   localizedVal: Function;
   localeCategory = 'ModalContainer';
+  discardButton: any;
+  goBackButton: any;
 
   constructor(private psService: ProgressSpinnerService) {}
   ngOnChanges() {
@@ -26,6 +29,7 @@ export class CancelAlertComponent implements OnChanges {
       const contextName = this.pConn$.getContextName();
       this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
       this.itemKey = contextName;
+      this.createCancelAlertButtons();
     }
   }
 
@@ -43,11 +47,24 @@ export class CancelAlertComponent implements OnChanges {
     alert(sMessage);
   }
 
-  buttonClick(sAction) {
+  createCancelAlertButtons() {
+    this.discardButton = {
+      actionID: 'discard',
+      jsAction: 'discard',
+      name: this.pConn$.getLocalizedValue('Discard', '', '')
+    };
+    this.goBackButton = {
+      actionID: 'continue',
+      jsAction: 'continue',
+      name: this.pConn$.getLocalizedValue('Go back', '', '')
+    };
+  }
+
+  buttonClick({ action }) {
     const actionsAPI = this.pConn$.getActionsApi();
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
-    switch (sAction) {
+    switch (action) {
       case 'continue':
         this.dismissAlertOnly();
         break;

packages/angular-sdk-components/src/lib/_components/field/check-box/check-box.component.scss

@@ -11,7 +11,6 @@
   transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
   -ms-transform: translateY(-1.28125em) scale(0.75);
   width: 133.33333%;
-  color: rgba(0, 0, 0, 0.6);
 }
 
 .psdk-data-readonly {

projects/angular-test-app/tests/e2e/MediaCo/portal.spec.js

@@ -15,14 +15,7 @@ test.describe('E2E test', () => {
 
     await common.verifyHomePage(page);
 
-    const navbar = page.locator('app-navbar');
-    await navbar.locator('div[class="psdk-appshell-nav"]').hover();
-
-    const createCase = page.locator('mat-list-item[id="create-case-button"]');
-    await createCase.click();
-
-    const newServiceCase = await page.locator('mat-list-item[id="case-list-item"] > span:has-text("New Service")');
-    await newServiceCase.click();
+    await common.createCase('New Service', page);
 
     const firstNameInput = page.locator('input[data-test-id="BC910F8BDF70F29374F496F05BE0330C"]');
     await firstNameInput.click();