From c6ab89a2629854320cc041e397969003ea25c240 Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 26 Mar 2025 10:40:39 +0000
Subject: [PATCH 1/2] Enable save button when optout field has changes

---
 .../general-settings.component.html           |  7 +++--
 .../general-settings.component.ts             | 30 +++++++++----------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.html b/modules/ui/src/app/pages/general-settings/general-settings.component.html
index 8485c5c3c..06df6b91f 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.html
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.html
@@ -109,7 +109,8 @@
           !isFormValues ||
           vm.isLessThanOneInterface ||
           settingsDisable ||
-          settingForm.pristine
+          (settingForm.pristine &&
+            (analyticsForm.pristine || !optOutHasChanges))
         ">
         Save
       </button>
@@ -171,8 +172,8 @@
     </p>
   </ng-template>
   <ng-template #analyticsData>
-    <p class="setting-data">
-      <mat-checkbox [(ngModel)]="optOut" class="consent-actions-opt-out">
+    <p class="setting-data" [formGroup]="analyticsForm">
+      <mat-checkbox class="consent-actions-opt-out" formControlName="optOut">
         Opt out from Google Analytics
       </mat-checkbox>
     </p>
diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.ts
index 8ac79384a..fa55d9b79 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.ts
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.ts
@@ -30,7 +30,6 @@ import {
 import { Subject, takeUntil, tap } from 'rxjs';
 import { OnlyDifferentValuesValidator } from './only-different-values.validator';
 import { CalloutType } from '../../model/callout-type';
-import { EventType } from '../../model/event-type';
 import { FormKey, SystemConfig } from '../../model/setting';
 import { GeneralSettingsStore } from './general-settings.store';
 import { LoaderService } from '../../services/loader.service';
@@ -87,7 +86,6 @@ declare const gtag: Function;
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GeneralSettingsComponent implements OnInit, OnDestroy {
-  optOut = false;
   private readonly fb = inject(FormBuilder);
   private readonly onlyDifferentValuesValidator = inject(
     OnlyDifferentValuesValidator
@@ -108,9 +106,9 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     }
   }
   public readonly CalloutType = CalloutType;
-  public readonly EventType = EventType;
   public readonly FormKey = FormKey;
   public settingForm!: FormGroup;
+  public analyticsForm!: FormGroup;
   public readonly Routes = Routes;
   viewModel$ = this.settingsStore.viewModel$;
 
@@ -126,14 +124,6 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     return this.settingForm.get(FormKey.INTERNET) as FormControl;
   }
 
-  get logLevel(): FormControl {
-    return this.settingForm.get(FormKey.LOG_LEVEL) as FormControl;
-  }
-
-  get monitorPeriod(): FormControl {
-    return this.settingForm.get(FormKey.MONITOR_PERIOD) as FormControl;
-  }
-
   get isFormValues(): boolean {
     return (
       this.deviceControl?.value?.value &&
@@ -149,8 +139,13 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     return this.settingForm.hasError('hasSameValues');
   }
 
+  get optOutHasChanges(): boolean {
+    return this.analyticsForm.value.optOut;
+  }
+
   ngOnInit() {
     this.createSettingForm();
+    this.createAnalyticsForm();
     this.cleanFormErrorMessage();
     this.settingsStore.getInterfaces();
     this.getSystemConfig();
@@ -187,6 +182,7 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     } else {
       this.createSystemConfig();
       this.settingForm.markAsPristine();
+      this.analyticsForm.markAsPristine();
     }
   }
 
@@ -213,6 +209,12 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     );
   }
 
+  private createAnalyticsForm() {
+    this.analyticsForm = this.fb.group({
+      optOut: new FormControl(false),
+    });
+  }
+
   private setDefaultFormValues() {
     this.settingsStore.setDefaultFormValues(this.settingForm);
   }
@@ -244,14 +246,10 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
       config: data,
     });
     gtag('consent', 'update', {
-      analytics_storage: this.optOut ? 'denied' : 'granted',
+      analytics_storage: this.analyticsForm.value.optOut ? 'denied' : 'granted',
     });
   }
 
-  private resetForm(): void {
-    this.settingForm.reset();
-  }
-
   ngOnDestroy() {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();

From 2d6be6603bb92f5c6a363f2e7427cfb25e692d5c Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Wed, 26 Mar 2025 12:29:54 +0000
Subject: [PATCH 2/2] Fix tests

---
 .../pages/general-settings/general-settings.component.ts  | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/modules/ui/src/app/pages/general-settings/general-settings.component.ts b/modules/ui/src/app/pages/general-settings/general-settings.component.ts
index fa55d9b79..cc2878592 100644
--- a/modules/ui/src/app/pages/general-settings/general-settings.component.ts
+++ b/modules/ui/src/app/pages/general-settings/general-settings.component.ts
@@ -124,6 +124,14 @@ export class GeneralSettingsComponent implements OnInit, OnDestroy {
     return this.settingForm.get(FormKey.INTERNET) as FormControl;
   }
 
+  get logLevel(): FormControl {
+    return this.settingForm.get(FormKey.LOG_LEVEL) as FormControl;
+  }
+
+  get monitorPeriod(): FormControl {
+    return this.settingForm.get(FormKey.MONITOR_PERIOD) as FormControl;
+  }
+
   get isFormValues(): boolean {
     return (
       this.deviceControl?.value?.value &&