Feature Flag Synchronization

[tobi-bams]

Description:

Implement functionality to fetch and store feature flag data dynamically on application page load. The data will be stored in a global state using MobX for efficient access and management. Provide helper methods to check feature flag statuses across the application.

---

Deliverables

1. API Integration:

   • Call the GET /feature_flags endpoint on application load.
   • Use the response format:

     {
       "success": true,
       "message": "Feature flags fetched successfully",
       "data": [
         {
           "name": "Chat",
           "description": "Enable the chat feature",
           "enabled": false,
           "uuid": "uuid-123",
           "endpoints": [
             { "path": "/api/chat", "uuid": "uuid-ep-1" },
             { "path": "/api/chat/:id", "uuid": "uuid-ep-2" }
           ]
         }
       ]
     }

2. Global State Management:

   • Define a MobX store to manage feature flags in the format:

     {
       Chat: false,
       AnotherFeature: true,
     }

   • Extract the name and enabled status from the API response to populate the store dynamically.

3. Helper Methods:

   • Create utility functions in the MobX store for feature flag lookups:

     const isFeatureEnabled = (featureName) => {
       return featureFlags[featureName] || false; // Defaults to false if feature doesn't exist
     };

4. Usage Example:

   • In frontend components, check feature status before rendering:

     if (isFeatureEnabled("Chat")) {
       showChatComponent();
     } else {
       hideChatComponent();
     }

---

Additional Considerations

• Log a warning if a feature flag is accessed in the code but doesn't exist in the store.

---

Expected Output for the Store:

After fetching, the store might look like this:

{
  Chat: false,
  Bounty: true,
  DashboardRedesign: false
}

[MahtabBukhari]

@tobi-bams @humansinstitute assign

[saithsab877]

@humansinstitute @tobi-bams assign me?