UXE-685: Migrate VariantHistory page to Via by tsck · Pull Request #1925 · evergreen-ci/ui

tsck · 2026-09-02T02:35:02Z

https://jira.mongodb.org/browse/UXE-685

Summary

Migrate the VariantHistory page from LeafyGreen to Via.
Convert its styling from Emotion to CSS modules.

Screenshots

No Filters

Before

After

With Filters

Before

After

Loading

Before

After

Testing

Unit tests, type-check, lint, and build pass locally.
Playwright and Chromatic run on CI.

sophstad · 2026-09-10T16:45:08Z

-        {taskNamesForBuildVariant?.map((taskName) => (
-          <ComboboxOption key={taskName} value={taskName} />
+        {(taskNamesForBuildVariant ?? []).map((taskName) => (
+          <ComboboxItem key={taskName} id={taskName}>


Is it possible to have the dropdown (but not the parent input) take up the full width of the options? I think that was an option on LG. This is relevant here because often tasks have the same prefix with a different ending e.g. to indicate different hardware or OS versions.

This is kind of interesting. The LG combobox did have an dropdownWidthBasis prop that could be set to option or trigger. option would have made the width grow to the size of the largest option. However, trigger was the default and this prop was never actually set in Spruce. So before this change I believe that both the trigger and the options would have always been set to 300px I believe. If I'm missing something though and this isn't true, definitely let me know please!

Unfortunately dropdownWidthBasis is no longer a prop in Via. We could probably set some sort of max width in CSS, maybe? But I do think this is how it rendered previously if I'm no mistaken.

Interesting, that seems true but I guess the wrap worked better in LG (live here)

Giving some more width to the component makes sense though! And should the dropdown items handle wrap better, or maybe we could apply some word break css?

Oh, that's a really good callout on the wrapping! Yes! I think maybe it should. Let me look into this on the Via side. Will update here with what I find.

I've added a ticket to fix this in Via https://jira.mongodb.org/browse/UXE-994. If it doesn't get in before this merge, I'll make sure to bump the version here once it's published

sophstad · 2026-09-10T16:48:59Z

  <div className={styles.container}>
    <LabelCellContainer>
-      <ListSkeleton />
+      <Skeleton isLoading>


I feel like having isLoading always true is a bit of an antipattern; shouldn't this value be used to toggle its visibility?

I think it depends on how the component gets used. For Via's Skeleton, isLoading has to be true for the shimmer to apply, so when it's wrapping real content that will eventually load, you'd tie it to that loading state.

Here LoadingRow is only ever placeholder lines, there's nothing real to toggle to. The loading logic lives a level up in HistoryTable and this only mounts while loading is true.

If there was something we could wrap, we could drop LoadingSection altogether and wrap the real rows in <Skeleton isLoading={loading}>, but I don't think that's possible. I think that's why we have the arbitrary placeholder. Please correct me if I'm wrong!

Replace the LG TextInput wrapper in HistoryTableTestSearch with Via SearchField so both header inputs share Via's label typography, 32px height and border tokens. ComboboxItem needs an explicit textValue: Via runs children through composeRenderProps to append the checkmark, so RAC cannot infer textValue from the string child and every chip rendered empty. Move FilterChips under the search input it belongs to. Offset is 8px to match the combobox, whose chips clear the input by the Field gap (4px) plus comboBoxChipGroup margin (4px). Page width moves to searchColumn so the shared component no longer dictates its own page geometry.

Reverts the header-column placement only. FilterChips relies on wrapping behavior it gets from the full-width row; constraining it to a 40% column loses that. Chip placement goes to design before any further change.

tsck · 2026-09-14T16:23:35Z

@sophstad This is mostly ready for another look. Waiting on input regarding the page design, but should be good from a code feedback standpoint!

sophstad · 2026-09-14T20:45:30Z


  return (
-    <RowContainer>
+    <div className={styles.rowContainer}>


[nit] I noticed Field in the Via Storybook, is this something worth using here?

Field is technically marked @internal and I don't think is exported from the package root. This is confusing because it's in the storybook, sorry about that! We're working on fixing up the Storybook as we speak 🙂

That said, I don't believe it would actually apply here. It's really meant to wrap an input that uses React Aria Components under the hood.

sophstad · 2026-09-14T20:47:36Z

-        {taskNamesForBuildVariant?.map((taskName) => (
-          <ComboboxOption key={taskName} value={taskName} />
+        {(taskNamesForBuildVariant ?? []).map((taskName) => (
+          <ComboboxItem key={taskName} id={taskName}>


Interesting, that seems true but I guess the wrap worked better in LG (live here)

Giving some more width to the component makes sense though! And should the dropdown items handle wrap better, or maybe we could apply some word break css?

sophstad · 2026-09-14T20:51:47Z

+    !inactive && (!!loadingTestResults || failingTests.length > 0);
+
+  return (
+    <TooltipRoot align="center" isDisabled={!showTooltip} side="right">


The tooltip show animation is kinda flickery when looking at a tooltip on Firefox, are you able to reproduce this?

I don't think I'm seeing this! Any chance you could take a short screen recording to capture what you're seeing on your end?

sophstad · 2026-09-14T20:54:24Z

@@ -38,22 +38,26 @@ const ColumnPaginationButtons: React.FC<ColumnPaginationButtonProps> = ({
  return (
    <div className={styles.container}>


Optional but moving the pagination buttons inline with the other input elements seems reasonable to me

Makes sense. I'll update this with the redesign!

@sophstad I tried this but it caused some weird UI in smaller browser. I chose to just leave it as is, but let me know if you want anything adjusted!

sophstad · 2026-09-14T20:58:35Z

@@ -91,13 +91,8 @@ const ColumnHeaders: React.FC<ColumnHeadersProps> = ({
          // eslint-disable-next-line react/no-array-index-key
          <LoadingCell key={`loading_cell_${i}`} isHeader />


Do we actually need to use loaders here? If task names are selected we should know the number of columns without waiting for any data, and if not maybe we could just keep things simple and omit? This is just being nitpicky/interested in details, though, feel free to ignore 😝

That's a good call out. columnLimit is just DEFAULT_COLUMN_LIMIT rather than the actual selected column count, so the skeletons can overshoot what ends up rendering.

I'm inclined to leave it here though, since this block is untouched by the migration and BaseRow falls back to columnLimit the same way. Changing just the header would desync the two. Totally your call though if you want to remove them!

Chips pushed the table down as tasks were selected. showChips={false} drops the chip row; Via 0.8.6 replaces it with a selection count in the closed field (UXE-839, via#594), which lands regardless of showChips. Bump needs tokens 0.3.4 alongside components 0.8.6. Carries two visual changes beyond this page: focus-ring offset (0.8.4) and the text.link contrast fix, so Chromatic drift outside variantHistory is expected. TaskSelector test asserted a chip; now asserts the count summary and the URL round-trip.

# Conflicts: # apps/parsley/package.json # apps/spruce/package.json # apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx # pnpm-lock.yaml

tsck · 2026-09-16T16:37:44Z

@sophstad This should be ready for another look. I've updated the screenshots in the description to represent the new page states

# Conflicts: # apps/parsley/package.json # apps/spruce/package.json # packages/lib/package.json # pnpm-lock.yaml

Via's Combobox renders role=combobox, not role=textbox, so the Tasks locator never resolved. Via tooltips are React Aria based and ignore hover until a pointer event establishes pointer modality, so a bare .hover() on a fresh page never opened them - same reason the unit test already calls primePointerModality(). Verified both against the real Storybook DOM: new locator resolves (old resolves to 0), hoverForTooltip opens the tooltip (bare .hover() does not).

sophstad · 2026-09-18T16:13:48Z

-        trigger={
-          <Body onClick={onClick} weight="medium">
+      <TooltipRoot align="center" side="top">
+        <TooltipTrigger>


I tried to take a video to show the flicker behavior but now I'm having trouble getting them to appear at all on the failing tasks. This was working previously 🤔

Are we sure that task has failed tests attached to it?

I'm having a hard time replicating this, and I could be missing something, but the logic that enables the tooltip is the same on this branch as it is on main:

main: enabled={!inactive && (loadingTestResults || failingTests.length > 0)}

branch: isDisabled={!(!inactive && (!!loadingTestResults || failingTests.length > 0))}

Same inputs, same result, so anything that shows a tooltip on main should show one here too.

The tooltip itself does render. I can see it in this branch's published Storybook. That story hardcodes failingTests though, so it only proves the component works, not the data path.

For the data path I think staging is the better comparison since it's running main. I don't get tooltips there either: https://spruce-staging.corp.mongodb.com/variant-history/zackary-bisect/s3put-public-read. None of those failed tasks have failed tests attached to them. Same thing locally. So the tooltip is correctly disabled.

wow i'm really sorry, i looked at a couple tasks that just happened to not have failing tests 😭 this does seem to be working correctly!

sophstad · 2026-09-22T16:44:35Z

-        trigger={
-          <Body onClick={onClick} weight="medium">
+      <TooltipRoot align="center" side="top">
+        <TooltipTrigger>


wow i'm really sorry, i looked at a couple tasks that just happened to not have failing tests 😭 this does seem to be working correctly!

tsck added 2 commits September 1, 2026 22:33

UXE-685: migrate VariantHistory page to Via

b68ed7c

UXE-685: restore tooltip test coverage for Via migration

c6c8625

tsck force-pushed the UXE-685 branch from 920e291 to c6c8625 Compare September 8, 2026 15:22

tsck marked this pull request as ready for review September 9, 2026 13:21

tsck requested a review from a team as a code owner September 9, 2026 13:21

tsck added the spruce label Sep 9, 2026

tsck added 2 commits September 9, 2026 09:58

Merge remote-tracking branch 'upstream/main' into UXE-685

bcaeeb0

Merge remote-tracking branch 'upstream/main' into UXE-685

49f1a66

sophstad requested changes Sep 10, 2026

View reviewed changes

tsck added 4 commits September 10, 2026 17:46

Address PR evergreen-ci#1925 review comments

55c0653

Revert maxWidth on TaskSelector Combobox

c112d71

Move failed-test filter chips back to the pagination row

e80f112

Reverts the header-column placement only. FilterChips relies on wrapping behavior it gets from the full-width row; constraining it to a 40% column loses that. Chip placement goes to design before any further change.

tsck requested a review from sophstad September 14, 2026 16:22

sophstad requested changes Sep 14, 2026

View reviewed changes

tsck added 2 commits September 15, 2026 15:44

Merge remote-tracking branch 'upstream/main' into UXE-685

b4e1217

# Conflicts: # apps/parsley/package.json # apps/spruce/package.json # apps/spruce/src/components/HistoryTable/ColumnPaginationButtons.tsx # pnpm-lock.yaml

tsck requested a review from sophstad September 16, 2026 15:55

tsck added 3 commits September 17, 2026 10:55

Merge remote-tracking branch 'upstream/main' into UXE-685

69b7bba

Merge remote-tracking branch 'upstream/main' into UXE-685

b1f7cfc

# Conflicts: # apps/parsley/package.json # apps/spruce/package.json # packages/lib/package.json # pnpm-lock.yaml

tsck force-pushed the UXE-685 branch from ebca371 to 7b9f95b Compare September 18, 2026 15:41

sophstad requested changes Sep 18, 2026

View reviewed changes

tsck requested a review from sophstad September 20, 2026 18:34

sophstad approved these changes Sep 22, 2026

View reviewed changes

Merge branch 'main' into UXE-685

cd288cd

tsck merged commit 9cfea79 into evergreen-ci:main Sep 22, 2026
15 checks passed

		@@ -38,22 +38,26 @@ const ColumnPaginationButtons: React.FC<ColumnPaginationButtonProps> = ({
		return (
		<div className={styles.container}>

		@@ -91,13 +91,8 @@ const ColumnHeaders: React.FC<ColumnHeadersProps> = ({
		// eslint-disable-next-line react/no-array-index-key
		<LoadingCell key={`loading_cell_${i}`} isHeader />

Conversation

tsck commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

No Filters

Before

After

With Filters

Before

After

Loading

Before

After

Testing

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tsck commented Sep 14, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tsck commented Sep 16, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tsck commented Sep 2, 2026 •

edited

Loading