feat: IATR empty states #25219

astone123 · 2022-12-20T02:57:55Z

Closes [IATR](M1.0) Empty States #24847

User facing changelog

n/a - merging to feature branch

Additional details

This PR adds the following empty states to the debug page

Not logged in
No project connected
No runs recorded
Loading
Error (note that this state is simply triggered by a boolean prop and has a hard-coded message. we will wire this up later)

Steps to test

Look at the new Percy snapshots and compare them with the Figma mockups. Look at the DebugContainer component test and verify that the logic around each state is correct (this was mostly implemented prior to this PR so it should be mostly the same)

How has the user experience changed?

See the new Percy snapshots

PR Tasks

Have tests been added/updated?
[na] Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?

…astone123/IATR-empty-states

cypress-bot · 2022-12-20T02:58:09Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-12-20T03:53:19Z

Test summary

4990 • 0 • 116 • 0 • 7

Run details


Project	cypress
Status	Passed
Commit	`e9ed2bd`
Started	Dec 22, 2022 5:24 PM
Ended	Dec 22, 2022 5:37 PM
Duration	12:40 💡
OS	Linux Debian -
Browser	Chrome Beta 106

View run in Cypress Dashboard ➡️

Flakiness

	commands/net_stubbing.cy.ts	1
1	... > stops waiting when an fetch request is canceled
	e2e/origin/cookie_behavior.cy.ts	4
1	... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
2	... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
3	... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
4	... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
This comment includes only the first 5 flaky tests. See all 7 flaky tests in the Cypress Dashboard.

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

lmiller1990

Some basic comments, I'm still setting up my Cloud environment locally. I wasn't able to run this to test it, yet.

If you could sync up and help me run this locally, that would be great.

packages/app/src/debug/DebugContainer.vue

packages/app/src/debug/DebugEmptyView.vue

packages/graphql/schemas/cloud.graphql

ZachJW34

Looks good so far!

packages/app/src/pages/Debug.vue

ZachJW34

Looks and works great! I'v got the one comment regarding the transition that I would like to see addressed.

packages/app/src/debug/DebugContainer.vue

mike-plummer

Snapshots look 🔥 , nice work. Few comments/questions. Also seeing some Percy changes that don't seem related, but there doesn't appear to be any code that would account for them (selector playground button shifted a couple pixels, button widths changing). Assuming those are flake?

mike-plummer · 2022-12-21T14:20:33Z

packages/app/cypress/e2e/runs.cy.ts

-      cy.contains('button', 'Log in to Cypress Cloud').click()
+      cy.contains('button', 'Connect to Cypress Cloud').click()


Re: updating from "Log in" to "Connect" - there were conversations around this back when we put this in for ACI, concern then was that the top-level "Log In" button in the upper-right would have the same action so this button should use the same wording.

I'm assuming this was an update driven by design? If so then okay, just felt weird to see this get reversed

Yeah, I talked to Emil about this - I think this should only affect the wording for the button on the runs page

packages/app/src/debug/DebugContainer.cy.tsx

mike-plummer · 2022-12-21T14:29:21Z

packages/app/src/debug/DebugContainer.cy.tsx

    })

-    it('is logged in', () => {
+    it('is logged in with no project', () => {


In ACI there were three separate "no project" states - are these all being rolled into this single "no project connected" condition?

No projectId at all

Invalid projectId (bad value, project since deleted, etc)

Unauthorized (valid projectId but user doesn't have access)

Yeah, I believe here we're just doing one view that is based on loginConnectStore.project.isProjectConnected. @warrensplayer can you confirm?

@astone123 I am going to check with Peter and I will file a follow up issue if we need to add these additional states. I do not want to increase the scope of this issue beyond the original requirements.

packages/app/src/debug/DebugContainer.cy.tsx

packages/app/src/debug/DebugEmptyView.vue

packages/frontend-shared/src/locales/en-US.json

packages/app/src/debug/DebugLoading.vue

mike-plummer

My comments have been addressed 🚀

warrensplayer

Looks super! I addressed your question that Mike brought up about those other states. We can address in another issue. My only other comment is nit-pick around code organization. It would be nice to group some of your similar components together in subdirectories. I think you can put all your empty state components in an emptyStates folder along with the one CT test. Going to go ahead and approve.

warrensplayer · 2022-12-22T00:08:35Z

packages/graphql/test/stubCloudTypes.ts

@@ -292,6 +297,7 @@ export const CloudRunStubs = {
  somePending: createCloudRun({ status: 'PASSED', totalPassed: 100, totalSkipped: 3000, totalPending: 20 }),
  allSkipped: createCloudRun({ status: 'ERRORED', totalPassed: 0, totalSkipped: 10 }),
  failingWithTests: addFailedTests(createCloudRun({ status: 'FAILED', totalPassed: 8, totalFailed: 2 })),
+  errored: createCloudRun({ status: 'ERRORED', totalPassed: 1, totalFailed: 0, errors: ['There was an error'] }),


Do you need this anymore? It does not look like it is being used.

warrensplayer · 2022-12-22T00:28:47Z

packages/app/src/debug/DebugContainer.cy.tsx

    })

-    it('is logged in', () => {
+    it('is logged in with no project', () => {


@astone123 I am going to check with Peter and I will file a follow up issue if we need to add these additional states. I do not want to increase the scope of this issue beyond the original requirements.

warrensplayer · 2022-12-22T00:35:48Z

packages/app/src/debug/DebugLoading.vue

+        <DebugLoadingDivider />
+        <div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />


Suggested change

<DebugLoadingDivider />

<div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />

<template v-for="n in 4">

<DebugLoadingDivider />

<div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />

</template>

Nit-pick: you can repeat this same content 4 times using this v-for syntax https://vuejs.org/guide/essentials/list.html#v-for-with-a-range

There are other places in this file you could do that with as well.

lmiller1990

Looks good, a few minor nits from @warrensplayer. My comments are ✔️. I will leave fixing + merging to you @astone123. 💯

…astone123/IATR-empty-states

astone123 added 6 commits December 16, 2022 16:07

WIP margin issues

ee26a51

Merge branch 'feature/IATR-M0' of github.com:cypress-io/cypress into …

9d976e7

…astone123/IATR-empty-states

WIP saving progress to figure out why CT tests aren't working

b643e03

Merge branch 'feature/IATR-M0' of github.com:cypress-io/cypress into …

c7e9f15

…astone123/IATR-empty-states

add no runs, no project, and loading screens [run ci]

a720e17

fix tests [run ci]

1adae96

astone123 self-assigned this Dec 20, 2022

astone123 added 4 commits December 19, 2022 22:00

update schema

0cabb21

[run ci]

2a48509

fix another test [run ci]

ff76b0a

fix more tests [run ci]

2ede916

lmiller1990 reviewed Dec 20, 2022

View reviewed changes

packages/app/src/debug/DebugContainer.vue Outdated Show resolved Hide resolved

packages/app/src/debug/DebugEmptyView.vue Outdated Show resolved Hide resolved

packages/graphql/schemas/cloud.graphql Outdated Show resolved Hide resolved

revert changes to fix test [run ci]

55b0b9c

ZachJW34 reviewed Dec 20, 2022

View reviewed changes

packages/app/src/pages/Debug.vue Show resolved Hide resolved

astone123 added 3 commits December 20, 2022 17:28

add error state

d225bcc

update stub types to match graphql schema

2eb9636

PR feedback

8904a16

astone123 marked this pull request as ready for review December 20, 2022 22:56

astone123 requested review from warrensplayer and a team December 20, 2022 22:57

fix test

a31c1f5

ZachJW34 approved these changes Dec 21, 2022

View reviewed changes

packages/app/src/debug/DebugContainer.vue Show resolved Hide resolved

mike-plummer reviewed Dec 21, 2022

View reviewed changes

PR feedback

9681604

astone123 requested review from mike-plummer, ZachJW34 and lmiller1990 December 21, 2022 21:54

mike-plummer approved these changes Dec 21, 2022

View reviewed changes

warrensplayer approved these changes Dec 22, 2022

View reviewed changes

lmiller1990 approved these changes Dec 22, 2022

View reviewed changes

astone123 added 3 commits December 22, 2022 11:11

more feedback

1bede16

Merge branch 'feature/IATR-M0' of github.com:cypress-io/cypress into …

92f5837

…astone123/IATR-empty-states

fix types

e9ed2bd

astone123 merged commit 552fe87 into feature/IATR-M0 Dec 22, 2022

astone123 deleted the astone123/IATR-empty-states branch December 22, 2022 17:36

cypress-bot bot mentioned this pull request Dec 22, 2022

[IATR](M1.0) Empty States #24847

Closed

warrensplayer mentioned this pull request Jan 5, 2023

[IATR] E2E Tests for IATR #25351

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: IATR empty states #25219

feat: IATR empty states #25219

astone123 commented Dec 20, 2022 •

edited

Loading

cypress-bot bot commented Dec 20, 2022

cypress bot commented Dec 20, 2022 •

edited

Loading

lmiller1990 left a comment

ZachJW34 left a comment

ZachJW34 left a comment

mike-plummer left a comment

mike-plummer Dec 21, 2022

astone123 Dec 21, 2022

mike-plummer Dec 21, 2022

astone123 Dec 21, 2022

warrensplayer Dec 22, 2022

mike-plummer left a comment

warrensplayer left a comment

warrensplayer Dec 22, 2022

warrensplayer Dec 22, 2022

warrensplayer Dec 22, 2022

lmiller1990 left a comment

		cy.contains('button', 'Log in to Cypress Cloud').click()
		cy.contains('button', 'Connect to Cypress Cloud').click()

		<DebugLoadingDivider />
		<div class="rounded-full bg-gray-50 h-8px ml-8px w-80px" />

feat: IATR empty states #25219

feat: IATR empty states #25219

Conversation

astone123 commented Dec 20, 2022 • edited Loading

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Dec 20, 2022

cypress bot commented Dec 20, 2022 • edited Loading

Test summary

Run details

Flakiness

lmiller1990 left a comment

Choose a reason for hiding this comment

ZachJW34 left a comment

Choose a reason for hiding this comment

ZachJW34 left a comment

Choose a reason for hiding this comment

mike-plummer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mike-plummer left a comment

Choose a reason for hiding this comment

warrensplayer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

astone123 commented Dec 20, 2022 •

edited

Loading

cypress bot commented Dec 20, 2022 •

edited

Loading