🐞 Admin Portal: Dashboard doesn't automatically update when tab is clicked#2534
🐞 Admin Portal: Dashboard doesn't automatically update when tab is clicked#2534
Conversation
There was a problem hiding this comment.
Pull request overview
This PR aims to ensure the Admin Portal dashboard data refreshes when the user returns to (clicks) the Dashboard tab, addressing the parent issue linked in the description.
Changes:
- Adds a tab
actionintended to trigger a dashboard refresh when the Dashboard tab is clicked. - Introduces a
refreshRefplumbing path in the Election dashboard to trigger an Apollorefetch()via a hidden button. - Aligns Election tabs behavior with existing Election Event dashboard refresh patterns.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/admin-portal/src/resources/ElectionEvent/ElectionEventTabs.tsx | Adds a Dashboard tab action intended to trigger refresh via refreshRef. |
| packages/admin-portal/src/resources/Election/ElectionTabs.tsx | Adds refreshRef + Dashboard tab action and attempts to pass refreshRef down to the dashboard. |
| packages/admin-portal/src/components/dashboard/election/Dashboard.tsx | Adds hidden refresh button wired to Apollo refetch() and accepts refreshRef prop. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (showDashboard) { | ||
| result.push({ | ||
| label: t("electionScreen.tabs.dashboard"), | ||
| component: DashboardTab, | ||
| props: {refreshRef}, | ||
| action: () => refreshRef.current?.click(), | ||
| }) |
There was a problem hiding this comment.
The props: {refreshRef} entry in the tab definition is currently ignored by the shared Tabs component (it only renders <SelectedComponent {...propsFromTabs} />). As a result, DashboardTab never receives refreshRef, so the hidden refresh button ref is never attached and action: () => refreshRef.current?.click() will always be a no-op. Fix by either (a) passing refreshRef as a prop to <Tabs ...> (so it gets forwarded to the selected component), or (b) enhancing Tabs to merge elements[selectedTab].props into the selected component props.
| label: t("electionEventScreen.tabs.dashboard"), | ||
| component: DashboardTab, | ||
| props: {refreshRef, handleChildMount}, | ||
| action: () => refreshRef.current?.click(), |
There was a problem hiding this comment.
This tab action relies on refreshRef.current?.click(), but refreshRef is only placed on the tab object (props: {refreshRef, handleChildMount}) and the shared Tabs component does not pass per-tab props to the selected component. That means the dashboard’s hidden refresh button never receives the ref and this action will do nothing. Fix by passing refreshRef/handleChildMount to <Tabs> (common props) or by updating Tabs to apply elements[selectedTab].props when rendering the selected tab.
| onClick={() => { | ||
| doRefetch() |
There was a problem hiding this comment.
The hidden refresh <button> should set type="button" to avoid inadvertently submitting a surrounding form, and the handler should guard against missing query variables (e.g., canQueryStats false) before calling doRefetch(). Also consider handling the returned promise (e.g., void doRefetch() / catch) to avoid unhandled rejections if the refetch errors.
| onClick={() => { | |
| doRefetch() | |
| type="button" | |
| onClick={() => { | |
| if (!canQueryStats) { | |
| return | |
| } | |
| void doRefetch() |
Parent issue: https://github.com/sequentech/meta/issues/11606