🚩 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
|
- Updated `switchApiVersion()` to reset all async states
|
||||||
- Result: Cleaner state management, consistent error handling pattern
|
- 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:**
|
**Testing:**
|
||||||
- All 91 existing tests continue to pass
|
- All 91 existing tests continue to pass
|
||||||
- Build verification successful (no syntax errors)
|
- Build verification successful (no syntax errors)
|
||||||
|
|||||||
Reference in New Issue
Block a user