Adds cloud links to user popover #66825

cqliu1 · 2020-05-15T22:00:42Z

Summary

Closes #62863.
Related to https://github.com/elastic/cloud/issues/57695.

This converts the Kibana user menu to a context menu and adds cloud links to the user menu in the global nav. This works off of the assumption that the URLs for the additional cloud links will be configured in the kibana.yml.

Non-cloud user

Cloud user

To test

You can mock enabling the cloud plugin locally by defining a cloud ID and providing the urls for the profile links added in this PR in your kibana.dev.yml, like so:

# Enable cloud plugin
xpack.cloud.id: 'eastus2.azure.elastic-cloud.com:9243$59ef636c6917463db140321484d63cfa$a8b109c08adc43279ef48f29af1a3911'
xpack.cloud.resetPasswordUrl: 'https://cloud.elastic.co/user/settings' # Cloud profile link
xpack.cloud.accountUrl: 'https://cloud.elastic.co/account/activity' # Account link

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility, including a check against IE11

For maintainers

This was checked for breaking API changes and was labeled appropriately

ryankeairns · 2020-05-27T18:49:44Z

@cqliu1 what do I add to the kibana.yml file in order to test this out? or can I add it to the kibana.dev.yml file?

cqliu1 · 2020-05-28T03:54:44Z

@cqliu1 what do I add to the kibana.yml file in order to test this out? or can I add it to the kibana.dev.yml file?

Currently, the cloud links are still hard coded, so all you need to do to test this PR right now is pass a cloud ID and a cloud password reset url in your kibana.dev.yml, like this:

# Enable cloud plugin
xpack.cloud.id: 'eastus2.azure.elastic-cloud.com:9243$59ef636c6917463db140321484d63cfa$a8b109c08adc43279ef48f29af1a3911'
xpack.cloud.resetPasswordUrl: 'https://cloud.elastic.co/user/settings'

I'll provide an updated snippet with the additional links in the description up top once I have the UI reading the links from the config file.

ryankeairns · 2020-05-28T15:59:38Z

Tried it and it worked!
I'll withhold an approval until out of draft mode, but this is looking great.

ryankeairns · 2020-06-05T14:23:22Z

Catherine and I talked on the side about whether we should also display the current Kibana profile link alongside the Cloud profile/account/security links. It seems that would be necessary as it allows users to reset their kibana password.

For the time being, we've decided to leave it in and temporarily name the Cloud profile link as 'Cloud profile' (accompanied by the Cloud logo in lieu of the user icon).

This will be revisited once the Cloud design and API work is complete. At that time, we can discuss as a group and determine the final names, icons, etc.

legrego · 2020-06-26T10:02:20Z

ACK: will review on Monday

joshdover

I wonder if it would be better to invert the dependencies here a bit and have the security plugin expose an API for adding new links to the dropdown. Advantages of this would be:

It's more flexible, other plugins can also add more links to this dropdown
We can keep all the cloud-specific bits in the Cloud plugin rather than spreading it out over the codebase

@elastic/kibana-security thoughts?

legrego · 2020-06-29T12:08:08Z

I wonder if it would be better to invert the dependencies here a bit and have the security plugin expose an API for adding new links to the dropdown. Advantages of this would be:

It's more flexible, other plugins can also add more links to this dropdown

We can keep all the cloud-specific bits in the Cloud plugin rather than spreading it out over the codebase

@elastic/kibana-security thoughts?

++ I'd rather see the cloud plugin add a dependency on the security plugin, and have the security plugin expose a service to add links to the dropdown.

snide

Small suggestion, code looks good.

snide · 2020-06-29T14:03:02Z

x-pack/plugins/security/public/nav_control/nav_control_component.scss

+  .securityNavControlComponent__logoutLink {
+    border-top: $euiBorderThin;
+  }


I'd remove this or only apply it if cloud links exist. It looks a bit odd when there's only two items.

I ended up using the separator menu item instead of relying on CSS to add that divider. https://github.com/elastic/kibana/pull/66825/files#diff-244d6513d4e0e5f7effeaa007127777d567372db67bf0e3ae54bbea6481bd2a8R160

cqliu1 · 2020-06-29T19:34:25Z

@joshdover @legrego That makes a lot of sense. Let me switch this PR back into a WIP while I rework this feature and reverse the dependencies.

…-link

…oud-profile-link

ryankeairns

Looks good! Well aligned to the Cloud UI menu (though they need to add the buffer prop as well 😉 ) and leaves us in a good spot to iron on the final links (profile vs cloud profile, etc.).

Thanks!

ryankeairns · 2020-11-05T21:37:14Z

x-pack/plugins/security/public/nav_control/nav_control_component.tsx

@@ -103,44 +183,8 @@ export class SecurityNavControl extends Component<Props, State> {
        closePopover={this.closeMenu}
        panelPaddingSize="none"
      >


Adding a buffer={0} here will make the popover open below the button, regardless of the popover content. (🎩 hat tip @cchaos )

ryankeairns

Accidentally approved, need to add that buffer={0} prop.

kibanamachine · 2020-11-05T23:49:22Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 61a78c5

Metrics [docs]

@kbn/optimizer bundle module count

id	before	after	diff
`cloud`	6	7	+1
`security`	460	469	+9
total			+10

async chunks size

id	before	after	diff
`security`	814.1KB	784.0KB	-30.1KB

distributable file count

id	before	after	diff
`default`	42729	42730	+1

page load bundle size

id	before	after	diff
`cloud`	5.2KB	6.1KB	+942.0B
`security`	151.4KB	162.3KB	+10.9KB
total			+11.8KB

History

💔 Build #86252 failed 7db9f92
💔 Build #85951 failed 5ea1bd1
💔 Build #85936 failed acc41ff
💚 Build #56520 succeeded 14e71bd7e687629848b37801ec49b6f10d68a41f
💔 Build #56412 failed a47176710b439c2530ba5e35764f2e5155d6b462

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

legrego

There's certainly more to be sorted out here. The general premise we're after is that the top header is truly global and that we don't differentiate between Cloud UI and Kibana UI. Now, there's a lot of related work that needs to happen for this to become reality, but I would refrain from separating things out. Given that, we may want to replace the Cloud logo, ultimately.

My preference would be to get this PR merged since Catherine is headed back to Canvas 😢 , and then move our discussion to #82755 . We've got time to sort this out before the Cloud side catches up at which point this 'turns on'.

@ryankeairns That works for me.

I'm surprised to find this was merged without codeowners approval?

legrego · 2020-11-06T00:53:17Z

x-pack/plugins/security/public/nav_control/nav_control_service.tsx

+      addUserMenuLinks: (userMenuLink: UserMenuLink[]) => {
+        this.userMenuLinks$.next(userMenuLink);
+      },


I don't think this was in the spirit of what @pgayvallet and I were asking for. next will still replace the previously added links with whatever is provided by the subsequent caller.

The reason we asked this to be changed to addUserMenuLinks was so that multiple plugins could register menu links without clobbering the links that other plugins may have added.

Sorry for merging prematurely! I got a little too excited, and I thought I addressed all of your feedback. I misunderstood the ask as just a rename. I'll go ahead and revert the commit, and open a new PR.

This reverts commit 8cdf566.

cqliu1 added the WIP Work in progress label May 15, 2020

cqliu1 force-pushed the cloud-profile-link branch from c5b69cd to b8e48d6 Compare June 1, 2020 19:11

cqliu1 added enhancement New value added to drive a business result release_note:enhancement v7.9.0 v8.0.0 labels Jun 2, 2020

cqliu1 force-pushed the cloud-profile-link branch from b8e48d6 to 67b24b2 Compare June 4, 2020 19:57

ryankeairns mentioned this pull request Jun 8, 2020

[Meta] Kibana global header #62010

Closed

cqliu1 force-pushed the cloud-profile-link branch 4 times, most recently from 7507d54 to 14e71bd Compare June 25, 2020 21:46

cqliu1 marked this pull request as ready for review June 25, 2020 23:51

cqliu1 requested review from a team as code owners June 25, 2020 23:51

cqliu1 added the review label Jun 25, 2020

cqliu1 requested a review from ryankeairns June 25, 2020 23:51

cqliu1 removed the WIP Work in progress label Jun 25, 2020

legrego self-requested a review June 26, 2020 10:01

joshdover reviewed Jun 26, 2020

View reviewed changes

snide approved these changes Jun 29, 2020

View reviewed changes

cqliu1 removed the review label Jun 29, 2020

ryankeairns mentioned this pull request Nov 5, 2020

[Discuss] What to call the Kibana profile vs the Cloud profile #82755

Closed

cqliu1 and others added 6 commits November 5, 2020 11:34

Merge branch 'master' of github.com:elastic/kibana into cloud-profile…

c47fbe7

…-link

Merge pull request #14 from ryankeairns/cloud-profile-link

3c85255

Removed cloud security link and renamed account link

6eaab5b

Merge branch 'cloud-profile-link' of github.com:cqliu1/kibana into cl…

b45467b

…oud-profile-link

Renamed 'setUserMenuLinks' to 'addUserMenuLinks' in nav control service

8d706f2

Fixed ts error

7db9f92

cqliu1 marked this pull request as ready for review November 5, 2020 20:51

cqliu1 requested a review from a team November 5, 2020 20:51

ryankeairns approved these changes Nov 5, 2020

View reviewed changes

ryankeairns self-requested a review November 5, 2020 21:39

ryankeairns requested changes Nov 5, 2020

View reviewed changes

Fixed ts errors

c01f2c7

ryankeairns mentioned this pull request Nov 5, 2020

[EuiPopover] Unpredictable behavior with buffer elastic/eui#4232

Closed

Added buffer prop to popover in nav control component

61a78c5

ryankeairns self-requested a review November 5, 2020 22:20

ryankeairns approved these changes Nov 5, 2020

View reviewed changes

cqliu1 merged commit 8cdf566 into elastic:master Nov 6, 2020

cqliu1 deleted the cloud-profile-link branch November 6, 2020 00:41

legrego reviewed Nov 6, 2020

View reviewed changes

cqliu1 added a commit that referenced this pull request Nov 6, 2020

Revert "Adds cloud links to user popover (#66825)"

2087d0b

This reverts commit 8cdf566.

cqliu1 mentioned this pull request Nov 6, 2020

Revert "Adds cloud links to user popover" #82802

Merged

cqliu1 added release_note:skip Skip the PR/issue when compiling release notes reverted and removed release_note:enhancement v7.11.0 labels Nov 6, 2020

cqliu1 restored the cloud-profile-link branch November 6, 2020 04:00

cqliu1 mentioned this pull request Nov 6, 2020

Adds cloud links to user menu #82803

Merged

7 tasks

spalger pushed a commit that referenced this pull request Nov 6, 2020

Revert "Adds cloud links to user popover (#66825)" (#82802)

e378555

This reverts commit 8cdf566.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds cloud links to user popover #66825

Adds cloud links to user popover #66825

cqliu1 commented May 15, 2020 •

edited by ryankeairns

Loading

ryankeairns commented May 27, 2020

cqliu1 commented May 28, 2020

ryankeairns commented May 28, 2020

ryankeairns commented Jun 5, 2020 •

edited

Loading

legrego commented Jun 26, 2020

joshdover left a comment

legrego commented Jun 29, 2020

snide left a comment

snide Jun 29, 2020

cqliu1 Nov 4, 2020

cqliu1 commented Jun 29, 2020

ryankeairns left a comment

ryankeairns Nov 5, 2020

ryankeairns left a comment

kibanamachine commented Nov 5, 2020

legrego left a comment

legrego Nov 6, 2020

cqliu1 Nov 6, 2020

Adds cloud links to user popover #66825

Adds cloud links to user popover #66825

Conversation

cqliu1 commented May 15, 2020 • edited by ryankeairns Loading

Summary

Non-cloud user

Cloud user

To test

Checklist

For maintainers

ryankeairns commented May 27, 2020

cqliu1 commented May 28, 2020

ryankeairns commented May 28, 2020

ryankeairns commented Jun 5, 2020 • edited Loading

legrego commented Jun 26, 2020

joshdover left a comment

Choose a reason for hiding this comment

legrego commented Jun 29, 2020

snide left a comment

Choose a reason for hiding this comment

snide Jun 29, 2020

Choose a reason for hiding this comment

cqliu1 Nov 4, 2020

Choose a reason for hiding this comment

cqliu1 commented Jun 29, 2020

ryankeairns left a comment

Choose a reason for hiding this comment

ryankeairns Nov 5, 2020

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 5, 2020

💚 Build Succeeded

Metrics [docs]

@kbn/optimizer bundle module count

async chunks size

distributable file count

page load bundle size

History

legrego left a comment

Choose a reason for hiding this comment

legrego Nov 6, 2020

Choose a reason for hiding this comment

cqliu1 Nov 6, 2020

Choose a reason for hiding this comment

cqliu1 commented May 15, 2020 •

edited by ryankeairns

Loading

ryankeairns commented Jun 5, 2020 •

edited

Loading