Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Render Cloud links in the Kibana user profile dropdown #62863

Closed
ryankeairns opened this issue Apr 7, 2020 · 15 comments · Fixed by #66825 or #82803
Closed

Render Cloud links in the Kibana user profile dropdown #62863

ryankeairns opened this issue Apr 7, 2020 · 15 comments · Fixed by #66825 or #82803
Assignees
Labels
Feature:Header Work related to the header section of the Kibana app. REASSIGN from Team:Core UI Deprecated label for old Core UI team Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more!

Comments

@ryankeairns
Copy link
Contributor

ryankeairns commented Apr 7, 2020

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.

Frame 2


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

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.

@ryankeairns ryankeairns added Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! REASSIGN from Team:Core UI Deprecated label for old Core UI team Feature:Header Work related to the header section of the Kibana app. labels Apr 7, 2020
@elasticmachine
Copy link
Contributor

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

@elasticmachine
Copy link
Contributor

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

@ryankeairns
Copy link
Contributor Author

@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
Copy link

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
Copy link
Member

legrego commented Apr 13, 2020

@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
Copy link
Contributor Author

@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
Copy link

gjones commented Apr 13, 2020

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

@gjones
Copy link

gjones commented Apr 13, 2020

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.

Menu-update

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
Copy link
Member

legrego commented Apr 13, 2020

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.

Menu-update

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
Copy link

gjones commented Apr 15, 2020

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
Copy link
Contributor Author

@gjones sure, any time!

@ryankeairns
Copy link
Contributor Author

@ryankeairns
Copy link
Contributor Author

Cloud issue proposing to add account links to Kibana yaml: https://github.com/elastic/cloud/issues/57695

@gjones
Copy link

gjones commented Jul 14, 2020

@ryankeairns @cqliu1 as mentioned yesterday, we're going to be going with the following options in Cloud.

  • Profile
  • Account & Billing
  • Dark mode
  • Log out

It sounds like we've got a bit of time before you're going to need them, but @andrew-moldovan and I will work on getting the correct/final URLs for you.

@ryankeairns
Copy link
Contributor Author

As we discussed, we'll look into making the Kibana profile link read as 'Kibana profile' so that the 'Profile' link is the same between Cloud and Kibana.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Header Work related to the header section of the Kibana app. REASSIGN from Team:Core UI Deprecated label for old Core UI team Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants