feat(unify): allow prompts to auto-open after set time

[marktnoonan]

• Closes https://cypress-io.atlassian.net/browse/UNIFY-501

This is a cleaned up version of #18743 with a couple of minor changes to adapt to the latest and greatest setup.

Additional details

This recreates the functionality developed in the old desktop-gui and applies it to the runner. There's a bit of nuance to the old implementation that implies handling of more than just the 2 prompts the way they work now. I've kept that nuance.

This PR also includes some tweaks to the header that were noticed while working on this ticket. So in Launchpad:

• Header is now fixed to the top of the window
• Some z-index values have been updated for modals etc to keep things correct visually

Summary of code changes

This PR:

• makes project saved state available in gql
• adds a mutation to set the "prompts shown" state
• adds new project config fixtures for testing - previously in mocks, currentProject was populating config with a raw json object from the fixture file. The config now matches the array format that comes from getResolvedConfigFields so the mocks and the real app have the same format.
• moves over existing tests around prompt behavior that weren't already covered by component tests
• uses ci1 and orchestration1 to denote prompts for consistency
• works around some limitations of Headless UI to meet our needs for this PR, in the long run if we which libraries for this component some of the new code here can go away. This is what a lot of the forceOpen stuff relates to
• modifies some header styles to avoid bad text wrapping
• improves the accessible name for the profile/log out menu

How has the user experience changed?

If it's been more than 4 days since a project was first opened, and there is not yet a cloud project ID set up, the prompt encouraging the user to set up CI will appear when the runner is launched.

How to test

1. Remove the projectId from the cypress.json file of the project that you plan to test.
2. Open the App (not launchpad) for that project
3. If this projects was first opened more than 4 days ago, the prompt should appear.
4. Dismiss the prompt in any fashion.
5. Refresh the page.
6. The prompt should not appear again.

To change the saved state of the project, look for the state.json files nested under /Library/Application Support/Cypress/cy/staging/projects/

To play around with other things, modify the prompts here in HeaderBarContent.vue

const prompts = sortBy([
  {
    slug: 'ci1',
    interval: interval('4 days'),
    noProjectId: true,
  },
  {
    slug: 'orchestration1',
    noProjectId: true,
  },
], 'interval')

PR Tasks

• Have tests been added/updated?

[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

4351 • 0 • 51 • 0 • 1

---

Run details

Project	cypress
Status	Passed
Commit	8d126e3
Started	Jan 10, 2022 8:47 PM
Ended	Jan 10, 2022 8:57 PM
Duration	10:24 💡
OS	Linux Debian - 10.10
Browser	Chrome 96

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/commands/net_stubbing_spec.ts		1
1	network stubbing > waiting and aliasing > can timeout waiting on a single request using "alias.request"

---

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

[ZachJW34]

Looks good, just a couple minor comments. There are some tests to fix up for top-nav.spec.ts. Also, have you ever noticed this before? If a test fails on CI, it looks like it doesn't run all of the suite.

[ZachJW34]

We should make a note to bring savedState into data-context. We should be able to get this data via data-context, so the state functionality should be lifted into the ProjectLifecycleManager/config code

[ZachJW34]

Comment above: // using onKeyStroke twice as array of keys is not supported till vueuse 6.6:. We use 7.2.2 now, can we make this simpler?

[tgriesser]

@marktnoonan I know this is months after this was merged, but I just came across this code, and think we should revisit the approach here a bit. Most of the logic that exists in the client-side would probably be better managed in the GraphQL layer, with fields on Project like:

allowAutomaticPromptOpen
shouldShowCIModal
shouldShowOrchestrationModal

I know it currently works as is (though I ran into it because of a failing test elsewhere), but it's more of a bigger picture keeping where/how we expose information to the client consistent. Not a rush right now, but just wanted to mention it here. Will write up a ticket & put together a time to discuss at some point.