@abpjs/saas

SaaS tenant and edition management UI components for ABP Framework in React

Overview

@abpjs/saas provides SaaS (Software as a Service) management components for ABP-based React applications. It includes tenant management, edition management, and subscription features for multi-tenant applications.

This package is a React translation of the original @volo/abp.ng.saas Angular package.

Features

• Tenant Management - Create, read, update, and delete tenants
• Edition Management - Create, read, update, and delete editions
• Feature Management - Configure features per tenant/edition
• Connection Strings - Manage tenant database connection strings
• Tenant Activation - Enable/disable tenants
• Pagination - Built-in pagination for all list views
• Search & Filter - Filter tenants and editions by name
• Chakra UI - Beautiful, accessible components
• TypeScript - Full type safety with comprehensive definitions

Installation

# Using npm
npm install @abpjs/saas

# Using yarn
yarn add @abpjs/saas

# Using pnpm
pnpm add @abpjs/saas

Required Dependencies

This package requires the following peer dependencies:

npm install @abpjs/core @abpjs/theme-shared @abpjs/feature-management @chakra-ui/react @emotion/react react-router-dom

Quick Start

Using Pre-built Components

import { TenantsComponent, EditionsComponent } from '@abpjs/saas';
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

function SaaSManagement() {
  return (
    <Tabs>
      <TabList>
        <Tab>Tenants</Tab>
        <Tab>Editions</Tab>
      </TabList>

      <TabPanels>
        <TabPanel>
          <TenantsComponent
            onTenantCreated={(tenant) => console.log('Tenant created:', tenant)}
            onTenantDeleted={(id) => console.log('Tenant deleted:', id)}
          />
        </TabPanel>
        <TabPanel>
          <EditionsComponent
            onEditionCreated={(edition) => console.log('Edition created:', edition)}
            onEditionDeleted={(id) => console.log('Edition deleted:', id)}
          />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Using Hooks for Custom UI

import { useTenants, useEditions } from '@abpjs/saas';
import { useEffect } from 'react';

function CustomSaaSView() {
  const { tenants, fetchTenants } = useTenants();
  const { editions, fetchEditions } = useEditions();

  useEffect(() => {
    fetchTenants();
    fetchEditions();
  }, [fetchTenants, fetchEditions]);

  return (
    <div>
      <h2>Tenants: {tenants.length}</h2>
      <h2>Editions: {editions.length}</h2>
    </div>
  );
}

Components

TenantsComponent

Complete tenant management component with table, search, and modals.

import { TenantsComponent } from '@abpjs/saas';

<TenantsComponent
  onTenantCreated={(tenant) => console.log('Created:', tenant)}
  onTenantUpdated={(tenant) => console.log('Updated:', tenant)}
  onTenantDeleted={(id) => console.log('Deleted:', id)}
/>

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | onTenantCreated | (tenant: Tenant) => void | No | Callback when tenant is created | | onTenantUpdated | (tenant: Tenant) => void | No | Callback when tenant is updated | | onTenantDeleted | (id: string) => void | No | Callback when tenant is deleted |

Features:

• Tenant table with actions menu
• Search/filter by tenant name
• Pagination controls
• Create/Edit modal with tabs for tenant info and connection strings
• Edition assignment
• Tenant activation/deactivation
• Feature management integration
• Delete confirmation dialog

EditionsComponent

Complete edition management component.

import { EditionsComponent } from '@abpjs/saas';

<EditionsComponent
  onEditionCreated={(edition) => console.log('Created:', edition)}
  onEditionUpdated={(edition) => console.log('Updated:', edition)}
  onEditionDeleted={(id) => console.log('Deleted:', id)}
/>

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | onEditionCreated | (edition: Edition) => void | No | Callback when edition is created | | onEditionUpdated | (edition: Edition) => void | No | Callback when edition is updated | | onEditionDeleted | (id: string) => void | No | Callback when edition is deleted |

Features:

• Edition table with actions menu
• Search/filter by edition name
• Create/Edit modal
• Feature management integration
• Delete confirmation dialog

Hooks

useTenants

Hook for managing tenants with full CRUD and pagination support.

import { useTenants } from '@abpjs/saas';

const {
  tenants,            // Array of tenants
  totalCount,         // Total tenant count
  selectedTenant,     // Currently selected tenant
  isLoading,          // Loading state
  error,              // Error message
  pageQuery,          // Current pagination/filter params
  fetchTenants,       // Fetch tenants with optional params
  getTenantById,      // Get single tenant
  createTenant,       // Create new tenant
  updateTenant,       // Update existing tenant
  deleteTenant,       // Delete tenant
  setSelectedTenant,  // Set the selected tenant
  setPageQuery,       // Update pagination params
  reset,              // Reset all state
} = useTenants();

useEditions

Hook for managing editions with full CRUD support.

import { useEditions } from '@abpjs/saas';

const {
  editions,           // Array of editions
  totalCount,         // Total edition count
  selectedEdition,    // Currently selected edition
  isLoading,          // Loading state
  error,              // Error message
  fetchEditions,      // Fetch all editions
  getEditionById,     // Get single edition
  createEdition,      // Create new edition
  updateEdition,      // Update existing edition
  deleteEdition,      // Delete edition
  setSelectedEdition, // Set the selected edition
  reset,              // Reset all state
} = useEditions();

Services

SaaSService

Service class for SaaS API operations.

import { SaaSService } from '@abpjs/saas';
import { useRestService } from '@abpjs/core';

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

  // Tenant operations
  await service.getTenants({ maxResultCount: 10, skipCount: 0 });
  await service.getTenantById(tenantId);
  await service.createTenant(tenantData);
  await service.updateTenant(tenantId, tenantData);
  await service.deleteTenant(tenantId);
  await service.getDefaultConnectionString(tenantId);
  await service.updateDefaultConnectionString(tenantId, connectionString);

  // Edition operations
  await service.getEditions();
  await service.getEditionById(editionId);
  await service.createEdition(editionData);
  await service.updateEdition(editionId, editionData);
  await service.deleteEdition(editionId);
}

Data Models

Tenant

interface Tenant {
  id: string;
  name: string;
  editionId: string;
  editionName: string;
  concurrencyStamp: string;
  isActive: boolean;
  activationState: TenantActivationState;
  activationEndDate: string;
}

enum TenantActivationState {
  Active = 0,
  ActiveWithLimitedTime = 1,
  Passive = 2,
}

Edition

interface Edition {
  id: string;
  displayName: string;
}

interface EditionCreateDto {
  displayName: string;
}

interface EditionUpdateDto {
  displayName: string;
}

Tenant Connection String

interface TenantConnectionString {
  name: string;
  value: string;
}

Constants

SAAS_ROUTES

Default route configuration for the SaaS module:

import { SAAS_ROUTES } from '@abpjs/saas';

// Use in your router configuration
const routes = [
  ...SAAS_ROUTES.routes,
  // your other routes
];

Router Setup Example

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { TenantsComponent, EditionsComponent } from '@abpjs/saas';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/saas">
          <Route index element={<Navigate to="tenants" replace />} />
          <Route path="tenants" element={<TenantsComponent />} />
          <Route path="editions" element={<EditionsComponent />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ABP Permissions

This package respects ABP's SaaS permissions:

| Permission | Description | |------------|-------------| | Saas.Tenants | View tenants | | Saas.Tenants.Create | Create tenants | | Saas.Tenants.Update | Update tenants | | Saas.Tenants.Delete | Delete tenants | | Saas.Tenants.ManageFeatures | Manage tenant features | | Saas.Tenants.ManageConnectionStrings | Manage connection strings | | Saas.Editions | View editions | | Saas.Editions.Create | Create editions | | Saas.Editions.Update | Update editions | | Saas.Editions.Delete | Delete editions | | Saas.Editions.ManageFeatures | Manage edition features |

Related Packages

• @abpjs/core - Core infrastructure (required)
• @abpjs/theme-shared - Shared UI components (required)
• @abpjs/feature-management - Feature management (required)
• @abpjs/tenant-management - Basic tenant management
• @abpjs/identity-pro - Identity Pro features
• @abpjs/audit-logging - Audit logging

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