FlagsPanel Component

A complete admin interface for managing feature flags in development and testing

Admin Panel Overview

Understanding the FlagsPanel component and its capabilities

The FlagsPanel component provides a ready-to-use admin interface for managing feature flags. It's perfect for development, testing, and controlled production environments.

Key Features

🎛

Real-time Control: Toggle flags instantly and see changes across your application

🔄

Cross-Tab Sync: Changes are synchronized across all browser tabs automatically

🎨

Customizable UI: Style to match your application's design system

🔐

Secure Storage: All changes are encrypted and persisted locally

Production Usage

While the FlagsPanel can be used in production, ensure proper access controls are in place. Consider environment-specific rendering or authentication.

Live Admin Panel

Try the admin panel with real feature flags

Here's the actual admin panel in action. Try toggling flags and then navigate to other pages to see the changes applied instantly:

Interactive Admin Panel

Toggle flags and observe real-time synchronization

Demo Application Feature Flags

Total: 10Active: 3Inactive: 7

useNewHeader

showBetaFeatures

enableDarkMode

useAdvancedSearch

showNotifications

enableAnalytics

premiumFeatures

maintenanceMode

debugMode

superAdmin

Testing Instructions

Toggle flags using the buttons above
Open multiple browser tabs to see cross-tab synchronization
Navigate to different demo pages to see conditional content change
Changes are persisted in encrypted localStorage
Refresh the page to reset all flags to their defaults

Basic Usage

How to integrate the FlagsPanel into your application

Adding the FlagsPanel to your application is straightforward. It automatically detects all available flags from your FlagsProvider:

Basic Integration

import { FlagsPanel } from '@pursuit-amsterdam/feature-flags';

function AdminPage() {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      
      {/* Basic panel with default styling */}
      <FlagsPanel />
      
      {/* Panel with custom title */}
      <FlagsPanel title="Production Feature Flags" />
    </div>
  );
}

Environment-Specific Usage

You can conditionally render the admin panel based on environment or user permissions:

// Only show in development
{process.env.NODE_ENV === 'development' && (
  <FlagsPanel title="Development Flags" />
)}

// Show for admin users
{user.role === 'admin' && (
  <FlagsPanel title="Admin Controls" />
)}

// Combine with feature flags
<Flags authorizedFlags="showAdminPanel">
  <FlagsPanel title="Flag Management" />
</Flags>

Customization Options

Styling and configuring the admin panel

The FlagsPanel component accepts several props for customization:

Customization Example

<FlagsPanel
  title="Custom Feature Flags"
  className="my-custom-panel bg-gray-100 p-4 rounded-lg"
  buttonClassName="bg-blue-600 text-white hover:bg-blue-700"
  titleClassName="text-2xl font-bold text-gray-800"
  showDescription={true}
/>

Styling Props

className - Overall panel styling

titleClassName - Title text styling

buttonClassName - Flag toggle button styling

containerClassName - Flag container styling

Behavior Props

title - Panel heading text

showDescription - Show flag descriptions

Cross-Tab Synchronization

Real-time synchronization across browser tabs

One of the most powerful features of the admin panel is automatic synchronization across browser tabs. This makes testing and development much more efficient.

How It Works

Flag Change Detection: When you toggle a flag in the admin panel, the change is immediately detected

Local Storage Update: The new flag state is encrypted and saved to localStorage

Storage Event Broadcast: A storage event is triggered to notify other tabs

Tab Synchronization: All other tabs receive the event and update their flag state

UI Re-render: Components using flags automatically re-render with new state

Try It Yourself

Open this page in multiple browser tabs, toggle some flags in one tab, and watch them update in real-time in the other tabs!

Synchronization Implementation

// The library handles this automatically, but here's the concept:

useEffect(() => {
  const handleStorageChange = (e: StorageEvent) => {
    if (e.key === 'feature-flags' && e.newValue) {
      const newFlags = decrypt(e.newValue);
      setFlags(newFlags);
    }
  };

  window.addEventListener('storage', handleStorageChange);
  return () => window.removeEventListener('storage', handleStorageChange);
}, []);

Integration Guide

Best practices for adding admin panels to your projects

📋 Development Setup

Development Admin Route

// pages/admin/flags.tsx (Next.js) or similar
import { FlagsPanel } from '@pursuit-amsterdam/feature-flags';

export default function FlagsAdmin() {
  // Only accessible in development
  if (process.env.NODE_ENV !== 'development') {
    return <div>Not available in production</div>;
  }

  return (
    <div className="admin-layout">
      <h1>Development Tools</h1>
      <FlagsPanel title="Feature Flag Controls" />
    </div>
  );
}

🔐 Authenticated Access

Protected Admin Panel

import { useAuth } from './hooks/useAuth';
import { FlagsPanel } from '@pursuit-amsterdam/feature-flags';

export default function SecureAdmin() {
  const { user, isAdmin } = useAuth();

  if (!user || !isAdmin) {
    return <div>Access denied</div>;
  }

  return (
    <div>
      <h1>Admin Dashboard</h1>
      <FlagsPanel 
        title="Production Feature Flags"
        className="admin-panel"
      />
    </div>
  );
}

API Reference

Complete reference for the FlagsPanel component

Props

Prop	Type	Required	Description
title	string	No	Panel heading text. Default: "Feature Flags"
className	string	No	CSS classes for the main panel container
titleClassName	string	No	CSS classes for the title element
buttonClassName	string	No	CSS classes for flag toggle buttons

🎉 Congratulations!

You've explored all the components in the feature flags library. You now have the knowledge to implement powerful feature flag systems in your applications!

← Back to Introduction View on GitHub →