🐛(frontend) Handle Breadcrumbs overflow#695
Open
PanchoutNathan wants to merge 2 commits into
Open
Conversation
The breadcrumb chain briefly disappeared when navigating between folders: the new item id triggered fresh queries for both the item and its breadcrumb, and while those were in flight the chain was empty and the wrapper short-circuited to null. Two changes keep the previous chain visible until the new one is fully resolved: - Add `placeholderData: previousData` to the breadcrumb query and introduce `useItemWithBreadcrumb`, which fetches the item and its breadcrumb together so the two never go out of sync. - Drop the early `return null` in AppExplorerBreadcrumbs so the wrapper renders even when `item` is momentarily undefined. An e2e test slows down the breadcrumb endpoint and verifies the old chain stays visible until the new fetch resolves.
Long folder chains used to overflow the explorer container or push the action buttons out of view. Breadcrumbs now collapse the middle items into an ellipsis dropdown when the chain doesn't fit, while keeping the root and the current folder always visible. - A hidden measurement layer renders the full chain off-screen so item, separator and ellipsis widths can be computed without affecting layout. A ResizeObserver re-runs the fit calculation when the container resizes. - Each breadcrumb item now carries `label` / `onClick` / `isActive` metadata so the ellipsis dropdown can navigate just like the inline buttons. - Bump @gouvfr-lasuite/ui-kit to 0.20.2 for the DropdownMenu API used by the ellipsis menu. - e2e: a new spec asserts collapse behaviour with long folder names. `expectDefaultRoute` is scoped to the visible breadcrumbs container because the measurement layer duplicates every test id. The move-modal helper now targets the "Search results" button rather than its text node, matching the new ui-kit rendering.
|
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
1 participant
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.
Purpose
Long breadcrumb chains used to overflow the explorer container, and
the chain briefly disappeared when navigating between folders.
Proposal
chain doesn't fit; root and current folder stay visible. A hidden
measurement layer computes the fit and a ResizeObserver re-runs on
container resize.
placeholderDatato the breadcrumb query and fetching the item andits breadcrumb together via a new
useItemWithBreadcrumbhook.@gouvfr-lasuite/ui-kitto 0.20.2 for the DropdownMenu used bythe ellipsis menu.
stability while a breadcrumb fetch is in flight.