LCFS - Implement Frontend-Driven Feature Flags with Build-Time Configuration

Description:

Implement a build-time configuration system for managing feature flags in the frontend. The system will allow feature availability (e.g., Supplemental Reporting, Notifications) to be dynamically toggled using a centralized configuration class (window.lcfs_config). This approach ensures immediate updates upon reload, eliminates backend dependency, and simplifies feature flag management.

Acceptance Criteria:

Centralized Configuration:

A global window.lcfs_config object includes a feature_flags key for managing feature states.

Example structure:

window.lcfs_config = {
feature_flags: {
 supplementalReporting: true,
 notifications: false
},
keycloak: { /* Other configurations */ }
};

Helper Function:
- A utility function (isFeatureEnabled) provides safe access to feature flags.
- Example usage:
```
if (isFeatureEnabled('supplementalReporting')) {
// Feature logic here
}
```
Navbar Integration:
- Navigation menu dynamically hides items based on feature flag states.
Route Management:
- Routes for disabled features redirect users to the dashboard.
Environment Injection:
- Ensure window.lcfs_config is populated at build time with environment-specific values.
Fallback Defaults:
- Provide fallback defaults to prevent runtime errors if window.lcfs_config is incomplete.

Development Checklist:

Frontend Implementation:

Update window.lcfs_config with feature_flags object:

Example:

export const CONFIG = {
FEATURE_FLAGS: window.lcfs_config.feature_flags || {},
KEYCLOAK: {
 REALM: window.lcfs_config.keycloak.REALM || 'standard',
 CLIENT_ID: window.lcfs_config.keycloak.CLIENT_ID || 'default-client-id',
 AUTH_URL: window.lcfs_config.keycloak.AUTH_URL || 'https://auth-url',
 POST_LOGOUT_URL: window.lcfs_config.keycloak.POST_LOGOUT_URL || 'https://logout-url',
 SM_LOGOUT_URL: window.lcfs_config.keycloak.SM_LOGOUT_URL || 'https://sm-logout-url'
}
};

Helper Function:

Add a utility to check feature flag states:

export function isFeatureEnabled(featureName) {
return CONFIG.FEATURE_FLAGS[featureName] ?? false;
}

Update Navbar:

Modify the Navbar to hide items based on flags:

if (isFeatureEnabled('supplementalReporting')) {
navItems.push({ name: 'Supplemental Reporting', route: '/reports' });
}

Route Wrapping:

Protect feature routes using isFeatureEnabled:

<Route
path="/reports"
element={isFeatureEnabled('supplementalReporting') ? <Reports /> : <Navigate to="/" />}
/>

Environment-Specific Injection:
- Ensure window.lcfs_config is dynamically populated during the build process based on the target environment (dev, test, prod). In openshift we will need mounted config_maps with our config.js file

Testing:

Unit Tests:
- Test the isFeatureEnabled utility with various feature flag states.
Integration Tests:
- Verify that the Navbar and routes behave correctly when feature flags are toggled.
Manual Verification:
- Confirm the behavior of feature toggles across environments.

Purpose and Benefits:

Dynamic Updates: Enables immediate changes to feature availability upon reload.
No Backend Dependency: Reduces backend complexity and eliminates additional API endpoints.
Simplified Management: Centralizes feature configuration for easier maintenance and scalability.
Improved UX: Users only see features that are enabled, reducing confusion and errors.

bcgov / lcfs