From a004472c05c49bc64be6c0cec80a7a0a1782b92b Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 3 Oct 2024 10:39:15 +0300
Subject: [PATCH] UI: Fixed edit and disabled oauth client settings scope

---
 .../oauth2/clients/client.component.html      | 28 ++------
 .../admin/oauth2/clients/client.component.ts  | 70 ++-----------------
 2 files changed, 10 insertions(+), 88 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
index df43a595fe..060c4177e8 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
@@ -162,28 +162,12 @@
               </mat-slide-toggle>
             </div>
           </section>
-          <div class="tb-form-row tb-standard-fields no-border no-padding column-xs">
-            <mat-form-field class="flex">
-              <mat-label translate>admin.oauth2.scope</mat-label>
-              <mat-chip-grid #scopeList required [disabled]="!this.createNewDialog && !(this.isEdit || this.isAdd)">
-                <mat-chip-row *ngFor="let scope of entityForm.get('scope').value; let k = index; trackBy: trackByParams"
-                              removable (removed)="removeScope(k, entityForm)">
-                  {{scope}}
-                  <mat-icon matChipRemove>cancel</mat-icon>
-                </mat-chip-row>
-                <input [matChipInputFor]="scopeList"
-                       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                       matChipInputAddOnBlur
-                       (matChipInputTokenEnd)="addScope($event, entityForm)">
-              </mat-chip-grid>
-              <mat-error *ngIf="entityForm.get('scope').hasError('required')">
-                {{ 'admin.oauth2.scope-required' | translate }}
-              </mat-error>
-            </mat-form-field>
-          </div>
-          <tb-error style="display: block; margin-top: -24px;"
-                    [error]="entityForm.get('scope').hasError('required') ? ('admin.oauth2.scope-required' | translate) : ''">
-          </tb-error>
+          <tb-string-items-list
+            formControlName="scope"
+            label="{{ 'admin.oauth2.scope' | translate }}"
+            requiredText="{{ 'admin.oauth2.scope-required' | translate }}"
+            required>
+          </tb-string-items-list>
         </section>
         <section class="tb-form-panel no-border no-padding no-gap" *ngIf="!generalSettingsMode">
           <div class="tb-form-row tb-standard-fields no-border no-padding">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
index a66d1592d9..44a5993485 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.ts
@@ -33,18 +33,10 @@ import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { TranslateService } from '@ngx-translate/core';
 import { Store } from '@ngrx/store';
-import {
-  AbstractControl,
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormGroup,
-  ValidationErrors,
-  Validators
-} from '@angular/forms';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { isDefinedAndNotNull } from '@core/utils';
 import { OAuth2Service } from '@core/http/oauth2.service';
 import { Subscription } from 'rxjs';
-import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { PageLink } from '@shared/models/page/page-link';
 import { coerceBoolean } from '@app/shared/decorators/coercion';
@@ -84,16 +76,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
 
   private subscriptions: Array<Subscription> = [];
 
-  public static validateScope(control: AbstractControl): ValidationErrors | null {
-    const scope: string[] = control.value;
-    if (!scope || !scope.length) {
-      return {
-        required: true
-      };
-    }
-    return null;
-  }
-
   readonly separatorKeysCodes: number[] = [ENTER, COMMA];
 
   clientAuthenticationMethods = Object.keys(ClientAuthenticationMethod);
@@ -146,7 +128,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       loginButtonLabel: [entity?.loginButtonLabel ? entity.loginButtonLabel : null, Validators.required],
       loginButtonIcon: [entity?.loginButtonIcon ? entity.loginButtonIcon : null],
       userNameAttributeName: [entity?.userNameAttributeName ? entity.userNameAttributeName : 'email', Validators.required],
-      scope: this.fb.array(entity?.scope ? entity.scope : [], ClientComponent.validateScope),
+      scope: [entity?.scope ? entity.scope : [], Validators.required],
       mapperConfig: this.fb.group({
         allowUserCreation: [isDefinedAndNotNull(entity?.mapperConfig?.allowUserCreation) ?
           entity.mapperConfig.allowUserCreation : true],
@@ -166,6 +148,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       clientId: entity.clientId,
       clientSecret: entity.clientSecret,
       accessTokenUri: entity.accessTokenUri,
+      scope: entity.scope,
       authorizationUri: entity.authorizationUri,
       jwkSetUri: entity.jwkSetUri,
       userInfoUri: entity.userInfoUri,
@@ -181,19 +164,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     }, {emitEvent: false});
 
     this.changeMapperConfigType(this.entityForm, this.entityValue.mapperConfig.type, this.entityValue.mapperConfig);
-
-    const scopeControls = this.entityForm.get('scope') as UntypedFormArray;
-    if (entity.scope.length === scopeControls.length) {
-      scopeControls.patchValue(entity.scope, {emitEvent: false});
-    } else {
-      const newScopeControls: Array<AbstractControl> = [];
-      if (entity.scope) {
-        for (const scope of entity.scope) {
-          newScopeControls.push(this.fb.control(scope, [Validators.required]));
-        }
-      }
-      this.entityForm.setControl('scope', this.fb.array(newScopeControls));
-    }
   }
 
   getProviderName(): string {
@@ -204,35 +174,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     return this.getProviderName() === 'Custom';
   }
 
-  trackByParams(index: number): number {
-    return index;
-  }
-
-  trackByItem(i, item) {
-    return item;
-  }
-
-  addScope(event: MatChipInputEvent, control: AbstractControl): void {
-    const input = event.chipInput.inputElement;
-    const value = event.value;
-    const controller = control.get('scope') as UntypedFormArray;
-    if ((value.trim() !== '')) {
-      controller.push(this.fb.control(value.trim()));
-      controller.markAsDirty();
-    }
-
-    if (input) {
-      input.value = '';
-    }
-  }
-
-  removeScope(i: number, control: AbstractControl): void {
-    const controller = control.get('scope') as UntypedFormArray;
-    controller.removeAt(i);
-    controller.markAsTouched();
-    controller.markAsDirty();
-  }
-
   private initTemplates(templates: OAuth2ClientRegistrationTemplate[]): void {
     templates.map(provider => {
       delete provider.additionalInfo;
@@ -264,7 +205,7 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     }));
 
     this.subscriptions.push(this.entityForm.get('additionalInfo.providerName').valueChanges.subscribe((provider) => {
-      (this.entityForm.get('scope') as UntypedFormArray).clear();
+      this.entityForm.get('scope').setValue([]);
       this.setProviderDefaultValue(provider, this.entityForm);
     }));
   }
@@ -355,9 +296,6 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
       const template = this.templates.get(provider);
       template.clientId = '';
       template.clientSecret = '';
-      template.scope.forEach(() => {
-        (clientRegistration.get('scope') as UntypedFormArray).push(this.fb.control(''));
-      });
       clientRegistration.patchValue(template);
     }
   }