@abpjs/feature-management

@abpjs/feature-management

Feature management UI components for ABP Framework in React

Overview

@abpjs/feature-management provides feature management capabilities for ABP-based React applications. It allows managing features for tenants and editions with support for toggle and free-text value types.

This package is a React translation of the original @abp/ng.feature-management Angular package.

Features

• Feature Modal - Modal component for viewing and editing features
• Toggle Features - Checkbox-based boolean features
• Free Text Features - Text input for string-based features
• Provider Support - Supports tenant (T) and edition (E) providers
• Localization - Full i18n support using ABP localization
• Chakra UI - Beautiful, accessible components
• TypeScript - Full type safety with comprehensive definitions

Installation

# Using npm
npm install @abpjs/feature-management

# Using yarn
yarn add @abpjs/feature-management

# Using pnpm
pnpm add @abpjs/feature-management

Required Dependencies

This package requires the following peer dependencies:

npm install @abpjs/core @abpjs/theme-shared @chakra-ui/react @emotion/react

Quick Start

Using the Modal Component

import { useState } from 'react';
import { FeatureManagementModal } from '@abpjs/feature-management';

function TenantFeatures({ tenantId }: { tenantId: string }) {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(true)}>Manage Features</button>
      <FeatureManagementModal
        providerName="T"
        providerKey={tenantId}
        visible={visible}
        onVisibleChange={setVisible}
        onSave={() => console.log('Features saved!')}
      />
    </>
  );
}

Using the Hook

import { useFeatureManagement } from '@abpjs/feature-management';
import { useEffect } from 'react';

function CustomFeaturePage({ tenantId }: { tenantId: string }) {
  const {
    features,
    isLoading,
    fetchFeatures,
    saveFeatures,
    updateFeatureValue,
    isFeatureEnabled,
  } = useFeatureManagement();

  useEffect(() => {
    fetchFeatures(tenantId, 'T');
  }, [tenantId, fetchFeatures]);

  const handleToggle = (featureName: string) => {
    const newValue = isFeatureEnabled(featureName) ? 'false' : 'true';
    updateFeatureValue(featureName, newValue);
  };

  const handleSave = async () => {
    const result = await saveFeatures(tenantId, 'T');
    if (result.success) {
      console.log('Features saved!');
    }
  };

  return (
    <div>
      {features.map(feature => (
        <div key={feature.name}>
          <span>{feature.name}</span>
          {feature.valueType?.name === 'ToggleStringValueType' ? (
            <input
              type="checkbox"
              checked={isFeatureEnabled(feature.name)}
              onChange={() => handleToggle(feature.name)}
            />
          ) : (
            <input
              type="text"
              value={feature.value}
              onChange={(e) => updateFeatureValue(feature.name, e.target.value)}
            />
          )}
        </div>
      ))}
      <button onClick={handleSave} disabled={isLoading}>
        Save
      </button>
    </div>
  );
}

Components

FeatureManagementModal

Modal component for managing features of a provider.

import { FeatureManagementModal } from '@abpjs/feature-management';

<FeatureManagementModal
  providerName="T"
  providerKey={tenantId}
  visible={visible}
  onVisibleChange={setVisible}
  onSave={() => console.log('Saved!')}
/>

Props:

Prop	Type	Required	Description
providerName	string	Yes	Provider type ("T" for tenant, "E" for edition)
providerKey	string	Yes	Provider identifier (tenant ID or edition ID)
visible	boolean	Yes	Whether the modal is visible
onVisibleChange	(visible: boolean) => void	No	Callback when visibility changes
onSave	() => void	No	Callback when features are saved

Hooks

useFeatureManagement

Hook for managing feature state and operations.

import { useFeatureManagement } from '@abpjs/feature-management';

const {
  features,           // Array of features
  featureValues,      // Current values (form state)
  isLoading,          // Loading state
  error,              // Error message
  fetchFeatures,      // Fetch features for provider
  saveFeatures,       // Save changes to server
  updateFeatureValue, // Update a feature value locally
  getFeatureValue,    // Get current feature value
  isFeatureEnabled,   // Check if toggle feature is enabled
  reset,              // Reset all state
} = useFeatureManagement();

Services

FeatureManagementService

Service class for direct API interaction.

import { FeatureManagementService } from '@abpjs/feature-management';
import { useRestService } from '@abpjs/core';

function MyComponent() {
  const restService = useRestService();
  const service = new FeatureManagementService(restService);

  // Get features
  const features = await service.getFeatures({
    providerName: 'T',
    providerKey: tenantId,
  });

  // Update features
  await service.updateFeatures({
    providerName: 'T',
    providerKey: tenantId,
    features: [
      { name: 'MyFeature', value: 'true' },
    ],
  });
}

Data Models

FeatureManagement Namespace

import { FeatureManagement } from '@abpjs/feature-management';

interface FeatureManagement.Feature {
  name: string;
  value: string;
  description?: string;
  valueType?: ValueType;
  depth?: number;
  parentName?: string;
}

interface FeatureManagement.ValueType {
  name: string;           // 'ToggleStringValueType' or 'FreeTextStringValueType'
  properties: object;
  validator: object;
}

interface FeatureManagement.Provider {
  providerName: string;   // 'T' for tenant, 'E' for edition
  providerKey: string;    // Provider ID
}

interface FeatureManagement.Features {
  features: Feature[];
}

Value Types

Value Type	Description	UI Component
ToggleStringValueType	Boolean toggle	Checkbox/Switch
FreeTextStringValueType	Free text input	Text input

API Endpoints

Method	Endpoint	Description
GET	/api/abp/features	Fetch features for provider
PUT	/api/abp/features	Update features for provider

Related Packages

• @abpjs/core - Core infrastructure (required)
• @abpjs/theme-shared - Shared UI components (required)
• @abpjs/tenant-management - Tenant management
• @abpjs/permission-management - Permission management

Contributing

This package is part of the ABP React monorepo. Contributions are welcome!

License

LGPL-3.0 - See LICENSE for details.

View Full Documentation | Report Issues | View Source