Update consent form

modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html

@@ -96,16 +96,11 @@ <h2>Welcome to Testrun!</h2>
 </section>
 
 <mat-dialog-actions class="consent-actions">
-  <button
-    (click)="cancel()"
-    class="cancel-button"
-    color="primary"
-    mat-button
-    type="button">
+  <mat-checkbox [(ngModel)]="optOut" class="consent-actions-opt-out">
     Opt out Google Analytics
-  </button>
+  </mat-checkbox>
   <button
-    (click)="confirm()"
+    (click)="confirm(optOut)"
     class="confirm-button"
     color="primary"
     mat-raised-button

modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss

@@ -83,3 +83,7 @@
   min-height: 30px;
   justify-content: space-between;
 }
+
+.consent-actions-opt-out ::ng-deep label {
+  font-weight: 500;
+}

modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts

@@ -47,6 +47,7 @@ describe('ConsentDialogComponent', () => {
     fixture = TestBed.createComponent(ConsentDialogComponent);
     component = fixture.componentInstance;
     component.data = NEW_VERSION;
+    component.optOut = false;
     fixture.detectChanges();
     compiled = fixture.nativeElement as HTMLElement;
   });
@@ -55,28 +56,30 @@ describe('ConsentDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should close dialog on "cancel" click', () => {
+  it('should close dialog with true when checkbox unchecked on "confirm" click', () => {
     const closeSpy = spyOn(component.dialogRef, 'close');
-    const closeButton = compiled.querySelector(
-      '.cancel-button'
+    const confirmButton = compiled.querySelector(
+      '.confirm-button'
     ) as HTMLButtonElement;
 
-    closeButton?.click();
+    confirmButton?.click();
 
-    expect(closeSpy).toHaveBeenCalledWith(false);
+    expect(closeSpy).toHaveBeenCalledWith(true);
 
     closeSpy.calls.reset();
   });
 
-  it('should close dialog on "confirm" click', () => {
+  it('should close dialog with false when checkbox unchecked on "confirm" click', () => {
+    component.optOut = true;
+    fixture.detectChanges();
     const closeSpy = spyOn(component.dialogRef, 'close');
     const confirmButton = compiled.querySelector(
       '.confirm-button'
     ) as HTMLButtonElement;
 
     confirmButton?.click();
 
-    expect(closeSpy).toHaveBeenCalledWith(true);
+    expect(closeSpy).toHaveBeenCalledWith(false);
 
     closeSpy.calls.reset();
   });

modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts

@@ -24,28 +24,35 @@ import { MatButtonModule } from '@angular/material/button';
 import { CalloutComponent } from '../../callout/callout.component';
 import { CalloutType } from '../../../model/callout-type';
 import { NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { FormsModule } from '@angular/forms';
 
 type DialogData = Version;
 
 @Component({
   selector: 'app-consent-dialog',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, CalloutComponent, NgIf],
+  imports: [
+    MatDialogModule,
+    MatButtonModule,
+    CalloutComponent,
+    NgIf,
+    MatCheckbox,
+    FormsModule,
+  ],
   templateUrl: './consent-dialog.component.html',
   styleUrl: './consent-dialog.component.scss',
 })
 export class ConsentDialogComponent {
   public readonly CalloutType = CalloutType;
+  optOut = false;
   constructor(
     public dialogRef: MatDialogRef<ConsentDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: DialogData
   ) {}
 
-  confirm() {
-    this.dialogRef.close(true);
-  }
-
-  cancel() {
-    this.dialogRef.close(false);
+  confirm(optOut: boolean) {
+    // dialog should be closed with opposite value to grant or deny access to GA
+    this.dialogRef.close(!optOut);
   }
 }