Added team filter support #195
Conversation
📝 WalkthroughWalkthroughThis pull request updates the global state data model to include a new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant O as OptionsPicker
participant F as optionPickerFactory
participant G as Global State
U->>O: Initiates onChange event
O->>F: Call optionPickerFactory()
F->>G: Read teams from FnGlobalState
G-->>F: Return teams array
F->>F: Map teams to teamFilter
F-->>O: Return picker with teamFilter & mfeState
O->>O: Inline onChange calls onFilterOrSearchOptions
sequenceDiagram
participant R as RenderFNDashboard
participant M as mfeLocationService
R->>M: getHistory()
M-->>R: Return history
R->>M: getLocation()
M-->>R: Return location
Note over R, M: useEffect triggers pathname change
R->>M: fnPathnameChange()
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx (1)
56-70: Implemented team filtering logicThe code now checks if the FN Dashboard is active and if there are teams in the metadata, then creates filter options based on those teams. This implementation correctly merges team filter options with existing options when teams are present.
However, the selected state for all team filters is initially set to
false. Consider if there should be a way to persist selected team filters across component re-renders.You might consider adding a mechanism to save and restore selected team filters, especially if users would expect their filter selections to persist across different interactions with the dashboard.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
public/app/core/reducers/fn-slice.ts(2 hunks)public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx(2 hunks)public/app/fn-app/create-mfe.ts(2 hunks)public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx(4 hunks)public/app/fn-app/types.ts(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
public/app/fn-app/types.ts (1)
public/app/core/reducers/fn-slice.ts (1) (1)
FnGlobalState(7-21)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build-and-test
🔇 Additional comments (12)
public/app/core/reducers/fn-slice.ts (2)
18-20: Added metadata for team filtering supportThe addition of the
metadataproperty with ateamsarray provides a structured way to store team-related information in the global state, enabling team filtering functionality across the application.
63-65: Properly initialized the metadata propertyThe initialization of the
metadataproperty with an empty teams array in theINITIAL_FN_STATEensures that the state is properly structured from the start, preventing potential null/undefined errors when accessing this property.public/app/fn-app/create-mfe.ts (2)
208-208: Code formatting adjustmentThis change appears to be a simple reformatting of the code, maintaining the same functionality while potentially improving readability or consistency.
283-283: Added metadata support to state updatesThe inclusion of the
metadataproperty in theupdatePartialFnStatesdispatch ensures that team information persists during app updates, which is essential for the team filtering functionality to work correctly.public/app/features/variables/pickers/OptionsPicker/OptionsPicker.tsx (1)
165-167: Refactored event handler for improved readabilityThe onChange handler now uses an inline arrow function instead of directly referencing the method. This approach is more explicit about what happens when the input changes and follows modern React patterns.
public/app/fn-app/fn-dashboard-page/render-fn-dashboard.tsx (4)
10-10: Exported location service for external useExporting the location service as
mfeLocationServicemakes it available to be imported and used in other components, promoting better code organization and reuse.
20-20: Updated history property to use mfeLocationServiceThis change ensures consistency with the exported location service, maintaining the same behavior while using the newly exported service.
53-53: Updated function call to use mfeLocationServiceThis change maintains consistency with the location service renaming, ensuring that the pathname change functionality continues to work as expected.
65-65: Updated location access to use mfeLocationServiceThis change ensures consistency with the location service renaming and makes the code more maintainable by using the exported service throughout the component.
public/app/fn-app/types.ts (3)
3-3: Import updated to support team filtering.The import change from
GrafanaThemeTypetoFnGlobalStatesupports the team filtering feature by bringing in the necessary state interface that contains the new metadata.teams property.
19-19: Good refactoring to extend FnGlobalState.This is a clean approach that reduces duplication by having
FNDashboardPropsextendFnGlobalStaterather than redefining the same properties. This change consolidates the dashboard properties and allows the component to access the newmetadata.teamsarray needed for team filtering.The interface now inherits several properties from
FnGlobalStateincluding:
- uid, slug, version (dashboard identifiers)
- mode, controlsContainer, pageTitle (UI elements)
- queryParams (navigation)
- metadata.teams (new team filtering capability)
19-26:❓ Verification inconclusive
Verify compatibility with existing component usages.
While this inheritance-based approach is cleaner, it represents a structural change to the interface. Ensure that all components using
FNDashboardPropsexpect these additional properties.
🏁 Script executed:
#!/bin/bash # Find all files that import and use FNDashboardProps rg "FNDashboardProps" --type ts --type tsx -A 3 -B 3Length of output: 80
I'll need to gather more information on the usages of
FNDashboardPropssince the initial search failed due to an issue with the file type flag. Let's re-run the search with a revised command that explicitly targets both.tsand.tsxfiles:Please run this updated script and share the output so we can verify all component usages before finalizing the review comment.
🏁 Script executed:
#!/bin/bash # Searching for FNDashboardProps usage in .ts and .tsx files using glob patterns echo "Searching for FNDashboardProps usage in .ts and .tsx files..." rg "FNDashboardProps" -g "*.ts" -g "*.tsx" -A 3 -B 3Length of output: 11382
Action: Verify compatibility with new FNDashboardProps structure across component usages
The interface now extends
FnGlobalStateand includes additional properties. Please ensure that every component importing or referencingFNDashboardPropsis updated to supply and handle the inherited properties correctly. Notable files using this interface include:
- public/app/fn-app/fn-app-provider.tsx – where a subset of properties is picked.
- public/app/fn-app/create-mfe.ts – which references properties like
modeviaFNDashboardProps['mode'].- public/app/fn-dashboard-page (fn-dashboard.tsx and render-fn-dashboard.tsx) – that directly utilize the properties from the interface.
- public/app/features/dashboard/containers/DashboardPage.tsx – which accesses properties like
versionandisLoadingfrom the interface.Please confirm (ideally via manual verification or targeted tests) that existing component usages account for the structural change introduced by the inherited properties.
GurinderRawala
merged commit 874cb7a
into
coderabbit_micro_frontend
Summary by CodeRabbit
New Features
Refactor