From 9973cc609a75d2700dd75c13b6281a88ccaab97f Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Thu, 21 Mar 2024 18:39:05 +0200
Subject: [PATCH] UI: upgrade oauth checkboxes to chip buttons

---
 .../pages/admin/oauth2-settings.component.html   | 16 +++++++++-------
 .../pages/admin/oauth2-settings.component.ts     | 13 +++++++++++--
 .../src/assets/locale/locale.constant-en_US.json |  2 +-
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
index 0414a5dff7..acaf58895e 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.html
@@ -29,13 +29,15 @@
     <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="oauth2SettingsForm" (ngSubmit)="save()">
-        <fieldset class="fields-group tb-margin" [disabled]="isLoading$ | async">
-          <mat-checkbox formControlName="enabled">
-            {{ 'admin.oauth2.enable' | translate }}
-          </mat-checkbox>
-          <mat-checkbox formControlName="edgeEnabled">
-            {{ 'admin.oauth2.edge-enable' | translate }}
-          </mat-checkbox>
+        <fieldset class="fields-group" [disabled]="isLoading$ | async">
+          <div class="tb-form-row no-border column-xs">
+            <mat-chip-listbox formControlName="enabled">
+              <mat-chip-option [value]="true">{{ 'admin.oauth2.enable' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+            <mat-chip-listbox formControlName="edgeEnabled">
+              <mat-chip-option [value]="true">{{ 'admin.oauth2.edge-enable' | translate }}</mat-chip-option>
+            </mat-chip-listbox>
+          </div>
           <section *ngIf="oauth2SettingsForm.get('enabled').value" style="margin-top: 1em;">
             <ng-container formArrayName="oauth2ParamsInfos">
               <div class="container">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
index 9cbf6368e6..f6f8340550 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2-settings.component.ts
@@ -205,13 +205,22 @@ export class OAuth2SettingsComponent extends PageComponent implements OnInit, Ha
     this.oauth2SettingsForm = this.fb.group({
       oauth2ParamsInfos: this.fb.array([]),
       enabled: [false],
-      edgeEnabled: [false]
+      edgeEnabled: [{value: false, disabled: true}]
     });
+
+    this.subscriptions.push(this.oauth2SettingsForm.get('enabled').valueChanges.subscribe(enabled => {
+      if (enabled) {
+        this.oauth2SettingsForm.get('edgeEnabled').enable();
+      } else {
+        this.oauth2SettingsForm.get('edgeEnabled').patchValue(false);
+        this.oauth2SettingsForm.get('edgeEnabled').disable();
+      }
+    }))
   }
 
   private initOAuth2Settings(oauth2Info: OAuth2Info): void {
     if (oauth2Info) {
-      this.oauth2SettingsForm.patchValue({enabled: oauth2Info.enabled, edgeEnabled: oauth2Info.edgeEnabled}, {emitEvent: false});
+      this.oauth2SettingsForm.patchValue({enabled: oauth2Info.enabled, edgeEnabled: oauth2Info.edgeEnabled});
       oauth2Info.oauth2ParamsInfos.forEach((oauth2ParamsInfo) => {
         this.oauth2ParamsInfos.push(this.buildOAuth2ParamsInfoForm(oauth2ParamsInfo));
       });
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 457b6ecf66..a317b9b89d 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -283,7 +283,7 @@
           "domain-schema-https": "HTTPS",
           "domain-schema-mixed": "HTTP+HTTPS",
           "enable": "Enable OAuth2 settings",
-          "edge-enable": "Propagate OAuth2 settings to Edge",
+          "edge-enable": "Propagate to Edge",
           "domains": "Domains",
           "mobile-apps": "Mobile applications",
           "no-mobile-apps": "No applications configured",