feat: IATR-M0 Debug Page

[warrensplayer]

• Closes [IATR](M0) Debug Page and Tab in left nav #24441

User facing changelog

NOT APPLICABLE This feature is being merged into a feature branch to be released with milestone 1.0 for the In App Test Results epic

Additional details

Background
This PR adds a new page to the Cypress called "Debug". This page will contain the features for the project known as In App Test Results [IATR]. This project will add the ability for a developer that is connected to the Cypress Cloud to view tests that have been recorded as failed to a Cloud run in the app. The goal of the milestone 0 of this feature will allow the developer to easily run the test locally to reproduce the error. Milestone 0 is not going to be released to users, but will remain held in a feature branch.

NOTE The code introduces some new GraphQL fields from the Cypress Cloud that are currently being held in a feature branch on the Cloud side. When running this branch for testing, you can still run the component tests that are introduced or updated in this branch. You will not be able to test the full functionality in the app itself yet without running a local Cypress Cloud instance. The Cloud team is working on setting up a "preview" environment that can be used for testing the app while we work through M1 (milestone 1) work and to use for acceptance testing before the Cloud code gets released to production.

What is new

• A new page in the App called "Debug" that appears in the sidebar between "Runs" and "Settings"
• The page has text only empty states that will be enhanced in M1 for:
  • Not logged in
  • Not connected
  • No runs
• Uses the components for the run information and failed spec with tests added in these PRs: feat: IATR-M0 Page Header #24722 and feat: IATR-M0 Spec and Test Component #24877
• New components added
  • packages/app/src/debug/DebugContainer.vue
  • packages/app/src/debug/DebugSpecList.vue
  • packages/app/src/pages/Debug.vue
• Changes in the cloud graphql schema caused the need to update a few types and fill in new required fields. The main need for this was in RunStatusDots.vue and the e2e test packages/app/cypress/e2e/specs_list_latest_runs.cy.ts

Steps to test

The easiest way to test will just be to run the tests that were added or changed for this issue.

• packages/app/src/debug/DebugContainer.cy.tsx
• packages/app/cypress/e2e/sidebar_navigation.cy.ts
• packages/app/src/debug/DebugPageHeader.cy.tsx
• packages/app/src/debug/DebugSpec.cy.tsx
• packages/app/src/navigation/SidebarNavigationRow.cy.tsx
• packages/app/cypress/e2e/specs_list_latest_runs.cy.ts

How has the user experience changed?

New sidebar nav for "Debug"

Basic empty states that will be enhanced later

• Not logged in

* Not connected

* No runs

Use new components to show runs and failed tests

PR Tasks

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

[cypress-bot]

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]

---

Test summary

25028 • 2 • 2490 • 0 • 20

---

Run details

Project	cypress
Status	Failed
Commit	9d62ced
Started	Dec 12, 2022 7:46 PM
Ended	Dec 12, 2022 8:03 PM
Duration	17:21 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Failures

	commands/waiting.cy.ts		1
1	cy.origin waiting > alias > waits for the route alias to have a response
	user_agent_override.cy.ts		1
1	user agent override > persists modified user agent after cy.go

---

Flakiness

	cypress/e2e/e2e/origin/cookie_behavior.cy.ts		5
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)
5	... > 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
This comment includes only the first 5 flaky tests. See all 20 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]

It sure does look nice! Excited for this feature.

[ZachJW34]

Few comments, nothing blocking. LGTM!

[mike-plummer]

Thanks for addressing my comments, no issues here

[lmiller1990]

This is looking good to me.