Render Cloud links in the Kibana user profile dropdown

[ryankeairns]

As part of the ongoing efforts to bring the Cloud and Kibana experiences closer together, we would like to provide Cloud users with a path back to their account settings from their Kibana deployment. More specifically, we need to add Cloud account links to the existing Kibana user profile menu.

☝️The target for this work is 7.9

---

The following three screenshots demonstrate the Cloud profile menu, the Kibana profile menu for a Cloud user, and the self-hosted (non-Cloud) profile menu.

---

What needs to happen in Kibana?

The default (current) links will need to be swapped out with the Kibana links. There is an existing Cloud plugin where we'd like to contain and manage all Cloud-related data.

Related to the deployment link issue, these profile links will use the same root URL. For each link, we would append the remainder of the path like:
👉 I need to verify these

• Profile https://cloud.elastic.co/user/settings
• Account https://cloud.elastic.co/account/activity
• Security https://cloud.elastic.co/account/keys

The Cloud team has provided the design and is close to implementing this profile menu within their UI. Kibana should follow these established patterns so that users feel as though they are in one cohesive experience.

Additional considerations

There will be a couple of nuances in the initial version. First, we may not have the complete set of user data in the SSO object being passed. As an example, you'll notice the license level badge is not present on the Kibana side.

Additionally, Kibana does not have the notion of user preferences which means dark mode is applied as an advanced setting affecting all users on a given instance. For that reason, it has been removed from the Kibana user profile menu.

In cases where a user is on a self-hosted version of Kibana, or if they have logged in with the credentials provided by Cloud (i.e. signed in with the basic Kibana username/password form and not SSO), they will see a subset of the menu links. In actuality, we'll fall back to the base Kibana profile menu which only contains two links - User profile (fka Edit profile) and Log out.

Next steps, we need to watch out for the completion of the SSO work. Once that has been shipped, we can fetch the user object data and add logic to the Cloud plugin which swaps out the default links for the Cloud links, when possible.

In addition to the Cloud plugin work, the user profile menu should be changed to accept a set of menu links which are determined by the aforementioned logic.

[elasticmachine]

Pinging @elastic/kibana-core-ui (Team:Core UI)

[elasticmachine]

Pinging @elastic/kibana-security (Team:Security)

[ryankeairns]

@andrew-moldovan @gjones You can track the addition of Cloud-based user profile links in this issue. Also, please correct any misstatements or assumptions.

[andrew-moldovan]

This looks great. One point is that you can start development on this before SSO (in case that slips, or you magically hire 2 new engineers tomorrow), as when you're developing you can just assume you're in Cloud, so that you can get most of the experience done.

[legrego]

@ryankeairns Do we have a preferred way to render these buttons which contain an icon with both primary and subdued text? I can throw something together to mimic the mockup, but if you've already given this some thought, then there's no need to reinvent the wheel 😄

[ryankeairns]

@legrego I chatted briefly with @gjones last week and it sounds like he and @johnbarrierwilson are still iterating on this design. He noted that they may drop the icon as well, so let's see where they land as our guide as they have some mockups in the works. Thanks!

[gjones]

Yeah sorry, was about to chip in, I'll have something in the next day or so.

[gjones]

I've shopped this around to a few people, played with removing the icons, removing the subtext etc. This is the one most people agreed on worked the best.

So a list of changes:

• Remove sub/help text from nav items
• Change User profile to just Profile
• Change Account settings to Account

Hoping this is a cleaner approach as the subtext added a lot of weight to the menu.

EDIT: Updated to match EUI Standards

[legrego]

I've shopped this around to a few people, played with removing the icons, removing the subtext etc. This is the one most people agreed on worked the best.

So a list of changes:

• Remove sub/help text from nav items
• Change User profile to just Profile
• Change Account settings to Account

Hoping this is a cleaner approach as the subtext added a lot of weight to the menu.

EDIT: Updated to match EUI Standards

Thanks for the mockups @gjones! I agree these are a lot cleaner. I’m not sure if you’re looking for feedback or not. If so, then I’m personally a bit confused reading these options.

A casual user may not be all that familiar with the distinction between the cloud console, their cloud account, and their Kibana account. Given that, it’s not immediately clear which link I should click for a given task. For example, where would I go to change my password? Drawing from prior experience in other websites/web applications, I’ve seen this function under all three of the proposed headings in one way or another (“profile”, “account”, “security”). I think I would first try “security”, and if that didn’t work, I’d try “account” next, finally landing on “profile” if “account” didn’t have the option to i was looking for.

Putting aside the change password example, I don’t know what the distinction is between “profile” and “account”. I’m thinking strictly in terms of a user inside Kibana. These terms might be clearer to a cloud administrator, but I don’t have that context. For what it’s worth, the subtext in the original issue description helps to clarify this for me.

I know you’re getting a lot of differing opinions, and I know how frustrating it can be to reconcile all of them when designing an interface, but I wanted to add my thoughts in case it provided a new perspective

[gjones]

All good points @legrego. In light of some developments on the Cloud side I think we're going to have to reevaluate these groupings. @ryankeairns perhaps we could have a quick sync around timelines and hard requirements here?

[ryankeairns]

@gjones sure, any time!