update: some upgrade enhancements for the feature management

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

@@ -1,8 +1,9 @@
 import { LocalizationPipe, ReplaceableTemplateDirective } from '@abp/ng.core';
-import { Component } from '@angular/core';
+import {Component, ChangeDetectionStrategy,} from '@angular/core';
 import { FeatureManagementComponent } from '../feature-management/feature-management.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-feature-management-tab',
   templateUrl: './feature-management-tab.component.html',
   imports: [ReplaceableTemplateDirective, LocalizationPipe, FeatureManagementComponent],

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

@@ -1,5 +1,5 @@
 @if (visible) {
-  <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
+  <abp-modal [(visible)]="visible" [busy]="modalBusy()" [options]="{ size: 'lg' }">
     <ng-template #abpHeader>
       <h3>
         {{ 'AbpFeatureManagement::Features' | abpLocalization }}
@@ -11,7 +11,7 @@
 
     <ng-template #abpBody>
       <div class="row">
-        @if (groups.length) {
+        @if (groups().length) {
           <div ngTabs orientation="vertical" class="row">
             <div class="col-md-4">
               <div
@@ -21,7 +21,7 @@
                 [(selectedTab)]="selectedGroupDisplayName"
                 class="nav nav-pills flex-column"
               >
-                @for (group of groups; track group.name) {
+                @for (group of groups(); track group.name) {
                   <button
                     ngTab
                     #tab="ngTab"
@@ -42,15 +42,15 @@
             </ng-template>
 
             <div class="col-md-8">
-              @for (group of groups; track group.name) {
+              @for (group of groups(); track group.name) {
                 <div ngTabPanel [value]="group.displayName">
                   <ng-template ngTabContent>
-                    <h4>{{ selectedGroupDisplayName }}</h4>
+                    <h4>{{ selectedGroupDisplayName() }}</h4>
                     <hr class="mt-2 mb-3" />
 
                     @for (
-                      feature of features[group.name];
-                      track feature.name ?? i;
+                      feature of features()[group.name];
+                      track feature.name || i;
                       let i = $index
                     ) {
                       @let provider = feature.provider.name;
@@ -158,7 +158,7 @@
           </div>
         }
 
-        @if (!groups.length) {
+        @if (!groups().length) {
           <div class="col">
             {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
           </div>
@@ -171,10 +171,10 @@
         {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
       </button>
 
-      @if (groups.length) {
+      @if (groups().length) {
         <abp-button
           buttonClass="btn btn-outline-primary"
-          [disabled]="modalBusy"
+          [disabled]="modalBusy()"
           (click)="resetToDefault()"
           aria-hidden="true"
         >
@@ -182,10 +182,10 @@
         </abp-button>
       }
 
-      @if (groups.length) {
+      @if (groups().length) {
         <abp-button
           iconClass="fa fa-check"
-          [disabled]="modalBusy"
+          [disabled]="modalBusy()"
           (click)="save()"
           aria-hidden="true"
         >

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

@@ -1,4 +1,4 @@
-import { Component, inject, DOCUMENT, input, output, signal, effect } from '@angular/core';
+import {Component, inject, DOCUMENT, input, output, signal, effect, ChangeDetectionStrategy,} from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
@@ -50,6 +50,7 @@ type SelectionStringValueType = FeatureDto['valueType'] & {
 };
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'abp-feature-management',
   templateUrl: './feature-management.component.html',
   exportAs: 'abpFeatureManagement',
@@ -88,19 +89,19 @@ export class FeatureManagementComponent {
   // Internal state
   protected readonly _visible = signal(false);
 
-  selectedGroupDisplayName: string;
+  protected readonly selectedGroupDisplayName = signal<string | undefined>(undefined);
 
-  groups: Pick<FeatureGroupDto, 'name' | 'displayName'>[] = [];
+  protected readonly groups = signal<Pick<FeatureGroupDto, 'name' | 'displayName'>[]>([]);
 
-  features: {
+  protected readonly features = signal<{
     [group: string]: FeatureWithStyle[];
-  };
+  }>({});
 
   valueTypes = ValueTypes;
 
   defaultProviderName = DEFAULT_PROVIDER_NAME;
 
-  modalBusy = false;
+  protected readonly modalBusy = signal(false);
 
   // Getter/setter for backward compatibility
   get visible(): boolean {
@@ -144,25 +145,28 @@ export class FeatureManagementComponent {
   getFeatures() {
     this.service.get(this.providerName()!, this.providerKey()).subscribe(res => {
       if (!res.groups?.length) return;
-      this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
-      this.selectedGroupDisplayName = this.groups[0].displayName;
-      this.features = res.groups.reduce(
-        (acc, val) => ({
-          ...acc,
-          [val.name]: mapFeatures(val.features, this.document.body?.dir as LocaleDirection),
-        }),
-        {},
+      const groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
+      this.groups.set(groups);
+      this.selectedGroupDisplayName.set(groups[0].displayName);
+      this.features.set(
+        res.groups.reduce(
+          (acc, val) => ({
+            ...acc,
+            [val.name]: mapFeatures(val.features, this.document.body?.dir as LocaleDirection),
+          }),
+          {},
+        ),
       );
     });
   }
 
   save() {
-    if (this.modalBusy) return;
+    if (this.modalBusy()) return;
 
     const changedFeatures = [] as UpdateFeatureDto[];
 
-    Object.keys(this.features).forEach(key => {
-      this.features[key].forEach(feature => {
+    Object.keys(this.features()).forEach(key => {
+      this.features()[key].forEach(feature => {
         if (feature.value !== feature.initialValue)
           changedFeatures.push({ name: feature.name, value: `${feature.value}` });
       });
@@ -173,10 +177,10 @@ export class FeatureManagementComponent {
       return;
     }
 
-    this.modalBusy = true;
+    this.modalBusy.set(true);
     this.service
       .update(this.providerName()!, this.providerKey(), { features: changedFeatures })
-      .pipe(finalize(() => (this.modalBusy = false)))
+      .pipe(finalize(() => this.modalBusy.set(false)))
       .subscribe(() => {
         this.visible = false;
 
@@ -223,7 +227,7 @@ export class FeatureManagementComponent {
   }
 
   isParentDisabled(parentName: string, groupName: string, provider: string): boolean {
-    const children = this.features[groupName]?.filter(f => f.parentName === parentName);
+    const children = this.features()[groupName]?.filter(f => f.parentName === parentName);
     const providerNameValue = this.providerName();
 
     if (children?.length) {
@@ -288,7 +292,8 @@ export class FeatureManagementComponent {
   }
 
   private getCurrentGroup() {
-    return this.features[this.selectedGroupDisplayName] ?? [];
+    const selectedGroup = this.selectedGroupDisplayName();
+    return selectedGroup ? this.features()[selectedGroup] ?? [] : [];
   }
 
   private setFeatureValue(feature: FeatureDto, val: boolean) {