fix: unfriendly api configuration edition (#1937)

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: unai-reliefapp

apps/back-office/src/app/dashboard/pages/api-configuration/api-configuration.component.html

@@ -140,7 +140,7 @@ <h2 class="mt-8">
               [placeholder]="
                 'pages.apiConfiguration.placeholder.tokenUrl' | translate
               "
-              onfocus="this.value=''"
+              (focus)="clearControl('settings.authTargetUrl')"
             />
           </div>
           <!-- Client id -->
@@ -154,7 +154,7 @@ <h2 class="mt-8">
               [placeholder]="
                 'pages.apiConfiguration.placeholder.clientId' | translate
               "
-              onfocus="this.value=''"
+              (focus)="clearControl('settings.apiClientID')"
             />
           </div>
           <!-- Client secret -->
@@ -168,7 +168,7 @@ <h2 class="mt-8">
               [placeholder]="
                 'pages.apiConfiguration.placeholder.secret' | translate
               "
-              onfocus="this.value=''"
+              (focus)="clearControl('settings.safeSecret')"
             />
           </div>
           <!-- Token scope -->
@@ -182,7 +182,7 @@ <h2 class="mt-8">
               [placeholder]="
                 'pages.apiConfiguration.placeholder.scope' | translate
               "
-              onfocus="this.value=''"
+              (focus)="clearControl('settings.scope')"
             />
           </div>
         </div>
@@ -201,7 +201,7 @@ <h2 class="mt-8">
               [placeholder]="
                 'pages.apiConfiguration.placeholder.token' | translate
               "
-              onfocus="this.value=''"
+              (focus)="clearControl('settings.token')"
             />
           </div>
         </div>

apps/back-office/src/app/dashboard/pages/api-configuration/api-configuration.component.ts

@@ -24,6 +24,11 @@ import { EDIT_API_CONFIGURATION } from './graphql/mutations';
 import { GET_API_CONFIGURATION } from './graphql/queries';
 import { SnackbarService } from '@oort-front/ui';
 
+/**
+ * Default value shown for private settings fields
+ */
+const ENCRYPTED_VALUE = '●●●●●●●●●●●●●';
+
 /**
  * API configuration page component.
  */
@@ -36,16 +41,21 @@ export class ApiConfigurationComponent
   extends SafeUnsubscribeComponent
   implements OnInit
 {
-  // === DATA ===
+  /** Loading indicator */
   public loading = true;
+  /** Api configuration id */
   public id = '';
+  /** Edited api configuration */
   public apiConfiguration?: ApiConfiguration;
-
-  // === FORM ===
+  /** Api form group */
   public apiForm: UntypedFormGroup = new UntypedFormGroup({});
+  /** Reference to status enum */
   public status = status;
+  /** Available status choices */
   public statusChoices = Object.values(status);
+  /** Reference to auth type enum */
   public authType = authType;
+  /** Available auth types */
   public authTypeChoices = Object.values(authType);
 
   /** @returns API configuration name */
@@ -118,11 +128,12 @@ export class ApiConfigurationComponent
                 ),
                 graphQLEndpoint: this.apiConfiguration?.graphQLEndpoint,
               });
-              this.apiForm.get('authType')?.valueChanges.subscribe((value) => {
-                this.apiForm.controls.settings.clearValidators();
-                this.apiForm.controls.settings = this.buildSettingsForm(value);
-                this.apiForm.controls.settings.updateValueAndValidity();
-              });
+              this.apiForm
+                .get('authType')
+                ?.valueChanges.pipe(takeUntil(this.destroy$))
+                .subscribe((value) => {
+                  this.resetFormSettings(value);
+                });
               this.loading = loading;
             } else {
               this.snackBar.openSnackBar(
@@ -148,6 +159,17 @@ export class ApiConfigurationComponent
     }
   }
 
+  /**
+   * Reset settings configuration form with the given API configuration
+   *
+   * @param authType current auth type of the API configuration
+   */
+  private resetFormSettings(authType: string) {
+    this.apiForm.removeControl('settings', { emitEvent: false });
+    this.apiForm.addControl('settings', this.buildSettingsForm(authType));
+    this.apiForm.updateValueAndValidity();
+  }
+
   /**
    * Create the settings form depending on the authType
    *
@@ -160,28 +182,28 @@ export class ApiConfigurationComponent
         authTargetUrl: [
           this.apiConfiguration?.settings &&
           this.apiConfiguration?.settings.authTargetUrl
-            ? '●●●●●●●●●●●●●'
+            ? ENCRYPTED_VALUE
             : '',
           Validators.required,
         ],
         apiClientID: [
           this.apiConfiguration?.settings &&
           this.apiConfiguration?.settings.apiClientID
-            ? '●●●●●●●●●●●●●'
+            ? ENCRYPTED_VALUE
             : '',
           Validators.minLength(3),
         ],
         safeSecret: [
           this.apiConfiguration?.settings &&
           this.apiConfiguration?.settings.safeSecret
-            ? '●●●●●●●●●●●●●'
+            ? ENCRYPTED_VALUE
             : '',
           Validators.minLength(3),
         ],
         scope: [
           this.apiConfiguration?.settings &&
           this.apiConfiguration?.settings.scope
-            ? '●●●●●●●●●●●●●'
+            ? ENCRYPTED_VALUE
             : '',
           null,
         ],
@@ -191,7 +213,7 @@ export class ApiConfigurationComponent
         token: [
           this.apiConfiguration?.settings &&
           this.apiConfiguration?.settings.token
-            ? '●●●●●●●●●●●●●'
+            ? ENCRYPTED_VALUE
             : '',
           Validators.required,
         ],
@@ -259,8 +281,30 @@ export class ApiConfigurationComponent
       this.apiForm.value.pingUrl !== this.apiConfiguration?.pingUrl && {
         pingUrl: this.apiForm.value.pingUrl,
       },
+      // If settings is touched we will go through each settings param to save only the ones that are not the encrypted display value and that exist
       this.apiForm.controls.settings.touched && {
-        settings: this.apiForm.controls.settings.value,
+        settings: {
+          ...(this.apiForm.value.authType === authType.serviceToService &&
+            this.apiForm.value.settings.authTargetUrl !== ENCRYPTED_VALUE && {
+              authTargetUrl: this.apiForm.value.settings.authTargetUrl,
+            }),
+          ...(this.apiForm.value.authType === authType.serviceToService &&
+            this.apiForm.value.settings.apiClientID !== ENCRYPTED_VALUE && {
+              apiClientID: this.apiForm.value.settings.apiClientID,
+            }),
+          ...(this.apiForm.value.authType === authType.serviceToService &&
+            this.apiForm.value.settings.safeSecret !== ENCRYPTED_VALUE && {
+              safeSecret: this.apiForm.value.settings.safeSecret,
+            }),
+          ...(this.apiForm.value.authType === authType.serviceToService &&
+            this.apiForm.value.settings.scope !== ENCRYPTED_VALUE && {
+              scope: this.apiForm.value.settings.scope,
+            }),
+          ...(this.apiForm.value.authType === authType.userToService &&
+            this.apiForm.value.settings.token !== ENCRYPTED_VALUE && {
+              token: this.apiForm.value.settings.token,
+            }),
+        },
       }
     );
     this.apollo
@@ -280,10 +324,7 @@ export class ApiConfigurationComponent
           this.loading = false;
         } else {
           this.apiConfiguration = data?.editApiConfiguration;
-          this.apiForm.controls.settings = this.buildSettingsForm(
-            this.apiForm.value.authType
-          );
-          this.apiForm.markAsPristine();
+          this.resetFormSettings(this.apiConfiguration?.authType as string);
           this.loading = loading || false;
         }
       });
@@ -326,4 +367,16 @@ export class ApiConfigurationComponent
       }
     );
   }
+
+  /**
+   * Clear the value of the given control, if not updated by the user
+   *
+   * @param key control key from settings control to clear
+   */
+  clearControl(key: string) {
+    const control = this.apiForm.get(key);
+    if (control && control.pristine) {
+      control.setValue('');
+    }
+  }
 }