Feature/objective UI gating#280
Merged
Merged
Conversation
…e UI updates with config changes
…of objective state updates
…troller tab based on availability and update tab selection logic
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds frontend “capability gating” based on which backend controllers are currently available, so apps/navigation items and UI controls are only shown/enabled when the required hardware/controllers exist.
Changes:
- Added a Redux slice + API call to fetch and store available backend controllers, with refresh on WebSocket reconnect.
- Extended
APP_REGISTRYwithrequiredControllersand introduced filtering utilities to hide unavailable apps. - Updated navigation, App Manager, and LiveView/FRAME settings UI to conditionally render features based on controller presence.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/state/store.js | Registers the new backend capabilities slice in the Redux store. |
| frontend/src/state/slices/BackendCapabilitiesSlice.js | Adds async fetch + selectors for backend controller availability. |
| frontend/src/middleware/WebSocketHandler.js | Refetches controller availability on socket reconnect; formatting cleanup in objective signal handler. |
| frontend/src/hooks/useBackendControllerCapabilities.js | New hook to fetch capabilities and gate the selected plugin based on availability. |
| frontend/src/constants/appRegistry.js | Adds requiredControllers metadata and app filtering helpers. |
| frontend/src/components/navigation/NavigationDrawer.jsx | Filters sidebar app entries by controller availability. |
| frontend/src/components/LiveView.js | Conditionally renders Objective / Extended LED Matrix controls based on controller availability. |
| frontend/src/components/FRAMESettingsController.js | Conditionally renders Objective tab and auto-switches away if controller becomes unavailable. |
| frontend/src/components/AppManager/AppManager.jsx | Filters visible apps and stats by controller availability. |
| frontend/src/backendapi/apiGetAvailableControllers.js | Adds API helper to query /getAvailableControllers. |
| frontend/src/App.jsx | Wires the new capability hook into the app. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+15
to
+28
| const availableControllers = useSelector(selectAvailableControllers); | ||
|
|
||
| useEffect(() => { | ||
| dispatch(fetchAvailableControllers()); | ||
| }, [hostIP, apiPort, dispatch]); | ||
|
|
||
| useEffect(() => { | ||
| const hasObjectiveController = availableControllers.includes( | ||
| "ObjectiveController", | ||
| ); | ||
| const hasLEDMatrixController = availableControllers.includes( | ||
| "LEDMatrixController", | ||
| ); | ||
| const hasDPCController = availableControllers.includes("DPCController"); |
Comment on lines
+740
to
+747
| export const filterAppsByAvailableControllers = ( | ||
| apps, | ||
| availableControllers = [], | ||
| ) => { | ||
| return apps.filter((app) => | ||
| isAppAvailableForControllers(app, availableControllers), | ||
| ); | ||
| }; |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…UC2/ImSwitch into feature/objective-ui-gating
Franzili
pushed a commit
that referenced
this pull request
May 30, 2026
This pull request introduces dynamic controller capability detection to the frontend, ensuring that UI components and available applications adapt based on the controllers currently available from the backend. This prevents users from accessing features or apps that require unavailable hardware, improving user experience and robustness. The main changes include new hooks for controller detection, filtering of app lists and navigation items, and conditional rendering of UI components based on controller presence. **Backend controller capability detection and state management:** * Added a new hook `useBackendControllerCapabilities` that queries available controllers from the backend and updates the Redux store; it also ensures that the selected plugin is valid for the available controllers, reverting to a safe default if necessary. (`frontend/src/hooks/useBackendControllerCapabilities.js`, `frontend/src/App.jsx`) [[1]](diffhunk://#diff-1e38214eb3b82d0e040a32ce6e048e1c18528a003ec8b0a4807b24f0d7888ef3R1-R48) [[2]](diffhunk://#diff-a0eba768ed9d2a17091f82d46efb5e1c988f08185cc1e9989366995cdb4e3ba9R69) [[3]](diffhunk://#diff-a0eba768ed9d2a17091f82d46efb5e1c988f08185cc1e9989366995cdb4e3ba9R200-R206) * Implemented an API utility `apiGetAvailableControllers` to fetch the list of available controllers from the backend. (`frontend/src/backendapi/apiGetAvailableControllers.js`) **App registry and filtering logic:** * Extended the `APP_REGISTRY` to include a `requiredControllers` field for each app, and added utility functions `isAppAvailableForControllers` and `filterAppsByAvailableControllers` to filter apps based on available controllers. (`frontend/src/constants/appRegistry.js`) [[1]](diffhunk://#diff-779574da60c9977138085f33039af263256f6d02882260f1b0b061fe7653d33aR475) [[2]](diffhunk://#diff-779574da60c9977138085f33039af263256f6d02882260f1b0b061fe7653d33aR531) [[3]](diffhunk://#diff-779574da60c9977138085f33039af263256f6d02882260f1b0b061fe7653d33aR707) [[4]](diffhunk://#diff-779574da60c9977138085f33039af263256f6d02882260f1b0b061fe7653d33aR727-R748) **UI adaptation based on controller capabilities:** * Updated `AppManager` and `NavigationDrawer` to only display and enable apps that are compatible with the currently available controllers. (`frontend/src/components/AppManager/AppManager.jsx`, `frontend/src/components/navigation/NavigationDrawer.jsx`) [[1]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL47-R62) [[2]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL281-R311) [[3]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL298-R320) [[4]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL343-R368) [[5]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL353-R378) [[6]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL371-R396) [[7]](diffhunk://#diff-f58b57cee8fc5a505161ff77b0b6f6e419886e78bb1c48097ff7761e84fda5bfL470-R498) [[8]](diffhunk://#diff-a5adf019ae37a47eee448df08f4dcce7c8d7d0d74de2be463e1437d3fb1da1ccL17-R22) [[9]](diffhunk://#diff-a5adf019ae37a47eee448df08f4dcce7c8d7d0d74de2be463e1437d3fb1da1ccR51-R62) * Modified `FRAMESettingsController` and `LiveView` to conditionally render tabs and controls (e.g., Objective, Extended LED Matrix) only if the corresponding controllers are available, and to automatically switch tabs if a required controller becomes unavailable. (`frontend/src/components/FRAMESettingsController.js`, `frontend/src/components/LiveView.js`) [[1]](diffhunk://#diff-194d2e57e59f11829fe532a192e21b99a8fcfa0f157a5bb6760fd283ec9e5495L1-R10) [[2]](diffhunk://#diff-194d2e57e59f11829fe532a192e21b99a8fcfa0f157a5bb6760fd283ec9e5495L22-L57) [[3]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R30) [[4]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R67-R72) [[5]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R676-R677) [[6]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R692-R693) [[7]](diffhunk://#diff-98c10fd4b655ab7b1f6ad50e69ded7733ec826bf99fa81a60ddd9e2eaa613d07R739-R751) These changes ensure that the frontend always reflects the actual hardware/software capabilities reported by the backend, preventing UI errors and improving user guidance. --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces dynamic controller capability detection to the frontend, ensuring that UI components and available applications adapt based on the controllers currently available from the backend. This prevents users from accessing features or apps that require unavailable hardware, improving user experience and robustness. The main changes include new hooks for controller detection, filtering of app lists and navigation items, and conditional rendering of UI components based on controller presence.
Backend controller capability detection and state management:
useBackendControllerCapabilitiesthat queries available controllers from the backend and updates the Redux store; it also ensures that the selected plugin is valid for the available controllers, reverting to a safe default if necessary. (frontend/src/hooks/useBackendControllerCapabilities.js,frontend/src/App.jsx) [1] [2] [3]apiGetAvailableControllersto fetch the list of available controllers from the backend. (frontend/src/backendapi/apiGetAvailableControllers.js)App registry and filtering logic:
APP_REGISTRYto include arequiredControllersfield for each app, and added utility functionsisAppAvailableForControllersandfilterAppsByAvailableControllersto filter apps based on available controllers. (frontend/src/constants/appRegistry.js) [1] [2] [3] [4]UI adaptation based on controller capabilities:
Updated
AppManagerandNavigationDrawerto only display and enable apps that are compatible with the currently available controllers. (frontend/src/components/AppManager/AppManager.jsx,frontend/src/components/navigation/NavigationDrawer.jsx) [1] [2] [3] [4] [5] [6] [7] [8] [9]Modified
FRAMESettingsControllerandLiveViewto conditionally render tabs and controls (e.g., Objective, Extended LED Matrix) only if the corresponding controllers are available, and to automatically switch tabs if a required controller becomes unavailable. (frontend/src/components/FRAMESettingsController.js,frontend/src/components/LiveView.js) [1] [2] [3] [4] [5] [6] [7]These changes ensure that the frontend always reflects the actual hardware/software capabilities reported by the backend, preventing UI errors and improving user guidance.