fix(ui): refetch environments when window regains focus or reconnects#4774
Conversation
The environment picker was showing stale data for deleted/merged branches and closed pull requests until the user performed a hard refresh. This occurred because RTK Query's default caching behavior doesn't automatically refetch data when the browser tab regains focus or when network reconnects. Changes: - Added refetchOnFocus and refetchOnReconnect to environmentsApi config - Added refetchOnMountOrArgChange to useListEnvironmentsQuery in Layout - Added refetchOnMountOrArgChange to useListBranchEnvironmentsQuery in BranchActionsDropdown Now when users switch back to the Flipt tab or reconnect to the network, the environment list will automatically refetch, removing any deleted branches or closed PRs from the picker without requiring a manual refresh. Fixes #4770 Signed-off-by: Mark Phelps <[email protected]>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## v2 #4774 +/- ##
==========================================
- Coverage 58.55% 58.50% -0.05%
==========================================
Files 135 135
Lines 16840 16840
==========================================
- Hits 9860 9853 -7
- Misses 6294 6300 +6
- Partials 686 687 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes an issue where deleted branches and closed pull requests were not being removed from the environment picker until a hard refresh was performed. The solution implements automatic refetching of environment data using RTK Query's built-in capabilities.
- Configures RTK Query to automatically refetch data when the browser tab regains focus or network reconnects
- Adds refetch-on-mount behavior to ensure fresh data when components mount
- Ensures the environment picker always displays current data without manual refresh
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| ui/src/app/environments/environmentsApi.ts | Adds global refetch configuration for focus and reconnect events |
| ui/src/app/Layout.tsx | Enables refetch on mount for main environment list |
| ui/src/components/environments/branches/BranchActionsDropdown.tsx | Enables refetch on mount for branch environment queries |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
The environment picker was showing stale data for deleted/merged branches and closed pull requests until the user performed a hard refresh. This occurred because: 1. RTK Query's default caching doesn't automatically refetch on focus/reconnect 2. The backend polls upstream every 30s, but the UI wasn't polling for updates Changes: - Added refetchOnFocus and refetchOnReconnect to environmentsApi config - Added refetchOnMountOrArgChange to useListEnvironmentsQuery in Layout - Added 30s pollingInterval to useListEnvironmentsQuery to match backend fetch interval - Added refetchOnMountOrArgChange to useListBranchEnvironmentsQuery in BranchActionsDropdown - Added conditional 30s polling to namespace query when environment switcher is open Now the UI automatically refetches environments when: - The browser tab regains focus (refetchOnFocus) - Network reconnects (refetchOnReconnect) - Every 30 seconds via polling (matching backend Git fetch interval) This ensures deleted branches and closed PRs are removed from the environment picker within 30 seconds without requiring a manual page refresh. Fixes #4770 Signed-off-by: Mark Phelps <[email protected]>
a9127d3 to
c870585
Compare
dosubot
Bot
added
the
size:S
|
Related Documentation Checked 4 published document(s). No updates required. You have 1 draft document(s). Publish docs to keep them always up-to-date How did I do? Any feedback? |
erka
left a comment
erka
left a comment
There was a problem hiding this comment.
The git sync is another thing which impacts this. It could add some extra time in the worst case.
|
Yeah def the timing could be off max 1m I think |
|
Documentation Updates Checked 4 published document(s). No updates required. You have 1 draft document(s). Publish docs to keep them always up-to-date How did I do? Any feedback? |
…flipt-io#4774) Signed-off-by: tejasvini1 <[email protected]>
Summary
Fixes the issue where deleted/merged branches and closed pull requests were not being removed from the environment picker until the user performed a hard refresh.
The root cause was twofold:
This meant stale environment data persisted in the UI even after the backend detected and removed deleted branches.
Changes
ui/src/app/environments/environmentsApi.ts: AddedrefetchOnFocus: trueandrefetchOnReconnect: trueto the environmentsApi configuration to enable automatic refetching on focus/reconnect eventsui/src/app/Layout.tsx:refetchOnMountOrArgChange: trueto ensure fresh data on component mountpollingInterval: 30000to poll every 30 seconds, matching the backend Git fetch intervalui/src/components/environments/EnvironmentNamespaceSwitcher.tsx:pollingInterval: open ? 30000 : 0to poll for namespace changes only when the switcher popover is open (resource optimization)ui/src/components/environments/branches/BranchActionsDropdown.tsx: AddedrefetchOnMountOrArgChange: trueto useListBranchEnvironmentsQuery to keep branch data freshBehavior
^ here you can see several of the polling requests
Now the environment list automatically refetches when:
This ensures deleted branches and closed/merged PRs are removed from the environment picker within 30 seconds without requiring a manual page refresh.
Timeline for upstream branch deletions:
Related
Fixes #4770 (comment)