Debug 1.1 - Empty state tour/slideshow

[warrensplayer]

Current behavior

For the Debug page empty states for connecting to the cloud, connecting a project, and recording an initial run, the bottom of the page shows a static skeleton with a simple message to give the user a basic idea of what the content of the Debug page will be after connecting to the cloud.

Desired behavior

Update the empty states to include a slideshow of images with navigation to allow a user to page through the images with descriptions explaining the Debug page feature. There will be a two sets of images and the app will A/B test between the two using an equally weighted cohort.

• At the bottom of the empty states views, add the new slideshow.
  • The empty state will default to showing the slideshow
  • The existing static skeleton will become the end state of the slideshow
• Create a cohort with two options
  • A - for images with skeleton
  • B - for images with text
• Show the appropriate slideshow version to the two cohorts.
• Use the recordEvent mutation to send an event to the cloud when/if each empty state is viewed.
  • Campaign - Debug Login Empty State, Debug Connect Project Empty State, Debug Record Run Empty State depending on which empty state the user is viewing
  • Medium - Debug tab
  • Cohort - A or B
• Each variant is the same format except for the images shown
• The copy for each page is the same. See the Figma designs (linked below) for the copy
• Switching between pages should use a subtle fade in and out transition between the images
• Once the slideshow has been seen all the way through, the user should be shown the original skeleton with a new "Info" button in the top right. Record a preference to the project preferences that it has been seen. When showing the empty states again in this project, check the preference and show it in the completed state if it has already been seen.

References:
Slack thread: https://cypressio.slack.com/archives/C042Y29PWCD/p1675691562464129
Figma:

• Skeleton Version
  • https://www.figma.com/file/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=24179%3A244468&t=KR1OSBhmzxTVCWIt-1
  • Flow - https://www.figma.com/proto/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=24179%3A244469&scaling=min-zoom&page-id=21010%3A176355&starting-point-node-id=24179%3A244469&show-proto-sidebar=1
  • Image files:

• Text Version
  • https://www.figma.com/file/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=24116%3A237566&t=KR1OSBhmzxTVCWIt-1
  • Flow - https://www.figma.com/proto/PAOozuCxtfetqP8fUVvg0y/branch/QkCp2F69X0qyLo7qnYQ67e/Cypress-App?node-id=24167%3A241484&scaling=min-zoom&page-id=21010%3A176355&starting-point-node-id=24167%3A241484&show-proto-sidebar=1
  • Image files:

[warrensplayer]

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

[lmiller1990]

I know we've committed to this and am happy to do it, but I'd like to keep the implementation as simple as possible. Do we expect to add many more of these "tours" to in the future @warrensplayer? If we can keep the implementation as simple as possible and keep the number of tours in the app minimal, I think that'd be a huge win in terms of long term sustainability.

[marktnoonan]

Good opportunity to grab a Vue Carousel component of some kind rather than roll our own. Also maybe a good candidate for a component we can contribute into the design system. Even if we don't do that right away, we should make it easy to extract the "presentation of content as a stepper" part from the cohort logic etc.

@lmiller1990 I don't see a "tour" aspect to this, I think it's already about as simple as we can get being some images and some tests. I share your reservations about guided tours in general.

[cypress-bot]

Released in 12.7.0.

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