392033964: (fix) [GM3] change cancel to discard on devices

modules/ui/src/app/components/simple-dialog/simple-dialog.component.html

@@ -35,6 +35,6 @@
     color="primary"
     mat-button
     type="button">
-    Confirm
+    {{ data.confirmName ? data.confirmName : 'Confirm' }}
   </button>
 </mat-dialog-actions>

modules/ui/src/app/components/simple-dialog/simple-dialog.component.ts

@@ -28,6 +28,7 @@ import { FocusManagerService } from '../../services/focus-manager.service';
 interface DialogData {
   title?: string;
   content?: string;
+  confirmName?: string;
 }
 
 @Component({

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.html

@@ -163,16 +163,16 @@
         Save
       </button>
       <button
-        mat-raised-button
+        mat-flat-button
         [disabled]="deviceHasNoChanges(initialDevice(), createDeviceFromForm())"
         type="button"
         class="close-button"
         (click)="onCancelClicked()">
-        Cancel
+        Discard
       </button>
     </div>
     <button
-      mat-raised-button
+      mat-flat-button
       [disabled]="initialDevice() === null"
       type="button"
       class="delete-button"

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.scss

@@ -219,6 +219,11 @@ $form-min-width: 285px;
     background-color: colors.$error;
     color: colors.$on-error;
   }
+
+  .close-button:not(.mat-mdc-button-disabled) {
+    background-color: colors.$secondary-container;
+    color: colors.$on-secondary-container;
+  }
 }
 
 .device-qualification-form-summary-info {

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.spec.ts

@@ -431,10 +431,11 @@ describe('DeviceQualificationFromComponent', () => {
       fixture.detectChanges();
 
       expect(openSpy).toHaveBeenCalledWith(SimpleDialogComponent, {
-        ariaLabel: 'Close the Device menu',
+        ariaLabel: 'Discard the Device changes',
         data: {
-          title: 'Are you sure?',
-          content: `By closing the device profile you will loose any new changes you have made to the device.`,
+          title: 'Discard changes?',
+          content: `You have unsaved changes that would be permanently lost.`,
+          confirmName: 'Discard',
         },
         autoFocus: true,
         hasBackdrop: true,

modules/ui/src/app/pages/devices/components/device-qualification-from/device-qualification-from.component.ts

@@ -15,7 +15,6 @@
  */
 import {
   Component,
-  OnDestroy,
   OnInit,
   inject,
   input,
@@ -58,7 +57,7 @@ import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import { ProfileValidators } from '../../../risk-assessment/profile-form/profile.validators';
 import { DevicesStore } from '../../devices.store';
 import { DynamicFormComponent } from '../../../../components/dynamic-form/dynamic-form.component';
-import { skip, Subject, takeUntil, timer } from 'rxjs';
+import { skip, timer } from 'rxjs';
 import { Question } from '../../../../model/profile';
 import { FormControlType, QuestionFormat } from '../../../../model/question';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
@@ -92,17 +91,14 @@ const MAC_ADDRESS_PATTERN =
   templateUrl: './device-qualification-from.component.html',
   styleUrl: './device-qualification-from.component.scss',
 })
-export class DeviceQualificationFromComponent
-  implements OnInit, OnDestroy, AfterViewInit
-{
+export class DeviceQualificationFromComponent implements OnInit, AfterViewInit {
   readonly TestingType = TestingType;
   readonly DeviceView = DeviceView;
 
   private fb = inject(FormBuilder);
   private cdr = inject(ChangeDetectorRef);
   private deviceValidators = inject(DeviceValidators);
   private profileValidators = inject(ProfileValidators);
-  private destroy$: Subject<boolean> = new Subject<boolean>();
   private changeDevice = false;
   private macAddressValidator!: ValidatorFn;
 
@@ -192,24 +188,17 @@ export class DeviceQualificationFromComponent
         }
       });
 
-      timer(0)
-        .pipe(takeUntil(this.destroy$))
-        .subscribe(() => {
-          if (this.initialDevice()) {
-            this.fillDeviceForm(this.format, this.initialDevice()!);
-          }
-          this.formIsLoaded$.next(true);
-        });
+      timer(0).subscribe(() => {
+        if (this.initialDevice()) {
+          this.fillDeviceForm(this.format, this.initialDevice()!);
+        }
+        this.formIsLoaded$.next(true);
+      });
     });
 
     this.devicesStore.getQuestionnaireFormat();
   }
 
-  ngOnDestroy() {
-    this.destroy$.next(true);
-    this.destroy$.unsubscribe();
-  }
-
   ngAfterViewInit() {
     this.cdr.detectChanges();
   }
@@ -458,10 +447,11 @@ export class DeviceQualificationFromComponent
 
   private openCloseDialog(device: Device | null) {
     const dialogRef = this.dialog.open(SimpleDialogComponent, {
-      ariaLabel: 'Close the Device menu',
+      ariaLabel: 'Discard the Device changes',
       data: {
-        title: 'Are you sure?',
-        content: `By closing the device profile you will loose any new changes you have made to the device.`,
+        title: 'Discard changes?',
+        content: `You have unsaved changes that would be permanently lost.`,
+        confirmName: 'Discard',
       },
       autoFocus: true,
       hasBackdrop: true,

modules/ui/src/app/pages/devices/devices.component.ts

@@ -247,10 +247,11 @@ export class DevicesComponent implements OnInit, OnDestroy {
 
   private openCloseDialog() {
     const dialogRef = this.dialog.open(SimpleDialogComponent, {
-      ariaLabel: 'Close the Device menu',
+      ariaLabel: 'Discard the Device changes',
       data: {
-        title: 'Are you sure?',
-        content: `By closing the device profile you will loose any new changes you have made to the device.`,
+        title: 'Discard changes?',
+        content: `You have unsaved changes that would be permanently lost.`,
+        confirmName: 'Discard',
       },
       autoFocus: true,
       hasBackdrop: true,