Settings UI: move Connections to dashboard.

[eliorivero]

Fixes #6222

Changes proposed in this Pull Request:

• Connection cards were moved to the bottom of At a Glance
• General tab is now removed
• Updated NavigationSettings GUI tests.
• added GUI tests for DashConnections.

Testing instructions:

• test in connected and dev mode and make sure the Connections cards work properly.

[MichaelArestad]

If you switch them to be DashItem components, you can probably remove a bunch of those positioning styles.

[eliorivero]

Updated to use DashItem.

[beaulebens]

Looking pretty good, but 2 things;

1. I got an error in my console (this was on a site in DEV mode), see screenshot below.
2. Can we use the Mystery Man default for the Gravatar, so that we're not getting some random retro-generated avatar.

[beaulebens]

Would look like this with the ?d=mm for the Gravatar. Unless we have/want a better default?

[beaulebens]

For some reason, my head is squashed :)

[beaulebens]

And I don't know if it's related to this specific PR, but when I click the Manage Connection link, and get the dialog, I think there's an unbalanced div or something, because the entire UI (see in the background/shaded part) jumps to the left:

[beaulebens]

Opening that modal also triggers a JS error:

Warning: Modal.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

[beaulebens]

As a non-Admin (in this case, an Editor) I can't see the connection cards at all. I should probably be able to see my own Account Connection card at least, right? Maybe both (without the Manage Connection link for the site)?

[eliorivero]

Thanks for the review!

Updates:

• always use mystery man
• solve JS warning
• fix user avatar dimensions
• visible for non-admin users

The issue where the body jumps towards left was fixed and is in latest dops master. You might need to do a yarn build or a npm up (in jetpack directory).

For the warning logged when the modal is launched, I've opened a PR in dops:
Automattic/dops-components#86

[beaulebens]

Looking/working much better now!

I have 3 more questions, but they might be better handled in different PRs:

1. Since we're showing the Site Icon for the site there on the site connection side, should we have a link or something to Customizer so that you can change that icon?
2. Same question for Gravatar?
3. On the Account connection side, it felt a little bit weird that there's no way to change/manage that connection. Since we're presenting them separately like this, they feel like very separate concepts (like I should be able to connect the site on the one hand, and my user account on the other/separately). Should we have some "Manage Account" option over there? Do we need it? What would that look like/how would it work?

What you've got on this PR looks good to merge for now though, and we can discuss/look at these questions elsewhere.

[MichaelArestad]

Since we're showing the Site Icon for the site there on the site connection side, should we have a link or something to Customizer so that you can change that icon? Same question for Gravatar?

Maybe in another PR, but definitely not needed for this.

On the Account connection side, it felt a little bit weird that there's no way to change/manage that connection. Since we're presenting them separately like this, they feel like very separate concepts (like I should be able to connect the site on the one hand, and my user account on the other/separately). Should we have some "Manage Account" option over there? Do we need it? What would that look like/how would it work?

There is. Just not for site owners.

[MichaelArestad]

@beaulebens tested and confirmed 3

[MichaelArestad]

@eliorivero Visually, this looks good. Once reviewed by someone else, should be good to go!

[MichaelArestad]

Note: I'll probably be tweaking the styles a little bit next week in another PR.