Admin Dashboard - Feature Flag List

[tobi-bams]

Description:

Develop a user interface in the Admin Dashboard to display, manage, and interact with all feature flags and their associated endpoints. The UI should support toggling, editing, deleting, managing endpoints, and creating feature flags.

---

Deliverables

1. Feature Flags Tab:

   • Add a dedicated tab or section in the Admin Dashboard for feature flags.

   • On tab load, fetch feature flag data using the GET /feature_flags endpoint.

   • API Response Example:

     {
       "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. Table Layout:

   • Columns:

     • Name (Feature flag name)
     • Description (Feature flag description)
     • Status (Toggle for enabled/disabled state)
     • Actions (Buttons for edit, delete, and manage endpoints)

   • Row Actions:

     • Toggle: Enable or disable the feature flag by interacting with the PUT /feature_flags/{id} endpoint.
     • Edit Button: Logs "Edit Button has been clicked" to the console
     • Delete Button: Logs "Delete Button has been clicked" to the console
     • Manage Endpoints Button: Logs "Manage Endpoints button has been clicked" to the console

3. Create Feature Flag Button:

   • A button placed prominently above or near the table.
   • Clicking the button opens a modal or navigates to a new page for feature flag creation:
     • Fields: Name, Description, Enabled (default: false), Endpoints (dynamically add input fields).
     • API integration with POST /feature_flags.
     • API Request Body

         {
           "name": "Chat",
           "description": "Enable the chat feature",
           "enabled": false,
           "endpoints": [
              "/api/chat",
             "/api/chat/:id"
           ]
         }
     

4. Responsive Design:

   • Ensure the table and buttons are responsive for different screen sizes:
     • Collapse table columns into a card view on smaller screens.
     • Actions (toggle, edit, delete) should remain easily accessible.

5. Integration:

   • On Page Load:
     • Fetch the feature flags data using GET /feature_flags and populate the table.
   • Actions:
     • Handle all user interactions with appropriate API calls (PUT, DELETE, etc.).
     • Update the UI dynamically based on the API responses.

---

UI Mockup Context

1. Feature Flags Table (Desktop View):

   • Table headers: Name | Description | Status | Actions
   • Example row:
     | Chat | Enable the chat feature | ❌ Disabled | [Toggle] [Edit] [Delete] [Manage Endpoints] |

2. Feature Flags Table (Mobile View):

   • Collapse rows into cards:

     Name: Chat
     Description: Enable the chat feature
     Status: ❌ Disabled
     Actions: [Toggle] [Edit] [Delete] [Manage Endpoints]
     

3. Create Feature Flag Modal:

   • Form fields: Name (text input), Description (textarea), Enabled (toggle), Endpoints (dynamically add input fields).

---

Expected API Requests

• GET /feature_flags: Populate the table with all feature flags.
• PUT /feature_flags/{id}: Update the enabled status dynamically from the toggle.
• POST /feature_flags: Create a new feature flag.

---

Testing Checklist

• Ensure the table accurately reflects the API response.
• Test toggle functionality for enabling/disabling flags.
• Validate the modals for creating feature flags.
• Verify all API interactions return proper success messages and data updates.

UX Context:
Admins can view all feature flags in a table format. Toggles make it easy to change status, while buttons allow for more granular management.

[aliraza556]

@tobi-bams assign me

[Shoaibdev7]

@tobi-bams @humansinstitute I can help?

[saithsab877]

@humansinstitute assign me?