SCIX-813 feat(nav): add count badge to graphics menu item#817
SCIX-813 feat(nav): add count badge to graphics menu item#817thostetler merged 3 commits intoadsabs:masterfrom
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #817 +/- ##
========================================
+ Coverage 62.4% 62.5% +0.1%
========================================
Files 317 317
Lines 36564 36565 +1
Branches 1674 1671 -3
========================================
+ Hits 22802 22818 +16
+ Misses 13724 13709 -15
Partials 38 38
🚀 New features to boost your workflow:
|
796687e to
7220a63
Compare
There was a problem hiding this comment.
Pull request overview
Risk summary: Medium — user-facing navigation change is low risk, but the updated graphics count query can currently fire with an undefined bibcode, and the graphics page still links out to http:// URLs.
This PR adds a figure-count badge to the Abstract side navigation’s Graphics item (matching existing count-badge patterns), reduces redundant graphics-count refetching via React Query staleTime, and fixes an MSW handler route pattern for the graphics endpoint.
Changes:
- Show a count badge for Graphics in the Abstract side nav and disable when count is
0. - Add
staleTime: 5mintouseGetGraphicsCountto reduce refetching while navigating. - Fix MSW graphics handler routing (
':id'→'/:id') and add/extend a test to assert the badge appears.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/AbstractSideNav/AbstractSideNav.tsx |
Adds CountBadge as rightElement for the Graphics nav item using graphicsCount. |
src/api/graphics/graphics.ts |
Adds a 5-minute staleTime for the graphics-count query. |
src/mocks/handlers/graphics.ts |
Fixes MSW route matching for the graphics endpoint by adding the missing /. |
src/components/__tests__/AbstractSideNav.test.tsx |
Adds a test that waits for and asserts the Graphics count badge. |
src/pages/abs/[id]/graphics.tsx |
Normalizes thumbnail URLs to https:// when rendering NextImage. |
| href={figure.images[0].highres} | ||
| > | ||
| <NextImage src={figure.images[0].thumbnail} width="150" height="150" alt={figure.figure_label} /> | ||
| <NextImage | ||
| src={figure.images[0].thumbnail.replace(/^http:\/\//, 'https://')} | ||
| width="150" | ||
| height="150" | ||
| alt={figure.figure_label} |
There was a problem hiding this comment.
The thumbnail URL is normalized to HTTPS, but the click-through href still uses http:// (e.g., doi.org). This can trigger mixed-content/insecure navigation warnings from an HTTPS page and is inconsistent with the thumbnail fix. Consider normalizing figure.images[0].highres to HTTPS as well (or using a shared URL-normalization helper for both).
| const { data } = useQuery({ | ||
| queryKey: graphicsKeys.primary(bibcode), | ||
| queryFn: fetchGraphics, | ||
| retry: retryFn, | ||
| staleTime: 1000 * 60 * 5, | ||
| meta: { params, skipGlobalErrorHandler: true }, | ||
| ...options, | ||
| }); |
There was a problem hiding this comment.
useGetGraphicsCount will execute a query even when bibcode is undefined (the type is optional), resulting in requests like /graphics/undefined and caching under a key with an undefined bibcode. Add an enabled: !!bibcode default (while still allowing callers to override via options) so the query is skipped until a valid bibcode is available.
| await waitFor(() => { | ||
| const graphicsText = screen.getAllByText('Graphics'); | ||
| // Walk up to the nearest button/link container | ||
| const container = graphicsText[0].closest('a, button'); | ||
| expect(container).toBeTruthy(); | ||
| expect(container).toHaveTextContent('7'); | ||
| }); |
There was a problem hiding this comment.
This test assertion is fairly brittle: it relies on getAllByText('Graphics'), picks the first match, then walks up the DOM with closest('a, button'). This can become flaky if both the side + top nav render in the DOM or if the markup changes. Prefer querying the specific nav item by accessible role/name (e.g., a link/button named "Graphics") and then asserting the badge within that element (using Testing Library within), ideally with findBy... instead of wrapping synchronous queries in waitFor.
Also fix MSW graphics handler route (missing leading slash on :id param).
c8df743 to
3184f7f
Compare
Summary
staleTime: 5mintouseGetGraphicsCountto reduce redundant refetches when navigating between abstract subpages':id'→'/:id')