diff --git a/src/core/public/chrome/chrome_service.mock.ts b/src/core/public/chrome/chrome_service.mock.ts index 4a79dd8869c1c..c9a05ff4e08fe 100644 --- a/src/core/public/chrome/chrome_service.mock.ts +++ b/src/core/public/chrome/chrome_service.mock.ts @@ -74,6 +74,8 @@ const createStartContractMock = () => { setHelpSupportUrl: jest.fn(), getIsNavDrawerLocked$: jest.fn(), getNavType$: jest.fn(), + getCustomNavLink$: jest.fn(), + setCustomNavLink: jest.fn(), }; startContract.navLinks.getAll.mockReturnValue([]); startContract.getBrand$.mockReturnValue(new BehaviorSubject({} as ChromeBrand)); @@ -81,6 +83,7 @@ const createStartContractMock = () => { startContract.getApplicationClasses$.mockReturnValue(new BehaviorSubject(['class-name'])); startContract.getBadge$.mockReturnValue(new BehaviorSubject({} as ChromeBadge)); startContract.getBreadcrumbs$.mockReturnValue(new BehaviorSubject([{} as ChromeBreadcrumb])); + startContract.getCustomNavLink$.mockReturnValue(new BehaviorSubject(undefined)); startContract.getHelpExtension$.mockReturnValue(new BehaviorSubject(undefined)); startContract.getIsNavDrawerLocked$.mockReturnValue(new BehaviorSubject(false)); startContract.getNavType$.mockReturnValue(new BehaviorSubject('modern' as NavType)); diff --git a/src/core/public/chrome/chrome_service.test.ts b/src/core/public/chrome/chrome_service.test.ts index e39733cc10de7..8dc81dceaccd6 100644 --- a/src/core/public/chrome/chrome_service.test.ts +++ b/src/core/public/chrome/chrome_service.test.ts @@ -363,6 +363,27 @@ describe('start', () => { }); }); + describe('custom nav link', () => { + it('updates/emits the current custom nav link', async () => { + const { chrome, service } = await start(); + const promise = chrome.getCustomNavLink$().pipe(toArray()).toPromise(); + + chrome.setCustomNavLink({ title: 'Manage cloud deployment' }); + chrome.setCustomNavLink(undefined); + service.stop(); + + await expect(promise).resolves.toMatchInlineSnapshot(` + Array [ + undefined, + Object { + "title": "Manage cloud deployment", + }, + undefined, + ] + `); + }); + }); + describe('help extension', () => { it('updates/emits the current help extension', async () => { const { chrome, service } = await start(); diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx index 67cd43f0647e4..0fe3c1f083cf0 100644 --- a/src/core/public/chrome/chrome_service.tsx +++ b/src/core/public/chrome/chrome_service.tsx @@ -34,7 +34,7 @@ import { IUiSettingsClient } from '../ui_settings'; import { KIBANA_ASK_ELASTIC_LINK } from './constants'; import { ChromeDocTitle, DocTitleService } from './doc_title'; import { ChromeNavControls, NavControlsService } from './nav_controls'; -import { ChromeNavLinks, NavLinksService } from './nav_links'; +import { ChromeNavLinks, NavLinksService, ChromeNavLink } from './nav_links'; import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed'; import { Header } from './ui'; import { NavType } from './ui/header'; @@ -148,6 +148,7 @@ export class ChromeService { const helpExtension$ = new BehaviorSubject(undefined); const breadcrumbs$ = new BehaviorSubject([]); const badge$ = new BehaviorSubject(undefined); + const customNavLink$ = new BehaviorSubject(undefined); const helpSupportUrl$ = new BehaviorSubject(KIBANA_ASK_ELASTIC_LINK); const isNavDrawerLocked$ = new BehaviorSubject(localStorage.getItem(IS_LOCKED_KEY) === 'true'); @@ -221,6 +222,7 @@ export class ChromeService { badge$={badge$.pipe(takeUntil(this.stop$))} basePath={http.basePath} breadcrumbs$={breadcrumbs$.pipe(takeUntil(this.stop$))} + customNavLink$={customNavLink$.pipe(takeUntil(this.stop$))} kibanaDocLink={docLinks.links.kibana} forceAppSwitcherNavigation$={navLinks.getForceAppSwitcherNavigation$()} helpExtension$={helpExtension$.pipe(takeUntil(this.stop$))} @@ -297,6 +299,12 @@ export class ChromeService { getIsNavDrawerLocked$: () => getIsNavDrawerLocked$, getNavType$: () => getNavType$, + + getCustomNavLink$: () => customNavLink$.pipe(takeUntil(this.stop$)), + + setCustomNavLink: (customNavLink?: ChromeNavLink) => { + customNavLink$.next(customNavLink); + }, }; } @@ -423,6 +431,16 @@ export interface ChromeStart { */ setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void; + /** + * Get an observable of the current custom nav link + */ + getCustomNavLink$(): Observable | undefined>; + + /** + * Override the current set of custom nav link + */ + setCustomNavLink(newCustomNavLink?: Partial): void; + /** * Get an observable of the current custom help conttent */ diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 9239811df2065..9fee7b50f371b 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -61,6 +61,64 @@ exports[`CollapsibleNav renders links grouped by category 1`] = ` } } closeNav={[Function]} + customNavLink$={ + BehaviorSubject { + "_isScalar": false, + "_value": Object { + "baseUrl": "/", + "category": undefined, + "data-test-subj": "Custom link", + "href": "Custom link", + "id": "Custom link", + "isActive": true, + "legacy": false, + "title": "Custom link", + }, + "closed": false, + "hasError": false, + "isStopped": false, + "observers": Array [ + Subscriber { + "_parentOrParents": null, + "_subscriptions": Array [ + SubjectSubscription { + "_parentOrParents": [Circular], + "_subscriptions": null, + "closed": false, + "subject": [Circular], + "subscriber": [Circular], + }, + ], + "closed": false, + "destination": SafeSubscriber { + "_complete": undefined, + "_context": [Circular], + "_error": undefined, + "_next": [Function], + "_parentOrParents": null, + "_parentSubscriber": [Circular], + "_subscriptions": null, + "closed": false, + "destination": Object { + "closed": true, + "complete": [Function], + "error": [Function], + "next": [Function], + }, + "isStopped": false, + "syncErrorThrowable": false, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + "isStopped": false, + "syncErrorThrowable": true, + "syncErrorThrown": false, + "syncErrorValue": null, + }, + ], + "thrownError": null, + } + } homeHref="/" id="collapsibe-nav" isLocked={false} @@ -408,6 +466,46 @@ exports[`CollapsibleNav renders links grouped by category 1`] = ` data-test-subj="collapsibleNav" id="collapsibe-nav" > +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+ + + +
+
+ +
+ + +
+ +
+
+
+
    +
  • + +
    • +
+
+
+
+
+
+
+
+
    +
  • + +
    • +
+
+
+
+
+ +
+ +
+
+ +
    + +
  • + +
    • +     +
+ +
+
+ +
+ + +
+ {}, closeNav: () => {}, navigateToApp: () => Promise.resolve(), + customNavLink$: new BehaviorSubject(undefined), }; } @@ -120,12 +121,14 @@ describe('CollapsibleNav', () => { mockRecentNavLink({ label: 'recent 1' }), mockRecentNavLink({ label: 'recent 2' }), ]; + const customNavLink = mockLink({ title: 'Custom link' }); const component = mount( ); expect(component).toMatchSnapshot(); diff --git a/src/core/public/chrome/ui/header/collapsible_nav.tsx b/src/core/public/chrome/ui/header/collapsible_nav.tsx index 9494e22920de8..07541b1adff16 100644 --- a/src/core/public/chrome/ui/header/collapsible_nav.tsx +++ b/src/core/public/chrome/ui/header/collapsible_nav.tsx @@ -30,7 +30,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { groupBy, sortBy } from 'lodash'; -import React, { useRef } from 'react'; +import React, { Fragment, useRef } from 'react'; import { useObservable } from 'react-use'; import * as Rx from 'rxjs'; import { ChromeNavLink, ChromeRecentlyAccessedHistoryItem } from '../..'; @@ -88,6 +88,7 @@ interface Props { onIsLockedUpdate: OnIsLockedUpdate; closeNav: () => void; navigateToApp: InternalApplicationStart['navigateToApp']; + customNavLink$: Rx.Observable; } export function CollapsibleNav({ @@ -105,6 +106,7 @@ export function CollapsibleNav({ }: Props) { const navLinks = useObservable(observables.navLinks$, []).filter((link) => !link.hidden); const recentlyAccessed = useObservable(observables.recentlyAccessed$, []); + const customNavLink = useObservable(observables.customNavLink$, undefined); const appId = useObservable(observables.appId$, ''); const lockRef = useRef(null); const groupedNavLinks = groupBy(navLinks, (link) => link?.category?.id); @@ -134,6 +136,38 @@ export function CollapsibleNav({ isDocked={isLocked} onClose={closeNav} > + {customNavLink && ( + + + + + + + + + + )} + {/* Pinned items */} { const navLinks$ = new BehaviorSubject([ { id: 'kibana', title: 'kibana', baseUrl: '', legacy: false }, ]); + const customNavLink$ = new BehaviorSubject({ + id: 'cloud-deployment-link', + title: 'Manage cloud deployment', + baseUrl: '', + legacy: false, + }); const recentlyAccessed$ = new BehaviorSubject([ { link: '', label: 'dashboard', id: 'dashboard' }, ]); @@ -87,6 +94,7 @@ describe('Header', () => { recentlyAccessed$={recentlyAccessed$} isLocked$={isLocked$} navType$={navType$} + customNavLink$={customNavLink$} /> ); expect(component).toMatchSnapshot(); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index d24b342e0386b..3da3caaaa4a4f 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -58,6 +58,7 @@ export interface HeaderProps { appTitle$: Observable; badge$: Observable; breadcrumbs$: Observable; + customNavLink$: Observable; homeHref: string; isVisible$: Observable; kibanaDocLink: string; @@ -203,6 +204,7 @@ export function Header({ toggleCollapsibleNavRef.current.focus(); } }} + customNavLink$={observables.customNavLink$} /> ) : ( // TODO #64541 diff --git a/src/core/public/chrome/ui/header/nav_link.tsx b/src/core/public/chrome/ui/header/nav_link.tsx index 969b6728e0263..6b5cecd138376 100644 --- a/src/core/public/chrome/ui/header/nav_link.tsx +++ b/src/core/public/chrome/ui/header/nav_link.tsx @@ -35,11 +35,12 @@ function LinkIcon({ url }: { url: string }) { interface Props { link: ChromeNavLink; legacyMode: boolean; - appId: string | undefined; + appId?: string; basePath?: HttpStart['basePath']; dataTestSubj: string; onClick?: Function; navigateToApp: CoreStart['application']['navigateToApp']; + externalLink?: boolean; } // TODO #64541 @@ -54,6 +55,7 @@ export function createEuiListItem({ onClick = () => {}, navigateToApp, dataTestSubj, + externalLink = false, }: Props) { const { legacy, active, id, title, disabled, euiIconType, icon, tooltip } = link; let { href } = link; @@ -69,6 +71,7 @@ export function createEuiListItem({ onClick(event: React.MouseEvent) { onClick(); if ( + !externalLink && // ignore external links !legacyMode && // ignore when in legacy mode !legacy && // ignore links to legacy apps !event.defaultPrevented && // onClick prevented default diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 9a79576b14d1f..bc11ab57b3ea1 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -466,6 +466,7 @@ export interface ChromeStart { getBadge$(): Observable; getBrand$(): Observable; getBreadcrumbs$(): Observable; + getCustomNavLink$(): Observable | undefined>; getHelpExtension$(): Observable; getIsNavDrawerLocked$(): Observable; getIsVisible$(): Observable; @@ -478,6 +479,7 @@ export interface ChromeStart { setBadge(badge?: ChromeBadge): void; setBrand(brand: ChromeBrand): void; setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void; + setCustomNavLink(newCustomNavLink?: Partial): void; setHelpExtension(helpExtension?: ChromeHelpExtension): void; setHelpSupportUrl(url: string): void; setIsVisible(isVisible: boolean): void; diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json index 36cfdf904d6d4..596ba17d343c0 100644 --- a/x-pack/.i18nrc.json +++ b/x-pack/.i18nrc.json @@ -8,6 +8,7 @@ "xpack.apm": ["legacy/plugins/apm", "plugins/apm"], "xpack.beatsManagement": ["legacy/plugins/beats_management", "plugins/beats_management"], "xpack.canvas": "plugins/canvas", + "xpack.cloud": "plugins/cloud", "xpack.dashboard": "plugins/dashboard_enhanced", "xpack.discover": "plugins/discover_enhanced", "xpack.crossClusterReplication": "plugins/cross_cluster_replication", diff --git a/x-pack/plugins/cloud/public/plugin.ts b/x-pack/plugins/cloud/public/plugin.ts index 62e21392f7110..1c3a770da79f5 100644 --- a/x-pack/plugins/cloud/public/plugin.ts +++ b/x-pack/plugins/cloud/public/plugin.ts @@ -5,6 +5,7 @@ */ import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'src/core/public'; +import { i18n } from '@kbn/i18n'; import { getIsCloudEnabled } from '../common/is_cloud_enabled'; import { ELASTIC_SUPPORT_LINK } from '../common/constants'; import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; @@ -12,6 +13,7 @@ import { HomePublicPluginSetup } from '../../../../src/plugins/home/public'; interface CloudConfigType { id?: string; resetPasswordUrl?: string; + deploymentUrl?: string; } interface CloudSetupDependencies { @@ -24,10 +26,14 @@ export interface CloudSetup { } export class CloudPlugin implements Plugin { - constructor(private readonly initializerContext: PluginInitializerContext) {} + private config!: CloudConfigType; + + constructor(private readonly initializerContext: PluginInitializerContext) { + this.config = this.initializerContext.config.get(); + } public async setup(core: CoreSetup, { home }: CloudSetupDependencies) { - const { id, resetPasswordUrl } = this.initializerContext.config.get(); + const { id, resetPasswordUrl } = this.config; const isCloudEnabled = getIsCloudEnabled(id); if (home) { @@ -44,6 +50,16 @@ export class CloudPlugin implements Plugin { } public start(coreStart: CoreStart) { + const { deploymentUrl } = this.config; coreStart.chrome.setHelpSupportUrl(ELASTIC_SUPPORT_LINK); + if (deploymentUrl) { + coreStart.chrome.setCustomNavLink({ + title: i18n.translate('xpack.cloud.deploymentLinkLabel', { + defaultMessage: 'Manage this deployment', + }), + euiIconType: 'arrowLeft', + href: deploymentUrl, + }); + } } } diff --git a/x-pack/plugins/cloud/server/config.ts b/x-pack/plugins/cloud/server/config.ts index d899b45aebdfe..ff8a2c5acdf9a 100644 --- a/x-pack/plugins/cloud/server/config.ts +++ b/x-pack/plugins/cloud/server/config.ts @@ -22,6 +22,7 @@ const configSchema = schema.object({ id: schema.maybe(schema.string()), apm: schema.maybe(apmConfigSchema), resetPasswordUrl: schema.maybe(schema.string()), + deploymentUrl: schema.maybe(schema.string()), }); export type CloudConfigType = TypeOf; @@ -30,6 +31,7 @@ export const config: PluginConfigDescriptor = { exposeToBrowser: { id: true, resetPasswordUrl: true, + deploymentUrl: true, }, schema: configSchema, };