My Jetpack: Adding Connection Screen

[renatoagds]

Related with #22291

Changes proposed in this Pull Request:

• Adding ConnectionScreen component.
• Adding connection route.

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• Goes into MyJetpackScreen component
• Insert a Link component from react-router-dom any place, and set the to for /connection route.
• Build My Jetpack (jetpack build packages/my-jetpack).
• Navigate to Dashboard
• Disconnect Jetpack
• Reconnect it, but doesn't connect wpcom account.
• Navigate to My Jetpack.
• Click in the Link.
• It should load the ConnectionScreen screen.
• Click in Connect your user account, it should start connection flow.

⚠️ Layout Warnings

Some points in the current screen are different from Figma, basic these points:

• It implements Go back instead X button, which aligns better with products flow (we can discuss it later).
• Connect button is blue instead black.
• Bottom descriptions don't include the list of services to connect with.
• Missing And more! See all Jetpack features list item.

Most of them will be implemented in the upcoming PRs.

Demo

connection-screen.mp4

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.