Merge branch 'dev' into enhancement/exposures-tab-header-and-content-…

…comp
CarnegieLearningWeb · Jun 27, 2024 · ee8e4c0 · ee8e4c0
2 parents 2cf954e + 85fb2da
commit ee8e4c0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
@@ -86,6 +86,12 @@ export class FeatureFlagsService {
     map((exclusions) => exclusions.length)
   );
 
+  convertNameStringToKey(name:string):string {
+    let upperCaseString = name.trim().toUpperCase();
+    let key = upperCaseString.replace(/ /g, '_');
+    return key;
+}
+
   fetchFeatureFlags(fromStarting?: boolean) {
     this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlags({ fromStarting }));
   }

diff --git a/...dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.ts b/...dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.ts
@@ -77,6 +77,7 @@ export class AddFeatureFlagModalComponent {
     this.experimentService.fetchContextMetaData();
     this.buildForm();
     this.listenForFeatureFlagListLengthChanges();
+    this.listenOnNameChangesToUpdateKey();
   }
 
   buildForm(): void {
@@ -94,6 +95,15 @@ export class AddFeatureFlagModalComponent {
     this.subscriptions = this.featureFlagsListLengthChange$.subscribe(() => this.closeModal());
   }
 
+  listenOnNameChangesToUpdateKey(): void {
+    this.featureFlagForm.get('name')?.valueChanges.subscribe((name) => {
+      const keyControl = this.featureFlagForm.get('key');
+      if (keyControl && !keyControl.dirty) {
+        keyControl.setValue(this.featureFlagsService.convertNameStringToKey(name));
+      }
+    });
+  }
+
   onPrimaryActionBtnClicked(): void {
     if (this.featureFlagForm.valid) {
       // Handle extra form validation logic here?

diff --git a/...shboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.ts b/...shboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.ts
@@ -80,6 +80,7 @@ export class EditFeatureFlagModalComponent {
     this.buildForm();
     this.initializeFormValues();
     this.listenForFeatureFlagGetUpdated();
+    this.listenOnNameChangesToUpdateKey();
   }
 
   buildForm(): void {
@@ -109,6 +110,15 @@ export class EditFeatureFlagModalComponent {
     );
   }
 
+  listenOnNameChangesToUpdateKey(): void {
+    this.featureFlagForm.get('name')?.valueChanges.subscribe((name) => {
+      const keyControl = this.featureFlagForm.get('key');
+      if (keyControl && !keyControl.dirty) {
+        keyControl.setValue(this.featureFlagsService.convertNameStringToKey(name));
+      }
+    });
+  }
+
   // Close the modal once the feature flag list length changes, as that indicates actual success
   listenForFeatureFlagGetUpdated(): void {
     this.subscriptions = this.isSelectedFeatureFlagUpdated$.subscribe(() => this.closeModal());