feat(app): Update Runs page visuals to new layout and card design

[dkasper-was-taken]

• Closes Update Runs page Cards to new design #27203

Additional details

• Introduce RunsLayout for RunsContainer
  • Git layout grouped by sha
  • w/o Git layout single group
• Update RunCard to
  • New breakpoint responsive design
  • Add Debug button that navigates to run on debug page
• Increase Latest Run count from 10 -> 100
• Fix showDebugForCloudRun return type, should be boolean as it's navigational and no query data is returned

Steps to test

• Launch Cypress with associated cloud run
• Verify latest run status matches icon

How has the user experience changed?

PR Tasks

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

[astone123]

Looks really good! I left a few minor comments. The only one that I think really needs fixing is the "View runs in Cypress Cloud" button.

[astone123]

thanks for addressing my comments ✅

[warrensplayer]

Created a PR (#27798) with changes to consider. Please take a look and validate if they make sense to include or not.

I wish there was a better way to accomplish the complexity with when and where the flaky badge is shown. Potentially pulling that part out of the RunResults component and making it a separate component would help, but not going to ask for that now.

Overall, the changes are great! I just feel like there is no reason to truncate the branch name and duration/time ago information at the larger breakpoints when there will always be plenty of room.

The only other request I have is to write tests to validate the tooltip for the RunTags to validate they contain the right information at the different breakpoints.

[warrensplayer]

One other thing that was not called out on the original issue but is in the designs is the updated "skeleton" loading states for the page. There are two versions (with and without git info). They are here:

• https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-203425&mode=dev
• https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-204709&mode=dev

[dkasper-was-taken]

One other thing that was not called out on the original issue but is in the designs is the updated "skeleton" loading states for the page. There are two versions (with and without git info). They are here:

• https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-203425&mode=dev
• https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1284-204709&mode=dev

Updated with new skeletons.

[dkasper-was-taken]

Created a PR (#27798) with changes to consider. Please take a look and validate if they make sense to include or not.

I wish there was a better way to accomplish the complexity with when and where the flaky badge is shown. Potentially pulling that part out of the RunResults component and making it a separate component would help, but not going to ask for that now.

Overall, the changes are great! I just feel like there is no reason to truncate the branch name and duration/time ago information at the larger breakpoints when there will always be plenty of room.

The only other request I have is to write tests to validate the tooltip for the RunTags to validate they contain the right information at the different breakpoints.

Added tooltip tests, merged changes down, looks solid!

[warrensplayer]

Skeletons worked out great. Left some suggestions for small improvements.

The tests for the tooltips on the RunTagCount allowed me to better see the styling there. Added some suggestions to get it to better match the designs.

[cypress-bot]

Released in 13.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.3.0, please open a new issue.