Skip to content

Update Runs page Cards to new design #27203

Closed
@warrensplayer

Description

@warrensplayer

Summary

Improve the Runs page design to show more detailed information and to help showcase runs that can be debugged.

Existing fields on Run card

  • Status icon
  • Commit message
  • Tags
  • Commit author name
  • Branch name
  • Build creation time (using "time ago" format)
  • Build duration
  • Flaky test count
  • Test result counts
    • skipped
    • pending
    • passed
    • failed

Existing RunCard

image

Details

There will be two slightly different variations of designs depending on if there is Git data present or not. Currently, the run card will just not display fields that are missing in the "no git data" scenario.

With Git data

image
  • Run cards will be grouped by commit
    • Design: https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?type=design&node-id=1097%3A265679&mode=dev
    • Data should be returned currently in the correct order
    • Use grouping logic similar to the DebugRunNavigation component
      • commit header
        • git hash (first 6 characters) new
        • commit message existing
        • badge for "Checked out" commit new
      • run
        • NOTE: existing card uses ListRowHeader which will no longer be used here
        • status icon and run number - can use DebugRunNumber but should move and rename - new component replaces larger icon - clicking this component should open the run in Cypress Cloud just like clicking the RunCard does today
        • test result counts and flaky count - RunResults component could probably be replaced with DebugResults, but then should be renamed and moved to generic location
        • branch and tags existing
          • git branch and tags to be rendered as one list
          • branch appears first with branch icon, followed by tags, if any
          • at largest breakpoint, branch and one tag should be shown and any remaining tags will be grouped under a "tag" that says "+ n", where n is the number of remaining tags
          • "+ n" tag will show a tooltip below when hovered that shows remaining tags
          • at smaller breakpoint, branch will be included under the "+ n" tag and show as first item in tool tip
        • commit author avatar and name
          • avatar new
          • name existing
          • use placeholder avatar icon if avatar not available
        • run creation time and duration existing
          • use same formatting as debug page - introduce shared component?
        • Debug button

Without Git data

image

Button to see all runs

  • Show button at the bottom to link to the Cloud and show the "Latest Runs" page for the Cloud project
image

Increase number of runs shown (for both scenarios)

  • Increase count of runs shown from 10 to 100 by increasing number in RelevantRunsDataSource.#takeLatestRuns

UI alignment for Debug

  • Update "stopwatch" icon on Debug page to be the same "clock" icon used above in the header for the duration/timing information for the run

Before
image

After
image

Out of scope

Requirements: https://app.clickup.com/18033298/docs/h6amj-45987/h6amj-53707
Design: https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?node-id=535%3A40022&mode=dev

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions