Adds cloud links to user popover (#66825)

Co-authored-by: Ryan Keairns <contactryank@gmail.com>

x-pack/plugins/cloud/kibana.json

@@ -3,7 +3,7 @@
   "version": "8.0.0",
   "kibanaVersion": "kibana",
   "configPath": ["xpack", "cloud"],
-  "optionalPlugins": ["usageCollection", "home"],
+  "optionalPlugins": ["usageCollection", "home", "security"],
   "server": true,
   "ui": true
 }

x-pack/plugins/cloud/public/index.ts

@@ -7,7 +7,7 @@
 import { PluginInitializerContext } from '../../../../src/core/public';
 import { CloudPlugin } from './plugin';
 
-export { CloudSetup } from './plugin';
+export { CloudSetup, CloudConfigType } from './plugin';
 export function plugin(initializerContext: PluginInitializerContext) {
   return new CloudPlugin(initializerContext);
 }

x-pack/plugins/cloud/public/mocks.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+function createSetupMock() {
+  return {
+    cloudId: 'mock-cloud-id',
+    isCloudEnabled: true,
+    resetPasswordUrl: 'reset-password-url',
+    accountUrl: 'account-url',
+  };
+}
+
+export const cloudMock = {
+  createSetup: createSetupMock,
+};

x-pack/plugins/cloud/public/plugin.ts

@@ -6,52 +6,63 @@
 
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public';
 import { i18n } from '@kbn/i18n';
+import { SecurityPluginStart } from '../../security/public';
 import { getIsCloudEnabled } from '../common/is_cloud_enabled';
 import { ELASTIC_SUPPORT_LINK } from '../common/constants';
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
+import { createUserMenuLinks } from './user_menu_links';
 
-interface CloudConfigType {
+export interface CloudConfigType {
   id?: string;
   resetPasswordUrl?: string;
   deploymentUrl?: string;
+  accountUrl?: string;
 }
 
 interface CloudSetupDependencies {
   home?: HomePublicPluginSetup;
 }
 
+interface CloudStartDependencies {
+  security?: SecurityPluginStart;
+}
+
 export interface CloudSetup {
   cloudId?: string;
   cloudDeploymentUrl?: string;
   isCloudEnabled: boolean;
+  resetPasswordUrl?: string;
+  accountUrl?: string;
 }
 
 export class CloudPlugin implements Plugin<CloudSetup> {
   private config!: CloudConfigType;
+  private isCloudEnabled: boolean;
 
   constructor(private readonly initializerContext: PluginInitializerContext) {
     this.config = this.initializerContext.config.get<CloudConfigType>();
+    this.isCloudEnabled = false;
   }
 
   public async setup(core: CoreSetup, { home }: CloudSetupDependencies) {
     const { id, resetPasswordUrl, deploymentUrl } = this.config;
-    const isCloudEnabled = getIsCloudEnabled(id);
+    this.isCloudEnabled = getIsCloudEnabled(id);
 
     if (home) {
-      home.environment.update({ cloud: isCloudEnabled });
-      if (isCloudEnabled) {
+      home.environment.update({ cloud: this.isCloudEnabled });
+      if (this.isCloudEnabled) {
         home.tutorials.setVariable('cloud', { id, resetPasswordUrl });
       }
     }
 
     return {
       cloudId: id,
       cloudDeploymentUrl: deploymentUrl,
-      isCloudEnabled,
+      isCloudEnabled: this.isCloudEnabled,
     };
   }
 
-  public start(coreStart: CoreStart) {
+  public start(coreStart: CoreStart, { security }: CloudStartDependencies) {
     const { deploymentUrl } = this.config;
     coreStart.chrome.setHelpSupportUrl(ELASTIC_SUPPORT_LINK);
     if (deploymentUrl) {
@@ -63,5 +74,10 @@ export class CloudPlugin implements Plugin<CloudSetup> {
         href: deploymentUrl,
       });
     }
+
+    if (security && this.isCloudEnabled) {
+      const userMenuLinks = createUserMenuLinks(this.config);
+      security.navControlService.addUserMenuLinks(userMenuLinks);
+    }
   }
 }

x-pack/plugins/cloud/public/user_menu_links.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { UserMenuLink } from '../../security/public';
+import { CloudConfigType } from '.';
+
+export const createUserMenuLinks = (config: CloudConfigType): UserMenuLink[] => {
+  const { resetPasswordUrl, accountUrl } = config;
+  const userMenuLinks = [] as UserMenuLink[];
+
+  if (resetPasswordUrl) {
+    userMenuLinks.push({
+      label: i18n.translate('xpack.cloud.userMenuLinks.profileLinkText', {
+        defaultMessage: 'Cloud profile',
+      }),
+      iconType: 'logoCloud',
+      href: resetPasswordUrl,
+      order: 100,
+    });
+  }
+
+  if (accountUrl) {
+    userMenuLinks.push({
+      label: i18n.translate('xpack.cloud.userMenuLinks.accountLinkText', {
+        defaultMessage: 'Account & Billing',
+      }),
+      iconType: 'gear',
+      href: accountUrl,
+      order: 200,
+    });
+  }
+
+  return userMenuLinks;
+};

x-pack/plugins/cloud/server/config.ts

@@ -23,6 +23,7 @@ const configSchema = schema.object({
   apm: schema.maybe(apmConfigSchema),
   resetPasswordUrl: schema.maybe(schema.string()),
   deploymentUrl: schema.maybe(schema.string()),
+  accountUrl: schema.maybe(schema.string()),
 });
 
 export type CloudConfigType = TypeOf<typeof configSchema>;
@@ -32,6 +33,7 @@ export const config: PluginConfigDescriptor<CloudConfigType> = {
     id: true,
     resetPasswordUrl: true,
     deploymentUrl: true,
+    accountUrl: true,
   },
   schema: configSchema,
 };

x-pack/plugins/security/public/index.ts

@@ -16,6 +16,7 @@ import {
 export { SecurityPluginSetup, SecurityPluginStart };
 export { AuthenticatedUser } from '../common/model';
 export { SecurityLicense, SecurityLicenseFeatures } from '../common/licensing';
+export { UserMenuLink } from '../public/nav_control';
 
 export const plugin: PluginInitializer<
   SecurityPluginSetup,

x-pack/plugins/security/public/mocks.ts

@@ -7,6 +7,7 @@
 import { authenticationMock } from './authentication/index.mock';
 import { createSessionTimeoutMock } from './session/session_timeout.mock';
 import { licenseMock } from '../common/licensing/index.mock';
+import { navControlServiceMock } from './nav_control/index.mock';
 
 function createSetupMock() {
   return {
@@ -15,7 +16,13 @@ function createSetupMock() {
     license: licenseMock.create(),
   };
 }
+function createStartMock() {
+  return {
+    navControlService: navControlServiceMock.createStart(),
+  };
+}
 
 export const securityMock = {
   createSetup: createSetupMock,
+  createStart: createStartMock,
 };

x-pack/plugins/security/public/nav_control/index.mock.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { SecurityNavControlServiceStart } from '.';
+
+export const navControlServiceMock = {
+  createStart: (): jest.Mocked<SecurityNavControlServiceStart> => ({
+    getUserMenuLinks$: jest.fn(),
+    addUserMenuLinks: jest.fn(),
+  }),
+};

x-pack/plugins/security/public/nav_control/index.ts

@@ -4,4 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { SecurityNavControlService } from './nav_control_service';
+export { SecurityNavControlService, SecurityNavControlServiceStart } from './nav_control_service';
+export { UserMenuLink } from './nav_control_component';

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

@@ -0,0 +1,11 @@
+.chrNavControl__userMenu {
+  .euiContextMenuPanelTitle {
+    // Uppercased by default, override to match actual username
+    text-transform: none;
+  }
+
+  .euiContextMenuItem {
+    // Temp fix for EUI issue https://github.com/elastic/eui/issues/3092
+    line-height: normal;
+  }
+}

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

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { BehaviorSubject } from 'rxjs';
 import { shallowWithIntl, nextTick, mountWithIntl } from 'test_utils/enzyme_helpers';
 import { SecurityNavControl } from './nav_control_component';
 import { AuthenticatedUser } from '../../common/model';
@@ -17,6 +18,7 @@ describe('SecurityNavControl', () => {
       user: new Promise(() => {}) as Promise<AuthenticatedUser>,
       editProfileUrl: '',
       logoutUrl: '',
+      userMenuLinks$: new BehaviorSubject([]),
     };
 
     const wrapper = shallowWithIntl(<SecurityNavControl {...props} />);
@@ -42,6 +44,7 @@ describe('SecurityNavControl', () => {
       user: Promise.resolve({ full_name: 'foo' }) as Promise<AuthenticatedUser>,
       editProfileUrl: '',
       logoutUrl: '',
+      userMenuLinks$: new BehaviorSubject([]),
     };
 
     const wrapper = shallowWithIntl(<SecurityNavControl {...props} />);
@@ -70,6 +73,7 @@ describe('SecurityNavControl', () => {
       user: Promise.resolve({ full_name: 'foo' }) as Promise<AuthenticatedUser>,
       editProfileUrl: '',
       logoutUrl: '',
+      userMenuLinks$: new BehaviorSubject([]),
     };
 
     const wrapper = mountWithIntl(<SecurityNavControl {...props} />);
@@ -91,6 +95,7 @@ describe('SecurityNavControl', () => {
       user: Promise.resolve({ full_name: 'foo' }) as Promise<AuthenticatedUser>,
       editProfileUrl: '',
       logoutUrl: '',
+      userMenuLinks$: new BehaviorSubject([]),
     };
 
     const wrapper = mountWithIntl(<SecurityNavControl {...props} />);
@@ -107,4 +112,37 @@ describe('SecurityNavControl', () => {
     expect(findTestSubject(wrapper, 'profileLink')).toHaveLength(1);
     expect(findTestSubject(wrapper, 'logoutLink')).toHaveLength(1);
   });
+
+  it('renders a popover with additional user menu links registered by other plugins', async () => {
+    const props = {
+      user: Promise.resolve({ full_name: 'foo' }) as Promise<AuthenticatedUser>,
+      editProfileUrl: '',
+      logoutUrl: '',
+      userMenuLinks$: new BehaviorSubject([
+        { label: 'link1', href: 'path-to-link-1', iconType: 'empty', order: 1 },
+        { label: 'link2', href: 'path-to-link-2', iconType: 'empty', order: 2 },
+        { label: 'link3', href: 'path-to-link-3', iconType: 'empty', order: 3 },
+      ]),
+    };
+
+    const wrapper = mountWithIntl(<SecurityNavControl {...props} />);
+    await nextTick();
+    wrapper.update();
+
+    expect(findTestSubject(wrapper, 'userMenu')).toHaveLength(0);
+    expect(findTestSubject(wrapper, 'profileLink')).toHaveLength(0);
+    expect(findTestSubject(wrapper, 'userMenuLink__link1')).toHaveLength(0);
+    expect(findTestSubject(wrapper, 'userMenuLink__link2')).toHaveLength(0);
+    expect(findTestSubject(wrapper, 'userMenuLink__link3')).toHaveLength(0);
+    expect(findTestSubject(wrapper, 'logoutLink')).toHaveLength(0);
+
+    wrapper.find(EuiHeaderSectionItemButton).simulate('click');
+
+    expect(findTestSubject(wrapper, 'userMenu')).toHaveLength(1);
+    expect(findTestSubject(wrapper, 'profileLink')).toHaveLength(1);
+    expect(findTestSubject(wrapper, 'userMenuLink__link1')).toHaveLength(1);
+    expect(findTestSubject(wrapper, 'userMenuLink__link2')).toHaveLength(1);
+    expect(findTestSubject(wrapper, 'userMenuLink__link3')).toHaveLength(1);
+    expect(findTestSubject(wrapper, 'logoutLink')).toHaveLength(1);
+  });
 });