Skip to content

🐛 Fix missing useCardLoadingState params across 3 cards#4330

Merged
clubanderson merged 1 commit intomainfrom
fix/card-loading-state-batch
Apr 2, 2026
Merged

🐛 Fix missing useCardLoadingState params across 3 cards#4330
clubanderson merged 1 commit intomainfrom
fix/card-loading-state-batch

Conversation

@clubanderson
Copy link
Copy Markdown
Collaborator

@clubanderson clubanderson commented Apr 2, 2026

Summary

  • EtcdStatus: Add missing isRefreshing to useCachedPods() destructuring and useCardLoadingState call — the refresh icon in the CardWrapper header never animated during background data updates.
  • AdmissionWebhooks: Add isRefreshing state tracking to the useAdmissionWebhooks hook (interface, state, set/clear in refetch) and pass it through to useCardLoadingState — same refresh icon animation bug.
  • QuotaHeatmap: Add useCardLoadingState call entirely (was completely missing), replacing the hand-rolled isLoading && pods.length === 0 check with showSkeleton. Wire up isRefreshing, isDemoFallback, isFailed, and consecutiveFailures — card was disconnected from the CardWrapper state system (no demo badge, no yellow outline, no refresh icon, no failure badge).

Note: Issues #4314, #4307, #4303, and #4300 reference WarningEvents, NodeConditions, DNSHealth, and NetworkPolicyCoverage respectively. These cards already have the correct wiring on main — the fixes were likely applied in prior PRs. Only 3 cards (EtcdStatus, AdmissionWebhooks, QuotaHeatmap) still needed fixes.

Fixes #4322, Fixes #4310, Fixes #4305

Test plan

  • Open dashboard with EtcdStatus card visible, trigger background refresh — verify CardWrapper header refresh icon animates
  • Open dashboard with AdmissionWebhooks card visible, trigger background refresh — verify refresh icon animates
  • Open dashboard with QuotaHeatmap card in demo mode — verify Demo badge and yellow outline appear
  • Simulate API failure for QuotaHeatmap — verify failure badge appears on the card
  • Build passes (npm run build)
  • Lint passes on changed files

@clubanderson
🐛 Fix missing useCardLoadingState params across 3 cards
9ed3c1f 
- EtcdStatus: add missing isRefreshing to useCachedPods destructuring
  and useCardLoadingState call
- AdmissionWebhooks: add isRefreshing state tracking to
  useAdmissionWebhooks hook and pass it to useCardLoadingState
- QuotaHeatmap: add useCardLoadingState call entirely (was missing),
  replacing hand-rolled loading check with showSkeleton, and wire up
  isRefreshing, isDemoFallback, isFailed, consecutiveFailures

Fixes #4322, Fixes #4310, Fixes #4305

Signed-off-by: Andrew Anderson <andy@clubanderson.com>
Copilot AI review requested due to automatic review settings April 2, 2026 21:00
@kubestellar-prow kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Apr 2, 2026
@kubestellar-prow
Copy link
Copy Markdown
Contributor

kubestellar-prow bot commented Apr 2, 2026

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign mikespreitzer for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@clubanderson clubanderson merged commit a144416 into main Apr 2, 2026
16 checks passed
@kubestellar-prow kubestellar-prow bot deleted the fix/card-loading-state-batch branch April 2, 2026 21:01
@kubestellar-prow kubestellar-prow bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Apr 2, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

Thank you for your contribution! Your PR has been merged.

Check out what's new:

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 2, 2026 •
edited
Loading

✅ Deploy Preview for kubestellarconsole ready!

Name Link
🔨 Latest commit 9ed3c1f
🔍 Latest deploy log https://app.netlify.com/projects/kubestellarconsole/deploys/69ced90b93a7210008226e00
😎 Deploy Preview https://deploy-preview-4330.console-deploy-preview.kubestellar.io
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI reviewed Apr 2, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR aligns three dashboard cards (EtcdStatus, AdmissionWebhooks, QuotaHeatmap) with the shared useCardLoadingState / CardWrapper state-reporting contract so header-level UX (refresh animation, demo/failure indicators) stays in sync with each card’s underlying data lifecycle.

Changes:

  • Wire isRefreshing into useCardLoadingState for EtcdStatus and AdmissionWebhooks so the CardWrapper header refresh indicator can animate during background refresh.
  • Add isRefreshing tracking to the useAdmissionWebhooks hook API/result.
  • Add a missing useCardLoadingState integration to QuotaHeatmap, replacing a hand-rolled skeleton condition with showSkeleton and reporting demo/failure/refresh state.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
web/src/hooks/useAdmissionWebhooks.ts Adds isRefreshing state to the hook result and toggles it during silent/background refetches.
web/src/components/cards/AdmissionWebhooks.tsx Passes isRefreshing into useCardLoadingState so CardWrapper can animate refresh and show correct status badges.
web/src/components/cards/EtcdStatus.tsx Destructures and forwards isRefreshing from useCachedPods() into useCardLoadingState.
web/src/components/cards/QuotaHeatmap.tsx Integrates useCardLoadingState and uses showSkeleton to connect the card to CardWrapper’s unified state system.

web/src/hooks/useAdmissionWebhooks.ts
Comment on lines 155 to 162
const refetch = useCallback(async (silent = false) => {
if (!silent && !initialLoadDone.current) {
setIsLoading(true)
}
if (silent) {
setIsRefreshing(true)
}

Copy link

Copilot AI Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isRefreshing was added and is now used to drive CardWrapper refresh animation, but there’s no unit test asserting the new behavior (e.g., refetch(true) sets isRefreshing true while the request is in-flight and resets it afterward). Since this hook already has a dedicated test file, please add a test to prevent regressions in the refresh-indicator wiring.

Copilot uses AI. Check for mistakes.
@clubanderson
Copy link
Copy Markdown
Collaborator Author

clubanderson commented Apr 2, 2026

🔄 Auto-Applying Copilot Code Review

Copilot code review found 0 code suggestion(s) and 1 general comment(s).

Also address these general comments:

  • web/src/hooks/useAdmissionWebhooks.ts (line 162): isRefreshing was added and is now used to drive CardWrapper refresh animation, but there’s no unit test asserting the

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

Copilot code review Copilot

Labels

dco-signoff: yes Indicates the PR's author has signed the DCO. size/S Denotes a PR that changes 10-29 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

3 participants

@clubanderson