ACI - Run page and Debug page empty state updates

[warrensplayer]

Update the empty states for both the Runs page and Debug page to use the new promotional slideshow design

Summary

For both pages, the new designs will affect the following states:

• Not logged in
• Need to record a run

New components

Add a new components to be shared between the Runs and Debug pages that follows the core concepts here: https://www.figma.com/file/AE8KK3Hx2ZCDLlK3FkOd4k/Design-Patterns%2C-v1.x---%40latest?node-id=641-34870&t=qyIiAUnBzPBxzvgY-0

Card with header

• Should have card type component with header and body
• Header should have
  • Title
  • Subtitle
  • CTA button
  • Should float CTA button at larger widths
  • Should wrap button under subtitle at smaller widths
  • Body should be a container with a slot for content
  • Figma

Promo

• 2 column layout when wide enough
• Stacked vertically when narrow
• Elements
  • title
  • description
  • Promo/secondary action section - Figma
    • 3 styles of CTA
      • x of n with a next button
      • reset icon with "Reset" button
      • graduation cap with "View Tour" button
  • content slot (where the skeleton states go)

---

Runs Page

Update component to use the new components above

Figma

<RunsConnect />

Title: Connect to view your recorded runs
Subtitle: Cypress Cloud is built for teams who need to do testing at scale.
CTA: Should be the <CloudConnectButton />

Promo steps

Step	Title	Description	CTA	Skeleton
1 (Beta)	Get instant visibility into your test runs that are recorded to Cypress Cloud	Browse detailed information about the most recent test runs recorded to Cypress Cloud from your branch.	1 of 3 with next button	Shows running build with skeletons below
2 (Gamma)	Monitor test failures in real time	Uncover high-risk failed and flaky tests in CI before they become a problem in production.	2 of 3 with next button	Shows failed test with skeletons below
3 (Omega)	Build, test, and ship with confidence 🚀	With Cypress Cloud, you can proactively identify, investigate, and resolve failures, and be a quality champion.	Restart icon and button	Passing test above failed test with skeletons

Copy can also be seen in this document: https://docs.google.com/document/d/10gh-EQWfE6Hk9Y4Dqj9QY3mUnEmNz4_cndHuTVPGBKY/edit#heading=h.sf5sy5wn0ivo

Animation Figma Flow

• text should do a fade between steps
• skeletons
  • MVP - fade between skeletons
  • Extra credit - (not sure how hard these are to do)
    • Step 1 should show the animating running icon that then slows to a stop after 2 seconds and grays out
    • Moving from step 1 to step 2 should fade between the two
    • Moving from step 2 to step 3 should slide down the first run and then animate in the passing run
    • NOTE Currently the Figma flow does not show all of these animations due to a bug

<RunsEmpty />

When in the state that shows the <RunsEmpty /> component, this step will be shown first. Clicking the "View tour" button will go to Step 1 and clicking "Reset" at the end will go back to this step.

Title: Copy the command below to record your first run
Subtitle: Record your first test run to Cypress Cloud
CTA: Use the <RecordPromptAdaptor />

Added promo step

The following step should be added to the beginning of the promo steps in this state.

Step	Title	Description	CTA	Skeleton
Alpha	Record your first test run to Cypress Cloud	You’re almost there! Start recording your test runs to Cypress Cloud by running the command below in your local or CI terminal.	View tour	Skeleton Terminal and CI config

Figma

Record viewed events

Match the logic in the Debug page for the empty states to send campaign viewed events for the following empty states:

The medium should be Runs Tab

State	Campaign name
Not logged in	Runs Login Empty State
No project connected	Runs Connect Project Empty State
No runs recorded	Runs Record Run Empty State

---

Debug page

Update component to use the new components above

Currently, the existing carousel (i.e. <Debug Slide /> component) is shown on every empty state page. The new designs call for it to only be on the <DebugNotLoggedIn /> page.

<DebugNotLoggedIn />

Title: Connect to debug your tests
Subtitle: Cypress Cloud is built for teams who need to do testing at scale.
CTA: Should be the <CloudConnectButton />

Promo steps

Step	Title	Description	CTA	Skeleton
1 (Beta)	Review how many tests failed during a CI test run	The Debug page shows the latest completed test run for your current checked out commit.	1 of 3 with next button	Skeleton showing run failure count
2 (Gamma)	Check if failed CI test runs also fail locally	Use the Test Runner to run only the tests that failed in your last recorded test run.	2 of 3 with next button	Skeleton showing "Run Failures" button
3 (Omega)	Locally debug failed test runs with visual artifacts	Easily review screenshots, videos, and logs from your tests.	Restart icon and button	Skeleton showing artifact links

Convert Skeletons from images to HTML
Currently, the skeletons shown on the Debug page are static images. They will need to be converted to HTML so that they can be responsive in the new designs.

Animation

• text should do a fade between steps
• skeletons
  • fade between steps

Figma

<DebugNoRuns />

NOTE This is the same step shown in the component. Duplicating here for the Debug page.

Title: Copy the command below to record your first run
Subtitle: Record your first test run to Cypress Cloud
CTA: Use the <RecordPromptAdaptor />

Additional promo step

When in the state that shows the <DebugNoRuns /> component, this step will be shown first. Clicking the "View tour" button will go to Step 1 and clicking "Reset" at the end will go back to this step.

Step	Title	Description	CTA	Skeleton
Alpha	Record your first test run to Cypress Cloud	You’re almost there! Start recording your test runs to Cypress Cloud by running the command below in your local or CI terminal.	View tour	Skeleton Terminal and CI config

Resources

Clickup - https://app.clickup.com/t/18033298/PM-2889
Figma files

• Design Patterns
• Runs Page
• Debug Page

[lmiller1990]

@warrensplayer is there a different between this and #26184 ?

[warrensplayer]

@lmiller1990 This issue was intended to just be the static text on the page with the CTA. #26184 was for adding the tour/slideshow at the bottom similar to the Debug page. The design for both of these is not complete, so moving out of this sprint for now.

[warrensplayer]

Hey team! Please add your planning poker estimate with Zenhub @astone123 @jordanpowell88 @lmiller1990 @marktnoonan @mike-plummer

[lmiller1990]

The animation links are not working for me, eg this one. It's just black.

Either way, I can still estimate. My estimate is based on this looking like a bunch of fairly static yet carefully designed components with some basic animations and a bunch of different conditionals. Low complexity, just need an eye for detail.

[lmiller1990]

I am closing this to reflect the work was done and completed in the sprint ending May 9th.

Additional work to review/merge is in https://github.com/cypress-io/cypress-internal/issues/601

[cypress-bot]

Released in 12.13.0.

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