Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ui] For runs targeting assets, show >1 asset in the Target column #26122

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[ui] For runs targeting assets, show >1 asset in the Target column #26122

wants to merge 1 commit into from

Commits on Nov 25, 2024

  1. [ui] For runs targeting assets, show >1 asset in the Target column 

    We’ve had reports that users who launch small N numbers of assets together find the new run feed UI difficult to use, since it shows either “asset name” or “2 assets” in the Target column. This PR:

- Expands the target column a bit
- Shows as many asset / check tags as will fit in the available space, and then “X more”

The implementation of this uses a new hook `useAdjustChildVisibilityToFill`. The idea is that your component renders some reasonable max number of tags (10) and a more tag, and the hook uses a resize observer + layout effect to show/hide the tags to fit the available space.  I tried doing this using React state, but it looks bad if you can see it adding / removing tags. I think the other approach would be to write a tag “measure” function, or otherwise repeatedly render + size them offscreen, but that’d still force layouts, and in this case the tags are not identical react components (the “4 more” tag is slightly different)

I added a storybook that makes it easy to test what this looks like in a bunch of scenarios.

Sidenote: There’s a bunch of cruft here because the “Target” column components all have to support a “tags” rendering and a “plain” rendering.  This is going away soon when we remove the FF allowing users to revert to the old runs page, and I think it’ll clean up this code!
    bengotow committed Nov 25, 2024
    Configuration menu
    Copy the full SHA
    5d19ed5 View commit details
    Browse the repository at this point in the history