fix: resolve a bug in feature-management.component

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html

@@ -9,19 +9,22 @@
         <ul
           ngbNav
           #nav="ngbNav"
-          [(activeId)]="selectedGroup"
+          [(activeId)]="selectedGroupDisplayName"
           class="nav-pills"
           orientation="vertical"
         >
-          <li *ngFor="let groupName of groups" [ngbNavItem]="groupName">
+          <li
-            <a ngbNavLink>{{ groupName }}</a>
+            *ngFor="let group of groups; trackBy: track.by('name')"
+            [ngbNavItem]="selectedGroupDisplayName"
+          >
+            <a ngbNavLink>{{ group.displayName }}</a>
             <ng-template ngbNavContent>
-              <h4>{{ selectedGroup }}</h4>
+              <h4>{{ selectedGroupDisplayName }}</h4>
               <hr class="mt-2 mb-3" />
 
               <div
                 class="row my-3"
-                *ngFor="let feature of features[groupName]; let i = index; trackBy: track.by('id')"
+                *ngFor="let feature of features[group.name]; let i = index; trackBy: track.by('id')"
                 [ngStyle]="feature.style"
                 [ngSwitch]="feature.valueType?.name"
                 (keyup.enter)="save()"

npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts

@@ -4,7 +4,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { finalize } from 'rxjs/operators';
 import { FeatureManagement } from '../../models/feature-management';
 import { FeaturesService } from '../../proxy/feature-management/features.service';
-import { FeatureDto, UpdateFeatureDto } from '../../proxy/feature-management/models';
+import {
+  FeatureDto,
+  FeatureGroupDto,
+  UpdateFeatureDto,
+} from '../../proxy/feature-management/models';
 
 enum ValueTypes {
   ToggleStringValueType = 'ToggleStringValueType',
@@ -27,9 +31,9 @@ export class FeatureManagementComponent
   @Input()
   providerName: string;
 
-  selectedGroup: string;
+  selectedGroupDisplayName: string;
 
-  groups: string[] = [];
+  groups: Pick<FeatureGroupDto, 'name' | 'displayName'>[] = [];
 
   features: {
     [group: string]: Array<FeatureDto & { style?: { [key: string]: number }; initialValue: any }>;
@@ -68,8 +72,8 @@ export class FeatureManagementComponent
 
   getFeatures() {
     this.service.get(this.providerName, this.providerKey).subscribe(res => {
-      this.groups = res.groups.map(group => group.displayName);
+      this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
-      this.selectedGroup = this.groups[0];
+      this.selectedGroupDisplayName = this.groups[0].displayName;
       this.features = res.groups.reduce(
         (acc, val) => ({
           ...acc,