From 60a8da1bd7be3229b0d04e30b86f61463a6d0e41 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Wed, 14 Aug 2024 15:31:13 +0300
Subject: [PATCH] UI: oauth2 client form fixed mapper section not updating, set
 client entity list label and placeholder text

---
 .../admin/oauth2/clients/client.component.ts      | 15 ++++++++-------
 .../admin/oauth2/domains/domain.component.html    |  4 +++-
 .../admin/oauth2/domains/domain.component.ts      |  1 +
 .../oauth2/mobile-apps/mobile-app.component.html  |  4 +++-
 4 files changed, 15 insertions(+), 9 deletions(-)

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 a371922057..90f0b17403 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
@@ -176,7 +176,9 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
         activateUser: entity.mapperConfig.activateUser,
         type: entity.mapperConfig.type
       }
-    });
+    }, {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) {
@@ -252,12 +254,8 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
     this.entityForm.get('additionalInfo.providerName').setValue(additionalInfo?.providerName ?
       additionalInfo?.providerName : defaultProviderName);
 
-    if (this.entityValue?.mapperConfig) {
-      this.changeMapperConfigType(this.entityForm, this.entityValue.mapperConfig.type, this.entityValue.mapperConfig);
-    } else {
-      this.changeMapperConfigType(this.entityForm, MapperType.BASIC);
-      this.setProviderDefaultValue(defaultProviderName, this.entityForm);
-    }
+    this.changeMapperConfigType(this.entityForm, MapperType.BASIC);
+    this.setProviderDefaultValue(defaultProviderName, this.entityForm);
 
     this.subscriptions.push(this.entityForm.get('mapperConfig.type').valueChanges.subscribe((value) => {
       this.changeMapperConfigType(this.entityForm, value);
@@ -272,11 +270,14 @@ export class ClientComponent extends EntityComponent<OAuth2Client, PageLink, OAu
   private changeMapperConfigType(control: AbstractControl, type: MapperType, predefinedValue?: OAuth2MapperConfig) {
     const mapperConfig = control.get('mapperConfig') as UntypedFormGroup;
     if (type === MapperType.CUSTOM) {
+      mapperConfig.removeControl('basic');
       mapperConfig.addControl('custom', this.formCustomGroup(predefinedValue?.custom));
     } else {
       mapperConfig.removeControl('custom');
       if (!mapperConfig.get('basic')) {
         mapperConfig.addControl('basic', this.formBasicGroup(predefinedValue?.basic));
+      } else if (predefinedValue?.basic) {
+        mapperConfig.get('basic').patchValue(predefinedValue.basic, {emitEvent: false});
       }
       if (type === MapperType.GITHUB) {
         mapperConfig.get('basic.emailAttributeKey').disable();
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
index 5729bff80f..eaa85ce87a 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.html
@@ -51,7 +51,9 @@
       {{ 'admin.oauth2.enable' | translate }}
     </mat-slide-toggle>
   </div>
-  <tb-entity-list [entityType]="entityType.OAUTH2_CLIENT" formControlName="oauth2ClientInfos">
+  <tb-entity-list [entityType]="entityType.OAUTH2_CLIENT" formControlName="oauth2ClientInfos"
+                  labelText="{{ 'admin.oauth2.clients' | translate }}"
+                  placeholderText="{{ 'admin.oauth2.add-client' | translate }}">
     <button #createTargetButton
             mat-button color="primary" matSuffix
             [disabled]="!isEdit"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.ts b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.ts
index 35895661ae..853bf17e06 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain.component.ts
@@ -53,6 +53,7 @@ export class DomainComponent extends EntityComponent<DomainInfo> {
               private dialog: MatDialog) {
     super(store, fb, entityValue, entitiesTableConfigValue, cd);
     this.entityForm.get('name').setValue(this.window.location.hostname);
+    this.entityForm.markAsDirty();
     this.oauth2Service.getLoginProcessingUrl().subscribe(url => {
       this.loginProcessingUrl = url;
     });
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.html
index 449d2c39b1..f280592925 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/mobile-apps/mobile-app.component.html
@@ -57,7 +57,9 @@
       {{ 'admin.oauth2.enable' | translate }}
     </mat-slide-toggle>
   </div>
-  <tb-entity-list [entityType]="entityType.OAUTH2_CLIENT" formControlName="oauth2ClientInfos">
+  <tb-entity-list [entityType]="entityType.OAUTH2_CLIENT" formControlName="oauth2ClientInfos"
+                  labelText="{{ 'admin.oauth2.clients' | translate }}"
+                  placeholderText="{{ 'admin.oauth2.add-client' | translate }}">
     <button #createTargetButton
             mat-button color="primary" matSuffix
             [disabled]="!isEdit"