🚩 Add feature flags system with configuration, state management, conditional rendering, developer tools, router integration, and comprehensive testing
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user