Your task is to build a simple dashboard for managing feature flags. Feature flags are used to turn features on or off in an application without deploying new code.
You will be provided with a mock API to fetch and update these flags.
Core Features:
-
Display Flags:
- On initial load, fetch a list of feature flags from the mock API.
- Display a loading indicator while the data is being fetched.
- Display an appropriate error message if the API call fails.
- Render each flag's name, description, and its current status.
-
Filtering & Searching:
- Add controls to filter the list of flags by their status (
ENABLED, DISABLED). A set of radio buttons or a dropdown would be suitable.
- Include a text input to search for flags by their name.
- The search functionality should be debounced to avoid excessive filtering on every keystroke.
-
Toggle Status (Optimistic Update):
- Next to each flag, render a toggle switch to enable or disable it.
- When a user clicks the toggle, the UI should immediately reflect the new state (optimistic update).
- In the background, make an API call to persist the change.
- If the API call succeeds, the new state is confirmed.
- If the API call fails, the toggle should revert to its original state, and an error message should be briefly displayed to the user.