Closed
Description
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

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

- 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
- git hash (first 6 characters)
- 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 withDebugResults
, 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
- avatar
- run creation time and duration
existing
- use same formatting as debug page - introduce shared component?
- Debug button
- enabled for runs that can be debugged - (i.e. if the run appears in the
all
list in the RelevantRun subscription results) - pass
from
parameter to Debug page similar to navigating to page with 'SidebarNavigation` - disabled for other runs and shows a tooltip if hovered
- Tooltip text:
You can only debug runs for your most recent commits. Learn more
where "Learn more" should link to Debug docs with an on link (https://docs.cypress.io/guides/core-concepts/cypress-app#Debug)
- Tooltip text:
- Design: https://www.figma.com/file/L3soH2rmrMMIlgE9EDUEKA/Runs-list%2C-v1.1---%40latest?node-id=701%3A121369&mode=dev
- enabled for runs that can be debugged - (i.e. if the run appears in the
- NOTE: existing card uses
- commit header
Without Git data

- Simpler card design with no grouping
- Basic design of card and components should match above with git data
- Design: https://www.figma.com/file/90FM8BU3k1HgsjOiDovpnn/In-App-Run-Notifications?node-id=1097%3A267971&mode=dev
- Fields
- status icon and run number - clicking this component should open the run in Cypress Cloud just like clicking the RunCard does today
- test result counts and flaky count
- tags
- Use same logic for "+ n" tag and tooltip as above
- run creation time and duration
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

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
Out of scope
- The message at the top of the list of runs when grouped by commits that says "There are new runs on {branch name}" will be part of Message for newer runs at top of Runs page
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
Assignees
Labels
No labels