🚩 Add feature flags system with configuration, state management, conditional rendering, developer tools, router integration, and comprehensive testing

This commit is contained in:
2026-01-29 02:08:52 +00:00
parent be79a96387
commit 771dd91118

View File

@@ -279,6 +279,48 @@ npm test -- useAsyncState
- Updated `switchApiVersion()` to reset all async states
- Result: Cleaner state management, consistent error handling pattern
### Step 10-12: Feature Flags System Implementation
**Feature Flag Configuration:**
- Created comprehensive flag definitions in `src/config/feature-flags.js`
- 9 feature flags defined: gamemaster features, challonge features, developer tools, UI features
- Each flag includes: name, description, enabled state, required permissions, tags
- Support for both development and production environments
**useFeatureFlags Composable:**
- Full state management with local overrides (developer mode)
- Permission-based flag checking (integrates with useAuth)
- Methods: `isEnabled()`, `toggle()`, `getFlags()`, `setBackendFlags()`, `fetchFromBackend()`
- Persists overrides to localStorage
- Reactive flag state updates
**FeatureFlag Component:**
- Wrapper component for conditional rendering: `<FeatureFlag flag="name">`
- Supports fallback slot for disabled state
- Clean API for hiding/showing features throughout app
- Fully reactive to flag changes
**Developer Tools Panel:**
- Beautiful slide-up panel with Ctrl+Shift+D shortcut
- Toggle any feature flag with live override badges
- Display authentication status, role, permissions
- Environment info (mode, version, API endpoints)
- Reset all overrides functionality
- Integrated into App.vue root component
**Router Integration:**
- Updated `src/router/guards.js` to check feature flags
- Routes can specify `meta: { featureFlag: 'flag-name' }`
- Automatically blocks navigation to disabled features
- Redirects to home when flag is off
- Works alongside existing auth guards
**Testing:**
- 7 tests for useFeatureFlags composable
- 7 tests for FeatureFlag component (render, fallback, reactivity)
- 8 tests for router guards (feature flags + auth protection)
- All 22 new tests passing ✅
**Testing:**
- All 91 existing tests continue to pass
- Build verification successful (no syntax errors)