feat: IATR relevant run status banner #25282

mike-plummer · 2022-12-27T19:34:27Z

User facing changelog

No changelog entry, merging to feature branch

Adds banner for newer relevant run when viewing IATR data on an outdated run
Adds "pending" splash content when first IATR run is still in progress

Additional details

Splash Content
When no previous run exists and current run is "running" then provide a splash page with icon and progress (x of y complete)

Relevant Run banner
Shows new indigo banner below header when a newer run is detected in running or completed status

When running, provides progress (x of y completed)
When complete (passed or failed) provides an actionable link to view the newer run results

Items of Note

Provision of "newer relevant run" is currently stubbed
Stokes is working on the polling logic for this, so I've stubbed out the "newer" run with the current run. This causes some illogical UI states in the screenshots (same run number shows in both current and new run sections)
Navigation to "newer relevant run" is currently stubbed
Stokes is working on the store logic to handle what run to view, stubbed pending that logic being available to integrate
~~PR is open to add new "running" icon for splash content. Until that is available I've used the "complete" version of the icon~~ Updated

Steps to test

Data is currently stubbed, best approach to test is to review new tests & percy snapshots

How has the user experience changed?

First run pending

Newer relevant run found
Newer run is in progress

Newer run is complete

PR Tasks

Have tests been added/updated?
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?

* Add new splash content for first run pending * Add new build status bar for newer relevant run * Refactor common components for reuse

cypress-bot · 2022-12-27T19:34:29Z

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-28T14:38:46Z

Test summary

534 • 0 • 6 • 0 • 7

Run details


Project	cypress
Status	Passed
Commit	`4c67767`
Started	Dec 30, 2022 4:51 PM
Ended	Dec 30, 2022 5:09 PM
Duration	17:50 💡
OS	Linux Debian -
Browser	Chrome 106

View run in Cypress Dashboard ➡️

Flakiness

	cypress-in-cypress-run-mode.cy.ts	3
1	Cypress In Cypress - run mode > e2e run mode spec runner header is correct
2	Cypress In Cypress - run mode > component testing run mode spec runner header is correct
3	Cypress In Cypress - run mode > hides reporter when NO_COMMAND_LOG is set in run mode
	create-from-component.cy.ts	1
1	... > runs generated spec
	specs_list_latest_runs.cy.ts	1
1	App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs
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

mike-plummer · 2022-12-28T15:27:30Z

packages/app/src/debug/DebugContainer.vue

+// TODO GH#24440 Re-map to use relevant run data point (currently stubbed with current run)
+const newerRelevantRun = computed(() => run.value)
+
+const isFirstPendingRun = computed(() => run.value && run.value.runNumber === 1 && run.value.status === 'RUNNING')


Didn't think this through all the way (run numbers increment across all branches, so this will only work for the very first run on any branch for a given project). I think instead I'll need to grab the count of relevant runs from GQL and see if there's only one relevant run that happens to be pending - that'll build off what Stokes is building now in this branch

I am working to encapsulate the logic in the server side to determine a current run (what the main part of the Debug page would show) and newer run (that could be RUNNING or a completed status). Then the logic here for isFirstPendingRun would just be currentRun.status === 'RUNNING' or something like that. And the newer run would drive the newerRelevantRun variable

@warrensplayer Sounds good, thanks for the context. Will leave this stubbed for now to ensure visibility & test coverage. If your backend additions merge first I'm happy to hook up as part of this PR, otherwise will plan to handle the hookup as follow-on changes

astone123

Looks good - I left some minor comments

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

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

packages/app/src/debug/DebugNewRelevantRunBar.vue

astone123 · 2022-12-29T15:12:32Z

packages/app/src/debug/DebugPendingRunSplash.vue

+  >
+    <div class="flex flex-col w-full items-center">
+      <IconTechnologyDashboardRunning class="mb-16px" />
+      <span


Nothing to change here I don't think, but I'm wondering what people's thoughts are on using test IDs for things like this. I usually try to stay away from using data-cy if I can, since users don't see test IDs on screen.

Is there a reason why we can't just grab the title here with cy.contains or something like that, since that's what the user would actually see on the page? I understand this makes things a little more brittle (for instance if we decide to update the text then the test will fail). Just asking because I'm trying to refine my own testing strategy.

packages/app/src/debug/DebugPendingRunSplash.vue

packages/app/src/debug/DebugNewRelevantRunBar.vue

* Convert "View run" link to use button * Add more top spacing * Fix bg color

marktnoonan · 2022-12-29T22:51:07Z

Haven't looked at the code yet. Some of the Percy snapshots look a little unexpected to me, but it's unclear if those are related to this PR or the feature branch, since Percy is diffing against develop. I'll look into getting a proper baseline from the actual target branch so that Percy can figure out how to show the impact of this PR on the feature branch, not just develop.

astone123 · 2022-12-30T00:12:34Z

@marktnoonan @warrensplayer and I we're looking into this for a little bit... I wasn't able to figure out why Percy still compares to the last build on develop even if the PR is targeting a different branch that also has a Percy build. So every Percy run on these IATR PR branches has included every single change from the feature branch as well as the ones from the PR branch

warrensplayer

The refactor to use smaller components is great! The only major thing to address is the source of the data for the counts. The fields you reference in the GQL queries represent "test" counts. For the DebugPendingRunCounts, it should be counts of "specs" instead. The GQL fields from the Cloud do not currently provide the summary counts, so you have to group the values yourself. Comments in the code give a bit more detail.

packages/app/src/debug/DebugNewRelevantRunBar.vue

packages/app/src/debug/DebugPendingRunCounts.vue

warrensplayer · 2022-12-30T12:44:57Z

packages/app/src/debug/DebugContainer.vue

+// TODO GH#24440 Re-map to use relevant run data point (currently stubbed with current run)
+const newerRelevantRun = computed(() => run.value)
+
+const isFirstPendingRun = computed(() => run.value && run.value.runNumber === 1 && run.value.status === 'RUNNING')


I am working to encapsulate the logic in the server side to determine a current run (what the main part of the Debug page would show) and newer run (that could be RUNNING or a completed status). Then the logic here for isFirstPendingRun would just be currentRun.status === 'RUNNING' or something like that. And the newer run would drive the newerRelevantRun variable

* Fix spec vs test total usages

warrensplayer

Looks good. We can just keep the mocked out parts for now. I will file a new ticket to resolve those after my merge. Just going to see if we can get Percy straightened out first before merging

feat: IATR running/completed build banner

e3f206f

* Add new splash content for first run pending * Add new build status bar for newer relevant run * Refactor common components for reuse

mike-plummer added 2 commits December 27, 2022 13:41

Fix test

096cf81

Fix styling

7381e63

mike-plummer marked this pull request as ready for review December 28, 2022 14:06

Fix ts issue, add GH issue number to todos

fe8b714

mike-plummer requested review from warrensplayer, astone123 and marktnoonan December 28, 2022 15:03

mike-plummer commented Dec 28, 2022

View reviewed changes

mike-plummer added 3 commits December 28, 2022 11:39

Use new icon on splash page

88c0551

Fix lockfile

911b0d3

Fix pluralization in running test counts

4539c46

astone123 reviewed Dec 29, 2022

View reviewed changes

Address review comments

dba18ec

* Convert "View run" link to use button * Add more top spacing * Fix bg color

astone123 self-requested a review December 29, 2022 17:47

astone123 approved these changes Dec 29, 2022

View reviewed changes

mike-plummer added 2 commits December 29, 2022 13:16

Merge branch 'feature/IATR-M0' into mikep/24853-iatr-relevant-run-banner

461c3c5

Remove lines incorrectly kept during merge

2ad0aa9

warrensplayer requested changes Dec 30, 2022

View reviewed changes

Address review comments

822015a

* Fix spec vs test total usages

mike-plummer requested a review from warrensplayer December 30, 2022 14:59

warrensplayer approved these changes Dec 30, 2022

View reviewed changes

Fix ts compilation

4c67767

mike-plummer merged commit 031dd8b into feature/IATR-M0 Dec 30, 2022

mike-plummer deleted the mikep/24853-iatr-relevant-run-banner branch December 30, 2022 17:09

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 relevant run status banner #25282

feat: IATR relevant run status banner #25282

mike-plummer commented Dec 27, 2022 •

edited

Loading

cypress-bot bot commented Dec 27, 2022

cypress bot commented Dec 28, 2022 •

edited

Loading

mike-plummer Dec 28, 2022 •

edited

Loading

warrensplayer Dec 30, 2022

mike-plummer Dec 30, 2022

astone123 left a comment

astone123 Dec 29, 2022

marktnoonan commented Dec 29, 2022

astone123 commented Dec 30, 2022

warrensplayer left a comment

warrensplayer Dec 30, 2022

warrensplayer left a comment

feat: IATR relevant run status banner #25282

feat: IATR relevant run status banner #25282

Conversation

mike-plummer commented Dec 27, 2022 • edited Loading

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Dec 27, 2022

cypress bot commented Dec 28, 2022 • edited Loading

Test summary

Run details

Flakiness

mike-plummer Dec 28, 2022 • edited Loading

Choose a reason for hiding this comment

warrensplayer Dec 30, 2022

Choose a reason for hiding this comment

mike-plummer Dec 30, 2022

Choose a reason for hiding this comment

astone123 left a comment

Choose a reason for hiding this comment

astone123 Dec 29, 2022

Choose a reason for hiding this comment

marktnoonan commented Dec 29, 2022

astone123 commented Dec 30, 2022

warrensplayer left a comment

Choose a reason for hiding this comment

warrensplayer Dec 30, 2022

Choose a reason for hiding this comment

warrensplayer left a comment

Choose a reason for hiding this comment

mike-plummer commented Dec 27, 2022 •

edited

Loading

cypress bot commented Dec 28, 2022 •

edited

Loading

mike-plummer Dec 28, 2022 •

edited

Loading