fix(ui): restore a green Frontend Quality job - #98
Merged
Conversation
The `Frontend Quality` job fails on main because `npm run lint` reports two errors from the react-hooks rules that ship with eslint-config-next 16.3.x: * `react-hooks/immutability` in `file-upload.tsx` - `formatSize` was declared after the `handleFileSelect` callback that reads it. * `react-hooks/set-state-in-effect` in the errors page - the effect called a fetch helper that synchronously flipped the loading state. `formatSize` was duplicated in `file-upload.tsx` and `file-browser.tsx`, so it moves to `lib/utils.ts` as `formatBytes` (module scope, covered by tests) and both components use it. The errors page moves to React Query, matching every other data-loading page in the app, which removes the effect entirely.
Recent Radix UI releases no longer assign `displayName` to their primitives, so every wrapper that copied it (`Label.displayName = LabelPrimitive.Root.displayName` and friends) ended up with `undefined`. That is invisible in the browser but breaks eight assertions in the component suites and leaves React DevTools showing anonymous `ForwardRef` nodes. Each wrapper now declares its own name, which is what the rest of the ui components already did. The scroll bar keeps the name of the exported component, `ScrollBar`, instead of the Radix-internal `ScrollAreaScrollbar`.
Radix now passes `deferPointerDownOutside: true` for popovers, so an outside pointerdown no longer dismisses on its own - the layer waits for the click that follows, which stops a drag that ends outside the popover from closing it. The test fired only `pointerDown` and therefore never saw `onOpenChange`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
mainhas been red since late July. Every job exceptFrontend Qualitypasses on the current tip (2294805);Frontend Qualityfails at its Lint step, which also hides two further breakages in the Test step behind it. This PR fixes all three, one commit per cause.1. react-hooks lint errors (
npm run lint, exit 1)Both rules ship with the react-hooks plugin bundled by
eslint-config-next16.3.x.formatSizewas duplicated verbatim infile-upload.tsxandfile-browser.tsx, so it moves tolib/utils.tsasformatBytes(module scope, named constants, unit-tested) and both components consume it. The errors page moves to React Query, matching every other data-loading page in the app, which removes the offending effect rather than silencing it.2. Radix primitives no longer expose
displayNameRecent Radix releases (
@radix-ui/react-label2.1.15,react-select2.3.7,react-tabs1.1.21, …) droppeddisplayNamefrom their primitives —grep -c displayName node_modules/@radix-ui/react-label/dist/index.mjsreturns0. Every wrapper that copied it (Label.displayName = LabelPrimitive.Root.displayName) therefore hadundefined, failing 8 assertions and leaving anonymousForwardRefnodes in React DevTools. Each wrapper now declares its own name, as the non-Radix ui components already did.3. Popover dismissal is deferred to the following click
@radix-ui/react-popovernow passesdeferPointerDownOutside: true, so the dismissable layer waits for theclickafter an outsidepointerdown(a drag ending outside no longer closes the popover). The test fired onlypointerDownand never observedonOpenChange; it now simulates the full interaction.Verification
Ran exactly what CI runs, from a clean
origin/maincheckout:npm run lintnpm run test:runnpm run buildThe 13 remaining
no-unused-varswarnings are pre-existing and non-fatal; they are left alone so this change stays scoped to the breakage.Unblocks the open Dependabot PRs, which currently inherit this failure and cannot be judged on their own merits.