feat: IATR-M1.0 Debug page Header Update

[amehta265]

• Closes [IATR](M1.0) Debug page run header updates #24851

User facing changelog

This PR aims to update the Debug Page Header to provide more information. It accomplishes the following:

1. Removal of the run Number from the first row so that the "commits Ahead" message is the only element visible in the top section.
2. Adding a run status component in the bottom section. This section contains a status icon and the run number with matching colors depending on the status returned from the cloud. This takes into account all current run statuses (Passed, Failed, Errored, Cancelled, Running)
3. Removing the status icon and status name from the test counts
4. Adding a flaky badge which comprises of the total flaky tests number and the "Flaky" text separated by a vertical border. This is only visible when the total number of flaky tests is > 0 and the value is not null

• Refer to the images below. Each numbered point above has a corresponding visual queue in the pictures attached below

Additional details

• A color mapping has been added to debugPageHeader.vue. The design for the run status requires matching colors for the text (run number) and icon. In order to render a specific color depending on the status I have created a simple mapping for each possible status and the respective color

Steps to test

This issue has 2 component tests. Checkout to this branch to run the tests
Both DebugPageHeader.vue and DebugResults.vue exist in the packages/app/ folder. To run these tests:

1. Change directory to packages/app
2. Run yarn dev
3. Navigate to Component Testing and run DebugPageHeader.cy.tsx and DebugResults.cy.tsx

How has the user experience changed?

Updated Page Header:

Old Page Header:

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?

[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

25033 • 0 • 2490 • 0 • 22

---

Run details

Project	cypress
Status	Passed
Commit	3848461
Started	Dec 15, 2022 5:27 PM
Ended	Dec 15, 2022 5:45 PM
Duration	17:39 💡
OS	Linux Debian -
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	migration.cy.ts		1
1	global mode > migrates 2 projects in global mode
	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 22 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

[astone123]

Looks good 👍🏻 I left some minor comments

[lmiller1990]

This is looking good. I'm definitely interested in making things as type safe as possible, but not obvious issues with the implementation.

[lmiller1990]

Not really your wheelhouse, but I wonder why they don't just publish a single package, cypress-design/core, with everything we need.

[elevatebart]

@lmiller1990 That is because of versioning.
Upgrading a package should not risk breaking the rest of the platform.
It is a way of minimizing the surface risk while still mutualizing the components.

We might create a @cypress-design/core at some point once it stabilizes.