From 52209255abe0051aecb8e399ca250e3881717223 Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Fri, 31 May 2024 12:17:48 +0000
Subject: [PATCH 1/3] Adds opt out checkbox

---
 .../consent-dialog.component.html             | 11 +++-------
 .../consent-dialog.component.scss             |  4 ++++
 .../consent-dialog.component.spec.ts          | 13 +++++++-----
 .../consent-dialog.component.ts               | 20 ++++++++++++-------
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html
index e5f1240eb..1fed20122 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.html
+++ b/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
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss
index 1e983ffc4..065dde6a3 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.scss
+++ b/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;
+}
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts
index a7d628c1a..4b9b417a2 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts
+++ b/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,20 +56,22 @@ describe('ConsentDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should close dialog on "cancel" click', () => {
+  it('should close dialog with false 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);
 
     closeSpy.calls.reset();
   });
 
-  it('should close dialog on "confirm" click', () => {
+  it('should close dialog with true when checkbox unchecked on "confirm" click', () => {
+    component.optOut = true;
+    fixture.detectChanges();
     const closeSpy = spyOn(component.dialogRef, 'close');
     const confirmButton = compiled.querySelector(
       '.confirm-button'
diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
index 78d1b536a..153954870 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
+++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
@@ -24,28 +24,34 @@ 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(confirm: boolean) {
+    this.dialogRef.close(confirm);
   }
 }

From f590b0d8526260628768ae5da5de596417228ab0 Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Mon, 3 Jun 2024 10:01:50 +0000
Subject: [PATCH 2/3] Fix logic

---
 .../version/consent-dialog/consent-dialog.component.ts       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
index 153954870..6eefcd0c6 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
+++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.ts
@@ -51,7 +51,8 @@ export class ConsentDialogComponent {
     @Inject(MAT_DIALOG_DATA) public data: DialogData
   ) {}
 
-  confirm(confirm: boolean) {
-    this.dialogRef.close(confirm);
+  confirm(optOut: boolean) {
+    // dialog should be closed with opposite value to grant or deny access to GA
+    this.dialogRef.close(!optOut);
   }
 }

From a50769413e7c17e626033a0aa9f2f3acfad9bb04 Mon Sep 17 00:00:00 2001
From: kurilova <sonnycactus@gmail.com>
Date: Mon, 3 Jun 2024 10:10:17 +0000
Subject: [PATCH 3/3] Fix tests

---
 .../consent-dialog/consent-dialog.component.spec.ts       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts
index 4b9b417a2..eb232dd2a 100644
--- a/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts
+++ b/modules/ui/src/app/components/version/consent-dialog/consent-dialog.component.spec.ts
@@ -56,7 +56,7 @@ describe('ConsentDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should close dialog with false when checkbox unchecked on "confirm" click', () => {
+  it('should close dialog with true when checkbox unchecked on "confirm" click', () => {
     const closeSpy = spyOn(component.dialogRef, 'close');
     const confirmButton = compiled.querySelector(
       '.confirm-button'
@@ -64,12 +64,12 @@ describe('ConsentDialogComponent', () => {
 
     confirmButton?.click();
 
-    expect(closeSpy).toHaveBeenCalledWith(false);
+    expect(closeSpy).toHaveBeenCalledWith(true);
 
     closeSpy.calls.reset();
   });
 
-  it('should close dialog with true when checkbox unchecked 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');
@@ -79,7 +79,7 @@ describe('ConsentDialogComponent', () => {
 
     confirmButton?.click();
 
-    expect(closeSpy).toHaveBeenCalledWith(true);
+    expect(closeSpy).toHaveBeenCalledWith(false);
 
     closeSpy.calls.reset();
   });