misc: Update styling of Runs Page

[mike-plummer]

• Closes ACI - Runs page UI Updates #26180

Additional details

• Updating status icons to match other areas of the app (specs list, debug page)
  • Use shared component to reduce complexity and use icon assets from design system
• Wrap run status as viewport shrinks to improve responsive layout
• Add link params

Steps to test

Review RunCard.cy.tsx component test. Changes can be viewed in the following tests:

• "renders expected icon for each run status"
• "renders with all run information on small viewport"

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[cypress]

30 flaky tests on run #45298 ↗︎

0

26909

1281

0

30

Details:

Fix test
Project: cypress	Commit: ccf3d94997
Status: Passed	Duration: 19:42 💡
Started: Apr 5, 2023 8:22 PM	Ended: Apr 5, 2023 8:42 PM

  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		Output

  e2e/origin/commands/assertions.cy.ts • 1 flaky test • 5x-driver-firefox

View Output Video

Test		Artifacts
cy.origin assertions > #consoleProps > .should() and .and()		Output

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-firefox

View Output Video

Test		Artifacts
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output
... > correctly returns currentRetry		Output

  e2e/origin/navigation.cy.ts • 1 flaky test • 5x-driver-electron

View Output Video

Test		Artifacts
delayed navigation > errors > redirects to an unexpected cross-origin and calls another command in the cy.origin command		Output Video

  e2e/origin/user_agent_override.cy.ts • 1 flaky test • 5x-driver-electron

View Output Video

Test		Artifacts
user agent override > persists modified user agent after cy.go		Output Video

The first 5 flaky specs are shown, see all 18 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[mike-plummer]

Hmm, Percy seems to be doing some odd things with wrapping the Run Results section over and not spacing properly that I can't reproduce locally. Works fine for me locally in Chrome, Edge, FF, and Safari. Any ideas why this could be happening @marktnoonan ?

[warrensplayer]

All looks good except if there is a long commit message:

I played around with the code, but the only solution I can see is to not use the ListRowHeader component so that you can better control how the commit message is rendered.

[warrensplayer]

Hmm, Percy seems to be doing some odd things with wrapping the Run Results section over and not spacing properly that I can't reproduce locally. Works fine for me locally in Chrome, Edge, FF, and Safari.

@mike-plummer I am not able to reproduce locally either. One thing to try might be to replace the span you added (<span class="flex flex-wrap gap-30px justify-between">) with div. Percy seems to be wrapping early and then not honoring your gap of 30px that is there to offset the negative top margin.

My hope also is that rewriting the component to not use ListRowHeader will fix it as well.

[warrensplayer]

Everything looking good now.

Extra credit would be some documentation or a test for the addition to the ListRowHeader component.

[warrensplayer]

@mike-plummer I like the test update. Can I approve the PR twice? ✅ ✅

[lmiller1990]

Beautiful, looks great!

[lmiller1990]

Percy looks fine to me - the update (right hand) seems like it's correct now.

[lmiller1990]

Can definitely look into Percy if we think there's still issues - might go ahead and merge this up since the code and UI looks correct to me. Maybe the <span> as suggested by @warrensplayer solved the issue?

Either way no blocker, let's ship it 👍