From bb080833aaa57a405e15d98850d137886f8de785 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Tue, 15 Oct 2019 08:12:17 +0200 Subject: [PATCH 01/23] move/rename overlay mount and unmount types from banner to parent module Signed-off-by: pgayvallet --- src/core/public/index.ts | 4 +-- .../overlays/banners/banners_service.tsx | 29 ++++----------- src/core/public/overlays/banners/index.ts | 7 +--- src/core/public/overlays/index.ts | 3 +- src/core/public/overlays/types.ts | 35 +++++++++++++++++++ 5 files changed, 46 insertions(+), 32 deletions(-) create mode 100644 src/core/public/overlays/types.ts diff --git a/src/core/public/index.ts b/src/core/public/index.ts index 7391cf7f9454c..6e7885d483d70 100644 --- a/src/core/public/index.ts +++ b/src/core/public/index.ts @@ -118,9 +118,9 @@ export { } from './http'; export { + MountPoint, + UnmountCallback, OverlayStart, - OverlayBannerMount, - OverlayBannerUnmount, OverlayBannersStart, OverlayRef, } from './overlays'; diff --git a/src/core/public/overlays/banners/banners_service.tsx b/src/core/public/overlays/banners/banners_service.tsx index 799ca43c7fa93..49d22d1f57f58 100644 --- a/src/core/public/overlays/banners/banners_service.tsx +++ b/src/core/public/overlays/banners/banners_service.tsx @@ -26,32 +26,19 @@ import { BannersList } from './banners_list'; import { UiSettingsClientContract } from '../../ui_settings'; import { I18nStart } from '../../i18n'; import { UserBannerService } from './user_banner_service'; - -/** - * A function that will unmount the banner from the element. - * @public - */ -export type OverlayBannerUnmount = () => void; - -/** - * A function that will mount the banner inside the provided element. - * @param element an element to render into - * @returns a {@link OverlayBannerUnmount} - * @public - */ -export type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; +import { MountPoint } from '../types'; /** @public */ export interface OverlayBannersStart { /** * Add a new banner * - * @param mount {@link OverlayBannerMount} + * @param mount {@link MountPoint} * @param priority optional priority order to display this banner. Higher priority values are shown first. * @returns a unique identifier for the given banner to be used with {@link OverlayBannersStart.remove} and * {@link OverlayBannersStart.replace} */ - add(mount: OverlayBannerMount, priority?: number): string; + add(mount: MountPoint, priority?: number): string; /** * Remove a banner @@ -70,7 +57,7 @@ export interface OverlayBannersStart { * @returns a new identifier for the given banner to be used with {@link OverlayBannersStart.remove} and * {@link OverlayBannersStart.replace} */ - replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; + replace(id: string | undefined, mount: MountPoint, priority?: number): string; /** @internal */ get$(): Observable; @@ -80,7 +67,7 @@ export interface OverlayBannersStart { /** @internal */ export interface OverlayBanner { readonly id: string; - readonly mount: OverlayBannerMount; + readonly mount: MountPoint; readonly priority: number; } @@ -110,20 +97,16 @@ export class OverlayBannersService { if (!banners$.value.has(id)) { return false; } - banners$.next(banners$.value.remove(id)); - return true; }, - replace(id: string | undefined, mount: OverlayBannerMount, priority = 0) { + replace(id: string | undefined, mount: MountPoint, priority = 0) { if (!id || !banners$.value.has(id)) { return this.add(mount, priority); } - const nextId = genId(); const nextBanner = { id: nextId, mount, priority }; - banners$.next(banners$.value.remove(id).add(nextId, nextBanner)); return nextId; }, diff --git a/src/core/public/overlays/banners/index.ts b/src/core/public/overlays/banners/index.ts index 9e908bd628003..a68dfa7ebadac 100644 --- a/src/core/public/overlays/banners/index.ts +++ b/src/core/public/overlays/banners/index.ts @@ -17,9 +17,4 @@ * under the License. */ -export { - OverlayBannerMount, - OverlayBannerUnmount, - OverlayBannersStart, - OverlayBannersService, -} from './banners_service'; +export { OverlayBannersStart, OverlayBannersService } from './banners_service'; diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts index c49548abee0df..2650dd155121d 100644 --- a/src/core/public/overlays/index.ts +++ b/src/core/public/overlays/index.ts @@ -17,5 +17,6 @@ * under the License. */ -export { OverlayBannerMount, OverlayBannerUnmount, OverlayBannersStart } from './banners'; +export { MountPoint, UnmountCallback } from './types'; +export { OverlayBannersStart } from './banners'; export { OverlayService, OverlayStart, OverlayRef } from './overlay_service'; diff --git a/src/core/public/overlays/types.ts b/src/core/public/overlays/types.ts new file mode 100644 index 0000000000000..88736f99c48db --- /dev/null +++ b/src/core/public/overlays/types.ts @@ -0,0 +1,35 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/** + * A function that will mount the banner inside the provided element. + * @param element the container element to render into + * @returns a {@link UnmountCallback} that unmount the element on call. + * + * @public + */ +export type MountPoint = (element: HTMLElement) => UnmountCallback; + +/** + * A function that will unmount the element previously mounted by + * the associated {@link MountPoint} + * + * @public + */ +export type UnmountCallback = () => void; From 0dccba92923c6ce542eb1f948c04bc9defee64ef Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Wed, 16 Oct 2019 17:54:23 +0200 Subject: [PATCH 02/23] migrate openModal / modalService Signed-off-by: pgayvallet fix I18nProvider import path Signed-off-by: pgayvallet --- .../notifications/toasts/error_toast.tsx | 55 +++++++++------- .../__snapshots__/modal.test.tsx.snap | 20 +++--- src/core/public/overlays/flyout.test.mocks.ts | 2 + src/core/public/overlays/modal.test.tsx | 38 +++++++++--- src/core/public/overlays/modal.tsx | 10 +-- src/core/public/overlays/overlay_service.ts | 3 +- src/core/public/overlays/utils.test.tsx | 62 +++++++++++++++++++ src/core/public/overlays/utils.tsx | 46 ++++++++++++++ .../shard_failure_open_modal_button.tsx | 15 +++-- .../public/lib/panel/embeddable_panel.tsx | 21 ++++--- .../add_panel/add_panel_action.ts | 5 +- .../add_panel/open_add_panel_flyout.tsx | 5 +- .../actions/send_message_action.tsx | 17 ++--- .../contact_card_embeddable_factory.tsx | 23 ++++--- .../overlays/create_react_overlays.test.tsx | 11 ++-- .../public/overlays/create_react_overlays.tsx | 3 +- .../kibana_react/public/overlays/index.tsx | 1 + .../public/overlays/mount_for_component.tsx | 35 +++++++++++ .../kibana_react/public/overlays/types.ts | 2 +- .../guidance_panel/guidance_panel.tsx | 3 +- .../graph/public/components/search_bar.tsx | 3 +- .../graph/public/services/source_modal.tsx | 3 +- .../public/custom_time_range_action.test.ts | 44 ++++++------- .../public/custom_time_range_badge.test.ts | 23 ++++--- .../advanced_ui_actions/public/plugin.ts | 6 +- .../advanced_ui_actions/public/types.ts | 10 +-- 26 files changed, 328 insertions(+), 138 deletions(-) create mode 100644 src/core/public/overlays/utils.test.tsx create mode 100644 src/core/public/overlays/utils.tsx create mode 100644 src/plugins/kibana_react/public/overlays/mount_for_component.tsx diff --git a/src/core/public/notifications/toasts/error_toast.tsx b/src/core/public/notifications/toasts/error_toast.tsx index 10bc51559644b..956e56999849e 100644 --- a/src/core/public/notifications/toasts/error_toast.tsx +++ b/src/core/public/notifications/toasts/error_toast.tsx @@ -18,6 +18,7 @@ */ import React from 'react'; +import ReactDOM from 'react-dom'; import { EuiButton, @@ -29,7 +30,7 @@ import { EuiModalHeaderTitle, } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; +import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; import { OverlayStart } from '../../overlays'; @@ -40,6 +41,11 @@ interface ErrorToastProps { openModal: OverlayStart['openModal']; } +const mount = (component: React.ReactElement) => (element: HTMLElement) => { + ReactDOM.render({component}, element); + return () => ReactDOM.unmountComponentAtNode(element); +}; + /** * This should instead be replaced by the overlay service once it's available. * This does not use React portals so that if the parent toast times out, this modal @@ -52,27 +58,32 @@ function showErrorDialog({ openModal, }: Pick) { const modal = openModal( - - - {title} - - - - {error.stack && ( - - - - {error.stack} - - - )} - - - modal.close()} fill> - - - - + mount( + + + {title} + + + + {error.stack && ( + + + + {error.stack} + + + )} + + + modal.close()} fill> + + + + + ) ); } diff --git a/src/core/public/overlays/__snapshots__/modal.test.tsx.snap b/src/core/public/overlays/__snapshots__/modal.test.tsx.snap index a4e6f5d6f72b8..27932e313bef4 100644 --- a/src/core/public/overlays/__snapshots__/modal.test.tsx.snap +++ b/src/core/public/overlays/__snapshots__/modal.test.tsx.snap @@ -17,9 +17,9 @@ Array [ maxWidth={true} onClose={[Function]} > - - Modal content - + , @@ -28,6 +28,8 @@ Array [ ] `; +exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`; + exports[`ModalService openModal() with a currently active modal replaces the current modal with a new one 1`] = ` Array [ Array [ @@ -37,9 +39,9 @@ Array [ maxWidth={true} onClose={[Function]} > - - Modal content 1 - + , @@ -52,9 +54,9 @@ Array [ maxWidth={true} onClose={[Function]} > - - Flyout content 2 - + , diff --git a/src/core/public/overlays/flyout.test.mocks.ts b/src/core/public/overlays/flyout.test.mocks.ts index 35a046e960077..563f414a0ae99 100644 --- a/src/core/public/overlays/flyout.test.mocks.ts +++ b/src/core/public/overlays/flyout.test.mocks.ts @@ -19,7 +19,9 @@ export const mockReactDomRender = jest.fn(); export const mockReactDomUnmount = jest.fn(); +export const mockReactDomCreatePortal = jest.fn().mockImplementation(component => component); jest.doMock('react-dom', () => ({ render: mockReactDomRender, + createPortal: mockReactDomCreatePortal, unmountComponentAtNode: mockReactDomUnmount, })); diff --git a/src/core/public/overlays/modal.test.tsx b/src/core/public/overlays/modal.test.tsx index ee8bba5d61112..8b712cb663808 100644 --- a/src/core/public/overlays/modal.test.tsx +++ b/src/core/public/overlays/modal.test.tsx @@ -19,8 +19,10 @@ import { mockReactDomRender, mockReactDomUnmount } from './flyout.test.mocks'; import React from 'react'; +import { mount } from 'enzyme'; import { i18nServiceMock } from '../i18n/i18n_service.mock'; import { ModalService, ModalRef } from './modal'; +import { mountForComponent } from './utils'; const i18nMock = i18nServiceMock.createStartContract(); @@ -35,39 +37,51 @@ describe('ModalService', () => { const target = document.createElement('div'); const modalService = new ModalService(target); expect(mockReactDomRender).not.toHaveBeenCalled(); - modalService.openModal(i18nMock, Modal content); + modalService.openModal(i18nMock, container => { + const content = document.createElement('span'); + content.textContent = 'Modal content'; + container.append(content); + return () => {}; + }); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); + const modalContent = mount(mockReactDomRender.mock.calls[0][0]); + expect(modalContent.html()).toMatchSnapshot(); }); + describe('with a currently active modal', () => { let target: HTMLElement; let modalService: ModalService; let ref1: ModalRef; + beforeEach(() => { target = document.createElement('div'); modalService = new ModalService(target); - ref1 = modalService.openModal(i18nMock, Modal content 1); + ref1 = modalService.openModal(i18nMock, mountForComponent(Modal content 1)); }); + it('replaces the current modal with a new one', () => { - modalService.openModal(i18nMock, Flyout content 2); + modalService.openModal(i18nMock, mountForComponent(Flyout content 2)); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); expect(() => ref1.close()).not.toThrowError(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); }); + it('resolves onClose on the previous ref', async () => { const onCloseComplete = jest.fn(); ref1.onClose.then(onCloseComplete); - modalService.openModal(i18nMock, Flyout content 2); + modalService.openModal(i18nMock, mountForComponent(Flyout content 2)); await ref1.onClose; expect(onCloseComplete).toBeCalledTimes(1); }); }); }); + describe('ModalRef#close()', () => { it('resolves the onClose Promise', async () => { const target = document.createElement('div'); const modalService = new ModalService(target); - const ref = modalService.openModal(i18nMock, Flyout content); + const ref = modalService.openModal(i18nMock, mountForComponent(Flyout content)); const onCloseComplete = jest.fn(); ref.onClose.then(onCloseComplete); @@ -75,21 +89,29 @@ describe('ModalService', () => { await ref.close(); expect(onCloseComplete).toHaveBeenCalledTimes(1); }); + it('can be called multiple times on the same ModalRef', async () => { const target = document.createElement('div'); const modalService = new ModalService(target); - const ref = modalService.openModal(i18nMock, Flyout content); + const ref = modalService.openModal(i18nMock, mountForComponent(Flyout content)); expect(mockReactDomUnmount).not.toHaveBeenCalled(); await ref.close(); expect(mockReactDomUnmount.mock.calls).toMatchSnapshot(); await ref.close(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); }); + it("on a stale ModalRef doesn't affect the active flyout", async () => { const target = document.createElement('div'); const modalService = new ModalService(target); - const ref1 = modalService.openModal(i18nMock, Modal content 1); - const ref2 = modalService.openModal(i18nMock, Modal content 2); + const ref1 = modalService.openModal( + i18nMock, + mountForComponent(Modal content 1) + ); + const ref2 = modalService.openModal( + i18nMock, + mountForComponent(Modal content 2) + ); const onCloseComplete = jest.fn(); ref2.onClose.then(onCloseComplete); mockReactDomUnmount.mockClear(); diff --git a/src/core/public/overlays/modal.tsx b/src/core/public/overlays/modal.tsx index 6f94788b84d71..200d4903694bb 100644 --- a/src/core/public/overlays/modal.tsx +++ b/src/core/public/overlays/modal.tsx @@ -25,6 +25,8 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; import { I18nStart } from '../i18n'; import { OverlayRef } from './overlay_service'; +import { MountPoint } from './types'; +import { MountWrapper } from './utils'; /** * A ModalRef is a reference to an opened modal. It offers methods to @@ -65,12 +67,12 @@ export class ModalService { * Opens a flyout panel with the given component inside. You can use * `close()` on the returned FlyoutRef to close the flyout. * - * @param flyoutChildren - Mounts the children inside a flyout panel - * @return {FlyoutRef} A reference to the opened flyout panel. + * @param modalMount - Mounts the children inside the modal + * @return {ModalRef} A reference to the opened modal. */ public openModal = ( i18n: I18nStart, - modalChildren: React.ReactNode, + modalMount: MountPoint, modalProps: { closeButtonAriaLabel?: string; 'data-test-subj'?: string; @@ -97,7 +99,7 @@ export class ModalService { modal.close()}> - {modalChildren} + , diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts index 1a72bb5dbe435..62b41db0581bd 100644 --- a/src/core/public/overlays/overlay_service.ts +++ b/src/core/public/overlays/overlay_service.ts @@ -23,6 +23,7 @@ import { FlyoutService } from './flyout'; import { ModalService } from './modal'; import { I18nStart } from '../i18n'; import { OverlayBannersStart, OverlayBannersService } from './banners'; +import { MountPoint } from './types'; import { UiSettingsClientContract } from '../ui_settings'; /** @@ -83,7 +84,7 @@ export interface OverlayStart { } ) => OverlayRef; openModal: ( - modalChildren: React.ReactNode, + modalChildren: MountPoint, modalProps?: { className?: string; closeButtonAriaLabel?: string; diff --git a/src/core/public/overlays/utils.test.tsx b/src/core/public/overlays/utils.test.tsx new file mode 100644 index 0000000000000..caec542f9c4b2 --- /dev/null +++ b/src/core/public/overlays/utils.test.tsx @@ -0,0 +1,62 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { mount } from 'enzyme'; +import { MountWrapper, mountForComponent } from './utils'; + +describe('MountWrapper', () => { + it('renders an html element in react tree', () => { + const mountPoint = (container: HTMLElement) => { + const el = document.createElement('p'); + el.textContent = 'hello'; + el.className = 'bar'; + container.append(el); + return () => {}; + }; + const wrapper = ; + const container = mount(wrapper); + expect(container.html()).toMatchInlineSnapshot(`"

hello

"`); + }); + + it('updates the react tree when the mounted element changes', () => { + const el = document.createElement('p'); + el.textContent = 'initial'; + + const mountPoint = (container: HTMLElement) => { + container.append(el); + return () => {}; + }; + + const wrapper = ; + const container = mount(wrapper); + expect(container.html()).toMatchInlineSnapshot(`"

initial

"`); + + el.textContent = 'changed'; + container.update(); + expect(container.html()).toMatchInlineSnapshot(`"

changed

"`); + }); + + it('can render a detached react component', () => { + const mountPoint = mountForComponent(detached); + const wrapper = ; + const container = mount(wrapper); + expect(container.html()).toMatchInlineSnapshot(`"
detached
"`); + }); +}); diff --git a/src/core/public/overlays/utils.tsx b/src/core/public/overlays/utils.tsx new file mode 100644 index 0000000000000..5e2db7a74abcf --- /dev/null +++ b/src/core/public/overlays/utils.tsx @@ -0,0 +1,46 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useEffect, useRef } from 'react'; +import ReactDOM from 'react-dom'; +import { MountPoint } from 'kibana/public'; +import { I18nProvider } from '@kbn/i18n/react'; + +/** + * Mount converter for react components. + * + * @param component to get a mount for + */ +export const mountForComponent = (component: React.ReactElement): MountPoint => ( + element: HTMLElement +) => { + ReactDOM.render({component}, element); + return () => ReactDOM.unmountComponentAtNode(element); +}; + +/** + * + * @param mount + * @constructor + */ +export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { + const element = useRef(null); + useEffect(() => mount(element.current!), [mount]); + return
; +}; diff --git a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx index 5e53477b8ec04..a5b2822927919 100644 --- a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx +++ b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx @@ -22,6 +22,7 @@ import { npStart } from 'ui/new_platform'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButton, EuiTextAlign } from '@elastic/eui'; +import { mountForComponent } from '../../../../../../plugins/kibana_react/public'; import { ShardFailureModal } from './shard_failure_modal'; import { ResponseWithShardFailure, Request } from './shard_failure_types'; @@ -34,12 +35,14 @@ interface Props { export function ShardFailureOpenModalButton({ request, response, title }: Props) { function onClick() { const modal = npStart.core.overlays.openModal( - modal.close()} - />, + mountForComponent( + modal.close()} + /> + ), { className: 'shardFailureModal', } diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx index 8a8a2f44b7fd8..c92599d44bf7a 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx +++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx @@ -25,7 +25,8 @@ import { TGetActionsCompatibleWithTrigger, IAction, } from '../ui_actions'; -import { CoreStart } from '../../../../../core/public'; +import { CoreStart, OverlayStart } from '../../../../../core/public'; +import { mountForComponent } from '../../../../kibana_react/public'; import { Start as InspectorStartContract } from '../inspector'; import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER } from '../triggers'; @@ -200,17 +201,19 @@ export class EmbeddablePanel extends React.Component { embeddable: this.props.embeddable, }); - const createGetUserData = (overlays: CoreStart['overlays']) => + const createGetUserData = (overlays: OverlayStart) => async function getUserData(context: { embeddable: IEmbeddable }) { return new Promise<{ title: string | undefined }>(resolve => { const session = overlays.openModal( - { - session.close(); - resolve({ title }); - }} - />, + mountForComponent( + { + session.close(); + resolve({ title }); + }} + /> + ), { 'data-test-subj': 'customizePanel', } diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts index 3ca3a0864d9f1..9ecc4686c21b6 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts @@ -18,8 +18,7 @@ */ import { i18n } from '@kbn/i18n'; import { IAction } from 'src/plugins/ui_actions/public'; -import { NotificationsStart } from 'src/core/public'; -import { KibanaReactOverlays } from 'src/plugins/kibana_react/public'; +import { NotificationsStart, OverlayStart } from 'src/core/public'; import { ViewMode, GetEmbeddableFactory, GetEmbeddableFactories } from '../../../../types'; import { openAddPanelFlyout } from './open_add_panel_flyout'; import { IContainer } from '../../../../containers'; @@ -37,7 +36,7 @@ export class AddPanelAction implements IAction { constructor( private readonly getFactory: GetEmbeddableFactory, private readonly getAllFactories: GetEmbeddableFactories, - private readonly overlays: KibanaReactOverlays, + private readonly overlays: OverlayStart, private readonly notifications: NotificationsStart, private readonly SavedObjectFinder: React.ComponentType ) {} diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx index bfa4f6e31d84e..50ebebfe8ffef 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx @@ -17,8 +17,7 @@ * under the License. */ import React from 'react'; -import { NotificationsStart } from 'src/core/public'; -import { KibanaReactOverlays } from 'src/plugins/kibana_react/public'; +import { NotificationsStart, OverlayStart } from 'src/core/public'; import { IContainer } from '../../../../containers'; import { AddPanelFlyout } from './add_panel_flyout'; import { GetEmbeddableFactory, GetEmbeddableFactories } from '../../../../types'; @@ -27,7 +26,7 @@ export async function openAddPanelFlyout(options: { embeddable: IContainer; getFactory: GetEmbeddableFactory; getAllFactories: GetEmbeddableFactories; - overlays: KibanaReactOverlays; + overlays: OverlayStart; notifications: NotificationsStart; SavedObjectFinder: React.ComponentType; }) { diff --git a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx index fc20a99987484..ac540bff4a610 100644 --- a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx @@ -20,6 +20,7 @@ import React from 'react'; import { EuiFlyoutBody } from '@elastic/eui'; import { createAction, IncompatibleActionError } from '../../ui_actions'; import { CoreStart } from '../../../../../../core/public'; +import { mountForComponent } from '../../../../../kibana_react/public'; import { Embeddable, EmbeddableInput } from '../../embeddables'; import { GetMessageModal } from './get_message_modal'; import { FullNameEmbeddableOutput, hasFullNameOutput } from './say_hello_action'; @@ -51,13 +52,15 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { } const modal = overlays.openModal( - modal.close()} - onDone={message => { - modal.close(); - sendMessage(context, message); - }} - /> + mountForComponent( + modal.close()} + onDone={message => { + modal.close(); + sendMessage(context, message); + }} + /> + ) ); }, }); diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx index 962cddfa3735f..8e7352b24e87b 100644 --- a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx @@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n'; import { TExecuteTriggerActions } from 'src/plugins/ui_actions/public'; import { CoreStart } from 'src/core/public'; +import { mountForComponent } from '../../../../../../kibana_react/public'; import { EmbeddableFactory } from '../../../embeddables'; import { Container } from '../../../containers'; import { ContactCardEmbeddable, ContactCardEmbeddableInput } from './contact_card_embeddable'; @@ -54,16 +55,18 @@ export class ContactCardEmbeddableFactory extends EmbeddableFactory> { return new Promise(resolve => { const modalSession = this.overlays.openModal( - { - modalSession.close(); - resolve(undefined); - }} - onCreate={(input: { firstName: string; lastName?: string }) => { - modalSession.close(); - resolve(input); - }} - />, + mountForComponent( + { + modalSession.close(); + resolve(undefined); + }} + onCreate={(input: { firstName: string; lastName?: string }) => { + modalSession.close(); + resolve(input); + }} + /> + ), { 'data-test-subj': 'createContactCardEmbeddable', } diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx index b10cbbc87be7c..1882d138ad5cd 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx @@ -68,13 +68,10 @@ test('can open modal with React element', () => { overlays.openModal(
bar
); expect(coreOverlays.openModal).toHaveBeenCalledTimes(1); - expect(coreOverlays.openModal.mock.calls[0][0]).toMatchInlineSnapshot(` - -
- bar -
- - `); + const container = document.createElement('div'); + const mount = coreOverlays.openModal.mock.calls[0][0]; + mount(container); + expect(container.innerHTML).toMatchInlineSnapshot(`"
bar
"`); }); test('passes through flyout options when opening flyout', () => { diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx index a62c0970cf525..d645ed3356da8 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import { KibanaServices } from '../context/types'; import { KibanaReactOverlays } from './types'; +import { mountForComponent } from './mount_for_component'; export const createReactOverlays = (services: KibanaServices): KibanaReactOverlays => { const checkCoreService = () => { @@ -35,7 +36,7 @@ export const createReactOverlays = (services: KibanaServices): KibanaReactOverla const openModal: KibanaReactOverlays['openModal'] = (node, options?) => { checkCoreService(); - return services.overlays!.openModal(<>{node}, options); + return services.overlays!.openModal(mountForComponent(<>{node}), options); }; const overlays: KibanaReactOverlays = { diff --git a/src/plugins/kibana_react/public/overlays/index.tsx b/src/plugins/kibana_react/public/overlays/index.tsx index 844f617ceafdb..2096d7e858690 100644 --- a/src/plugins/kibana_react/public/overlays/index.tsx +++ b/src/plugins/kibana_react/public/overlays/index.tsx @@ -19,3 +19,4 @@ export * from './types'; export * from './create_react_overlays'; +export * from './mount_for_component'; diff --git a/src/plugins/kibana_react/public/overlays/mount_for_component.tsx b/src/plugins/kibana_react/public/overlays/mount_for_component.tsx new file mode 100644 index 0000000000000..6ac6002c1b060 --- /dev/null +++ b/src/plugins/kibana_react/public/overlays/mount_for_component.tsx @@ -0,0 +1,35 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import { I18nProvider } from '@kbn/i18n/react'; +import { MountPoint } from 'kibana/public'; + +/** + * Mount converter for react components. + * + * @param component to get a mount for + */ +export const mountForComponent = (component: React.ReactElement): MountPoint => ( + element: HTMLElement +) => { + ReactDOM.render({component}, element); + return () => ReactDOM.unmountComponentAtNode(element); +}; diff --git a/src/plugins/kibana_react/public/overlays/types.ts b/src/plugins/kibana_react/public/overlays/types.ts index 6a1fb25ca1483..f1a82113a26ee 100644 --- a/src/plugins/kibana_react/public/overlays/types.ts +++ b/src/plugins/kibana_react/public/overlays/types.ts @@ -27,6 +27,6 @@ export interface KibanaReactOverlays { ) => ReturnType; openModal: ( node: React.ReactNode, - options?: Parameters['1'] + options?: Parameters['1'] ) => ReturnType; } diff --git a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx index 369963fb46097..8dede207b803c 100644 --- a/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx +++ b/x-pack/legacy/plugins/graph/public/components/guidance_panel/guidance_panel.tsx @@ -80,7 +80,8 @@ function GuidancePanelComponent(props: GuidancePanelProps) { } = props; const kibana = useKibana(); - const { overlays, savedObjects, uiSettings, chrome, application } = kibana.services; + const { services, overlays } = kibana; + const { savedObjects, uiSettings, chrome, application } = services; if (!overlays || !chrome || !application) return null; const onOpenDatasourcePicker = () => { diff --git a/x-pack/legacy/plugins/graph/public/components/search_bar.tsx b/x-pack/legacy/plugins/graph/public/components/search_bar.tsx index d8576c02d29c9..455ea83587183 100644 --- a/x-pack/legacy/plugins/graph/public/components/search_bar.tsx +++ b/x-pack/legacy/plugins/graph/public/components/search_bar.tsx @@ -89,7 +89,8 @@ export function SearchBarComponent(props: SearchBarProps) { }, [currentDatasource]); const kibana = useKibana(); - const { overlays, savedObjects, uiSettings } = kibana.services; + const { services, overlays } = kibana; + const { savedObjects, uiSettings } = services; if (!overlays) return null; return ( diff --git a/x-pack/legacy/plugins/graph/public/services/source_modal.tsx b/x-pack/legacy/plugins/graph/public/services/source_modal.tsx index c985271f4dfe0..20a5b6d0786bd 100644 --- a/x-pack/legacy/plugins/graph/public/services/source_modal.tsx +++ b/x-pack/legacy/plugins/graph/public/services/source_modal.tsx @@ -6,6 +6,7 @@ import { CoreStart } from 'src/core/public'; import React from 'react'; +import { KibanaReactOverlays } from 'src/plugins/kibana_react/public'; import { SourceModal } from '../components/source_modal'; import { IndexPatternSavedObject } from '../types'; @@ -15,7 +16,7 @@ export function openSourceModal( savedObjects, uiSettings, }: { - overlays: CoreStart['overlays']; + overlays: KibanaReactOverlays; savedObjects: CoreStart['savedObjects']; uiSettings: CoreStart['uiSettings']; }, diff --git a/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts index bbdcf99495288..55e913e0f31da 100644 --- a/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts +++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_action.test.ts @@ -14,7 +14,6 @@ import { EmbeddableFactory } from '../../../../src/plugins/embeddable/public'; import { TimeRangeEmbeddable, TimeRangeContainer, TIME_RANGE_EMBEDDABLE } from './test_helpers'; import { TimeRangeEmbeddableFactory } from './test_helpers/time_range_embeddable_factory'; import { CustomTimeRangeAction } from './custom_time_range_action'; -import { coreMock } from '../../../../src/core/public/mocks'; /* eslint-disable */ import { HelloWorldEmbeddableFactory, @@ -29,6 +28,12 @@ import { ReactElement } from 'react'; jest.mock('ui/new_platform'); +const createOpenModalMock = () => { + const mock = jest.fn(); + mock.mockReturnValue({ close: jest.fn() }); + return mock; +}; + test('Custom time range action prevents embeddable from using container time', async done => { const embeddableFactories = new Map(); embeddableFactories.set(TIME_RANGE_EMBEDDABLE, new TimeRangeEmbeddableFactory()); @@ -66,11 +71,10 @@ test('Custom time range action prevents embeddable from using container time', a expect(child2).toBeDefined(); expect(child2.getInput().timeRange).toEqual({ from: 'now-15m', to: 'now' }); - const start = coreMock.createStart(); - const overlayMock = start.overlays; - overlayMock.openModal.mockClear(); + const openModalMock = createOpenModalMock(); + new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, commonlyUsedRanges: [], dateFormat: 'MM YYY', }).execute({ @@ -78,7 +82,7 @@ test('Custom time range action prevents embeddable from using container time', a }); await nextTick(); - const openModal = overlayMock.openModal.mock.calls[0][0] as ReactElement; + const openModal = openModalMock.mock.calls[0][0] as ReactElement; const wrapper = mount(openModal); wrapper.setState({ timeRange: { from: 'now-30days', to: 'now-29days' } }); @@ -129,11 +133,9 @@ test('Removing custom time range action resets embeddable back to container time const child1 = container.getChild('1'); const child2 = container.getChild('2'); - const start = coreMock.createStart(); - const overlayMock = start.overlays; - overlayMock.openModal.mockClear(); + const openModalMock = createOpenModalMock(); new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, commonlyUsedRanges: [], dateFormat: 'MM YYY', }).execute({ @@ -141,7 +143,7 @@ test('Removing custom time range action resets embeddable back to container time }); await nextTick(); - const openModal = overlayMock.openModal.mock.calls[0][0] as ReactElement; + const openModal = openModalMock.mock.calls[0][0] as ReactElement; const wrapper = mount(openModal); wrapper.setState({ timeRange: { from: 'now-30days', to: 'now-29days' } }); @@ -151,7 +153,7 @@ test('Removing custom time range action resets embeddable back to container time container.updateInput({ timeRange: { from: 'now-30m', to: 'now-1m' } }); new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, commonlyUsedRanges: [], dateFormat: 'MM YYY', }).execute({ @@ -159,7 +161,7 @@ test('Removing custom time range action resets embeddable back to container time }); await nextTick(); - const openModal2 = (overlayMock.openModal as any).mock.calls[1][0]; + const openModal2 = openModalMock.mock.calls[1][0]; const wrapper2 = mount(openModal2); findTestSubject(wrapper2, 'removePerPanelTimeRangeButton').simulate('click'); @@ -209,11 +211,9 @@ test('Cancelling custom time range action leaves state alone', async done => { const child1 = container.getChild('1'); const child2 = container.getChild('2'); - const start = coreMock.createStart(); - const overlayMock = start.overlays; - overlayMock.openModal.mockClear(); + const openModalMock = createOpenModalMock(); new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, commonlyUsedRanges: [], dateFormat: 'MM YYY', }).execute({ @@ -221,7 +221,7 @@ test('Cancelling custom time range action leaves state alone', async done => { }); await nextTick(); - const openModal = overlayMock.openModal.mock.calls[0][0] as ReactElement; + const openModal = openModalMock.mock.calls[0][0] as ReactElement; const wrapper = mount(openModal); wrapper.setState({ timeRange: { from: 'now-300m', to: 'now-400m' } }); @@ -263,9 +263,9 @@ test(`badge is compatible with embeddable that inherits from parent`, async () = const child = container.getChild('1'); - const start = coreMock.createStart(); + const openModalMock = createOpenModalMock(); const compatible = await new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, commonlyUsedRanges: [], dateFormat: 'MM YYY', }).isCompatible({ @@ -333,9 +333,9 @@ test('Attempting to execute on incompatible embeddable throws an error', async ( const child = container.getChild('1'); - const start = coreMock.createStart(); + const openModalMock = createOpenModalMock(); const action = await new CustomTimeRangeAction({ - openModal: start.overlays.openModal, + openModal: openModalMock, dateFormat: 'MM YYYY', commonlyUsedRanges: [], }); diff --git a/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts index c6046c02f0833..d2b9fa9ac1655 100644 --- a/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts +++ b/x-pack/plugins/advanced_ui_actions/public/custom_time_range_badge.test.ts @@ -13,7 +13,6 @@ import { EmbeddableFactory } from '../../../../src/plugins/embeddable/public'; import { TimeRangeEmbeddable, TimeRangeContainer, TIME_RANGE_EMBEDDABLE } from './test_helpers'; import { TimeRangeEmbeddableFactory } from './test_helpers/time_range_embeddable_factory'; import { CustomTimeRangeBadge } from './custom_time_range_badge'; -import { coreMock } from '../../../../src/core/public/mocks'; import { ReactElement } from 'react'; import { nextTick } from 'test_utils/enzyme_helpers'; @@ -50,11 +49,11 @@ test('Removing custom time range from badge resets embeddable back to container const child1 = container.getChild('1'); const child2 = container.getChild('2'); - const start = coreMock.createStart(); - const overlayMock = start.overlays; - overlayMock.openModal.mockClear(); + const openModalMock = jest.fn(); + openModalMock.mockReturnValue({ close: jest.fn() }); + new CustomTimeRangeBadge({ - openModal: start.overlays.openModal, + openModal: openModalMock, dateFormat: 'MM YYYY', commonlyUsedRanges: [], }).execute({ @@ -62,7 +61,7 @@ test('Removing custom time range from badge resets embeddable back to container }); await nextTick(); - const openModal = overlayMock.openModal.mock.calls[0][0] as ReactElement; + const openModal = openModalMock.mock.calls[0][0] as ReactElement; const wrapper = mount(openModal); findTestSubject(wrapper, 'removePerPanelTimeRangeButton').simulate('click'); @@ -102,9 +101,9 @@ test(`badge is not compatible with embeddable that inherits from parent`, async const child = container.getChild('1'); - const start = coreMock.createStart(); + const openModalMock = jest.fn(); const compatible = await new CustomTimeRangeBadge({ - openModal: start.overlays.openModal, + openModal: openModalMock, dateFormat: 'MM YYYY', commonlyUsedRanges: [], }).isCompatible({ @@ -137,9 +136,9 @@ test(`badge is compatible with embeddable that has custom time range`, async () const child = container.getChild('1'); - const start = coreMock.createStart(); + const openModalMock = jest.fn(); const compatible = await new CustomTimeRangeBadge({ - openModal: start.overlays.openModal, + openModal: openModalMock, dateFormat: 'MM YYYY', commonlyUsedRanges: [], }).isCompatible({ @@ -171,9 +170,9 @@ test('Attempting to execute on incompatible embeddable throws an error', async ( const child = container.getChild('1'); - const start = coreMock.createStart(); + const openModalMock = jest.fn(); const badge = await new CustomTimeRangeBadge({ - openModal: start.overlays.openModal, + openModal: openModalMock, dateFormat: 'MM YYYY', commonlyUsedRanges: [], }); diff --git a/x-pack/plugins/advanced_ui_actions/public/plugin.ts b/x-pack/plugins/advanced_ui_actions/public/plugin.ts index fc106cc8ec26b..e2d1892b1355e 100644 --- a/x-pack/plugins/advanced_ui_actions/public/plugin.ts +++ b/x-pack/plugins/advanced_ui_actions/public/plugin.ts @@ -10,6 +10,7 @@ import { CoreStart, Plugin, } from '../../../../src/core/public'; +import { createReactOverlays } from '../../../../src/plugins/kibana_react/public'; import { IUiActionsStart, IUiActionsSetup } from '../../../../src/plugins/ui_actions/public'; import { CONTEXT_MENU_TRIGGER, @@ -44,8 +45,9 @@ export class AdvancedUiActionsPublicPlugin public start(core: CoreStart, { uiActions }: StartDependencies): Start { const dateFormat = core.uiSettings.get('dateFormat') as string; const commonlyUsedRanges = core.uiSettings.get('timepicker:quickRanges') as CommonlyUsedRange[]; + const { openModal } = createReactOverlays(core); const timeRangeAction = new CustomTimeRangeAction({ - openModal: core.overlays.openModal, + openModal, dateFormat, commonlyUsedRanges, }); @@ -53,7 +55,7 @@ export class AdvancedUiActionsPublicPlugin uiActions.attachAction(CONTEXT_MENU_TRIGGER, timeRangeAction.id); const timeRangeBadge = new CustomTimeRangeBadge({ - openModal: core.overlays.openModal, + openModal, dateFormat, commonlyUsedRanges, }); diff --git a/x-pack/plugins/advanced_ui_actions/public/types.ts b/x-pack/plugins/advanced_ui_actions/public/types.ts index bbd7c5528276f..313b09535b196 100644 --- a/x-pack/plugins/advanced_ui_actions/public/types.ts +++ b/x-pack/plugins/advanced_ui_actions/public/types.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { OverlayRef } from '../../../../src/core/public'; +import { KibanaReactOverlays } from '../../../../src/plugins/kibana_react/public'; export interface CommonlyUsedRange { from: string; @@ -12,10 +12,4 @@ export interface CommonlyUsedRange { display: string; } -export type OpenModal = ( - modalChildren: React.ReactNode, - modalProps?: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - } -) => OverlayRef; +export type OpenModal = KibanaReactOverlays['openModal']; From d6c6bd501f82bf5dd820c8b8993547332f583826 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 17 Oct 2019 16:23:15 +0200 Subject: [PATCH 03/23] migrate openFlyout / flyout service Signed-off-by: pgayvallet --- .../__snapshots__/flyout.test.tsx.snap | 22 ++++++++------ src/core/public/overlays/flyout.test.tsx | 29 +++++++++++++------ src/core/public/overlays/flyout.tsx | 8 +++-- src/core/public/overlays/overlay_service.ts | 4 +-- .../add_panel/open_add_panel_flyout.tsx | 27 +++++++++-------- .../actions/send_message_action.tsx | 2 +- src/plugins/inspector/public/plugin.tsx | 5 +++- .../overlays/create_react_overlays.test.tsx | 12 ++++---- .../public/overlays/create_react_overlays.tsx | 2 +- .../tests/test_samples/hello_world_action.tsx | 9 ++++-- .../tests/test_samples/say_hello_action.tsx | 9 ++++-- .../public/sample_panel_action.tsx | 23 ++++++++------- 12 files changed, 90 insertions(+), 62 deletions(-) diff --git a/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap b/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap index 0c19c6312a672..d71573305cad5 100644 --- a/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap +++ b/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap @@ -20,9 +20,9 @@ Array [ ownFocus={false} size="m" > - - Flyout content - + ,
, @@ -30,6 +30,8 @@ Array [ ] `; +exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`; + exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = ` Array [ Array [ @@ -42,9 +44,9 @@ Array [ ownFocus={false} size="m" > - - Flyout content 1 - + ,
, @@ -59,12 +61,14 @@ Array [ ownFocus={false} size="m" > - - Flyout content 2 - + ,
, ], ] `; + +exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`; diff --git a/src/core/public/overlays/flyout.test.tsx b/src/core/public/overlays/flyout.test.tsx index afe37fc50776b..c4deb650332f4 100644 --- a/src/core/public/overlays/flyout.test.tsx +++ b/src/core/public/overlays/flyout.test.tsx @@ -18,7 +18,7 @@ */ import { mockReactDomRender, mockReactDomUnmount } from './flyout.test.mocks'; -import React from 'react'; +import { mount } from 'enzyme'; import { i18nServiceMock } from '../i18n/i18n_service.mock'; import { FlyoutRef, FlyoutService } from './flyout'; @@ -29,14 +29,23 @@ beforeEach(() => { mockReactDomUnmount.mockClear(); }); +const mountText = (text: string) => (container: HTMLElement) => { + const content = document.createElement('span'); + content.textContent = text; + container.append(content); + return () => {}; +}; + describe('FlyoutService', () => { describe('openFlyout()', () => { it('renders a flyout to the DOM', () => { const target = document.createElement('div'); const flyoutService = new FlyoutService(target); expect(mockReactDomRender).not.toHaveBeenCalled(); - flyoutService.openFlyout(i18nMock, Flyout content); + flyoutService.openFlyout(i18nMock, mountText('Flyout content')); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); + const modalContent = mount(mockReactDomRender.mock.calls[0][0]); + expect(modalContent.html()).toMatchSnapshot(); }); describe('with a currently active flyout', () => { let target: HTMLElement; @@ -45,19 +54,21 @@ describe('FlyoutService', () => { beforeEach(() => { target = document.createElement('div'); flyoutService = new FlyoutService(target); - ref1 = flyoutService.openFlyout(i18nMock, Flyout content 1); + ref1 = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); }); it('replaces the current flyout with a new one', () => { - flyoutService.openFlyout(i18nMock, Flyout content 2); + flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); + const modalContent = mount(mockReactDomRender.mock.calls[1][0]); + expect(modalContent.html()).toMatchSnapshot(); expect(() => ref1.close()).not.toThrowError(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); }); it('resolves onClose on the previous ref', async () => { const onCloseComplete = jest.fn(); ref1.onClose.then(onCloseComplete); - flyoutService.openFlyout(i18nMock, Flyout content 2); + flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); await ref1.onClose; expect(onCloseComplete).toBeCalledTimes(1); }); @@ -67,7 +78,7 @@ describe('FlyoutService', () => { it('resolves the onClose Promise', async () => { const target = document.createElement('div'); const flyoutService = new FlyoutService(target); - const ref = flyoutService.openFlyout(i18nMock, Flyout content); + const ref = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); const onCloseComplete = jest.fn(); ref.onClose.then(onCloseComplete); @@ -78,7 +89,7 @@ describe('FlyoutService', () => { it('can be called multiple times on the same FlyoutRef', async () => { const target = document.createElement('div'); const flyoutService = new FlyoutService(target); - const ref = flyoutService.openFlyout(i18nMock, Flyout content); + const ref = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); expect(mockReactDomUnmount).not.toHaveBeenCalled(); await ref.close(); expect(mockReactDomUnmount.mock.calls).toMatchSnapshot(); @@ -88,8 +99,8 @@ describe('FlyoutService', () => { it("on a stale FlyoutRef doesn't affect the active flyout", async () => { const target = document.createElement('div'); const flyoutService = new FlyoutService(target); - const ref1 = flyoutService.openFlyout(i18nMock, Flyout content 1); - const ref2 = flyoutService.openFlyout(i18nMock, Flyout content 2); + const ref1 = flyoutService.openFlyout(i18nMock, mountText('Flyout content 1')); + const ref2 = flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); const onCloseComplete = jest.fn(); ref2.onClose.then(onCloseComplete); mockReactDomUnmount.mockClear(); diff --git a/src/core/public/overlays/flyout.tsx b/src/core/public/overlays/flyout.tsx index c8ba9c6b284d3..68efac21d2c16 100644 --- a/src/core/public/overlays/flyout.tsx +++ b/src/core/public/overlays/flyout.tsx @@ -25,6 +25,8 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; import { I18nStart } from '../i18n'; import { OverlayRef } from './overlay_service'; +import { MountPoint } from './types'; +import { MountWrapper } from './utils'; /** * A FlyoutRef is a reference to an opened flyout panel. It offers methods to @@ -76,12 +78,12 @@ export class FlyoutService { * Opens a flyout panel with the given component inside. You can use * `close()` on the returned FlyoutRef to close the flyout. * - * @param flyoutChildren - Mounts the children inside a flyout panel + * @param flyoutMount - Mounts the children inside a flyout panel * @return {FlyoutRef} A reference to the opened flyout panel. */ public openFlyout = ( i18n: I18nStart, - flyoutChildren: React.ReactNode, + flyoutMount: MountPoint, flyoutProps: { closeButtonAriaLabel?: string; 'data-test-subj'?: string; @@ -107,7 +109,7 @@ export class FlyoutService { render( flyout.close()}> - {flyoutChildren} + , this.targetDomElement diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts index 62b41db0581bd..09278b8fa9f85 100644 --- a/src/core/public/overlays/overlay_service.ts +++ b/src/core/public/overlays/overlay_service.ts @@ -17,8 +17,6 @@ * under the License. */ -import React from 'react'; - import { FlyoutService } from './flyout'; import { ModalService } from './modal'; import { I18nStart } from '../i18n'; @@ -77,7 +75,7 @@ export interface OverlayStart { /** {@link OverlayBannersStart} */ banners: OverlayBannersStart; openFlyout: ( - flyoutChildren: React.ReactNode, + flyoutChildren: MountPoint, flyoutProps?: { closeButtonAriaLabel?: string; 'data-test-subj'?: string; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx index 50ebebfe8ffef..fe838d891c71d 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx @@ -18,6 +18,7 @@ */ import React from 'react'; import { NotificationsStart, OverlayStart } from 'src/core/public'; +import { mountForComponent } from '../../../../../../../kibana_react/public'; import { IContainer } from '../../../../containers'; import { AddPanelFlyout } from './add_panel_flyout'; import { GetEmbeddableFactory, GetEmbeddableFactories } from '../../../../types'; @@ -39,18 +40,20 @@ export async function openAddPanelFlyout(options: { SavedObjectFinder, } = options; const flyoutSession = overlays.openFlyout( - { - if (flyoutSession) { - flyoutSession.close(); - } - }} - getFactory={getFactory} - getAllFactories={getAllFactories} - notifications={notifications} - SavedObjectFinder={SavedObjectFinder} - />, + mountForComponent( + { + if (flyoutSession) { + flyoutSession.close(); + } + }} + getFactory={getFactory} + getAllFactories={getAllFactories} + notifications={notifications} + SavedObjectFinder={SavedObjectFinder} + /> + ), { 'data-test-subj': 'addPanelFlyout', } diff --git a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx index ac540bff4a610..c230194849f9e 100644 --- a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx @@ -39,7 +39,7 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { const greeting = `Hello, ${context.embeddable.getOutput().fullName}`; const content = message ? `${greeting}. ${message}` : greeting; - overlays.openFlyout({content}); + overlays.openFlyout(mountForComponent({content})); }; return createAction({ diff --git a/src/plugins/inspector/public/plugin.tsx b/src/plugins/inspector/public/plugin.tsx index 00714c5a8205c..1cc4dbd86ced1 100644 --- a/src/plugins/inspector/public/plugin.tsx +++ b/src/plugins/inspector/public/plugin.tsx @@ -20,6 +20,7 @@ import { i18n } from '@kbn/i18n'; import * as React from 'react'; import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public'; +import { mountForComponent } from '../../kibana_react/public'; import { InspectorViewRegistry } from './view_registry'; import { Adapters, InspectorOptions, InspectorSession } from './types'; import { InspectorPanel } from './ui/inspector_panel'; @@ -99,7 +100,9 @@ export class InspectorPublicPlugin implements Plugin { } return core.overlays.openFlyout( - , + mountForComponent( + + ), { 'data-test-subj': 'inspectorPanel', closeButtonAriaLabel: closeButtonLabel, diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx index 1882d138ad5cd..c4981c72f1a78 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx @@ -48,13 +48,11 @@ test('can open flyout with React element', () => { overlays.openFlyout(
foo
); expect(coreOverlays.openFlyout).toHaveBeenCalledTimes(1); - expect(coreOverlays.openFlyout.mock.calls[0][0]).toMatchInlineSnapshot(` - -
- foo -
- - `); + + const container = document.createElement('div'); + const mount = coreOverlays.openFlyout.mock.calls[0][0]; + mount(container); + expect(container.innerHTML).toMatchInlineSnapshot(`"
foo
"`); }); test('can open modal with React element', () => { diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx index d645ed3356da8..282341156f7bc 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx @@ -31,7 +31,7 @@ export const createReactOverlays = (services: KibanaServices): KibanaReactOverla const openFlyout: KibanaReactOverlays['openFlyout'] = (node, options?) => { checkCoreService(); - return services.overlays!.openFlyout(<>{node}, options); + return services.overlays!.openFlyout(mountForComponent(<>{node}), options); }; const openModal: KibanaReactOverlays['openModal'] = (node, options?) => { diff --git a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx index 88a0c4ca08145..ad86a0d48e37c 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx @@ -21,6 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { createAction, IAction } from '../../actions'; +import { mountForComponent } from '../../../../kibana_react/public'; export const HELLO_WORLD_ACTION_ID = 'HELLO_WORLD_ACTION_ID'; @@ -29,9 +30,11 @@ export function createHelloWorldAction(overlays: CoreStart['overlays']): IAction type: HELLO_WORLD_ACTION_ID, execute: async () => { const flyoutSession = overlays.openFlyout( - flyoutSession && flyoutSession.close()}> - Hello World, I am a hello world action! - , + mountForComponent( + flyoutSession && flyoutSession.close()}> + Hello World, I am a hello world action! + + ), { 'data-test-subj': 'helloWorldAction', } diff --git a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx index 3c4ecfb6e7c8a..1b5b86d313ab6 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx @@ -21,6 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { IAction, createAction } from '../../actions'; +import { mountForComponent } from '../../../../kibana_react/public'; export const SAY_HELLO_ACTION = 'SAY_HELLO_ACTION'; @@ -31,9 +32,11 @@ export function createSayHelloAction(overlays: CoreStart['overlays']): IAction<{ isCompatible: async ({ name }) => name !== undefined, execute: async context => { const flyoutSession = overlays.openFlyout( - flyoutSession && flyoutSession.close()}> - this.getDisplayName(context) - , + mountForComponent( + flyoutSession && flyoutSession.close()}> + this.getDisplayName(context) + + ), { 'data-test-subj': 'sayHelloAction', } diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx index 71724595d462a..9ffe963d47f29 100644 --- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx +++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx @@ -22,6 +22,7 @@ import { npStart, npSetup } from 'ui/new_platform'; import { CONTEXT_MENU_TRIGGER, IEmbeddable } from '../../../../../src/plugins/embeddable/public'; import { createAction } from '../../../../../src/plugins/ui_actions/public'; +import { mountForComponent } from '../../../../../src/plugins/kibana_react/public'; interface ActionContext { embeddable: IEmbeddable; @@ -36,16 +37,18 @@ function createSamplePanelAction() { return; } npStart.core.overlays.openFlyout( - - - -

{embeddable.getTitle()}

- - - -

This is a sample action

- - , + mountForComponent( + + + +

{embeddable.getTitle()}

+ + + +

This is a sample action

+ + + ), { 'data-test-subj': 'samplePanelActionFlyout', } From dd2e3d373b847abb23c154563a13f043742c4cb0 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Wed, 23 Oct 2019 07:44:54 -0700 Subject: [PATCH 04/23] remove CoreStart export from kibana-react Signed-off-by: pgayvallet --- src/plugins/kibana_react/public/context/context.test.tsx | 2 +- src/plugins/kibana_react/public/context/types.ts | 2 -- src/plugins/kibana_react/public/overlays/types.ts | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/plugins/kibana_react/public/context/context.test.tsx b/src/plugins/kibana_react/public/context/context.test.tsx index d7dce3f69239d..4008daf69f25d 100644 --- a/src/plugins/kibana_react/public/context/context.test.tsx +++ b/src/plugins/kibana_react/public/context/context.test.tsx @@ -21,7 +21,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { context, createKibanaReactContext, useKibana, KibanaContextProvider } from './context'; import { coreMock, overlayServiceMock } from '../../../../core/public/mocks'; -import { CoreStart } from './types'; +import { CoreStart } from '../../../../core/public'; let container: HTMLDivElement | null; diff --git a/src/plugins/kibana_react/public/context/types.ts b/src/plugins/kibana_react/public/context/types.ts index 1906bb808ea87..35e6349bfca87 100644 --- a/src/plugins/kibana_react/public/context/types.ts +++ b/src/plugins/kibana_react/public/context/types.ts @@ -22,8 +22,6 @@ import { CoreStart } from '../../../../core/public'; import { KibanaReactOverlays } from '../overlays'; import { KibanaReactNotifications } from '../notifications'; -export { CoreStart }; - export type KibanaServices = Partial; export interface KibanaReactContextValue { diff --git a/src/plugins/kibana_react/public/overlays/types.ts b/src/plugins/kibana_react/public/overlays/types.ts index f1a82113a26ee..9822e80376d94 100644 --- a/src/plugins/kibana_react/public/overlays/types.ts +++ b/src/plugins/kibana_react/public/overlays/types.ts @@ -18,7 +18,7 @@ */ import * as React from 'react'; -import { CoreStart } from '../context/types'; +import { CoreStart } from '../../../../core/public'; export interface KibanaReactOverlays { openFlyout: ( From 390503b2fe2531fb7cc9c5297d7c3d2564e4239e Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Wed, 23 Oct 2019 07:54:34 -0700 Subject: [PATCH 05/23] adapt some calls to new signature Signed-off-by: pgayvallet --- .../filter/action/apply_filter_action.ts | 25 ++++++----- .../components/toast_notification_text.tsx | 45 ++++++++++--------- 2 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts index c436e1d45c6d8..8802aff1ed2be 100644 --- a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts +++ b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts @@ -25,6 +25,7 @@ import { createAction, IncompatibleActionError, } from '../../../../../../plugins/ui_actions/public'; +import { mountForComponent } from '../../../../../../plugins/kibana_react/public'; import { changeTimeFilter, extractTimeFilter, FilterManager } from '../filter_manager'; import { TimefilterContract } from '../../timefilter'; import { applyFiltersPopover } from '../apply_filters/apply_filters_popover'; @@ -74,17 +75,19 @@ export function createFilterAction( const filterSelectionPromise: Promise = new Promise(resolve => { const overlay = npStart.core.overlays.openModal( - applyFiltersPopover( - filters, - indexPatterns, - () => { - overlay.close(); - resolve([]); - }, - (filterSelection: Filter[]) => { - overlay.close(); - resolve(filterSelection); - } + mountForComponent( + applyFiltersPopover( + filters, + indexPatterns, + () => { + overlay.close(); + resolve([]); + }, + (filterSelection: Filter[]) => { + overlay.close(); + resolve(filterSelection); + } + ) ), { 'data-test-subj': 'test', diff --git a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx index 28bb9b2687913..fcafb8b749e32 100644 --- a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx +++ b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx @@ -19,6 +19,7 @@ import { import { i18n } from '@kbn/i18n'; import { npStart } from 'ui/new_platform'; +import { mountForComponent } from '../../../../../../../src/plugins/kibana_react/public'; const MAX_SIMPLE_MESSAGE_LENGTH = 140; @@ -43,27 +44,29 @@ export const ToastNotificationText: FC<{ text: any }> = ({ text }) => { const openModal = () => { const modal = npStart.core.overlays.openModal( - modal.close()}> - - - {i18n.translate('xpack.transform.toastText.modalTitle', { - defaultMessage: 'Error details', - })} - - - - - {formattedText} - - - - modal.close()}> - {i18n.translate('xpack.transform.toastText.closeModalButtonText', { - defaultMessage: 'Close', - })} - - - + mountForComponent( + modal.close()}> + + + {i18n.translate('xpack.transform.toastText.modalTitle', { + defaultMessage: 'Error details', + })} + + + + + {formattedText} + + + + modal.close()}> + {i18n.translate('xpack.transform.toastText.closeModalButtonText', { + defaultMessage: 'Close', + })} + + + + ) ); }; From 052e39d9c5c4e2059f356974d90ff6197ee83afd Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 17 Oct 2019 10:07:30 +0200 Subject: [PATCH 06/23] updates core doc Signed-off-by: pgayvallet update doc bis Signed-off-by: pgayvallet --- .../core/public/kibana-plugin-public.md | 4 ++-- ....md => kibana-plugin-public.mountpoint.md} | 6 +++--- ...a-plugin-public.overlaybannersstart.add.md | 4 ++-- ...ugin-public.overlaybannersstart.replace.md | 4 ++-- ...bana-plugin-public.overlaybannerunmount.md | 13 ------------ .../kibana-plugin-public.overlaystart.md | 4 ++-- ...a-plugin-public.overlaystart.openflyout.md | 2 +- ...na-plugin-public.overlaystart.openmodal.md | 2 +- .../kibana-plugin-public.unmountcallback.md | 13 ++++++++++++ src/core/public/public.api.md | 21 ++++++++++--------- 10 files changed, 37 insertions(+), 36 deletions(-) rename docs/development/core/public/{kibana-plugin-public.overlaybannermount.md => kibana-plugin-public.mountpoint.md} (54%) delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md create mode 100644 docs/development/core/public/kibana-plugin-public.unmountcallback.md diff --git a/docs/development/core/public/kibana-plugin-public.md b/docs/development/core/public/kibana-plugin-public.md index 253e50f0f2c2e..e1edac0d2c9b4 100644 --- a/docs/development/core/public/kibana-plugin-public.md +++ b/docs/development/core/public/kibana-plugin-public.md @@ -109,8 +109,7 @@ The plugin integrates with the core system via lifecycle events: `setup` | [HttpStart](./kibana-plugin-public.httpstart.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | | [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. | | [IToasts](./kibana-plugin-public.itoasts.md) | Methods for adding and removing global toast messages. See [ToastsApi](./kibana-plugin-public.toastsapi.md). | -| [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md) | A function that will mount the banner inside the provided element. | -| [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md) | A function that will unmount the banner from the element. | +| [MountPoint](./kibana-plugin-public.mountpoint.md) | A function that will mount the banner inside the provided element. | | [PluginInitializer](./kibana-plugin-public.plugininitializer.md) | The plugin export at the root of a plugin's public directory should conform to this interface. | | [PluginOpaqueId](./kibana-plugin-public.pluginopaqueid.md) | | | [RecursiveReadonly](./kibana-plugin-public.recursivereadonly.md) | | @@ -122,4 +121,5 @@ The plugin integrates with the core system via lifecycle events: `setup` | [ToastsSetup](./kibana-plugin-public.toastssetup.md) | [IToasts](./kibana-plugin-public.itoasts.md) | | [ToastsStart](./kibana-plugin-public.toastsstart.md) | [IToasts](./kibana-plugin-public.itoasts.md) | | [UiSettingsClientContract](./kibana-plugin-public.uisettingsclientcontract.md) | [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | +| [UnmountCallback](./kibana-plugin-public.unmountcallback.md) | A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) | diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannermount.md b/docs/development/core/public/kibana-plugin-public.mountpoint.md similarity index 54% rename from docs/development/core/public/kibana-plugin-public.overlaybannermount.md rename to docs/development/core/public/kibana-plugin-public.mountpoint.md index 0fd0aca652cf0..8b027c301289d 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaybannermount.md +++ b/docs/development/core/public/kibana-plugin-public.mountpoint.md @@ -1,13 +1,13 @@ -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md) +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [MountPoint](./kibana-plugin-public.mountpoint.md) -## OverlayBannerMount type +## MountPoint type A function that will mount the banner inside the provided element. Signature: ```typescript -export declare type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; +export declare type MountPoint = (element: HTMLElement) => UnmountCallback; ``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md index 8c3e874804e08..8ce59d5d9ca78 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md +++ b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md @@ -9,14 +9,14 @@ Add a new banner Signature: ```typescript -add(mount: OverlayBannerMount, priority?: number): string; +add(mount: MountPoint, priority?: number): string; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| mount | OverlayBannerMount | | +| mount | MountPoint | | | priority | number | | Returns: diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md index 8f624c285b180..a8f6915ea9bb7 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md +++ b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md @@ -9,7 +9,7 @@ Replace a banner in place Signature: ```typescript -replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; +replace(id: string | undefined, mount: MountPoint, priority?: number): string; ``` ## Parameters @@ -17,7 +17,7 @@ replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): s | Parameter | Type | Description | | --- | --- | --- | | id | string | undefined | | -| mount | OverlayBannerMount | | +| mount | MountPoint | | | priority | number | | Returns: diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md b/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md deleted file mode 100644 index c9a7c2b8fee92..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md) - -## OverlayBannerUnmount type - -A function that will unmount the banner from the element. - -Signature: - -```typescript -export declare type OverlayBannerUnmount = () => void; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.md b/docs/development/core/public/kibana-plugin-public.overlaystart.md index 6bcf0a581df80..3550076f22b0c 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.md @@ -16,6 +16,6 @@ export interface OverlayStart | Property | Type | Description | | --- | --- | --- | | [banners](./kibana-plugin-public.overlaystart.banners.md) | OverlayBannersStart | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | -| [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | (flyoutChildren: React.ReactNode, flyoutProps?: {
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | -| [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | (modalChildren: React.ReactNode, modalProps?: {
className?: string;
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | +| [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | (flyoutChildren: MountPoint, flyoutProps?: {
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | +| [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | (modalChildren: MountPoint, modalProps?: {
className?: string;
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md index 6d015d6a34382..1819b61b2ed6b 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md @@ -7,7 +7,7 @@ Signature: ```typescript -openFlyout: (flyoutChildren: React.ReactNode, flyoutProps?: { +openFlyout: (flyoutChildren: MountPoint, flyoutProps?: { closeButtonAriaLabel?: string; 'data-test-subj'?: string; }) => OverlayRef; diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md index a4569e178f17d..b0c4aec37ddf0 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md @@ -7,7 +7,7 @@ Signature: ```typescript -openModal: (modalChildren: React.ReactNode, modalProps?: { +openModal: (modalChildren: MountPoint, modalProps?: { className?: string; closeButtonAriaLabel?: string; 'data-test-subj'?: string; diff --git a/docs/development/core/public/kibana-plugin-public.unmountcallback.md b/docs/development/core/public/kibana-plugin-public.unmountcallback.md new file mode 100644 index 0000000000000..f44562120c9ee --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.unmountcallback.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [UnmountCallback](./kibana-plugin-public.unmountcallback.md) + +## UnmountCallback type + +A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) + +Signature: + +```typescript +export declare type UnmountCallback = () => void; +``` diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 416fb13cbb73e..5c8837946996c 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -616,6 +616,9 @@ export interface LegacyNavLink { url: string; } +// @public +export type MountPoint = (element: HTMLElement) => UnmountCallback; + // @public (undocumented) export interface NotificationsSetup { // (undocumented) @@ -628,12 +631,9 @@ export interface NotificationsStart { toasts: ToastsStart; } -// @public -export type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; - // @public (undocumented) export interface OverlayBannersStart { - add(mount: OverlayBannerMount, priority?: number): string; + add(mount: MountPoint, priority?: number): string; // Warning: (ae-forgotten-export) The symbol "OverlayBanner" needs to be exported by the entry point index.d.ts // // @internal (undocumented) @@ -641,12 +641,10 @@ export interface OverlayBannersStart { // (undocumented) getComponent(): JSX.Element; remove(id: string): boolean; - replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; + // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "OverlayBannerMount" + replace(id: string | undefined, mount: MountPoint, priority?: number): string; } -// @public -export type OverlayBannerUnmount = () => void; - // @public export interface OverlayRef { close(): Promise; @@ -658,12 +656,12 @@ export interface OverlayStart { // (undocumented) banners: OverlayBannersStart; // (undocumented) - openFlyout: (flyoutChildren: React.ReactNode, flyoutProps?: { + openFlyout: (flyoutChildren: MountPoint, flyoutProps?: { closeButtonAriaLabel?: string; 'data-test-subj'?: string; }) => OverlayRef; // (undocumented) - openModal: (modalChildren: React.ReactNode, modalProps?: { + openModal: (modalChildren: MountPoint, modalProps?: { className?: string; closeButtonAriaLabel?: string; 'data-test-subj'?: string; @@ -991,5 +989,8 @@ export interface UiSettingsState { [key: string]: InjectedUiSettingsDefault & InjectedUiSettingsUser; } +// @public +export type UnmountCallback = () => void; + ``` From 6a380246dbe0ba5d64eca6e6fb5477824fdfdd6f Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 08:19:36 -0700 Subject: [PATCH 07/23] adapt new calls Signed-off-by: pgayvallet --- .../lib/actions/open_replace_panel_flyout.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx index b6652caf3ab83..71da5becd59d7 100644 --- a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx +++ b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx @@ -18,6 +18,7 @@ */ import React from 'react'; import { CoreStart } from 'src/core/public'; +import { mountForComponent } from '../../../../../../../../plugins/kibana_react/public'; import { ReplacePanelFlyout } from './replace_panel_flyout'; import { @@ -38,17 +39,19 @@ export async function openReplacePanelFlyout(options: { }) { const { embeddable, core, panelToRemove, savedObjectFinder, notifications } = options; const flyoutSession = core.overlays.openFlyout( - { - if (flyoutSession) { - flyoutSession.close(); - } - }} - panelToRemove={panelToRemove} - savedObjectsFinder={savedObjectFinder} - notifications={notifications} - />, + mountForComponent( + { + if (flyoutSession) { + flyoutSession.close(); + } + }} + panelToRemove={panelToRemove} + savedObjectsFinder={savedObjectFinder} + notifications={notifications} + /> + ), { 'data-test-subj': 'replacePanelFlyout', } From cf6f965c1be9f1acc44cf0b4a316bf4f1ed77772 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 09:14:39 -0700 Subject: [PATCH 08/23] adapt js call Signed-off-by: pgayvallet --- x-pack/legacy/plugins/graph/public/app.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js index 41e5819bcbf37..d1d38c1ffbc76 100644 --- a/x-pack/legacy/plugins/graph/public/app.js +++ b/x-pack/legacy/plugins/graph/public/app.js @@ -11,6 +11,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { isColorDark, hexToRgb } from '@elastic/eui'; +import { mountForComponent } from '../../../../../src/plugins/kibana_react/public'; import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url'; import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal'; import { formatAngularHttpError } from 'ui/notify/lib'; @@ -549,9 +550,11 @@ export function initGraphApp(angularModule, deps) { canEditDrillDownUrls: canEditDrillDownUrls }), $scope.$digest.bind($scope)); coreStart.overlays.openFlyout( - - - , { + mountForComponent( + + + + ), { size: 'm', closeButtonAriaLabel: i18n.translate('xpack.graph.settings.closeLabel', { defaultMessage: 'Close' }), 'data-test-subj': 'graphSettingsFlyout', From f47fc6d44e1e91ce08babd0dc6f3774a0895c437 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 10:36:43 -0700 Subject: [PATCH 09/23] add flex layout on mountWrapper component to avoid losing scroll on overlays Signed-off-by: pgayvallet --- .../overlays/__snapshots__/flyout.test.tsx.snap | 4 ++-- .../overlays/__snapshots__/modal.test.tsx.snap | 2 +- src/core/public/overlays/_index.scss | 1 + src/core/public/overlays/_mount_wrapper.scss | 5 +++++ src/core/public/overlays/utils.test.tsx | 16 ++++++++++++---- src/core/public/overlays/utils.tsx | 2 +- 6 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 src/core/public/overlays/_mount_wrapper.scss diff --git a/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap b/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap index d71573305cad5..6b16f3946c1ae 100644 --- a/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap +++ b/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap @@ -30,7 +30,7 @@ Array [ ] `; -exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`; +exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`; exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = ` Array [ @@ -71,4 +71,4 @@ Array [ ] `; -exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`; +exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`; diff --git a/src/core/public/overlays/__snapshots__/modal.test.tsx.snap b/src/core/public/overlays/__snapshots__/modal.test.tsx.snap index 27932e313bef4..812a2fa3e6a10 100644 --- a/src/core/public/overlays/__snapshots__/modal.test.tsx.snap +++ b/src/core/public/overlays/__snapshots__/modal.test.tsx.snap @@ -28,7 +28,7 @@ Array [ ] `; -exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`; +exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`; exports[`ModalService openModal() with a currently active modal replaces the current modal with a new one 1`] = ` Array [ diff --git a/src/core/public/overlays/_index.scss b/src/core/public/overlays/_index.scss index fe86883aedcf9..368dc9b644ff9 100644 --- a/src/core/public/overlays/_index.scss +++ b/src/core/public/overlays/_index.scss @@ -1 +1,2 @@ @import './banners/index'; +@import './mount_wrapper'; diff --git a/src/core/public/overlays/_mount_wrapper.scss b/src/core/public/overlays/_mount_wrapper.scss new file mode 100644 index 0000000000000..e294511613839 --- /dev/null +++ b/src/core/public/overlays/_mount_wrapper.scss @@ -0,0 +1,5 @@ +.kbnMountWrapper { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/src/core/public/overlays/utils.test.tsx b/src/core/public/overlays/utils.test.tsx index caec542f9c4b2..f201e08a4c687 100644 --- a/src/core/public/overlays/utils.test.tsx +++ b/src/core/public/overlays/utils.test.tsx @@ -32,7 +32,9 @@ describe('MountWrapper', () => { }; const wrapper = ; const container = mount(wrapper); - expect(container.html()).toMatchInlineSnapshot(`"

hello

"`); + expect(container.html()).toMatchInlineSnapshot( + `"

hello

"` + ); }); it('updates the react tree when the mounted element changes', () => { @@ -46,17 +48,23 @@ describe('MountWrapper', () => { const wrapper = ; const container = mount(wrapper); - expect(container.html()).toMatchInlineSnapshot(`"

initial

"`); + expect(container.html()).toMatchInlineSnapshot( + `"

initial

"` + ); el.textContent = 'changed'; container.update(); - expect(container.html()).toMatchInlineSnapshot(`"

changed

"`); + expect(container.html()).toMatchInlineSnapshot( + `"

changed

"` + ); }); it('can render a detached react component', () => { const mountPoint = mountForComponent(detached); const wrapper = ; const container = mount(wrapper); - expect(container.html()).toMatchInlineSnapshot(`"
detached
"`); + expect(container.html()).toMatchInlineSnapshot( + `"
detached
"` + ); }); }); diff --git a/src/core/public/overlays/utils.tsx b/src/core/public/overlays/utils.tsx index 5e2db7a74abcf..a63a2e79f1435 100644 --- a/src/core/public/overlays/utils.tsx +++ b/src/core/public/overlays/utils.tsx @@ -42,5 +42,5 @@ export const mountForComponent = (component: React.ReactElement): MountPoint => export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { const element = useRef(null); useEffect(() => mount(element.current!), [mount]); - return
; + return
; }; From bb1c08572eaaeb3dbd060cf57449bf6c31551128 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 14:51:47 -0700 Subject: [PATCH 10/23] create proper flyout/modal services --- src/core/public/index.ts | 4 + .../flyout_service.test.tsx.snap} | 0 .../overlays/flyout/flyout_service.mock.ts | 43 +++++++ .../flyout_service.test.tsx} | 47 ++++--- .../{flyout.tsx => flyout/flyout_service.tsx} | 105 +++++++++------- src/core/public/overlays/flyout/index.ts | 20 +++ src/core/public/overlays/index.ts | 6 +- .../modal_service.test.tsx.snap} | 0 src/core/public/overlays/modal/index.ts | 20 +++ .../overlays/modal/modal_service.mock.ts | 43 +++++++ .../modal_service.test.tsx} | 55 ++++---- .../{modal.tsx => modal/modal_service.tsx} | 117 +++++++++++------- ...ut.test.mocks.ts => overlay.test.mocks.ts} | 0 .../public/overlays/overlay_service.mock.ts | 4 + src/core/public/overlays/overlay_service.ts | 75 ++++------- src/core/public/overlays/types.ts | 21 ++++ src/core/public/overlays/utils.tsx | 6 +- 17 files changed, 365 insertions(+), 201 deletions(-) rename src/core/public/overlays/{__snapshots__/flyout.test.tsx.snap => flyout/__snapshots__/flyout_service.test.tsx.snap} (100%) create mode 100644 src/core/public/overlays/flyout/flyout_service.mock.ts rename src/core/public/overlays/{flyout.test.tsx => flyout/flyout_service.test.tsx} (69%) rename src/core/public/overlays/{flyout.tsx => flyout/flyout_service.tsx} (62%) create mode 100644 src/core/public/overlays/flyout/index.ts rename src/core/public/overlays/{__snapshots__/modal.test.tsx.snap => modal/__snapshots__/modal_service.test.tsx.snap} (100%) create mode 100644 src/core/public/overlays/modal/index.ts create mode 100644 src/core/public/overlays/modal/modal_service.mock.ts rename src/core/public/overlays/{modal.test.tsx => modal/modal_service.test.tsx} (65%) rename src/core/public/overlays/{modal.tsx => modal/modal_service.tsx} (51%) rename src/core/public/overlays/{flyout.test.mocks.ts => overlay.test.mocks.ts} (100%) diff --git a/src/core/public/index.ts b/src/core/public/index.ts index 6e7885d483d70..131baca49abde 100644 --- a/src/core/public/index.ts +++ b/src/core/public/index.ts @@ -122,6 +122,10 @@ export { UnmountCallback, OverlayStart, OverlayBannersStart, + OverlayModalStart, + OverlayModalOpenOptions, + OverlayFlyoutStart, + OverlayFlyoutOpenOptions, OverlayRef, } from './overlays'; diff --git a/src/core/public/overlays/__snapshots__/flyout.test.tsx.snap b/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap similarity index 100% rename from src/core/public/overlays/__snapshots__/flyout.test.tsx.snap rename to src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap diff --git a/src/core/public/overlays/flyout/flyout_service.mock.ts b/src/core/public/overlays/flyout/flyout_service.mock.ts new file mode 100644 index 0000000000000..91544500713d6 --- /dev/null +++ b/src/core/public/overlays/flyout/flyout_service.mock.ts @@ -0,0 +1,43 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { FlyoutService, OverlayFlyoutStart } from './flyout_service'; + +const createStartContractMock = () => { + const startContract: jest.Mocked = { + open: jest.fn().mockReturnValue({ + close: jest.fn(), + onClose: Promise.resolve(), + }), + }; + return startContract; +}; + +const createMock = () => { + const mocked: jest.Mocked> = { + start: jest.fn(), + }; + mocked.start.mockReturnValue(createStartContractMock()); + return mocked; +}; + +export const overlayFlyoutServiceMock = { + create: createMock, + createStartContract: createStartContractMock, +}; diff --git a/src/core/public/overlays/flyout.test.tsx b/src/core/public/overlays/flyout/flyout_service.test.tsx similarity index 69% rename from src/core/public/overlays/flyout.test.tsx rename to src/core/public/overlays/flyout/flyout_service.test.tsx index c4deb650332f4..25ba94f577993 100644 --- a/src/core/public/overlays/flyout.test.tsx +++ b/src/core/public/overlays/flyout/flyout_service.test.tsx @@ -16,11 +16,12 @@ * specific language governing permissions and limitations * under the License. */ -import { mockReactDomRender, mockReactDomUnmount } from './flyout.test.mocks'; +import { mockReactDomRender, mockReactDomUnmount } from '../overlay.test.mocks'; import { mount } from 'enzyme'; -import { i18nServiceMock } from '../i18n/i18n_service.mock'; -import { FlyoutRef, FlyoutService } from './flyout'; +import { i18nServiceMock } from '../../i18n/i18n_service.mock'; +import { FlyoutService, OverlayFlyoutStart } from './flyout_service'; +import { OverlayRef } from '../types'; const i18nMock = i18nServiceMock.createStartContract(); @@ -36,28 +37,32 @@ const mountText = (text: string) => (container: HTMLElement) => { return () => {}; }; +const getServiceStart = () => { + const service = new FlyoutService(); + return service.start({ i18n: i18nMock, targetDomElement: document.createElement('div') }); +}; + describe('FlyoutService', () => { + let flyouts: OverlayFlyoutStart; + beforeEach(() => { + flyouts = getServiceStart(); + }); + describe('openFlyout()', () => { it('renders a flyout to the DOM', () => { - const target = document.createElement('div'); - const flyoutService = new FlyoutService(target); expect(mockReactDomRender).not.toHaveBeenCalled(); - flyoutService.openFlyout(i18nMock, mountText('Flyout content')); + flyouts.open(mountText('Flyout content')); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); const modalContent = mount(mockReactDomRender.mock.calls[0][0]); expect(modalContent.html()).toMatchSnapshot(); }); describe('with a currently active flyout', () => { - let target: HTMLElement; - let flyoutService: FlyoutService; - let ref1: FlyoutRef; + let ref1: OverlayRef; beforeEach(() => { - target = document.createElement('div'); - flyoutService = new FlyoutService(target); - ref1 = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); + ref1 = flyouts.open(mountText('Flyout content')); }); it('replaces the current flyout with a new one', () => { - flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); + flyouts.open(mountText('Flyout content 2')); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); const modalContent = mount(mockReactDomRender.mock.calls[1][0]); @@ -68,7 +73,7 @@ describe('FlyoutService', () => { it('resolves onClose on the previous ref', async () => { const onCloseComplete = jest.fn(); ref1.onClose.then(onCloseComplete); - flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); + flyouts.open(mountText('Flyout content 2')); await ref1.onClose; expect(onCloseComplete).toBeCalledTimes(1); }); @@ -76,9 +81,7 @@ describe('FlyoutService', () => { }); describe('FlyoutRef#close()', () => { it('resolves the onClose Promise', async () => { - const target = document.createElement('div'); - const flyoutService = new FlyoutService(target); - const ref = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); + const ref = flyouts.open(mountText('Flyout content')); const onCloseComplete = jest.fn(); ref.onClose.then(onCloseComplete); @@ -87,9 +90,7 @@ describe('FlyoutService', () => { expect(onCloseComplete).toHaveBeenCalledTimes(1); }); it('can be called multiple times on the same FlyoutRef', async () => { - const target = document.createElement('div'); - const flyoutService = new FlyoutService(target); - const ref = flyoutService.openFlyout(i18nMock, mountText('Flyout content')); + const ref = flyouts.open(mountText('Flyout content')); expect(mockReactDomUnmount).not.toHaveBeenCalled(); await ref.close(); expect(mockReactDomUnmount.mock.calls).toMatchSnapshot(); @@ -97,10 +98,8 @@ describe('FlyoutService', () => { expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); }); it("on a stale FlyoutRef doesn't affect the active flyout", async () => { - const target = document.createElement('div'); - const flyoutService = new FlyoutService(target); - const ref1 = flyoutService.openFlyout(i18nMock, mountText('Flyout content 1')); - const ref2 = flyoutService.openFlyout(i18nMock, mountText('Flyout content 2')); + const ref1 = flyouts.open(mountText('Flyout content 1')); + const ref2 = flyouts.open(mountText('Flyout content 2')); const onCloseComplete = jest.fn(); ref2.onClose.then(onCloseComplete); mockReactDomUnmount.mockClear(); diff --git a/src/core/public/overlays/flyout.tsx b/src/core/public/overlays/flyout/flyout_service.tsx similarity index 62% rename from src/core/public/overlays/flyout.tsx rename to src/core/public/overlays/flyout/flyout_service.tsx index 68efac21d2c16..461e57fb922a0 100644 --- a/src/core/public/overlays/flyout.tsx +++ b/src/core/public/overlays/flyout/flyout_service.tsx @@ -23,10 +23,9 @@ import { EuiFlyout } from '@elastic/eui'; import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; -import { I18nStart } from '../i18n'; -import { OverlayRef } from './overlay_service'; -import { MountPoint } from './types'; -import { MountWrapper } from './utils'; +import { I18nStart } from '../../i18n'; +import { MountPoint, OverlayRef } from '../types'; +import { MountWrapper } from '../utils'; /** * A FlyoutRef is a reference to an opened flyout panel. It offers methods to @@ -68,55 +67,69 @@ export class FlyoutRef implements OverlayRef { } } +/** + * APIs to open and manage fly-out dialogs. + * + * @public + */ +export interface OverlayFlyoutStart { + open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef; +} + +/** + * @public + */ +export interface OverlayFlyoutOpenOptions { + className?: string; + closeButtonAriaLabel?: string; + 'data-test-subj'?: string; +} + +interface StartDeps { + i18n: I18nStart; + targetDomElement: Element; +} + /** @internal */ export class FlyoutService { private activeFlyout: FlyoutRef | null = null; + private targetDomElement: Element | null = null; - constructor(private readonly targetDomElement: Element) {} + public start({ i18n, targetDomElement }: StartDeps): OverlayFlyoutStart { + this.targetDomElement = targetDomElement; - /** - * Opens a flyout panel with the given component inside. You can use - * `close()` on the returned FlyoutRef to close the flyout. - * - * @param flyoutMount - Mounts the children inside a flyout panel - * @return {FlyoutRef} A reference to the opened flyout panel. - */ - public openFlyout = ( - i18n: I18nStart, - flyoutMount: MountPoint, - flyoutProps: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - } = {} - ): FlyoutRef => { - // If there is an active flyout session close it before opening a new one. - if (this.activeFlyout) { - this.activeFlyout.close(); - this.cleanupDom(); - } + return { + open: (mount: MountPoint, options: OverlayFlyoutOpenOptions = {}): OverlayRef => { + // If there is an active flyout session close it before opening a new one. + if (this.activeFlyout) { + this.activeFlyout.close(); + this.cleanupDom(); + } - const flyout = new FlyoutRef(); + const flyout = new FlyoutRef(); - // If a flyout gets closed through it's FlyoutRef, remove it from the dom - flyout.onClose.then(() => { - if (this.activeFlyout === flyout) { - this.cleanupDom(); - } - }); + // If a flyout gets closed through it's FlyoutRef, remove it from the dom + flyout.onClose.then(() => { + if (this.activeFlyout === flyout) { + this.cleanupDom(); + } + }); - this.activeFlyout = flyout; + this.activeFlyout = flyout; - render( - - flyout.close()}> - - - , - this.targetDomElement - ); + render( + + flyout.close()}> + + + , + this.targetDomElement + ); - return flyout; - }; + return flyout; + }, + }; + } /** * Using React.Render to re-render into a target DOM element will replace @@ -126,8 +139,10 @@ export class FlyoutService { * depend on unmounting for cleanup behaviour. */ private cleanupDom(): void { - unmountComponentAtNode(this.targetDomElement); - this.targetDomElement.innerHTML = ''; + if (this.targetDomElement != null) { + unmountComponentAtNode(this.targetDomElement); + this.targetDomElement.innerHTML = ''; + } this.activeFlyout = null; } } diff --git a/src/core/public/overlays/flyout/index.ts b/src/core/public/overlays/flyout/index.ts new file mode 100644 index 0000000000000..b01cc3af5fa38 --- /dev/null +++ b/src/core/public/overlays/flyout/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { FlyoutService, OverlayFlyoutStart, OverlayFlyoutOpenOptions } from './flyout_service'; diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts index 2650dd155121d..fe1b2c3c79d06 100644 --- a/src/core/public/overlays/index.ts +++ b/src/core/public/overlays/index.ts @@ -17,6 +17,8 @@ * under the License. */ -export { MountPoint, UnmountCallback } from './types'; +export { MountPoint, UnmountCallback, OverlayRef } from './types'; export { OverlayBannersStart } from './banners'; -export { OverlayService, OverlayStart, OverlayRef } from './overlay_service'; +export { OverlayFlyoutStart, OverlayFlyoutOpenOptions } from './flyout'; +export { OverlayModalStart, OverlayModalOpenOptions } from './modal'; +export { OverlayService, OverlayStart } from './overlay_service'; diff --git a/src/core/public/overlays/__snapshots__/modal.test.tsx.snap b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap similarity index 100% rename from src/core/public/overlays/__snapshots__/modal.test.tsx.snap rename to src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap diff --git a/src/core/public/overlays/modal/index.ts b/src/core/public/overlays/modal/index.ts new file mode 100644 index 0000000000000..9ef4492af3a3a --- /dev/null +++ b/src/core/public/overlays/modal/index.ts @@ -0,0 +1,20 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +export { ModalService, OverlayModalStart, OverlayModalOpenOptions } from './modal_service'; diff --git a/src/core/public/overlays/modal/modal_service.mock.ts b/src/core/public/overlays/modal/modal_service.mock.ts new file mode 100644 index 0000000000000..726209b8f277c --- /dev/null +++ b/src/core/public/overlays/modal/modal_service.mock.ts @@ -0,0 +1,43 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { ModalService, OverlayModalStart } from './modal_service'; + +const createStartContractMock = () => { + const startContract: jest.Mocked = { + open: jest.fn().mockReturnValue({ + close: jest.fn(), + onClose: Promise.resolve(), + }), + }; + return startContract; +}; + +const createMock = () => { + const mocked: jest.Mocked> = { + start: jest.fn(), + }; + mocked.start.mockReturnValue(createStartContractMock()); + return mocked; +}; + +export const overlayModalServiceMock = { + create: createMock, + createStartContract: createStartContractMock, +}; diff --git a/src/core/public/overlays/modal.test.tsx b/src/core/public/overlays/modal/modal_service.test.tsx similarity index 65% rename from src/core/public/overlays/modal.test.tsx rename to src/core/public/overlays/modal/modal_service.test.tsx index 8b712cb663808..ba63526003532 100644 --- a/src/core/public/overlays/modal.test.tsx +++ b/src/core/public/overlays/modal/modal_service.test.tsx @@ -16,13 +16,14 @@ * specific language governing permissions and limitations * under the License. */ -import { mockReactDomRender, mockReactDomUnmount } from './flyout.test.mocks'; +import { mockReactDomRender, mockReactDomUnmount } from '../overlay.test.mocks'; import React from 'react'; import { mount } from 'enzyme'; -import { i18nServiceMock } from '../i18n/i18n_service.mock'; -import { ModalService, ModalRef } from './modal'; -import { mountForComponent } from './utils'; +import { i18nServiceMock } from '../../i18n/i18n_service.mock'; +import { ModalService, OverlayModalStart } from './modal_service'; +import { mountForComponent } from '../utils'; +import { OverlayRef } from '../types'; const i18nMock = i18nServiceMock.createStartContract(); @@ -31,13 +32,21 @@ beforeEach(() => { mockReactDomUnmount.mockClear(); }); +const getServiceStart = () => { + const service = new ModalService(); + return service.start({ i18n: i18nMock, targetDomElement: document.createElement('div') }); +}; + describe('ModalService', () => { + let modals: OverlayModalStart; + beforeEach(() => { + modals = getServiceStart(); + }); + describe('openModal()', () => { it('renders a modal to the DOM', () => { - const target = document.createElement('div'); - const modalService = new ModalService(target); expect(mockReactDomRender).not.toHaveBeenCalled(); - modalService.openModal(i18nMock, container => { + modals.open(container => { const content = document.createElement('span'); content.textContent = 'Modal content'; container.append(content); @@ -49,18 +58,14 @@ describe('ModalService', () => { }); describe('with a currently active modal', () => { - let target: HTMLElement; - let modalService: ModalService; - let ref1: ModalRef; + let ref1: OverlayRef; beforeEach(() => { - target = document.createElement('div'); - modalService = new ModalService(target); - ref1 = modalService.openModal(i18nMock, mountForComponent(Modal content 1)); + ref1 = modals.open(mountForComponent(Modal content 1)); }); it('replaces the current modal with a new one', () => { - modalService.openModal(i18nMock, mountForComponent(Flyout content 2)); + modals.open(mountForComponent(Flyout content 2)); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); expect(() => ref1.close()).not.toThrowError(); @@ -70,7 +75,7 @@ describe('ModalService', () => { it('resolves onClose on the previous ref', async () => { const onCloseComplete = jest.fn(); ref1.onClose.then(onCloseComplete); - modalService.openModal(i18nMock, mountForComponent(Flyout content 2)); + modals.open(mountForComponent(Flyout content 2)); await ref1.onClose; expect(onCloseComplete).toBeCalledTimes(1); }); @@ -79,9 +84,7 @@ describe('ModalService', () => { describe('ModalRef#close()', () => { it('resolves the onClose Promise', async () => { - const target = document.createElement('div'); - const modalService = new ModalService(target); - const ref = modalService.openModal(i18nMock, mountForComponent(Flyout content)); + const ref = modals.open(mountForComponent(Flyout content)); const onCloseComplete = jest.fn(); ref.onClose.then(onCloseComplete); @@ -91,9 +94,7 @@ describe('ModalService', () => { }); it('can be called multiple times on the same ModalRef', async () => { - const target = document.createElement('div'); - const modalService = new ModalService(target); - const ref = modalService.openModal(i18nMock, mountForComponent(Flyout content)); + const ref = modals.open(mountForComponent(Flyout content)); expect(mockReactDomUnmount).not.toHaveBeenCalled(); await ref.close(); expect(mockReactDomUnmount.mock.calls).toMatchSnapshot(); @@ -102,16 +103,8 @@ describe('ModalService', () => { }); it("on a stale ModalRef doesn't affect the active flyout", async () => { - const target = document.createElement('div'); - const modalService = new ModalService(target); - const ref1 = modalService.openModal( - i18nMock, - mountForComponent(Modal content 1) - ); - const ref2 = modalService.openModal( - i18nMock, - mountForComponent(Modal content 2) - ); + const ref1 = modals.open(mountForComponent(Modal content 1)); + const ref2 = modals.open(mountForComponent(Modal content 2)); const onCloseComplete = jest.fn(); ref2.onClose.then(onCloseComplete); mockReactDomUnmount.mockClear(); diff --git a/src/core/public/overlays/modal.tsx b/src/core/public/overlays/modal/modal_service.tsx similarity index 51% rename from src/core/public/overlays/modal.tsx rename to src/core/public/overlays/modal/modal_service.tsx index 200d4903694bb..1ca1df328721a 100644 --- a/src/core/public/overlays/modal.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -23,10 +23,9 @@ import { EuiModal, EuiOverlayMask } from '@elastic/eui'; import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; -import { I18nStart } from '../i18n'; -import { OverlayRef } from './overlay_service'; -import { MountPoint } from './types'; -import { MountWrapper } from './utils'; +import { I18nStart } from '../../i18n'; +import { OverlayRef, MountPoint } from '../types'; +import { MountWrapper } from '../utils'; /** * A ModalRef is a reference to an opened modal. It offers methods to @@ -57,57 +56,79 @@ export class ModalRef implements OverlayRef { } } +/** + * APIs to open and manage modal dialogs. + * + * @public + */ +export interface OverlayModalStart { + /** + * Opens a modal panel with the given component inside. You can use + * `close()` on the returned OverlayRef to close the modal. + * + * @param mount {@link MountPoint} - Mounts the children inside the modal + * @param options {@link OverlayModalOptions} - Mounts the children inside the modal + * @return {@link OverlayRef} A reference to the opened modal. + */ + open(mount: MountPoint, options?: OverlayModalOpenOptions): OverlayRef; +} + +/** + * @public + */ +export interface OverlayModalOpenOptions { + className?: string; + closeButtonAriaLabel?: string; + 'data-test-subj'?: string; +} + +interface StartDeps { + i18n: I18nStart; + targetDomElement: Element; +} + /** @internal */ export class ModalService { private activeModal: ModalRef | null = null; + private targetDomElement: Element | null = null; - constructor(private readonly targetDomElement: Element) {} + public start({ i18n, targetDomElement }: StartDeps): OverlayModalStart { + this.targetDomElement = targetDomElement; - /** - * Opens a flyout panel with the given component inside. You can use - * `close()` on the returned FlyoutRef to close the flyout. - * - * @param modalMount - Mounts the children inside the modal - * @return {ModalRef} A reference to the opened modal. - */ - public openModal = ( - i18n: I18nStart, - modalMount: MountPoint, - modalProps: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - } = {} - ): ModalRef => { - // If there is an active flyout session close it before opening a new one. - if (this.activeModal) { - this.activeModal.close(); - this.cleanupDom(); - } + return { + open: (mount: MountPoint, options: OverlayModalOpenOptions = {}): OverlayRef => { + // If there is an active flyout session close it before opening a new one. + if (this.activeModal) { + this.activeModal.close(); + this.cleanupDom(); + } - const modal = new ModalRef(); + const modal = new ModalRef(); - // If a modal gets closed through it's ModalRef, remove it from the dom - modal.onClose.then(() => { - if (this.activeModal === modal) { - this.cleanupDom(); - } - }); + // If a modal gets closed through it's ModalRef, remove it from the dom + modal.onClose.then(() => { + if (this.activeModal === modal) { + this.cleanupDom(); + } + }); - this.activeModal = modal; + this.activeModal = modal; - render( - - - modal.close()}> - - - - , - this.targetDomElement - ); + render( + + + modal.close()}> + + + + , + targetDomElement + ); - return modal; - }; + return modal; + }, + }; + } /** * Using React.Render to re-render into a target DOM element will replace @@ -117,8 +138,10 @@ export class ModalService { * depend on unmounting for cleanup behaviour. */ private cleanupDom(): void { - unmountComponentAtNode(this.targetDomElement); - this.targetDomElement.innerHTML = ''; + if (this.targetDomElement != null) { + unmountComponentAtNode(this.targetDomElement); + this.targetDomElement.innerHTML = ''; + } this.activeModal = null; } } diff --git a/src/core/public/overlays/flyout.test.mocks.ts b/src/core/public/overlays/overlay.test.mocks.ts similarity index 100% rename from src/core/public/overlays/flyout.test.mocks.ts rename to src/core/public/overlays/overlay.test.mocks.ts diff --git a/src/core/public/overlays/overlay_service.mock.ts b/src/core/public/overlays/overlay_service.mock.ts index 39abc6f765b97..283e6abd88c0f 100644 --- a/src/core/public/overlays/overlay_service.mock.ts +++ b/src/core/public/overlays/overlay_service.mock.ts @@ -18,12 +18,16 @@ */ import { OverlayService, OverlayStart } from './overlay_service'; import { overlayBannersServiceMock } from './banners/banners_service.mock'; +import { overlayFlyoutServiceMock } from './flyout/flyout_service.mock'; +import { overlayModalServiceMock } from './modal/modal_service.mock'; const createStartContractMock = () => { const startContract: DeeplyMockedKeys = { openFlyout: jest.fn(), openModal: jest.fn(), banners: overlayBannersServiceMock.createStartContract(), + flyouts: overlayFlyoutServiceMock.createStartContract(), + modals: overlayModalServiceMock.createStartContract(), }; startContract.openModal.mockReturnValue({ close: jest.fn(), diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts index 09278b8fa9f85..0d3f5ecce0b17 100644 --- a/src/core/public/overlays/overlay_service.ts +++ b/src/core/public/overlays/overlay_service.ts @@ -17,33 +17,11 @@ * under the License. */ -import { FlyoutService } from './flyout'; -import { ModalService } from './modal'; import { I18nStart } from '../i18n'; -import { OverlayBannersStart, OverlayBannersService } from './banners'; -import { MountPoint } from './types'; import { UiSettingsClientContract } from '../ui_settings'; - -/** - * Returned by {@link OverlayStart} methods for closing a mounted overlay. - * @public - */ -export interface OverlayRef { - /** - * A Promise that will resolve once this overlay is closed. - * - * Overlays can close from user interaction, calling `close()` on the overlay - * reference or another overlay replacing yours via `openModal` or `openFlyout`. - */ - onClose: Promise; - - /** - * Closes the referenced overlay if it's still open which in turn will - * resolve the `onClose` Promise. If the overlay had already been - * closed this method does nothing. - */ - close(): Promise; -} +import { OverlayBannersStart, OverlayBannersService } from './banners'; +import { FlyoutService, OverlayFlyoutStart } from './flyout'; +import { ModalService, OverlayModalStart } from './modal'; interface StartDeps { i18n: I18nStart; @@ -53,40 +31,41 @@ interface StartDeps { /** @internal */ export class OverlayService { + private bannersService = new OverlayBannersService(); + private modalService = new ModalService(); + private flyoutService = new FlyoutService(); + public start({ i18n, targetDomElement, uiSettings }: StartDeps): OverlayStart { const flyoutElement = document.createElement('div'); - const modalElement = document.createElement('div'); targetDomElement.appendChild(flyoutElement); + const flyouts = this.flyoutService.start({ i18n, targetDomElement: flyoutElement }); + + const banners = this.bannersService.start({ i18n, uiSettings }); + + const modalElement = document.createElement('div'); targetDomElement.appendChild(modalElement); - const flyoutService = new FlyoutService(flyoutElement); - const modalService = new ModalService(modalElement); - const bannersService = new OverlayBannersService(); + const modals = this.modalService.start({ i18n, targetDomElement: modalElement }); return { - banners: bannersService.start({ i18n, uiSettings }), - openFlyout: flyoutService.openFlyout.bind(flyoutService, i18n), - openModal: modalService.openModal.bind(modalService, i18n), + banners, + flyouts, + modals, + + openFlyout: flyouts.open.bind(flyouts), + openModal: modals.open.bind(modals), }; } } /** @public */ export interface OverlayStart { - /** {@link OverlayBannersStart} */ + /** {@inheritdoc OverlayBannersStart} */ banners: OverlayBannersStart; - openFlyout: ( - flyoutChildren: MountPoint, - flyoutProps?: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - } - ) => OverlayRef; - openModal: ( - modalChildren: MountPoint, - modalProps?: { - className?: string; - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - } - ) => OverlayRef; + /** {@inheritdoc OverlayModalStart} */ + modals: OverlayModalStart; + /** {@inheritdoc OverlayFlyoutStart} */ + flyouts: OverlayFlyoutStart; + + openFlyout: OverlayFlyoutStart['open']; + openModal: OverlayModalStart['open']; } diff --git a/src/core/public/overlays/types.ts b/src/core/public/overlays/types.ts index 88736f99c48db..bb3fb27e39606 100644 --- a/src/core/public/overlays/types.ts +++ b/src/core/public/overlays/types.ts @@ -33,3 +33,24 @@ export type MountPoint = (element: HTMLElement) => UnmountCallback; * @public */ export type UnmountCallback = () => void; + +/** + * Returned by {@link OverlayStart} methods for closing a mounted overlay. + * @public + */ +export interface OverlayRef { + /** + * A Promise that will resolve once this overlay is closed. + * + * Overlays can close from user interaction, calling `close()` on the overlay + * reference or another overlay replacing yours via `openModal` or `openFlyout`. + */ + onClose: Promise; + + /** + * Closes the referenced overlay if it's still open which in turn will + * resolve the `onClose` Promise. If the overlay had already been + * closed this method does nothing. + */ + close(): Promise; +} diff --git a/src/core/public/overlays/utils.tsx b/src/core/public/overlays/utils.tsx index a63a2e79f1435..03b0821b1bf22 100644 --- a/src/core/public/overlays/utils.tsx +++ b/src/core/public/overlays/utils.tsx @@ -25,7 +25,7 @@ import { I18nProvider } from '@kbn/i18n/react'; /** * Mount converter for react components. * - * @param component to get a mount for + * @internal */ export const mountForComponent = (component: React.ReactElement): MountPoint => ( element: HTMLElement @@ -35,9 +35,7 @@ export const mountForComponent = (component: React.ReactElement): MountPoint => }; /** - * - * @param mount - * @constructor + * MountWrapper is a react component to mount a {@link MountPoint} inside a react tree. */ export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { const element = useRef(null); From 7132dbdbb81dcfe0ae6bf63d563d404b38ca7406 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 15:17:46 -0700 Subject: [PATCH 11/23] update generated doc --- .../core/public/kibana-plugin-public.md | 4 ++ ...erlayflyoutopenoptions._data-test-subj_.md | 11 +++++ ...blic.overlayflyoutopenoptions.classname.md | 11 +++++ ...yflyoutopenoptions.closebuttonarialabel.md | 11 +++++ ...-plugin-public.overlayflyoutopenoptions.md | 21 +++++++++ ...kibana-plugin-public.overlayflyoutstart.md | 20 +++++++++ ...a-plugin-public.overlayflyoutstart.open.md | 25 +++++++++++ ...verlaymodalopenoptions._data-test-subj_.md | 11 +++++ ...ublic.overlaymodalopenoptions.classname.md | 11 +++++ ...aymodalopenoptions.closebuttonarialabel.md | 11 +++++ ...a-plugin-public.overlaymodalopenoptions.md | 21 +++++++++ .../kibana-plugin-public.overlaymodalstart.md | 20 +++++++++ ...na-plugin-public.overlaymodalstart.open.md | 25 +++++++++++ ...bana-plugin-public.overlaystart.flyouts.md | 13 ++++++ .../kibana-plugin-public.overlaystart.md | 6 ++- ...ibana-plugin-public.overlaystart.modals.md | 13 ++++++ ...a-plugin-public.overlaystart.openflyout.md | 10 +++-- ...na-plugin-public.overlaystart.openmodal.md | 11 ++--- .../public/overlays/flyout/flyout_service.tsx | 10 ++++- .../public/overlays/modal/modal_service.tsx | 6 +-- src/core/public/overlays/overlay_service.ts | 12 +++-- src/core/public/public.api.md | 45 +++++++++++++++---- 22 files changed, 301 insertions(+), 27 deletions(-) create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalstart.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md create mode 100644 docs/development/core/public/kibana-plugin-public.overlaystart.modals.md diff --git a/docs/development/core/public/kibana-plugin-public.md b/docs/development/core/public/kibana-plugin-public.md index e1edac0d2c9b4..966afe77fef1e 100644 --- a/docs/development/core/public/kibana-plugin-public.md +++ b/docs/development/core/public/kibana-plugin-public.md @@ -70,6 +70,10 @@ The plugin integrates with the core system via lifecycle events: `setup` | [NotificationsSetup](./kibana-plugin-public.notificationssetup.md) | | | [NotificationsStart](./kibana-plugin-public.notificationsstart.md) | | | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | | +| [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) | | +| [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) | APIs to open and manage fly-out dialogs. | +| [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) | | +| [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) | APIs to open and manage modal dialogs. | | [OverlayRef](./kibana-plugin-public.overlayref.md) | Returned by [OverlayStart](./kibana-plugin-public.overlaystart.md) methods for closing a mounted overlay. | | [OverlayStart](./kibana-plugin-public.overlaystart.md) | | | [PackageInfo](./kibana-plugin-public.packageinfo.md) | | diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md new file mode 100644 index 0000000000000..076c9b5bcd6af --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > ["data-test-subj"](./kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md) + +## OverlayFlyoutOpenOptions."data-test-subj" property + +Signature: + +```typescript +'data-test-subj'?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md new file mode 100644 index 0000000000000..ca639fb816a45 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > [className](./kibana-plugin-public.overlayflyoutopenoptions.classname.md) + +## OverlayFlyoutOpenOptions.className property + +Signature: + +```typescript +className?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md new file mode 100644 index 0000000000000..dac458aa1bc80 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > [closeButtonAriaLabel](./kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md) + +## OverlayFlyoutOpenOptions.closeButtonAriaLabel property + +Signature: + +```typescript +closeButtonAriaLabel?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md new file mode 100644 index 0000000000000..b3d39e643db51 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) + +## OverlayFlyoutOpenOptions interface + + +Signature: + +```typescript +export interface OverlayFlyoutOpenOptions +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| ["data-test-subj"](./kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md) | string | | +| [className](./kibana-plugin-public.overlayflyoutopenoptions.classname.md) | string | | +| [closeButtonAriaLabel](./kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md) | string | | + diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md new file mode 100644 index 0000000000000..406959b1a74e0 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) + +## OverlayFlyoutStart interface + +APIs to open and manage fly-out dialogs. + +Signature: + +```typescript +export interface OverlayFlyoutStart +``` + +## Methods + +| Method | Description | +| --- | --- | +| [open(mount, options)](./kibana-plugin-public.overlayflyoutstart.open.md) | Opens a flyout panel with the given mount point inside. You can use close() on the returned FlyoutRef to close the flyout. | + diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md new file mode 100644 index 0000000000000..8ce778d937334 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md @@ -0,0 +1,25 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) > [open](./kibana-plugin-public.overlayflyoutstart.open.md) + +## OverlayFlyoutStart.open() method + +Opens a flyout panel with the given mount point inside. You can use `close()` on the returned FlyoutRef to close the flyout. + +Signature: + +```typescript +open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| mount | MountPoint | | +| options | OverlayFlyoutOpenOptions | | + +Returns: + +`OverlayRef` + diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md new file mode 100644 index 0000000000000..26669e7b91afa --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > ["data-test-subj"](./kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md) + +## OverlayModalOpenOptions."data-test-subj" property + +Signature: + +```typescript +'data-test-subj'?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md new file mode 100644 index 0000000000000..de218f0ce04b6 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > [className](./kibana-plugin-public.overlaymodalopenoptions.classname.md) + +## OverlayModalOpenOptions.className property + +Signature: + +```typescript +className?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md new file mode 100644 index 0000000000000..53629fd416ce2 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > [closeButtonAriaLabel](./kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md) + +## OverlayModalOpenOptions.closeButtonAriaLabel property + +Signature: + +```typescript +closeButtonAriaLabel?: string; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md new file mode 100644 index 0000000000000..9bb57b1c4595d --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md @@ -0,0 +1,21 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) + +## OverlayModalOpenOptions interface + + +Signature: + +```typescript +export interface OverlayModalOpenOptions +``` + +## Properties + +| Property | Type | Description | +| --- | --- | --- | +| ["data-test-subj"](./kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md) | string | | +| [className](./kibana-plugin-public.overlaymodalopenoptions.classname.md) | string | | +| [closeButtonAriaLabel](./kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md) | string | | + diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md new file mode 100644 index 0000000000000..cb3a7b1f93fab --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md @@ -0,0 +1,20 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) + +## OverlayModalStart interface + +APIs to open and manage modal dialogs. + +Signature: + +```typescript +export interface OverlayModalStart +``` + +## Methods + +| Method | Description | +| --- | --- | +| [open(mount, options)](./kibana-plugin-public.overlaymodalstart.open.md) | Opens a modal panel with the given mount point inside. You can use close() on the returned OverlayRef to close the modal. | + diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md new file mode 100644 index 0000000000000..d8b1a4d031f26 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md @@ -0,0 +1,25 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) > [open](./kibana-plugin-public.overlaymodalstart.open.md) + +## OverlayModalStart.open() method + +Opens a modal panel with the given mount point inside. You can use `close()` on the returned OverlayRef to close the modal. + +Signature: + +```typescript +open(mount: MountPoint, options?: OverlayModalOpenOptions): OverlayRef; +``` + +## Parameters + +| Parameter | Type | Description | +| --- | --- | --- | +| mount | MountPoint | | +| options | OverlayModalOpenOptions | | + +Returns: + +`OverlayRef` + diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md b/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md new file mode 100644 index 0000000000000..10f9b703d916b --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayStart](./kibana-plugin-public.overlaystart.md) > [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) + +## OverlayStart.flyouts property + +[OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) + +Signature: + +```typescript +flyouts: OverlayFlyoutStart; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.md b/docs/development/core/public/kibana-plugin-public.overlaystart.md index 3550076f22b0c..a10059e8339b1 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.md @@ -16,6 +16,8 @@ export interface OverlayStart | Property | Type | Description | | --- | --- | --- | | [banners](./kibana-plugin-public.overlaystart.banners.md) | OverlayBannersStart | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | -| [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | (flyoutChildren: MountPoint, flyoutProps?: {
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | -| [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | (modalChildren: MountPoint, modalProps?: {
className?: string;
closeButtonAriaLabel?: string;
'data-test-subj'?: string;
}) => OverlayRef | | +| [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) | OverlayFlyoutStart | [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) | +| [modals](./kibana-plugin-public.overlaystart.modals.md) | OverlayModalStart | [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) | +| [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | OverlayFlyoutStart['open'] | | +| [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | OverlayModalStart['open'] | | diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md b/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md new file mode 100644 index 0000000000000..5bb8983c4cc05 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayStart](./kibana-plugin-public.overlaystart.md) > [modals](./kibana-plugin-public.overlaystart.modals.md) + +## OverlayStart.modals property + +[OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) + +Signature: + +```typescript +modals: OverlayModalStart; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md index 1819b61b2ed6b..fb9fc52c6d9a1 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md @@ -4,11 +4,13 @@ ## OverlayStart.openFlyout property +> Warning: This API is now obsolete. +> +> Use [OverlayStart.flyouts](./kibana-plugin-public.overlaystart.flyouts.md) instead +> + Signature: ```typescript -openFlyout: (flyoutChildren: MountPoint, flyoutProps?: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - }) => OverlayRef; +openFlyout: OverlayFlyoutStart['open']; ``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md index b0c4aec37ddf0..c3b3cbee32e1f 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md @@ -4,12 +4,13 @@ ## OverlayStart.openModal property +> Warning: This API is now obsolete. +> +> Use [OverlayStart.modals](./kibana-plugin-public.overlaystart.modals.md) instead +> + Signature: ```typescript -openModal: (modalChildren: MountPoint, modalProps?: { - className?: string; - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - }) => OverlayRef; +openModal: OverlayModalStart['open']; ``` diff --git a/src/core/public/overlays/flyout/flyout_service.tsx b/src/core/public/overlays/flyout/flyout_service.tsx index 461e57fb922a0..f388462f0fee4 100644 --- a/src/core/public/overlays/flyout/flyout_service.tsx +++ b/src/core/public/overlays/flyout/flyout_service.tsx @@ -38,7 +38,7 @@ import { MountWrapper } from '../utils'; * * @public */ -export class FlyoutRef implements OverlayRef { +class FlyoutRef implements OverlayRef { /** * An Promise that will resolve once this flyout is closed. * @@ -73,6 +73,14 @@ export class FlyoutRef implements OverlayRef { * @public */ export interface OverlayFlyoutStart { + /** + * Opens a flyout panel with the given mount point inside. You can use + * `close()` on the returned FlyoutRef to close the flyout. + * + * @param mount {@link MountPoint} - Mounts the children inside a flyout panel + * @param options {@link OverlayFlyoutOpenOptions} - options for the flyout + * @return {@link OverlayRef} A reference to the opened flyout panel. + */ open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef; } diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index 1ca1df328721a..3bd3d556c3459 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -33,7 +33,7 @@ import { MountWrapper } from '../utils'; * * @public */ -export class ModalRef implements OverlayRef { +class ModalRef implements OverlayRef { public readonly onClose: Promise; private closeSubject = new Subject(); @@ -63,11 +63,11 @@ export class ModalRef implements OverlayRef { */ export interface OverlayModalStart { /** - * Opens a modal panel with the given component inside. You can use + * Opens a modal panel with the given mount point inside. You can use * `close()` on the returned OverlayRef to close the modal. * * @param mount {@link MountPoint} - Mounts the children inside the modal - * @param options {@link OverlayModalOptions} - Mounts the children inside the modal + * @param options {@link OverlayModalOpenOptions} - options for the modal * @return {@link OverlayRef} A reference to the opened modal. */ open(mount: MountPoint, options?: OverlayModalOpenOptions): OverlayRef; diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts index 0d3f5ecce0b17..75eea8f0c4106 100644 --- a/src/core/public/overlays/overlay_service.ts +++ b/src/core/public/overlays/overlay_service.ts @@ -59,13 +59,19 @@ export class OverlayService { /** @public */ export interface OverlayStart { - /** {@inheritdoc OverlayBannersStart} */ + /** {@link OverlayBannersStart} */ banners: OverlayBannersStart; - /** {@inheritdoc OverlayModalStart} */ + /** {@link OverlayModalStart} */ modals: OverlayModalStart; - /** {@inheritdoc OverlayFlyoutStart} */ + /** {@link OverlayFlyoutStart} */ flyouts: OverlayFlyoutStart; + /** + * @deprecated Use {@link OverlayStart.flyouts} instead + */ openFlyout: OverlayFlyoutStart['open']; + /** + * @deprecated Use {@link OverlayStart.modals} instead + */ openModal: OverlayModalStart['open']; } diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 5c8837946996c..3a82ba584d3b1 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -645,6 +645,36 @@ export interface OverlayBannersStart { replace(id: string | undefined, mount: MountPoint, priority?: number): string; } +// @public (undocumented) +export interface OverlayFlyoutOpenOptions { + // (undocumented) + 'data-test-subj'?: string; + // (undocumented) + className?: string; + // (undocumented) + closeButtonAriaLabel?: string; +} + +// @public +export interface OverlayFlyoutStart { + open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef; +} + +// @public (undocumented) +export interface OverlayModalOpenOptions { + // (undocumented) + 'data-test-subj'?: string; + // (undocumented) + className?: string; + // (undocumented) + closeButtonAriaLabel?: string; +} + +// @public +export interface OverlayModalStart { + open(mount: MountPoint, options?: OverlayModalOpenOptions): OverlayRef; +} + // @public export interface OverlayRef { close(): Promise; @@ -656,16 +686,13 @@ export interface OverlayStart { // (undocumented) banners: OverlayBannersStart; // (undocumented) - openFlyout: (flyoutChildren: MountPoint, flyoutProps?: { - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - }) => OverlayRef; + flyouts: OverlayFlyoutStart; // (undocumented) - openModal: (modalChildren: MountPoint, modalProps?: { - className?: string; - closeButtonAriaLabel?: string; - 'data-test-subj'?: string; - }) => OverlayRef; + modals: OverlayModalStart; + // @deprecated (undocumented) + openFlyout: OverlayFlyoutStart['open']; + // @deprecated (undocumented) + openModal: OverlayModalStart['open']; } // @public (undocumented) From f6f4fbe8cfe81a5bc6950e22721ddf50e2fd6d9a Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Thu, 24 Oct 2019 16:01:29 -0700 Subject: [PATCH 12/23] update snapshot on data/query_bar --- .../query_bar_input.test.tsx.snap | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap index 286e60cca9712..a4304f91e3101 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap @@ -289,6 +289,12 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -852,6 +858,12 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -1403,6 +1415,12 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1 "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -1963,6 +1981,12 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1 "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -2514,6 +2538,12 @@ exports[`QueryBarInput Should render the given query 1`] = ` "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -3074,6 +3104,12 @@ exports[`QueryBarInput Should render the given query 1`] = ` "remove": [MockFunction], "replace": [MockFunction], }, + "flyouts": Object { + "open": [MockFunction], + }, + "modals": Object { + "open": [MockFunction], + }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, From 34ecb110686a7268bfd3e5d77c7f52f4499b73e7 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 28 Oct 2019 23:46:42 +0100 Subject: [PATCH 13/23] use ReactNode instead of ReactElement --- .../kibana_react/public/overlays/mount_for_component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/kibana_react/public/overlays/mount_for_component.tsx b/src/plugins/kibana_react/public/overlays/mount_for_component.tsx index 6ac6002c1b060..b2b964c90af84 100644 --- a/src/plugins/kibana_react/public/overlays/mount_for_component.tsx +++ b/src/plugins/kibana_react/public/overlays/mount_for_component.tsx @@ -27,7 +27,7 @@ import { MountPoint } from 'kibana/public'; * * @param component to get a mount for */ -export const mountForComponent = (component: React.ReactElement): MountPoint => ( +export const mountForComponent = (component: React.ReactNode): MountPoint => ( element: HTMLElement ) => { ReactDOM.render({component}, element); From e55d9c0cae24d72c65ff7604f6fc1d9534f3ce4b Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Tue, 29 Oct 2019 00:00:56 +0100 Subject: [PATCH 14/23] rename mountForComponent to reactMount --- .../public/lib/actions/open_replace_panel_flyout.tsx | 4 ++-- .../data/public/filter/action/apply_filter_action.ts | 4 ++-- .../fetch/components/shard_failure_open_modal_button.tsx | 4 ++-- .../embeddable/public/lib/panel/embeddable_panel.tsx | 4 ++-- .../panel_actions/add_panel/open_add_panel_flyout.tsx | 4 ++-- .../public/lib/test_samples/actions/send_message_action.tsx | 6 +++--- .../contact_card/contact_card_embeddable_factory.tsx | 4 ++-- src/plugins/inspector/public/plugin.tsx | 6 ++---- src/plugins/kibana_react/public/index.ts | 1 + .../kibana_react/public/overlays/create_react_overlays.tsx | 6 +++--- src/plugins/kibana_react/public/overlays/index.tsx | 1 - src/plugins/kibana_react/public/util/index.ts | 1 + .../mount_for_component.tsx => util/react_mount.tsx} | 4 +--- .../public/tests/test_samples/hello_world_action.tsx | 4 ++-- .../public/tests/test_samples/say_hello_action.tsx | 4 ++-- .../public/sample_panel_action.tsx | 4 ++-- x-pack/legacy/plugins/graph/public/app.js | 4 ++-- .../public/app/components/toast_notification_text.tsx | 4 ++-- 18 files changed, 33 insertions(+), 36 deletions(-) rename src/plugins/kibana_react/public/{overlays/mount_for_component.tsx => util/react_mount.tsx} (91%) diff --git a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx index 71da5becd59d7..430f230694798 100644 --- a/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx +++ b/src/legacy/core_plugins/dashboard_embeddable_container/public/np_ready/public/lib/actions/open_replace_panel_flyout.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { CoreStart } from 'src/core/public'; -import { mountForComponent } from '../../../../../../../../plugins/kibana_react/public'; +import { reactMount } from '../../../../../../../../plugins/kibana_react/public'; import { ReplacePanelFlyout } from './replace_panel_flyout'; import { @@ -39,7 +39,7 @@ export async function openReplacePanelFlyout(options: { }) { const { embeddable, core, panelToRemove, savedObjectFinder, notifications } = options; const flyoutSession = core.overlays.openFlyout( - mountForComponent( + reactMount( { diff --git a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts index 8802aff1ed2be..f9ef2710d883e 100644 --- a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts +++ b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts @@ -25,7 +25,7 @@ import { createAction, IncompatibleActionError, } from '../../../../../../plugins/ui_actions/public'; -import { mountForComponent } from '../../../../../../plugins/kibana_react/public'; +import { reactMount } from '../../../../../../plugins/kibana_react/public'; import { changeTimeFilter, extractTimeFilter, FilterManager } from '../filter_manager'; import { TimefilterContract } from '../../timefilter'; import { applyFiltersPopover } from '../apply_filters/apply_filters_popover'; @@ -75,7 +75,7 @@ export function createFilterAction( const filterSelectionPromise: Promise = new Promise(resolve => { const overlay = npStart.core.overlays.openModal( - mountForComponent( + reactMount( applyFiltersPopover( filters, indexPatterns, diff --git a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx index a5b2822927919..b9f2f96f86d69 100644 --- a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx +++ b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx @@ -22,7 +22,7 @@ import { npStart } from 'ui/new_platform'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButton, EuiTextAlign } from '@elastic/eui'; -import { mountForComponent } from '../../../../../../plugins/kibana_react/public'; +import { reactMount } from '../../../../../../plugins/kibana_react/public'; import { ShardFailureModal } from './shard_failure_modal'; import { ResponseWithShardFailure, Request } from './shard_failure_types'; @@ -35,7 +35,7 @@ interface Props { export function ShardFailureOpenModalButton({ request, response, title }: Props) { function onClick() { const modal = npStart.core.overlays.openModal( - mountForComponent( + reactMount( { async function getUserData(context: { embeddable: IEmbeddable }) { return new Promise<{ title: string | undefined }>(resolve => { const session = overlays.openModal( - mountForComponent( + reactMount( { diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx index fe838d891c71d..e7ec0b5ab95ee 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { NotificationsStart, OverlayStart } from 'src/core/public'; -import { mountForComponent } from '../../../../../../../kibana_react/public'; +import { reactMount } from '../../../../../../../kibana_react/public'; import { IContainer } from '../../../../containers'; import { AddPanelFlyout } from './add_panel_flyout'; import { GetEmbeddableFactory, GetEmbeddableFactories } from '../../../../types'; @@ -40,7 +40,7 @@ export async function openAddPanelFlyout(options: { SavedObjectFinder, } = options; const flyoutSession = overlays.openFlyout( - mountForComponent( + reactMount( { diff --git a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx index c230194849f9e..1eaac9e55e371 100644 --- a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx @@ -20,7 +20,7 @@ import React from 'react'; import { EuiFlyoutBody } from '@elastic/eui'; import { createAction, IncompatibleActionError } from '../../ui_actions'; import { CoreStart } from '../../../../../../core/public'; -import { mountForComponent } from '../../../../../kibana_react/public'; +import { reactMount } from '../../../../../kibana_react/public'; import { Embeddable, EmbeddableInput } from '../../embeddables'; import { GetMessageModal } from './get_message_modal'; import { FullNameEmbeddableOutput, hasFullNameOutput } from './say_hello_action'; @@ -39,7 +39,7 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { const greeting = `Hello, ${context.embeddable.getOutput().fullName}`; const content = message ? `${greeting}. ${message}` : greeting; - overlays.openFlyout(mountForComponent({content})); + overlays.openFlyout(reactMount({content})); }; return createAction({ @@ -52,7 +52,7 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { } const modal = overlays.openModal( - mountForComponent( + reactMount( modal.close()} onDone={message => { diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx index 8e7352b24e87b..e6c34fbff8030 100644 --- a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx @@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n'; import { TExecuteTriggerActions } from 'src/plugins/ui_actions/public'; import { CoreStart } from 'src/core/public'; -import { mountForComponent } from '../../../../../../kibana_react/public'; +import { reactMount } from '../../../../../../kibana_react/public'; import { EmbeddableFactory } from '../../../embeddables'; import { Container } from '../../../containers'; import { ContactCardEmbeddable, ContactCardEmbeddableInput } from './contact_card_embeddable'; @@ -55,7 +55,7 @@ export class ContactCardEmbeddableFactory extends EmbeddableFactory> { return new Promise(resolve => { const modalSession = this.overlays.openModal( - mountForComponent( + reactMount( { modalSession.close(); diff --git a/src/plugins/inspector/public/plugin.tsx b/src/plugins/inspector/public/plugin.tsx index 1cc4dbd86ced1..4ee740eccc8b5 100644 --- a/src/plugins/inspector/public/plugin.tsx +++ b/src/plugins/inspector/public/plugin.tsx @@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n'; import * as React from 'react'; import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public'; -import { mountForComponent } from '../../kibana_react/public'; +import { reactMount } from '../../kibana_react/public'; import { InspectorViewRegistry } from './view_registry'; import { Adapters, InspectorOptions, InspectorSession } from './types'; import { InspectorPanel } from './ui/inspector_panel'; @@ -100,9 +100,7 @@ export class InspectorPublicPlugin implements Plugin { } return core.overlays.openFlyout( - mountForComponent( - - ), + reactMount(), { 'data-test-subj': 'inspectorPanel', closeButtonAriaLabel: closeButtonLabel, diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index cd2ae89b05b5d..dfe68f43baa73 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/src/plugins/kibana_react/public/index.ts @@ -23,3 +23,4 @@ export * from './context'; export * from './overlays'; export * from './ui_settings'; export * from './field_icon'; +export { reactMount } from './util'; diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx index 282341156f7bc..638b11db0cc04 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx @@ -20,7 +20,7 @@ import * as React from 'react'; import { KibanaServices } from '../context/types'; import { KibanaReactOverlays } from './types'; -import { mountForComponent } from './mount_for_component'; +import { reactMount } from '../util'; export const createReactOverlays = (services: KibanaServices): KibanaReactOverlays => { const checkCoreService = () => { @@ -31,12 +31,12 @@ export const createReactOverlays = (services: KibanaServices): KibanaReactOverla const openFlyout: KibanaReactOverlays['openFlyout'] = (node, options?) => { checkCoreService(); - return services.overlays!.openFlyout(mountForComponent(<>{node}), options); + return services.overlays!.openFlyout(reactMount(<>{node}), options); }; const openModal: KibanaReactOverlays['openModal'] = (node, options?) => { checkCoreService(); - return services.overlays!.openModal(mountForComponent(<>{node}), options); + return services.overlays!.openModal(reactMount(<>{node}), options); }; const overlays: KibanaReactOverlays = { diff --git a/src/plugins/kibana_react/public/overlays/index.tsx b/src/plugins/kibana_react/public/overlays/index.tsx index 2096d7e858690..844f617ceafdb 100644 --- a/src/plugins/kibana_react/public/overlays/index.tsx +++ b/src/plugins/kibana_react/public/overlays/index.tsx @@ -19,4 +19,3 @@ export * from './types'; export * from './create_react_overlays'; -export * from './mount_for_component'; diff --git a/src/plugins/kibana_react/public/util/index.ts b/src/plugins/kibana_react/public/util/index.ts index a9219196e84a9..1053ca01603e3 100644 --- a/src/plugins/kibana_react/public/util/index.ts +++ b/src/plugins/kibana_react/public/util/index.ts @@ -19,3 +19,4 @@ export * from './use_observable'; export * from './use_unmount'; +export * from './react_mount'; diff --git a/src/plugins/kibana_react/public/overlays/mount_for_component.tsx b/src/plugins/kibana_react/public/util/react_mount.tsx similarity index 91% rename from src/plugins/kibana_react/public/overlays/mount_for_component.tsx rename to src/plugins/kibana_react/public/util/react_mount.tsx index b2b964c90af84..414dd007f286b 100644 --- a/src/plugins/kibana_react/public/overlays/mount_for_component.tsx +++ b/src/plugins/kibana_react/public/util/react_mount.tsx @@ -27,9 +27,7 @@ import { MountPoint } from 'kibana/public'; * * @param component to get a mount for */ -export const mountForComponent = (component: React.ReactNode): MountPoint => ( - element: HTMLElement -) => { +export const reactMount = (component: React.ReactNode): MountPoint => (element: HTMLElement) => { ReactDOM.render({component}, element); return () => ReactDOM.unmountComponentAtNode(element); }; diff --git a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx index ad86a0d48e37c..912444a7e49b5 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { createAction, IAction } from '../../actions'; -import { mountForComponent } from '../../../../kibana_react/public'; +import { reactMount } from '../../../../kibana_react/public'; export const HELLO_WORLD_ACTION_ID = 'HELLO_WORLD_ACTION_ID'; @@ -30,7 +30,7 @@ export function createHelloWorldAction(overlays: CoreStart['overlays']): IAction type: HELLO_WORLD_ACTION_ID, execute: async () => { const flyoutSession = overlays.openFlyout( - mountForComponent( + reactMount( flyoutSession && flyoutSession.close()}> Hello World, I am a hello world action! diff --git a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx index 1b5b86d313ab6..4604926c963c9 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { IAction, createAction } from '../../actions'; -import { mountForComponent } from '../../../../kibana_react/public'; +import { reactMount } from '../../../../kibana_react/public'; export const SAY_HELLO_ACTION = 'SAY_HELLO_ACTION'; @@ -32,7 +32,7 @@ export function createSayHelloAction(overlays: CoreStart['overlays']): IAction<{ isCompatible: async ({ name }) => name !== undefined, execute: async context => { const flyoutSession = overlays.openFlyout( - mountForComponent( + reactMount( flyoutSession && flyoutSession.close()}> this.getDisplayName(context) diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx index 9ffe963d47f29..ca8ecc13631a4 100644 --- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx +++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx @@ -22,7 +22,7 @@ import { npStart, npSetup } from 'ui/new_platform'; import { CONTEXT_MENU_TRIGGER, IEmbeddable } from '../../../../../src/plugins/embeddable/public'; import { createAction } from '../../../../../src/plugins/ui_actions/public'; -import { mountForComponent } from '../../../../../src/plugins/kibana_react/public'; +import { reactMount } from '../../../../../src/plugins/kibana_react/public'; interface ActionContext { embeddable: IEmbeddable; @@ -37,7 +37,7 @@ function createSamplePanelAction() { return; } npStart.core.overlays.openFlyout( - mountForComponent( + reactMount( diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js index d1d38c1ffbc76..8895d99ab7efb 100644 --- a/x-pack/legacy/plugins/graph/public/app.js +++ b/x-pack/legacy/plugins/graph/public/app.js @@ -11,7 +11,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { isColorDark, hexToRgb } from '@elastic/eui'; -import { mountForComponent } from '../../../../../src/plugins/kibana_react/public'; +import { reactMount } from '../../../../../src/plugins/kibana_react/public'; import { KibanaParsedUrl } from 'ui/url/kibana_parsed_url'; import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal'; import { formatAngularHttpError } from 'ui/notify/lib'; @@ -550,7 +550,7 @@ export function initGraphApp(angularModule, deps) { canEditDrillDownUrls: canEditDrillDownUrls }), $scope.$digest.bind($scope)); coreStart.overlays.openFlyout( - mountForComponent( + reactMount( diff --git a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx index fcafb8b749e32..5a74ca1f50d66 100644 --- a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx +++ b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx @@ -19,7 +19,7 @@ import { import { i18n } from '@kbn/i18n'; import { npStart } from 'ui/new_platform'; -import { mountForComponent } from '../../../../../../../src/plugins/kibana_react/public'; +import { reactMount } from '../../../../../../../src/plugins/kibana_react/public'; const MAX_SIMPLE_MESSAGE_LENGTH = 140; @@ -44,7 +44,7 @@ export const ToastNotificationText: FC<{ text: any }> = ({ text }) => { const openModal = () => { const modal = npStart.core.overlays.openModal( - mountForComponent( + reactMount( modal.close()}> From 78b5378d04ae821aa10ef7ec9006a00f0044155a Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 08:27:35 +0100 Subject: [PATCH 15/23] change reactMount usages to toMountPoint --- src/core/public/overlays/index.ts | 1 + .../filter/action/apply_filter_action.ts | 25 +++++++++-------- .../shard_failure_open_modal_button.tsx | 4 +-- .../actions/open_replace_panel_flyout.tsx | 28 ++++++++++--------- .../public/lib/panel/embeddable_panel.tsx | 4 +-- .../add_panel/open_add_panel_flyout.tsx | 4 +-- .../actions/send_message_action.tsx | 6 ++-- .../contact_card_embeddable_factory.tsx | 4 +-- src/plugins/inspector/public/plugin.tsx | 4 +-- .../public/overlays/create_react_overlays.tsx | 6 ++-- .../tests/test_samples/hello_world_action.tsx | 4 +-- .../tests/test_samples/say_hello_action.tsx | 4 +-- .../public/sample_panel_action.tsx | 4 +-- x-pack/legacy/plugins/graph/public/app.js | 4 +-- .../components/toast_notification_text.tsx | 4 +-- 15 files changed, 56 insertions(+), 50 deletions(-) diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts index 4b015ba6fcd40..417486f78f719 100644 --- a/src/core/public/overlays/index.ts +++ b/src/core/public/overlays/index.ts @@ -17,6 +17,7 @@ * under the License. */ +export { OverlayRef } from './types'; export { OverlayBannersStart } from './banners'; export { OverlayFlyoutStart, OverlayFlyoutOpenOptions } from './flyout'; export { OverlayModalStart, OverlayModalOpenOptions } from './modal'; diff --git a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts index abe9ec6d6e873..39ec1f78b65f0 100644 --- a/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts +++ b/src/legacy/core_plugins/data/public/filter/action/apply_filter_action.ts @@ -19,6 +19,7 @@ import { i18n } from '@kbn/i18n'; import { CoreStart } from 'src/core/public'; +import { toMountPoint } from '../../../../../../plugins/kibana_react/public'; import { IAction, createAction, @@ -79,17 +80,19 @@ export function createFilterAction( const filterSelectionPromise: Promise = new Promise(resolve => { const overlay = overlays.openModal( - applyFiltersPopover( - filters, - indexPatterns, - () => { - overlay.close(); - resolve([]); - }, - (filterSelection: esFilters.Filter[]) => { - overlay.close(); - resolve(filterSelection); - } + toMountPoint( + applyFiltersPopover( + filters, + indexPatterns, + () => { + overlay.close(); + resolve([]); + }, + (filterSelection: esFilters.Filter[]) => { + overlay.close(); + resolve(filterSelection); + } + ) ), { 'data-test-subj': 'test', diff --git a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx index b9f2f96f86d69..b02344ce6dd72 100644 --- a/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx +++ b/src/legacy/ui/public/courier/fetch/components/shard_failure_open_modal_button.tsx @@ -22,7 +22,7 @@ import { npStart } from 'ui/new_platform'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiButton, EuiTextAlign } from '@elastic/eui'; -import { reactMount } from '../../../../../../plugins/kibana_react/public'; +import { toMountPoint } from '../../../../../../plugins/kibana_react/public'; import { ShardFailureModal } from './shard_failure_modal'; import { ResponseWithShardFailure, Request } from './shard_failure_types'; @@ -35,7 +35,7 @@ interface Props { export function ShardFailureOpenModalButton({ request, response, title }: Props) { function onClick() { const modal = npStart.core.overlays.openModal( - reactMount( + toMountPoint( { - if (flyoutSession) { - flyoutSession.close(); - } - }} - panelToRemove={panelToRemove} - savedObjectsFinder={savedObjectFinder} - notifications={notifications} - getEmbeddableFactories={getEmbeddableFactories} - />, + toMountPoint( + { + if (flyoutSession) { + flyoutSession.close(); + } + }} + panelToRemove={panelToRemove} + savedObjectsFinder={savedObjectFinder} + notifications={notifications} + getEmbeddableFactories={getEmbeddableFactories} + /> + ), { 'data-test-subj': 'replacePanelFlyout', } diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx index 1ef7e29f837bf..33be01529c631 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx +++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx @@ -26,7 +26,7 @@ import { IAction, } from '../ui_actions'; import { CoreStart, OverlayStart } from '../../../../../core/public'; -import { reactMount } from '../../../../kibana_react/public'; +import { toMountPoint } from '../../../../kibana_react/public'; import { Start as InspectorStartContract } from '../inspector'; import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER } from '../triggers'; @@ -205,7 +205,7 @@ export class EmbeddablePanel extends React.Component { async function getUserData(context: { embeddable: IEmbeddable }) { return new Promise<{ title: string | undefined }>(resolve => { const session = overlays.openModal( - reactMount( + toMountPoint( { diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx index e7ec0b5ab95ee..481693501066c 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx @@ -18,7 +18,7 @@ */ import React from 'react'; import { NotificationsStart, OverlayStart } from 'src/core/public'; -import { reactMount } from '../../../../../../../kibana_react/public'; +import { toMountPoint } from '../../../../../../../kibana_react/public'; import { IContainer } from '../../../../containers'; import { AddPanelFlyout } from './add_panel_flyout'; import { GetEmbeddableFactory, GetEmbeddableFactories } from '../../../../types'; @@ -40,7 +40,7 @@ export async function openAddPanelFlyout(options: { SavedObjectFinder, } = options; const flyoutSession = overlays.openFlyout( - reactMount( + toMountPoint( { diff --git a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx index 1eaac9e55e371..502269d7ac193 100644 --- a/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/actions/send_message_action.tsx @@ -20,7 +20,7 @@ import React from 'react'; import { EuiFlyoutBody } from '@elastic/eui'; import { createAction, IncompatibleActionError } from '../../ui_actions'; import { CoreStart } from '../../../../../../core/public'; -import { reactMount } from '../../../../../kibana_react/public'; +import { toMountPoint } from '../../../../../kibana_react/public'; import { Embeddable, EmbeddableInput } from '../../embeddables'; import { GetMessageModal } from './get_message_modal'; import { FullNameEmbeddableOutput, hasFullNameOutput } from './say_hello_action'; @@ -39,7 +39,7 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { const greeting = `Hello, ${context.embeddable.getOutput().fullName}`; const content = message ? `${greeting}. ${message}` : greeting; - overlays.openFlyout(reactMount({content})); + overlays.openFlyout(toMountPoint({content})); }; return createAction({ @@ -52,7 +52,7 @@ export function createSendMessageAction(overlays: CoreStart['overlays']) { } const modal = overlays.openModal( - reactMount( + toMountPoint( modal.close()} onDone={message => { diff --git a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx index e6c34fbff8030..d1eea5d67fb41 100644 --- a/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx +++ b/src/plugins/embeddable/public/lib/test_samples/embeddables/contact_card/contact_card_embeddable_factory.tsx @@ -22,7 +22,7 @@ import { i18n } from '@kbn/i18n'; import { TExecuteTriggerActions } from 'src/plugins/ui_actions/public'; import { CoreStart } from 'src/core/public'; -import { reactMount } from '../../../../../../kibana_react/public'; +import { toMountPoint } from '../../../../../../kibana_react/public'; import { EmbeddableFactory } from '../../../embeddables'; import { Container } from '../../../containers'; import { ContactCardEmbeddable, ContactCardEmbeddableInput } from './contact_card_embeddable'; @@ -55,7 +55,7 @@ export class ContactCardEmbeddableFactory extends EmbeddableFactory> { return new Promise(resolve => { const modalSession = this.overlays.openModal( - reactMount( + toMountPoint( { modalSession.close(); diff --git a/src/plugins/inspector/public/plugin.tsx b/src/plugins/inspector/public/plugin.tsx index 4ee740eccc8b5..cc9f2404d802f 100644 --- a/src/plugins/inspector/public/plugin.tsx +++ b/src/plugins/inspector/public/plugin.tsx @@ -20,7 +20,7 @@ import { i18n } from '@kbn/i18n'; import * as React from 'react'; import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../../core/public'; -import { reactMount } from '../../kibana_react/public'; +import { toMountPoint } from '../../kibana_react/public'; import { InspectorViewRegistry } from './view_registry'; import { Adapters, InspectorOptions, InspectorSession } from './types'; import { InspectorPanel } from './ui/inspector_panel'; @@ -100,7 +100,7 @@ export class InspectorPublicPlugin implements Plugin { } return core.overlays.openFlyout( - reactMount(), + toMountPoint(), { 'data-test-subj': 'inspectorPanel', closeButtonAriaLabel: closeButtonLabel, diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx index 638b11db0cc04..6d7b34128f3fe 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.tsx @@ -20,7 +20,7 @@ import * as React from 'react'; import { KibanaServices } from '../context/types'; import { KibanaReactOverlays } from './types'; -import { reactMount } from '../util'; +import { toMountPoint } from '../util'; export const createReactOverlays = (services: KibanaServices): KibanaReactOverlays => { const checkCoreService = () => { @@ -31,12 +31,12 @@ export const createReactOverlays = (services: KibanaServices): KibanaReactOverla const openFlyout: KibanaReactOverlays['openFlyout'] = (node, options?) => { checkCoreService(); - return services.overlays!.openFlyout(reactMount(<>{node}), options); + return services.overlays!.openFlyout(toMountPoint(<>{node}), options); }; const openModal: KibanaReactOverlays['openModal'] = (node, options?) => { checkCoreService(); - return services.overlays!.openModal(reactMount(<>{node}), options); + return services.overlays!.openModal(toMountPoint(<>{node}), options); }; const overlays: KibanaReactOverlays = { diff --git a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx index 912444a7e49b5..9e3d206c9a6dc 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { createAction, IAction } from '../../actions'; -import { reactMount } from '../../../../kibana_react/public'; +import { toMountPoint } from '../../../../kibana_react/public'; export const HELLO_WORLD_ACTION_ID = 'HELLO_WORLD_ACTION_ID'; @@ -30,7 +30,7 @@ export function createHelloWorldAction(overlays: CoreStart['overlays']): IAction type: HELLO_WORLD_ACTION_ID, execute: async () => { const flyoutSession = overlays.openFlyout( - reactMount( + toMountPoint( flyoutSession && flyoutSession.close()}> Hello World, I am a hello world action! diff --git a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx index 4604926c963c9..e984dd8fb64cc 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/say_hello_action.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { EuiFlyout } from '@elastic/eui'; import { CoreStart } from 'src/core/public'; import { IAction, createAction } from '../../actions'; -import { reactMount } from '../../../../kibana_react/public'; +import { toMountPoint } from '../../../../kibana_react/public'; export const SAY_HELLO_ACTION = 'SAY_HELLO_ACTION'; @@ -32,7 +32,7 @@ export function createSayHelloAction(overlays: CoreStart['overlays']): IAction<{ isCompatible: async ({ name }) => name !== undefined, execute: async context => { const flyoutSession = overlays.openFlyout( - reactMount( + toMountPoint( flyoutSession && flyoutSession.close()}> this.getDisplayName(context) diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx index ca8ecc13631a4..4ce748e2c7118 100644 --- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx +++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/public/sample_panel_action.tsx @@ -22,7 +22,7 @@ import { npStart, npSetup } from 'ui/new_platform'; import { CONTEXT_MENU_TRIGGER, IEmbeddable } from '../../../../../src/plugins/embeddable/public'; import { createAction } from '../../../../../src/plugins/ui_actions/public'; -import { reactMount } from '../../../../../src/plugins/kibana_react/public'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; interface ActionContext { embeddable: IEmbeddable; @@ -37,7 +37,7 @@ function createSamplePanelAction() { return; } npStart.core.overlays.openFlyout( - reactMount( + toMountPoint( diff --git a/x-pack/legacy/plugins/graph/public/app.js b/x-pack/legacy/plugins/graph/public/app.js index b75dffd2b0200..aa08841e03f52 100644 --- a/x-pack/legacy/plugins/graph/public/app.js +++ b/x-pack/legacy/plugins/graph/public/app.js @@ -11,7 +11,7 @@ import React from 'react'; import { Provider } from 'react-redux'; import { isColorDark, hexToRgb } from '@elastic/eui'; -import { reactMount } from '../../../../../src/plugins/kibana_react/public'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; import { showSaveModal } from 'ui/saved_objects/show_saved_object_save_modal'; import { addAppRedirectMessageToUrl } from 'ui/notify'; @@ -552,7 +552,7 @@ export function initGraphApp(angularModule, deps) { canEditDrillDownUrls: canEditDrillDownUrls }), $scope.$digest.bind($scope)); coreStart.overlays.openFlyout( - reactMount( + toMountPoint( diff --git a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx index 5a74ca1f50d66..c79bf52a86642 100644 --- a/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx +++ b/x-pack/legacy/plugins/transform/public/app/components/toast_notification_text.tsx @@ -19,7 +19,7 @@ import { import { i18n } from '@kbn/i18n'; import { npStart } from 'ui/new_platform'; -import { reactMount } from '../../../../../../../src/plugins/kibana_react/public'; +import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public'; const MAX_SIMPLE_MESSAGE_LENGTH = 140; @@ -44,7 +44,7 @@ export const ToastNotificationText: FC<{ text: any }> = ({ text }) => { const openModal = () => { const modal = npStart.core.overlays.openModal( - reactMount( + toMountPoint( modal.close()}> From db390cb4b56d27c4616105ece14f6cce5f645bde Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 08:32:42 +0100 Subject: [PATCH 16/23] remove duplicate MountPoint type in overlays --- .../public/overlays/flyout/flyout_service.tsx | 3 ++- .../public/overlays/modal/modal_service.tsx | 3 ++- src/core/public/overlays/types.ts | 17 ----------------- 3 files changed, 4 insertions(+), 19 deletions(-) diff --git a/src/core/public/overlays/flyout/flyout_service.tsx b/src/core/public/overlays/flyout/flyout_service.tsx index f388462f0fee4..c22d80eec3b90 100644 --- a/src/core/public/overlays/flyout/flyout_service.tsx +++ b/src/core/public/overlays/flyout/flyout_service.tsx @@ -24,7 +24,8 @@ import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; import { I18nStart } from '../../i18n'; -import { MountPoint, OverlayRef } from '../types'; +import { MountPoint } from '../../types'; +import { OverlayRef } from '../types'; import { MountWrapper } from '../utils'; /** diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index 3bd3d556c3459..ff809fe53a471 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -24,7 +24,8 @@ import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Subject } from 'rxjs'; import { I18nStart } from '../../i18n'; -import { OverlayRef, MountPoint } from '../types'; +import { MountPoint } from '../../types'; +import { OverlayRef } from '../types'; import { MountWrapper } from '../utils'; /** diff --git a/src/core/public/overlays/types.ts b/src/core/public/overlays/types.ts index bb3fb27e39606..d5bd01c672d1f 100644 --- a/src/core/public/overlays/types.ts +++ b/src/core/public/overlays/types.ts @@ -17,23 +17,6 @@ * under the License. */ -/** - * A function that will mount the banner inside the provided element. - * @param element the container element to render into - * @returns a {@link UnmountCallback} that unmount the element on call. - * - * @public - */ -export type MountPoint = (element: HTMLElement) => UnmountCallback; - -/** - * A function that will unmount the element previously mounted by - * the associated {@link MountPoint} - * - * @public - */ -export type UnmountCallback = () => void; - /** * Returned by {@link OverlayStart} methods for closing a mounted overlay. * @public From f08fdfe98e1c4a3818337bd99db900893314f678 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 08:40:12 +0100 Subject: [PATCH 17/23] remove duplicate mount utilities from overlays --- .../public/overlays/flyout/flyout_service.tsx | 2 +- .../overlays/modal/modal_service.test.tsx | 16 +++---- .../public/overlays/modal/modal_service.tsx | 2 +- src/core/public/overlays/utils.tsx | 44 ------------------- .../utils.test.tsx => utils/mount.test.tsx} | 4 +- src/core/public/utils/mount.tsx | 10 ++--- 6 files changed, 16 insertions(+), 62 deletions(-) delete mode 100644 src/core/public/overlays/utils.tsx rename src/core/public/{overlays/utils.test.tsx => utils/mount.test.tsx} (95%) diff --git a/src/core/public/overlays/flyout/flyout_service.tsx b/src/core/public/overlays/flyout/flyout_service.tsx index c22d80eec3b90..5151a8414d6a0 100644 --- a/src/core/public/overlays/flyout/flyout_service.tsx +++ b/src/core/public/overlays/flyout/flyout_service.tsx @@ -26,7 +26,7 @@ import { Subject } from 'rxjs'; import { I18nStart } from '../../i18n'; import { MountPoint } from '../../types'; import { OverlayRef } from '../types'; -import { MountWrapper } from '../utils'; +import { MountWrapper } from '../../utils'; /** * A FlyoutRef is a reference to an opened flyout panel. It offers methods to diff --git a/src/core/public/overlays/modal/modal_service.test.tsx b/src/core/public/overlays/modal/modal_service.test.tsx index ba63526003532..582c2697aef30 100644 --- a/src/core/public/overlays/modal/modal_service.test.tsx +++ b/src/core/public/overlays/modal/modal_service.test.tsx @@ -22,7 +22,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { i18nServiceMock } from '../../i18n/i18n_service.mock'; import { ModalService, OverlayModalStart } from './modal_service'; -import { mountForComponent } from '../utils'; +import { mountReactNode } from '../../utils'; import { OverlayRef } from '../types'; const i18nMock = i18nServiceMock.createStartContract(); @@ -61,11 +61,11 @@ describe('ModalService', () => { let ref1: OverlayRef; beforeEach(() => { - ref1 = modals.open(mountForComponent(Modal content 1)); + ref1 = modals.open(mountReactNode(Modal content 1)); }); it('replaces the current modal with a new one', () => { - modals.open(mountForComponent(Flyout content 2)); + modals.open(mountReactNode(Flyout content 2)); expect(mockReactDomRender.mock.calls).toMatchSnapshot(); expect(mockReactDomUnmount).toHaveBeenCalledTimes(1); expect(() => ref1.close()).not.toThrowError(); @@ -75,7 +75,7 @@ describe('ModalService', () => { it('resolves onClose on the previous ref', async () => { const onCloseComplete = jest.fn(); ref1.onClose.then(onCloseComplete); - modals.open(mountForComponent(Flyout content 2)); + modals.open(mountReactNode(Flyout content 2)); await ref1.onClose; expect(onCloseComplete).toBeCalledTimes(1); }); @@ -84,7 +84,7 @@ describe('ModalService', () => { describe('ModalRef#close()', () => { it('resolves the onClose Promise', async () => { - const ref = modals.open(mountForComponent(Flyout content)); + const ref = modals.open(mountReactNode(Flyout content)); const onCloseComplete = jest.fn(); ref.onClose.then(onCloseComplete); @@ -94,7 +94,7 @@ describe('ModalService', () => { }); it('can be called multiple times on the same ModalRef', async () => { - const ref = modals.open(mountForComponent(Flyout content)); + const ref = modals.open(mountReactNode(Flyout content)); expect(mockReactDomUnmount).not.toHaveBeenCalled(); await ref.close(); expect(mockReactDomUnmount.mock.calls).toMatchSnapshot(); @@ -103,8 +103,8 @@ describe('ModalService', () => { }); it("on a stale ModalRef doesn't affect the active flyout", async () => { - const ref1 = modals.open(mountForComponent(Modal content 1)); - const ref2 = modals.open(mountForComponent(Modal content 2)); + const ref1 = modals.open(mountReactNode(Modal content 1)); + const ref2 = modals.open(mountReactNode(Modal content 2)); const onCloseComplete = jest.fn(); ref2.onClose.then(onCloseComplete); mockReactDomUnmount.mockClear(); diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index ff809fe53a471..434c7ad69369b 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -26,7 +26,7 @@ import { Subject } from 'rxjs'; import { I18nStart } from '../../i18n'; import { MountPoint } from '../../types'; import { OverlayRef } from '../types'; -import { MountWrapper } from '../utils'; +import { MountWrapper } from '../../utils'; /** * A ModalRef is a reference to an opened modal. It offers methods to diff --git a/src/core/public/overlays/utils.tsx b/src/core/public/overlays/utils.tsx deleted file mode 100644 index 03b0821b1bf22..0000000000000 --- a/src/core/public/overlays/utils.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import React, { useEffect, useRef } from 'react'; -import ReactDOM from 'react-dom'; -import { MountPoint } from 'kibana/public'; -import { I18nProvider } from '@kbn/i18n/react'; - -/** - * Mount converter for react components. - * - * @internal - */ -export const mountForComponent = (component: React.ReactElement): MountPoint => ( - element: HTMLElement -) => { - ReactDOM.render({component}, element); - return () => ReactDOM.unmountComponentAtNode(element); -}; - -/** - * MountWrapper is a react component to mount a {@link MountPoint} inside a react tree. - */ -export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { - const element = useRef(null); - useEffect(() => mount(element.current!), [mount]); - return
; -}; diff --git a/src/core/public/overlays/utils.test.tsx b/src/core/public/utils/mount.test.tsx similarity index 95% rename from src/core/public/overlays/utils.test.tsx rename to src/core/public/utils/mount.test.tsx index f201e08a4c687..34a592fa0f947 100644 --- a/src/core/public/overlays/utils.test.tsx +++ b/src/core/public/utils/mount.test.tsx @@ -19,7 +19,7 @@ import React from 'react'; import { mount } from 'enzyme'; -import { MountWrapper, mountForComponent } from './utils'; +import { MountWrapper, mountReactNode } from './mount'; describe('MountWrapper', () => { it('renders an html element in react tree', () => { @@ -60,7 +60,7 @@ describe('MountWrapper', () => { }); it('can render a detached react component', () => { - const mountPoint = mountForComponent(detached); + const mountPoint = mountReactNode(detached); const wrapper = ; const container = mount(wrapper); expect(container.html()).toMatchInlineSnapshot( diff --git a/src/core/public/utils/mount.tsx b/src/core/public/utils/mount.tsx index dbd7d5da435a6..94315ce143738 100644 --- a/src/core/public/utils/mount.tsx +++ b/src/core/public/utils/mount.tsx @@ -32,13 +32,11 @@ export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ m }; /** - * Mount converter for react components. + * Mount converter for react node. * - * @param component to get a mount for + * @param node to get a mount for */ -export const mountReactNode = (component: React.ReactNode): MountPoint => ( - element: HTMLElement -) => { - render({component}, element); +export const mountReactNode = (node: React.ReactNode): MountPoint => (element: HTMLElement) => { + render({node}, element); return () => unmountComponentAtNode(element); }; From 892bcde1508f7d61060c9aced961b941e399cd72 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 08:46:07 +0100 Subject: [PATCH 18/23] allow to specify custom class name to MountWrapper --- src/core/public/overlays/_mount_wrapper.scss | 2 +- .../flyout/__snapshots__/flyout_service.test.tsx.snap | 7 +++++-- src/core/public/overlays/flyout/flyout_service.tsx | 2 +- .../modal/__snapshots__/modal_service.test.tsx.snap | 5 ++++- src/core/public/overlays/modal/modal_service.tsx | 2 +- src/core/public/utils/mount.test.tsx | 9 +++++++++ src/core/public/utils/mount.tsx | 9 +++++++-- 7 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/core/public/overlays/_mount_wrapper.scss b/src/core/public/overlays/_mount_wrapper.scss index e294511613839..aafcc4bbe87db 100644 --- a/src/core/public/overlays/_mount_wrapper.scss +++ b/src/core/public/overlays/_mount_wrapper.scss @@ -1,4 +1,4 @@ -.kbnMountWrapper { +.kbnOverlayMountWrapper { display: flex; flex-direction: column; height: 100%; diff --git a/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap b/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap index 6b16f3946c1ae..94c11f0185427 100644 --- a/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap +++ b/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap @@ -21,6 +21,7 @@ Array [ size="m" > @@ -30,7 +31,7 @@ Array [ ] `; -exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`; +exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"
Flyout content
"`; exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = ` Array [ @@ -45,6 +46,7 @@ Array [ size="m" > @@ -62,6 +64,7 @@ Array [ size="m" > @@ -71,4 +74,4 @@ Array [ ] `; -exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`; +exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"
Flyout content 2
"`; diff --git a/src/core/public/overlays/flyout/flyout_service.tsx b/src/core/public/overlays/flyout/flyout_service.tsx index 5151a8414d6a0..b609b2ce1d741 100644 --- a/src/core/public/overlays/flyout/flyout_service.tsx +++ b/src/core/public/overlays/flyout/flyout_service.tsx @@ -129,7 +129,7 @@ export class FlyoutService { render( flyout.close()}> - + , this.targetDomElement diff --git a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap index 812a2fa3e6a10..3928c54f90179 100644 --- a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap +++ b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap @@ -18,6 +18,7 @@ Array [ onClose={[Function]} > @@ -28,7 +29,7 @@ Array [ ] `; -exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`; +exports[`ModalService openModal() renders a modal to the DOM 2`] = `"
Modal content
"`; exports[`ModalService openModal() with a currently active modal replaces the current modal with a new one 1`] = ` Array [ @@ -40,6 +41,7 @@ Array [ onClose={[Function]} > @@ -55,6 +57,7 @@ Array [ onClose={[Function]} > diff --git a/src/core/public/overlays/modal/modal_service.tsx b/src/core/public/overlays/modal/modal_service.tsx index 434c7ad69369b..cb77c2ec4c88c 100644 --- a/src/core/public/overlays/modal/modal_service.tsx +++ b/src/core/public/overlays/modal/modal_service.tsx @@ -119,7 +119,7 @@ export class ModalService { modal.close()}> - + , diff --git a/src/core/public/utils/mount.test.tsx b/src/core/public/utils/mount.test.tsx index 34a592fa0f947..1cacb7d6a796c 100644 --- a/src/core/public/utils/mount.test.tsx +++ b/src/core/public/utils/mount.test.tsx @@ -67,4 +67,13 @@ describe('MountWrapper', () => { `"
detached
"` ); }); + + it('accepts a className prop to override default className', () => { + const mountPoint = mountReactNode(detached); + const wrapper = ; + const container = mount(wrapper); + expect(container.html()).toMatchInlineSnapshot( + `"
detached
"` + ); + }); }); diff --git a/src/core/public/utils/mount.tsx b/src/core/public/utils/mount.tsx index 94315ce143738..0fee67a6e7fbc 100644 --- a/src/core/public/utils/mount.tsx +++ b/src/core/public/utils/mount.tsx @@ -22,13 +22,18 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; import { MountPoint } from '../types'; +const defaultWrapperClass = 'kbnMountWrapper'; + /** * MountWrapper is a react component to mount a {@link MountPoint} inside a react tree. */ -export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { +export const MountWrapper: React.FunctionComponent<{ mount: MountPoint; className?: string }> = ({ + mount, + className = defaultWrapperClass, +}) => { const element = useRef(null); useEffect(() => mount(element.current!), [mount]); - return
; + return
; }; /** From 25c332f72646d9ec8cf0ba30366af44da50d4c37 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 08:53:21 +0100 Subject: [PATCH 19/23] Allow to specialize MountPoint on HTMLElement subtypes --- src/core/public/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/public/types.ts b/src/core/public/types.ts index 4b12d5bc6da51..5abbb3c55813a 100644 --- a/src/core/public/types.ts +++ b/src/core/public/types.ts @@ -26,7 +26,7 @@ * * @public */ -export type MountPoint = (element: HTMLElement) => UnmountCallback; +export type MountPoint = (element: T) => UnmountCallback; /** * A function that will unmount the element previously mounted by From d64f55018a64ae0bc65edef5a6c7e7b9d04b814a Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 09:13:33 +0100 Subject: [PATCH 20/23] updates generated doc --- .../core/public/kibana-plugin-public.md | 256 ++- .../public/kibana-plugin-public.mountpoint.md | 13 + ...erlayflyoutopenoptions._data-test-subj_.md | 11 - ...blic.overlayflyoutopenoptions.classname.md | 11 - ...yflyoutopenoptions.closebuttonarialabel.md | 11 - ...-plugin-public.overlayflyoutopenoptions.md | 21 - ...kibana-plugin-public.overlayflyoutstart.md | 20 - ...a-plugin-public.overlayflyoutstart.open.md | 25 - ...verlaymodalopenoptions._data-test-subj_.md | 11 - ...ublic.overlaymodalopenoptions.classname.md | 11 - ...aymodalopenoptions.closebuttonarialabel.md | 11 - ...a-plugin-public.overlaymodalopenoptions.md | 21 - .../kibana-plugin-public.overlaymodalstart.md | 20 - ...na-plugin-public.overlaymodalstart.open.md | 25 - ...bana-plugin-public.overlaystart.flyouts.md | 1 - .../kibana-plugin-public.overlaystart.md | 4 +- ...ibana-plugin-public.overlaystart.modals.md | 1 - src/core/public/public.api.md | 1992 +++++++++-------- 18 files changed, 1140 insertions(+), 1325 deletions(-) delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalstart.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md diff --git a/docs/development/core/public/kibana-plugin-public.md b/docs/development/core/public/kibana-plugin-public.md index 8bb9e6ffce799..cec307032094e 100644 --- a/docs/development/core/public/kibana-plugin-public.md +++ b/docs/development/core/public/kibana-plugin-public.md @@ -1,130 +1,126 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) - -## kibana-plugin-public package - -The Kibana Core APIs for client-side plugins. - -A plugin's `public/index` file must contain a named import, `plugin`, that implements [PluginInitializer](./kibana-plugin-public.plugininitializer.md) which returns an object that implements [Plugin](./kibana-plugin-public.plugin.md). - -The plugin integrates with the core system via lifecycle events: `setup`, `start`, and `stop`. In each lifecycle method, the plugin will receive the corresponding core services available (either [CoreSetup](./kibana-plugin-public.coresetup.md) or [CoreStart](./kibana-plugin-public.corestart.md)) and any interfaces returned by dependency plugins' lifecycle method. Anything returned by the plugin's lifecycle method will be exposed to downstream dependencies when their corresponding lifecycle methods are invoked. - -## Classes - -| Class | Description | -| --- | --- | -| [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md) | Saved Objects is Kibana's data persisentence mechanism allowing plugins to use Elasticsearch for storing plugin state. The client-side SavedObjectsClient is a thin convenience library around the SavedObjects HTTP API for interacting with Saved Objects. | -| [SimpleSavedObject](./kibana-plugin-public.simplesavedobject.md) | This class is a very simple wrapper for SavedObjects loaded from the server with the [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md).It provides basic functionality for creating/saving/deleting saved objects, but doesn't include any type-specific implementations. | -| [ToastsApi](./kibana-plugin-public.toastsapi.md) | Methods for adding and removing global toast messages. | -| [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | | - -## Interfaces - -| Interface | Description | -| --- | --- | -| [App](./kibana-plugin-public.app.md) | Extension of [common app properties](./kibana-plugin-public.appbase.md) with the mount function. | -| [AppBase](./kibana-plugin-public.appbase.md) | | -| [ApplicationSetup](./kibana-plugin-public.applicationsetup.md) | | -| [ApplicationStart](./kibana-plugin-public.applicationstart.md) | | -| [AppMountContext](./kibana-plugin-public.appmountcontext.md) | The context object received when applications are mounted to the DOM. | -| [AppMountParameters](./kibana-plugin-public.appmountparameters.md) | | -| [Capabilities](./kibana-plugin-public.capabilities.md) | The read-only set of capabilities available for the current UI session. Capabilities are simple key-value pairs of (string, boolean), where the string denotes the capability ID, and the boolean is a flag indicating if the capability is enabled or disabled. | -| [ChromeBadge](./kibana-plugin-public.chromebadge.md) | | -| [ChromeBrand](./kibana-plugin-public.chromebrand.md) | | -| [ChromeDocTitle](./kibana-plugin-public.chromedoctitle.md) | APIs for accessing and updating the document title. | -| [ChromeNavControl](./kibana-plugin-public.chromenavcontrol.md) | | -| [ChromeNavControls](./kibana-plugin-public.chromenavcontrols.md) | [APIs](./kibana-plugin-public.chromenavcontrols.md) for registering new controls to be displayed in the navigation bar. | -| [ChromeNavLink](./kibana-plugin-public.chromenavlink.md) | | -| [ChromeNavLinks](./kibana-plugin-public.chromenavlinks.md) | [APIs](./kibana-plugin-public.chromenavlinks.md) for manipulating nav links. | -| [ChromeRecentlyAccessed](./kibana-plugin-public.chromerecentlyaccessed.md) | [APIs](./kibana-plugin-public.chromerecentlyaccessed.md) for recently accessed history. | -| [ChromeRecentlyAccessedHistoryItem](./kibana-plugin-public.chromerecentlyaccessedhistoryitem.md) | | -| [ChromeStart](./kibana-plugin-public.chromestart.md) | ChromeStart allows plugins to customize the global chrome header UI and enrich the UX with additional information about the current location of the browser. | -| [ContextSetup](./kibana-plugin-public.contextsetup.md) | An object that handles registration of context providers and configuring handlers with context. | -| [CoreSetup](./kibana-plugin-public.coresetup.md) | Core services exposed to the Plugin setup lifecycle | -| [CoreStart](./kibana-plugin-public.corestart.md) | Core services exposed to the Plugin start lifecycle | -| [DocLinksStart](./kibana-plugin-public.doclinksstart.md) | | -| [EnvironmentMode](./kibana-plugin-public.environmentmode.md) | | -| [ErrorToastOptions](./kibana-plugin-public.errortoastoptions.md) | Options available for [IToasts](./kibana-plugin-public.itoasts.md) APIs. | -| [FatalErrorInfo](./kibana-plugin-public.fatalerrorinfo.md) | Represents the message and stack of a fatal Error | -| [FatalErrorsSetup](./kibana-plugin-public.fatalerrorssetup.md) | FatalErrors stop the Kibana Public Core and displays a fatal error screen with details about the Kibana build and the error. | -| [HttpErrorRequest](./kibana-plugin-public.httperrorrequest.md) | | -| [HttpErrorResponse](./kibana-plugin-public.httperrorresponse.md) | | -| [HttpFetchOptions](./kibana-plugin-public.httpfetchoptions.md) | All options that may be used with a [HttpHandler](./kibana-plugin-public.httphandler.md). | -| [HttpFetchQuery](./kibana-plugin-public.httpfetchquery.md) | | -| [HttpHeadersInit](./kibana-plugin-public.httpheadersinit.md) | | -| [HttpInterceptor](./kibana-plugin-public.httpinterceptor.md) | An object that may define global interceptor functions for different parts of the request and response lifecycle. See [IHttpInterceptController](./kibana-plugin-public.ihttpinterceptcontroller.md). | -| [HttpRequestInit](./kibana-plugin-public.httprequestinit.md) | Fetch API options available to [HttpHandler](./kibana-plugin-public.httphandler.md)s. | -| [HttpResponse](./kibana-plugin-public.httpresponse.md) | | -| [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | | -| [I18nStart](./kibana-plugin-public.i18nstart.md) | I18nStart.Context is required by any localizable React component from @kbn/i18n and @elastic/eui packages and is supposed to be used as the topmost component for any i18n-compatible React tree. | -| [IAnonymousPaths](./kibana-plugin-public.ianonymouspaths.md) | APIs for denoting paths as not requiring authentication | -| [IBasePath](./kibana-plugin-public.ibasepath.md) | APIs for manipulating the basePath on URL segments. | -| [IContextContainer](./kibana-plugin-public.icontextcontainer.md) | An object that handles registration of context providers and configuring handlers with context. | -| [IHttpFetchError](./kibana-plugin-public.ihttpfetcherror.md) | | -| [IHttpInterceptController](./kibana-plugin-public.ihttpinterceptcontroller.md) | Used to halt a request Promise chain in a [HttpInterceptor](./kibana-plugin-public.httpinterceptor.md). | -| [InterceptedHttpResponse](./kibana-plugin-public.interceptedhttpresponse.md) | | -| [LegacyCoreSetup](./kibana-plugin-public.legacycoresetup.md) | Setup interface exposed to the legacy platform via the ui/new_platform module. | -| [LegacyCoreStart](./kibana-plugin-public.legacycorestart.md) | Start interface exposed to the legacy platform via the ui/new_platform module. | -| [LegacyNavLink](./kibana-plugin-public.legacynavlink.md) | | -| [NotificationsSetup](./kibana-plugin-public.notificationssetup.md) | | -| [NotificationsStart](./kibana-plugin-public.notificationsstart.md) | | -| [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | | -| [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) | | -| [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) | APIs to open and manage fly-out dialogs. | -| [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) | | -| [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) | APIs to open and manage modal dialogs. | -| [OverlayRef](./kibana-plugin-public.overlayref.md) | Returned by [OverlayStart](./kibana-plugin-public.overlaystart.md) methods for closing a mounted overlay. | -| [OverlayStart](./kibana-plugin-public.overlaystart.md) | | -| [PackageInfo](./kibana-plugin-public.packageinfo.md) | | -| [Plugin](./kibana-plugin-public.plugin.md) | The interface that should be returned by a PluginInitializer. | -| [PluginInitializerContext](./kibana-plugin-public.plugininitializercontext.md) | The available core services passed to a PluginInitializer | -| [SavedObject](./kibana-plugin-public.savedobject.md) | | -| [SavedObjectAttributes](./kibana-plugin-public.savedobjectattributes.md) | The data for a Saved Object is stored as an object in the attributes property. | -| [SavedObjectReference](./kibana-plugin-public.savedobjectreference.md) | A reference to another saved object. | -| [SavedObjectsBaseOptions](./kibana-plugin-public.savedobjectsbaseoptions.md) | | -| [SavedObjectsBatchResponse](./kibana-plugin-public.savedobjectsbatchresponse.md) | | -| [SavedObjectsBulkCreateObject](./kibana-plugin-public.savedobjectsbulkcreateobject.md) | | -| [SavedObjectsBulkCreateOptions](./kibana-plugin-public.savedobjectsbulkcreateoptions.md) | | -| [SavedObjectsBulkUpdateObject](./kibana-plugin-public.savedobjectsbulkupdateobject.md) | | -| [SavedObjectsBulkUpdateOptions](./kibana-plugin-public.savedobjectsbulkupdateoptions.md) | | -| [SavedObjectsCreateOptions](./kibana-plugin-public.savedobjectscreateoptions.md) | | -| [SavedObjectsFindOptions](./kibana-plugin-public.savedobjectsfindoptions.md) | | -| [SavedObjectsFindResponsePublic](./kibana-plugin-public.savedobjectsfindresponsepublic.md) | Return type of the Saved Objects find() method.\*Note\*: this type is different between the Public and Server Saved Objects clients. | -| [SavedObjectsMigrationVersion](./kibana-plugin-public.savedobjectsmigrationversion.md) | Information about the migrations that have been applied to this SavedObject. When Kibana starts up, KibanaMigrator detects outdated documents and migrates them based on this value. For each migration that has been applied, the plugin's name is used as a key and the latest migration version as the value. | -| [SavedObjectsStart](./kibana-plugin-public.savedobjectsstart.md) | | -| [SavedObjectsUpdateOptions](./kibana-plugin-public.savedobjectsupdateoptions.md) | | -| [UiSettingsState](./kibana-plugin-public.uisettingsstate.md) | | - -## Type Aliases - -| Type Alias | Description | -| --- | --- | -| [AppUnmount](./kibana-plugin-public.appunmount.md) | A function called when an application should be unmounted from the page. This function should be synchronous. | -| [ChromeBreadcrumb](./kibana-plugin-public.chromebreadcrumb.md) | | -| [ChromeHelpExtension](./kibana-plugin-public.chromehelpextension.md) | | -| [ChromeNavLinkUpdateableFields](./kibana-plugin-public.chromenavlinkupdateablefields.md) | | -| [HandlerContextType](./kibana-plugin-public.handlercontexttype.md) | Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md) to represent the type of the context. | -| [HandlerFunction](./kibana-plugin-public.handlerfunction.md) | A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-public.icontextcontainer.md) | -| [HandlerParameters](./kibana-plugin-public.handlerparameters.md) | Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md), excluding the [HandlerContextType](./kibana-plugin-public.handlercontexttype.md). | -| [HttpBody](./kibana-plugin-public.httpbody.md) | | -| [HttpHandler](./kibana-plugin-public.httphandler.md) | A function for making an HTTP requests to Kibana's backend. See [HttpFetchOptions](./kibana-plugin-public.httpfetchoptions.md) for options and [HttpBody](./kibana-plugin-public.httpbody.md) for the response. | -| [HttpSetup](./kibana-plugin-public.httpsetup.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | -| [HttpStart](./kibana-plugin-public.httpstart.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | -| [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. | -| [IToasts](./kibana-plugin-public.itoasts.md) | Methods for adding and removing global toast messages. See [ToastsApi](./kibana-plugin-public.toastsapi.md). | -| [MountPoint](./kibana-plugin-public.mountpoint.md) | A function that should mount DOM content inside the provided container element and return a handler to unmount it. | -| [PluginInitializer](./kibana-plugin-public.plugininitializer.md) | The plugin export at the root of a plugin's public directory should conform to this interface. | -| [PluginOpaqueId](./kibana-plugin-public.pluginopaqueid.md) | | -| [RecursiveReadonly](./kibana-plugin-public.recursivereadonly.md) | | -| [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | Type definition for a Saved Object attribute value | -| [SavedObjectAttributeSingle](./kibana-plugin-public.savedobjectattributesingle.md) | Don't use this type, it's simply a helper type for [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | -| [SavedObjectsClientContract](./kibana-plugin-public.savedobjectsclientcontract.md) | SavedObjectsClientContract as implemented by the [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md) | -| [Toast](./kibana-plugin-public.toast.md) | | -| [ToastInput](./kibana-plugin-public.toastinput.md) | Inputs for [IToasts](./kibana-plugin-public.itoasts.md) APIs. | -| [ToastInputFields](./kibana-plugin-public.toastinputfields.md) | Allowed fields for [ToastInput](./kibana-plugin-public.toastinput.md). | -| [ToastsSetup](./kibana-plugin-public.toastssetup.md) | [IToasts](./kibana-plugin-public.itoasts.md) | -| [ToastsStart](./kibana-plugin-public.toastsstart.md) | [IToasts](./kibana-plugin-public.itoasts.md) | -| [UiSettingsClientContract](./kibana-plugin-public.uisettingsclientcontract.md) | Client-side client that provides access to the advanced settings stored in elasticsearch. The settings provide control over the behavior of the Kibana application. For example, a user can specify how to display numeric or date fields. Users can adjust the settings via Management UI. [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | -| [UnmountCallback](./kibana-plugin-public.unmountcallback.md) | A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) | - + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) + +## kibana-plugin-public package + +The Kibana Core APIs for client-side plugins. + +A plugin's `public/index` file must contain a named import, `plugin`, that implements [PluginInitializer](./kibana-plugin-public.plugininitializer.md) which returns an object that implements [Plugin](./kibana-plugin-public.plugin.md). + +The plugin integrates with the core system via lifecycle events: `setup`, `start`, and `stop`. In each lifecycle method, the plugin will receive the corresponding core services available (either [CoreSetup](./kibana-plugin-public.coresetup.md) or [CoreStart](./kibana-plugin-public.corestart.md)) and any interfaces returned by dependency plugins' lifecycle method. Anything returned by the plugin's lifecycle method will be exposed to downstream dependencies when their corresponding lifecycle methods are invoked. + +## Classes + +| Class | Description | +| --- | --- | +| [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md) | Saved Objects is Kibana's data persisentence mechanism allowing plugins to use Elasticsearch for storing plugin state. The client-side SavedObjectsClient is a thin convenience library around the SavedObjects HTTP API for interacting with Saved Objects. | +| [SimpleSavedObject](./kibana-plugin-public.simplesavedobject.md) | This class is a very simple wrapper for SavedObjects loaded from the server with the [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md).It provides basic functionality for creating/saving/deleting saved objects, but doesn't include any type-specific implementations. | +| [ToastsApi](./kibana-plugin-public.toastsapi.md) | Methods for adding and removing global toast messages. | +| [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | | + +## Interfaces + +| Interface | Description | +| --- | --- | +| [App](./kibana-plugin-public.app.md) | Extension of [common app properties](./kibana-plugin-public.appbase.md) with the mount function. | +| [AppBase](./kibana-plugin-public.appbase.md) | | +| [ApplicationSetup](./kibana-plugin-public.applicationsetup.md) | | +| [ApplicationStart](./kibana-plugin-public.applicationstart.md) | | +| [AppMountContext](./kibana-plugin-public.appmountcontext.md) | The context object received when applications are mounted to the DOM. | +| [AppMountParameters](./kibana-plugin-public.appmountparameters.md) | | +| [Capabilities](./kibana-plugin-public.capabilities.md) | The read-only set of capabilities available for the current UI session. Capabilities are simple key-value pairs of (string, boolean), where the string denotes the capability ID, and the boolean is a flag indicating if the capability is enabled or disabled. | +| [ChromeBadge](./kibana-plugin-public.chromebadge.md) | | +| [ChromeBrand](./kibana-plugin-public.chromebrand.md) | | +| [ChromeDocTitle](./kibana-plugin-public.chromedoctitle.md) | APIs for accessing and updating the document title. | +| [ChromeNavControl](./kibana-plugin-public.chromenavcontrol.md) | | +| [ChromeNavControls](./kibana-plugin-public.chromenavcontrols.md) | [APIs](./kibana-plugin-public.chromenavcontrols.md) for registering new controls to be displayed in the navigation bar. | +| [ChromeNavLink](./kibana-plugin-public.chromenavlink.md) | | +| [ChromeNavLinks](./kibana-plugin-public.chromenavlinks.md) | [APIs](./kibana-plugin-public.chromenavlinks.md) for manipulating nav links. | +| [ChromeRecentlyAccessed](./kibana-plugin-public.chromerecentlyaccessed.md) | [APIs](./kibana-plugin-public.chromerecentlyaccessed.md) for recently accessed history. | +| [ChromeRecentlyAccessedHistoryItem](./kibana-plugin-public.chromerecentlyaccessedhistoryitem.md) | | +| [ChromeStart](./kibana-plugin-public.chromestart.md) | ChromeStart allows plugins to customize the global chrome header UI and enrich the UX with additional information about the current location of the browser. | +| [ContextSetup](./kibana-plugin-public.contextsetup.md) | An object that handles registration of context providers and configuring handlers with context. | +| [CoreSetup](./kibana-plugin-public.coresetup.md) | Core services exposed to the Plugin setup lifecycle | +| [CoreStart](./kibana-plugin-public.corestart.md) | Core services exposed to the Plugin start lifecycle | +| [DocLinksStart](./kibana-plugin-public.doclinksstart.md) | | +| [EnvironmentMode](./kibana-plugin-public.environmentmode.md) | | +| [ErrorToastOptions](./kibana-plugin-public.errortoastoptions.md) | Options available for [IToasts](./kibana-plugin-public.itoasts.md) APIs. | +| [FatalErrorInfo](./kibana-plugin-public.fatalerrorinfo.md) | Represents the message and stack of a fatal Error | +| [FatalErrorsSetup](./kibana-plugin-public.fatalerrorssetup.md) | FatalErrors stop the Kibana Public Core and displays a fatal error screen with details about the Kibana build and the error. | +| [HttpErrorRequest](./kibana-plugin-public.httperrorrequest.md) | | +| [HttpErrorResponse](./kibana-plugin-public.httperrorresponse.md) | | +| [HttpFetchOptions](./kibana-plugin-public.httpfetchoptions.md) | All options that may be used with a [HttpHandler](./kibana-plugin-public.httphandler.md). | +| [HttpFetchQuery](./kibana-plugin-public.httpfetchquery.md) | | +| [HttpHeadersInit](./kibana-plugin-public.httpheadersinit.md) | | +| [HttpInterceptor](./kibana-plugin-public.httpinterceptor.md) | An object that may define global interceptor functions for different parts of the request and response lifecycle. See [IHttpInterceptController](./kibana-plugin-public.ihttpinterceptcontroller.md). | +| [HttpRequestInit](./kibana-plugin-public.httprequestinit.md) | Fetch API options available to [HttpHandler](./kibana-plugin-public.httphandler.md)s. | +| [HttpResponse](./kibana-plugin-public.httpresponse.md) | | +| [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | | +| [I18nStart](./kibana-plugin-public.i18nstart.md) | I18nStart.Context is required by any localizable React component from @kbn/i18n and @elastic/eui packages and is supposed to be used as the topmost component for any i18n-compatible React tree. | +| [IAnonymousPaths](./kibana-plugin-public.ianonymouspaths.md) | APIs for denoting paths as not requiring authentication | +| [IBasePath](./kibana-plugin-public.ibasepath.md) | APIs for manipulating the basePath on URL segments. | +| [IContextContainer](./kibana-plugin-public.icontextcontainer.md) | An object that handles registration of context providers and configuring handlers with context. | +| [IHttpFetchError](./kibana-plugin-public.ihttpfetcherror.md) | | +| [IHttpInterceptController](./kibana-plugin-public.ihttpinterceptcontroller.md) | Used to halt a request Promise chain in a [HttpInterceptor](./kibana-plugin-public.httpinterceptor.md). | +| [InterceptedHttpResponse](./kibana-plugin-public.interceptedhttpresponse.md) | | +| [LegacyCoreSetup](./kibana-plugin-public.legacycoresetup.md) | Setup interface exposed to the legacy platform via the ui/new_platform module. | +| [LegacyCoreStart](./kibana-plugin-public.legacycorestart.md) | Start interface exposed to the legacy platform via the ui/new_platform module. | +| [LegacyNavLink](./kibana-plugin-public.legacynavlink.md) | | +| [NotificationsSetup](./kibana-plugin-public.notificationssetup.md) | | +| [NotificationsStart](./kibana-plugin-public.notificationsstart.md) | | +| [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | | +| [OverlayRef](./kibana-plugin-public.overlayref.md) | Returned by [OverlayStart](./kibana-plugin-public.overlaystart.md) methods for closing a mounted overlay. | +| [OverlayStart](./kibana-plugin-public.overlaystart.md) | | +| [PackageInfo](./kibana-plugin-public.packageinfo.md) | | +| [Plugin](./kibana-plugin-public.plugin.md) | The interface that should be returned by a PluginInitializer. | +| [PluginInitializerContext](./kibana-plugin-public.plugininitializercontext.md) | The available core services passed to a PluginInitializer | +| [SavedObject](./kibana-plugin-public.savedobject.md) | | +| [SavedObjectAttributes](./kibana-plugin-public.savedobjectattributes.md) | The data for a Saved Object is stored as an object in the attributes property. | +| [SavedObjectReference](./kibana-plugin-public.savedobjectreference.md) | A reference to another saved object. | +| [SavedObjectsBaseOptions](./kibana-plugin-public.savedobjectsbaseoptions.md) | | +| [SavedObjectsBatchResponse](./kibana-plugin-public.savedobjectsbatchresponse.md) | | +| [SavedObjectsBulkCreateObject](./kibana-plugin-public.savedobjectsbulkcreateobject.md) | | +| [SavedObjectsBulkCreateOptions](./kibana-plugin-public.savedobjectsbulkcreateoptions.md) | | +| [SavedObjectsBulkUpdateObject](./kibana-plugin-public.savedobjectsbulkupdateobject.md) | | +| [SavedObjectsBulkUpdateOptions](./kibana-plugin-public.savedobjectsbulkupdateoptions.md) | | +| [SavedObjectsCreateOptions](./kibana-plugin-public.savedobjectscreateoptions.md) | | +| [SavedObjectsFindOptions](./kibana-plugin-public.savedobjectsfindoptions.md) | | +| [SavedObjectsFindResponsePublic](./kibana-plugin-public.savedobjectsfindresponsepublic.md) | Return type of the Saved Objects find() method.\*Note\*: this type is different between the Public and Server Saved Objects clients. | +| [SavedObjectsMigrationVersion](./kibana-plugin-public.savedobjectsmigrationversion.md) | Information about the migrations that have been applied to this SavedObject. When Kibana starts up, KibanaMigrator detects outdated documents and migrates them based on this value. For each migration that has been applied, the plugin's name is used as a key and the latest migration version as the value. | +| [SavedObjectsStart](./kibana-plugin-public.savedobjectsstart.md) | | +| [SavedObjectsUpdateOptions](./kibana-plugin-public.savedobjectsupdateoptions.md) | | +| [UiSettingsState](./kibana-plugin-public.uisettingsstate.md) | | + +## Type Aliases + +| Type Alias | Description | +| --- | --- | +| [AppUnmount](./kibana-plugin-public.appunmount.md) | A function called when an application should be unmounted from the page. This function should be synchronous. | +| [ChromeBreadcrumb](./kibana-plugin-public.chromebreadcrumb.md) | | +| [ChromeHelpExtension](./kibana-plugin-public.chromehelpextension.md) | | +| [ChromeNavLinkUpdateableFields](./kibana-plugin-public.chromenavlinkupdateablefields.md) | | +| [HandlerContextType](./kibana-plugin-public.handlercontexttype.md) | Extracts the type of the first argument of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md) to represent the type of the context. | +| [HandlerFunction](./kibana-plugin-public.handlerfunction.md) | A function that accepts a context object and an optional number of additional arguments. Used for the generic types in [IContextContainer](./kibana-plugin-public.icontextcontainer.md) | +| [HandlerParameters](./kibana-plugin-public.handlerparameters.md) | Extracts the types of the additional arguments of a [HandlerFunction](./kibana-plugin-public.handlerfunction.md), excluding the [HandlerContextType](./kibana-plugin-public.handlercontexttype.md). | +| [HttpBody](./kibana-plugin-public.httpbody.md) | | +| [HttpHandler](./kibana-plugin-public.httphandler.md) | A function for making an HTTP requests to Kibana's backend. See [HttpFetchOptions](./kibana-plugin-public.httpfetchoptions.md) for options and [HttpBody](./kibana-plugin-public.httpbody.md) for the response. | +| [HttpSetup](./kibana-plugin-public.httpsetup.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | +| [HttpStart](./kibana-plugin-public.httpstart.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | +| [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. | +| [IToasts](./kibana-plugin-public.itoasts.md) | Methods for adding and removing global toast messages. See [ToastsApi](./kibana-plugin-public.toastsapi.md). | +| [MountPoint](./kibana-plugin-public.mountpoint.md) | A function that should mount DOM content inside the provided container element and return a handler to unmount it. | +| [PluginInitializer](./kibana-plugin-public.plugininitializer.md) | The plugin export at the root of a plugin's public directory should conform to this interface. | +| [PluginOpaqueId](./kibana-plugin-public.pluginopaqueid.md) | | +| [RecursiveReadonly](./kibana-plugin-public.recursivereadonly.md) | | +| [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | Type definition for a Saved Object attribute value | +| [SavedObjectAttributeSingle](./kibana-plugin-public.savedobjectattributesingle.md) | Don't use this type, it's simply a helper type for [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | +| [SavedObjectsClientContract](./kibana-plugin-public.savedobjectsclientcontract.md) | SavedObjectsClientContract as implemented by the [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md) | +| [Toast](./kibana-plugin-public.toast.md) | | +| [ToastInput](./kibana-plugin-public.toastinput.md) | Inputs for [IToasts](./kibana-plugin-public.itoasts.md) APIs. | +| [ToastInputFields](./kibana-plugin-public.toastinputfields.md) | Allowed fields for [ToastInput](./kibana-plugin-public.toastinput.md). | +| [ToastsSetup](./kibana-plugin-public.toastssetup.md) | [IToasts](./kibana-plugin-public.itoasts.md) | +| [ToastsStart](./kibana-plugin-public.toastsstart.md) | [IToasts](./kibana-plugin-public.itoasts.md) | +| [UiSettingsClientContract](./kibana-plugin-public.uisettingsclientcontract.md) | Client-side client that provides access to the advanced settings stored in elasticsearch. The settings provide control over the behavior of the Kibana application. For example, a user can specify how to display numeric or date fields. Users can adjust the settings via Management UI. [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | +| [UnmountCallback](./kibana-plugin-public.unmountcallback.md) | A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) | + diff --git a/docs/development/core/public/kibana-plugin-public.mountpoint.md b/docs/development/core/public/kibana-plugin-public.mountpoint.md index e69de29bb2d1d..928d22f00ed00 100644 --- a/docs/development/core/public/kibana-plugin-public.mountpoint.md +++ b/docs/development/core/public/kibana-plugin-public.mountpoint.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [MountPoint](./kibana-plugin-public.mountpoint.md) + +## MountPoint type + +A function that should mount DOM content inside the provided container element and return a handler to unmount it. + +Signature: + +```typescript +export declare type MountPoint = (element: T) => UnmountCallback; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md deleted file mode 100644 index 076c9b5bcd6af..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > ["data-test-subj"](./kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md) - -## OverlayFlyoutOpenOptions."data-test-subj" property - -Signature: - -```typescript -'data-test-subj'?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md deleted file mode 100644 index ca639fb816a45..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.classname.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > [className](./kibana-plugin-public.overlayflyoutopenoptions.classname.md) - -## OverlayFlyoutOpenOptions.className property - -Signature: - -```typescript -className?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md deleted file mode 100644 index dac458aa1bc80..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) > [closeButtonAriaLabel](./kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md) - -## OverlayFlyoutOpenOptions.closeButtonAriaLabel property - -Signature: - -```typescript -closeButtonAriaLabel?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md deleted file mode 100644 index b3d39e643db51..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutopenoptions.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutOpenOptions](./kibana-plugin-public.overlayflyoutopenoptions.md) - -## OverlayFlyoutOpenOptions interface - - -Signature: - -```typescript -export interface OverlayFlyoutOpenOptions -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| ["data-test-subj"](./kibana-plugin-public.overlayflyoutopenoptions._data-test-subj_.md) | string | | -| [className](./kibana-plugin-public.overlayflyoutopenoptions.classname.md) | string | | -| [closeButtonAriaLabel](./kibana-plugin-public.overlayflyoutopenoptions.closebuttonarialabel.md) | string | | - diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md deleted file mode 100644 index 406959b1a74e0..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.md +++ /dev/null @@ -1,20 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) - -## OverlayFlyoutStart interface - -APIs to open and manage fly-out dialogs. - -Signature: - -```typescript -export interface OverlayFlyoutStart -``` - -## Methods - -| Method | Description | -| --- | --- | -| [open(mount, options)](./kibana-plugin-public.overlayflyoutstart.open.md) | Opens a flyout panel with the given mount point inside. You can use close() on the returned FlyoutRef to close the flyout. | - diff --git a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md b/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md deleted file mode 100644 index 8ce778d937334..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlayflyoutstart.open.md +++ /dev/null @@ -1,25 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) > [open](./kibana-plugin-public.overlayflyoutstart.open.md) - -## OverlayFlyoutStart.open() method - -Opens a flyout panel with the given mount point inside. You can use `close()` on the returned FlyoutRef to close the flyout. - -Signature: - -```typescript -open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef; -``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| mount | MountPoint | | -| options | OverlayFlyoutOpenOptions | | - -Returns: - -`OverlayRef` - diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md deleted file mode 100644 index 26669e7b91afa..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > ["data-test-subj"](./kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md) - -## OverlayModalOpenOptions."data-test-subj" property - -Signature: - -```typescript -'data-test-subj'?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md deleted file mode 100644 index de218f0ce04b6..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.classname.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > [className](./kibana-plugin-public.overlaymodalopenoptions.classname.md) - -## OverlayModalOpenOptions.className property - -Signature: - -```typescript -className?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md deleted file mode 100644 index 53629fd416ce2..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md +++ /dev/null @@ -1,11 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) > [closeButtonAriaLabel](./kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md) - -## OverlayModalOpenOptions.closeButtonAriaLabel property - -Signature: - -```typescript -closeButtonAriaLabel?: string; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md b/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md deleted file mode 100644 index 9bb57b1c4595d..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalopenoptions.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalOpenOptions](./kibana-plugin-public.overlaymodalopenoptions.md) - -## OverlayModalOpenOptions interface - - -Signature: - -```typescript -export interface OverlayModalOpenOptions -``` - -## Properties - -| Property | Type | Description | -| --- | --- | --- | -| ["data-test-subj"](./kibana-plugin-public.overlaymodalopenoptions._data-test-subj_.md) | string | | -| [className](./kibana-plugin-public.overlaymodalopenoptions.classname.md) | string | | -| [closeButtonAriaLabel](./kibana-plugin-public.overlaymodalopenoptions.closebuttonarialabel.md) | string | | - diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md deleted file mode 100644 index cb3a7b1f93fab..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.md +++ /dev/null @@ -1,20 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) - -## OverlayModalStart interface - -APIs to open and manage modal dialogs. - -Signature: - -```typescript -export interface OverlayModalStart -``` - -## Methods - -| Method | Description | -| --- | --- | -| [open(mount, options)](./kibana-plugin-public.overlaymodalstart.open.md) | Opens a modal panel with the given mount point inside. You can use close() on the returned OverlayRef to close the modal. | - diff --git a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md b/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md deleted file mode 100644 index d8b1a4d031f26..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaymodalstart.open.md +++ /dev/null @@ -1,25 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) > [open](./kibana-plugin-public.overlaymodalstart.open.md) - -## OverlayModalStart.open() method - -Opens a modal panel with the given mount point inside. You can use `close()` on the returned OverlayRef to close the modal. - -Signature: - -```typescript -open(mount: MountPoint, options?: OverlayModalOpenOptions): OverlayRef; -``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| mount | MountPoint | | -| options | OverlayModalOpenOptions | | - -Returns: - -`OverlayRef` - diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md b/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md index 10f9b703d916b..f6109ea4a501b 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md @@ -4,7 +4,6 @@ ## OverlayStart.flyouts property -[OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) Signature: diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.md b/docs/development/core/public/kibana-plugin-public.overlaystart.md index a10059e8339b1..0db4e7b915c84 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.md @@ -16,8 +16,8 @@ export interface OverlayStart | Property | Type | Description | | --- | --- | --- | | [banners](./kibana-plugin-public.overlaystart.banners.md) | OverlayBannersStart | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | -| [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) | OverlayFlyoutStart | [OverlayFlyoutStart](./kibana-plugin-public.overlayflyoutstart.md) | -| [modals](./kibana-plugin-public.overlaystart.modals.md) | OverlayModalStart | [OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) | +| [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) | OverlayFlyoutStart | | +| [modals](./kibana-plugin-public.overlaystart.modals.md) | OverlayModalStart | | | [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | OverlayFlyoutStart['open'] | | | [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | OverlayModalStart['open'] | | diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md b/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md index 5bb8983c4cc05..5ed0b8aa262e4 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md @@ -4,7 +4,6 @@ ## OverlayStart.modals property -[OverlayModalStart](./kibana-plugin-public.overlaymodalstart.md) Signature: diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index a15202e674e51..db1e564de5bc7 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -1,993 +1,999 @@ -## API Report File for "kibana" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { Breadcrumb } from '@elastic/eui'; -import { EuiGlobalToastListToast } from '@elastic/eui'; -import { IconType } from '@elastic/eui'; -import { Observable } from 'rxjs'; -import React from 'react'; -import * as Rx from 'rxjs'; -import { ShallowPromise } from '@kbn/utility-types'; -import { UiSettingsParams as UiSettingsParams_2 } from 'src/core/server/types'; -import { UserProvidedValues as UserProvidedValues_2 } from 'src/core/server/types'; - -// @public -export interface App extends AppBase { - chromeless?: boolean; - mount: (context: AppMountContext, params: AppMountParameters) => AppUnmount | Promise; -} - -// @public (undocumented) -export interface AppBase { - capabilities?: Partial; - euiIconType?: string; - icon?: string; - // (undocumented) - id: string; - order?: number; - title: string; - tooltip$?: Observable; -} - -// @public (undocumented) -export interface ApplicationSetup { - register(app: App): void; - registerMountContext(contextName: T, provider: IContextProvider): void; -} - -// @public (undocumented) -export interface ApplicationStart { - capabilities: RecursiveReadonly; - getUrlForApp(appId: string, options?: { - path?: string; - }): string; - navigateToApp(appId: string, options?: { - path?: string; - state?: any; - }): void; - registerMountContext(contextName: T, provider: IContextProvider): void; -} - -// @public -export interface AppMountContext { - core: { - application: Pick; - chrome: ChromeStart; - docLinks: DocLinksStart; - http: HttpStart; - i18n: I18nStart; - notifications: NotificationsStart; - overlays: OverlayStart; - uiSettings: UiSettingsClientContract; - injectedMetadata: { - getInjectedVar: (name: string, defaultValue?: any) => unknown; - }; - }; -} - -// @public (undocumented) -export interface AppMountParameters { - appBasePath: string; - element: HTMLElement; -} - -// @public -export type AppUnmount = () => void; - -// @public -export interface Capabilities { - [key: string]: Record>; - catalogue: Record; - management: { - [sectionId: string]: Record; - }; - navLinks: Record; -} - -// @public (undocumented) -export interface ChromeBadge { - // (undocumented) - iconType?: IconType; - // (undocumented) - text: string; - // (undocumented) - tooltip: string; -} - -// @public (undocumented) -export interface ChromeBrand { - // (undocumented) - logo?: string; - // (undocumented) - smallLogo?: string; -} - -// @public (undocumented) -export type ChromeBreadcrumb = Breadcrumb; - -// @public -export interface ChromeDocTitle { - // @internal (undocumented) - __legacy: { - setBaseTitle(baseTitle: string): void; - }; - change(newTitle: string | string[]): void; - reset(): void; -} - -// @public (undocumented) -export type ChromeHelpExtension = (element: HTMLDivElement) => () => void; - -// @public (undocumented) -export interface ChromeNavControl { - // (undocumented) - mount(targetDomElement: HTMLElement): () => void; - // (undocumented) - order?: number; -} - -// @public -export interface ChromeNavControls { - // @internal (undocumented) - getLeft$(): Observable; - // @internal (undocumented) - getRight$(): Observable; - registerLeft(navControl: ChromeNavControl): void; - registerRight(navControl: ChromeNavControl): void; -} - -// @public (undocumented) -export interface ChromeNavLink { - // @deprecated - readonly active?: boolean; - readonly baseUrl: string; - // @deprecated - readonly disabled?: boolean; - readonly euiIconType?: string; - readonly hidden?: boolean; - readonly icon?: string; - readonly id: string; - // @internal - readonly legacy: boolean; - // @deprecated - readonly linkToLastSubUrl?: boolean; - readonly order?: number; - // @deprecated - readonly subUrlBase?: string; - readonly title: string; - readonly tooltip?: string; - // @deprecated - readonly url?: string; -} - -// @public -export interface ChromeNavLinks { - enableForcedAppSwitcherNavigation(): void; - get(id: string): ChromeNavLink | undefined; - getAll(): Array>; - getForceAppSwitcherNavigation$(): Observable; - getNavLinks$(): Observable>>; - has(id: string): boolean; - showOnly(id: string): void; - update(id: string, values: ChromeNavLinkUpdateableFields): ChromeNavLink | undefined; -} - -// @public (undocumented) -export type ChromeNavLinkUpdateableFields = Partial>; - -// @public -export interface ChromeRecentlyAccessed { - // Warning: (ae-unresolved-link) The @link reference could not be resolved: No member was found with name "basePath" - add(link: string, label: string, id: string): void; - get$(): Observable; - get(): ChromeRecentlyAccessedHistoryItem[]; -} - -// @public (undocumented) -export interface ChromeRecentlyAccessedHistoryItem { - // (undocumented) - id: string; - // (undocumented) - label: string; - // (undocumented) - link: string; -} - -// @public -export interface ChromeStart { - addApplicationClass(className: string): void; - docTitle: ChromeDocTitle; - getApplicationClasses$(): Observable; - getBadge$(): Observable; - getBrand$(): Observable; - getBreadcrumbs$(): Observable; - getHelpExtension$(): Observable; - getIsCollapsed$(): Observable; - getIsVisible$(): Observable; - navControls: ChromeNavControls; - navLinks: ChromeNavLinks; - recentlyAccessed: ChromeRecentlyAccessed; - removeApplicationClass(className: string): void; - setAppTitle(appTitle: string): void; - setBadge(badge?: ChromeBadge): void; - setBrand(brand: ChromeBrand): void; - setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void; - setHelpExtension(helpExtension?: ChromeHelpExtension): void; - setIsCollapsed(isCollapsed: boolean): void; - setIsVisible(isVisible: boolean): void; -} - -// @public -export interface ContextSetup { - createContextContainer>(): IContextContainer; -} - -// @internal (undocumented) -export interface CoreContext { - // Warning: (ae-forgotten-export) The symbol "CoreId" needs to be exported by the entry point index.d.ts - // - // (undocumented) - coreId: CoreId; - // (undocumented) - env: { - mode: Readonly; - packageInfo: Readonly; - }; -} - -// @public -export interface CoreSetup { - // (undocumented) - application: ApplicationSetup; - // (undocumented) - context: ContextSetup; - // (undocumented) - fatalErrors: FatalErrorsSetup; - // (undocumented) - http: HttpSetup; - // @deprecated - injectedMetadata: { - getInjectedVar: (name: string, defaultValue?: any) => unknown; - }; - // (undocumented) - notifications: NotificationsSetup; - // (undocumented) - uiSettings: UiSettingsClientContract; -} - -// @public -export interface CoreStart { - // (undocumented) - application: ApplicationStart; - // (undocumented) - chrome: ChromeStart; - // (undocumented) - docLinks: DocLinksStart; - // (undocumented) - http: HttpStart; - // (undocumented) - i18n: I18nStart; - // @deprecated - injectedMetadata: { - getInjectedVar: (name: string, defaultValue?: any) => unknown; - }; - // (undocumented) - notifications: NotificationsStart; - // (undocumented) - overlays: OverlayStart; - // (undocumented) - savedObjects: SavedObjectsStart; - // (undocumented) - uiSettings: UiSettingsClientContract; -} - -// @internal -export class CoreSystem { - // Warning: (ae-forgotten-export) The symbol "Params" needs to be exported by the entry point index.d.ts - constructor(params: Params); - // (undocumented) - setup(): Promise<{ - fatalErrors: FatalErrorsSetup; - } | undefined>; - // (undocumented) - start(): Promise; - // (undocumented) - stop(): void; - } - -// @public (undocumented) -export interface DocLinksStart { - // (undocumented) - readonly DOC_LINK_VERSION: string; - // (undocumented) - readonly ELASTIC_WEBSITE_URL: string; - // (undocumented) - readonly links: { - readonly filebeat: { - readonly base: string; - readonly installation: string; - readonly configuration: string; - readonly elasticsearchOutput: string; - readonly startup: string; - readonly exportedFields: string; - }; - readonly auditbeat: { - readonly base: string; - }; - readonly metricbeat: { - readonly base: string; - }; - readonly heartbeat: { - readonly base: string; - }; - readonly logstash: { - readonly base: string; - }; - readonly functionbeat: { - readonly base: string; - }; - readonly winlogbeat: { - readonly base: string; - }; - readonly aggs: { - readonly date_histogram: string; - readonly date_range: string; - readonly filter: string; - readonly filters: string; - readonly geohash_grid: string; - readonly histogram: string; - readonly ip_range: string; - readonly range: string; - readonly significant_terms: string; - readonly terms: string; - readonly avg: string; - readonly avg_bucket: string; - readonly max_bucket: string; - readonly min_bucket: string; - readonly sum_bucket: string; - readonly cardinality: string; - readonly count: string; - readonly cumulative_sum: string; - readonly derivative: string; - readonly geo_bounds: string; - readonly geo_centroid: string; - readonly max: string; - readonly median: string; - readonly min: string; - readonly moving_avg: string; - readonly percentile_ranks: string; - readonly serial_diff: string; - readonly std_dev: string; - readonly sum: string; - readonly top_hits: string; - }; - readonly scriptedFields: { - readonly scriptFields: string; - readonly scriptAggs: string; - readonly painless: string; - readonly painlessApi: string; - readonly painlessSyntax: string; - readonly luceneExpressions: string; - }; - readonly indexPatterns: { - readonly loadingData: string; - readonly introduction: string; - }; - readonly kibana: string; - readonly siem: string; - readonly query: { - readonly luceneQuerySyntax: string; - readonly queryDsl: string; - readonly kueryQuerySyntax: string; - }; - readonly date: { - readonly dateMath: string; - }; - }; -} - -// @public (undocumented) -export interface EnvironmentMode { - // (undocumented) - dev: boolean; - // (undocumented) - name: 'development' | 'production'; - // (undocumented) - prod: boolean; -} - -// @public -export interface ErrorToastOptions { - title: string; - toastMessage?: string; -} - -// @public -export interface FatalErrorInfo { - // (undocumented) - message: string; - // (undocumented) - stack: string | undefined; -} - -// @public -export interface FatalErrorsSetup { - add: (error: string | Error, source?: string) => never; - get$: () => Rx.Observable; -} - -// @public -export type HandlerContextType> = T extends HandlerFunction ? U : never; - -// @public -export type HandlerFunction = (context: T, ...args: any[]) => any; - -// @public -export type HandlerParameters> = T extends (context: any, ...args: infer U) => any ? U : never; - -// @public (undocumented) -export type HttpBody = BodyInit | null | any; - -// @public (undocumented) -export interface HttpErrorRequest { - // (undocumented) - error: Error; - // (undocumented) - request: Request; -} - -// @public (undocumented) -export interface HttpErrorResponse extends HttpResponse { - // (undocumented) - error: Error | IHttpFetchError; -} - -// @public -export interface HttpFetchOptions extends HttpRequestInit { - headers?: HttpHeadersInit; - prependBasePath?: boolean; - query?: HttpFetchQuery; -} - -// @public (undocumented) -export interface HttpFetchQuery { - // (undocumented) - [key: string]: string | number | boolean | undefined; -} - -// @public -export type HttpHandler = (path: string, options?: HttpFetchOptions) => Promise; - -// @public (undocumented) -export interface HttpHeadersInit { - // (undocumented) - [name: string]: any; -} - -// @public -export interface HttpInterceptor { - request?(request: Request, controller: IHttpInterceptController): Promise | Request | void; - requestError?(httpErrorRequest: HttpErrorRequest, controller: IHttpInterceptController): Promise | Request | void; - response?(httpResponse: HttpResponse, controller: IHttpInterceptController): Promise | InterceptedHttpResponse | void; - responseError?(httpErrorResponse: HttpErrorResponse, controller: IHttpInterceptController): Promise | InterceptedHttpResponse | void; -} - -// @public -export interface HttpRequestInit { - body?: BodyInit | null; - cache?: RequestCache; - credentials?: RequestCredentials; - // (undocumented) - headers?: HttpHeadersInit; - integrity?: string; - keepalive?: boolean; - method?: string; - mode?: RequestMode; - redirect?: RequestRedirect; - referrer?: string; - referrerPolicy?: ReferrerPolicy; - signal?: AbortSignal | null; - window?: null; -} - -// @public (undocumented) -export interface HttpResponse extends InterceptedHttpResponse { - // (undocumented) - request: Readonly; -} - -// @public (undocumented) -export interface HttpServiceBase { - addLoadingCount(countSource$: Observable): void; - anonymousPaths: IAnonymousPaths; - basePath: IBasePath; - delete: HttpHandler; - fetch: HttpHandler; - get: HttpHandler; - getLoadingCount$(): Observable; - head: HttpHandler; - intercept(interceptor: HttpInterceptor): () => void; - options: HttpHandler; - patch: HttpHandler; - post: HttpHandler; - put: HttpHandler; - removeAllInterceptors(): void; - // @internal (undocumented) - stop(): void; -} - -// @public -export type HttpSetup = HttpServiceBase; - -// @public -export type HttpStart = HttpServiceBase; - -// @public -export interface I18nStart { - Context: ({ children }: { - children: React.ReactNode; - }) => JSX.Element; -} - -// Warning: (ae-missing-release-tag) "IAnonymousPaths" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public -export interface IAnonymousPaths { - isAnonymous(path: string): boolean; - register(path: string): void; -} - -// @public -export interface IBasePath { - get: () => string; - prepend: (url: string) => string; - remove: (url: string) => string; -} - -// @public -export interface IContextContainer> { - createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters) => ShallowPromise>; - registerContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider): this; -} - -// @public -export type IContextProvider, TContextName extends keyof HandlerContextType> = (context: Partial>, ...rest: HandlerParameters) => Promise[TContextName]> | HandlerContextType[TContextName]; - -// @public (undocumented) -export interface IHttpFetchError extends Error { - // (undocumented) - readonly body?: any; - // @deprecated (undocumented) - readonly req: Request; - // (undocumented) - readonly request: Request; - // @deprecated (undocumented) - readonly res?: Response; - // (undocumented) - readonly response?: Response; -} - -// @public -export interface IHttpInterceptController { - halt(): void; - halted: boolean; -} - -// @public (undocumented) -export interface InterceptedHttpResponse { - // (undocumented) - body?: HttpBody; - // (undocumented) - response?: Response; -} - -// @public -export type IToasts = Pick; - -// @public @deprecated -export interface LegacyCoreSetup extends CoreSetup { - // Warning: (ae-forgotten-export) The symbol "InjectedMetadataSetup" needs to be exported by the entry point index.d.ts - // - // @deprecated (undocumented) - injectedMetadata: InjectedMetadataSetup; -} - -// @public @deprecated -export interface LegacyCoreStart extends CoreStart { - // Warning: (ae-forgotten-export) The symbol "InjectedMetadataStart" needs to be exported by the entry point index.d.ts - // - // @deprecated (undocumented) - injectedMetadata: InjectedMetadataStart; -} - -// @public (undocumented) -export interface LegacyNavLink { - // (undocumented) - euiIconType?: string; - // (undocumented) - icon?: string; - // (undocumented) - id: string; - // (undocumented) - order: number; - // (undocumented) - title: string; - // (undocumented) - url: string; -} - -// @public -export type MountPoint = (element: HTMLElement) => UnmountCallback; - -// @public (undocumented) -export interface NotificationsSetup { - // (undocumented) - toasts: ToastsSetup; -} - -// @public (undocumented) -export interface NotificationsStart { - // (undocumented) - toasts: ToastsStart; -} - -// @public (undocumented) -export interface OverlayBannersStart { - add(mount: MountPoint, priority?: number): string; - // Warning: (ae-forgotten-export) The symbol "OverlayBanner" needs to be exported by the entry point index.d.ts - // - // @internal (undocumented) - get$(): Observable; - // (undocumented) - getComponent(): JSX.Element; - remove(id: string): boolean; - replace(id: string | undefined, mount: MountPoint, priority?: number): string; -} - -// @public -export interface OverlayRef { - close(): Promise; - onClose: Promise; -} - -// @public (undocumented) -export interface OverlayStart { - // (undocumented) - banners: OverlayBannersStart; - // (undocumented) - flyouts: OverlayFlyoutStart; - // (undocumented) - modals: OverlayModalStart; - // @deprecated (undocumented) - openFlyout: OverlayFlyoutStart['open']; - // @deprecated (undocumented) - openModal: OverlayModalStart['open']; -} - -// @public (undocumented) -export interface PackageInfo { - // (undocumented) - branch: string; - // (undocumented) - buildNum: number; - // (undocumented) - buildSha: string; - // (undocumented) - dist: boolean; - // (undocumented) - version: string; -} - -// @public -export interface Plugin { - // (undocumented) - setup(core: CoreSetup, plugins: TPluginsSetup): TSetup | Promise; - // (undocumented) - start(core: CoreStart, plugins: TPluginsStart): TStart | Promise; - // (undocumented) - stop?(): void; -} - -// @public -export type PluginInitializer = (core: PluginInitializerContext) => Plugin; - -// @public -export interface PluginInitializerContext { - // (undocumented) - readonly env: { - mode: Readonly; - packageInfo: Readonly; - }; - readonly opaqueId: PluginOpaqueId; -} - -// @public (undocumented) -export type PluginOpaqueId = symbol; - -// Warning: (ae-forgotten-export) The symbol "RecursiveReadonlyArray" needs to be exported by the entry point index.d.ts -// -// @public (undocumented) -export type RecursiveReadonly = T extends (...args: any[]) => any ? T : T extends any[] ? RecursiveReadonlyArray : T extends object ? Readonly<{ - [K in keyof T]: RecursiveReadonly; -}> : T; - -// @public (undocumented) -export interface SavedObject { - attributes: T; - // (undocumented) - error?: { - message: string; - statusCode: number; - }; - id: string; - migrationVersion?: SavedObjectsMigrationVersion; - references: SavedObjectReference[]; - type: string; - updated_at?: string; - version?: string; -} - -// @public -export type SavedObjectAttribute = SavedObjectAttributeSingle | SavedObjectAttributeSingle[]; - -// @public -export interface SavedObjectAttributes { - // (undocumented) - [key: string]: SavedObjectAttribute; -} - -// @public -export type SavedObjectAttributeSingle = string | number | boolean | null | undefined | SavedObjectAttributes; - -// @public -export interface SavedObjectReference { - // (undocumented) - id: string; - // (undocumented) - name: string; - // (undocumented) - type: string; -} - -// @public (undocumented) -export interface SavedObjectsBaseOptions { - namespace?: string; -} - -// @public (undocumented) -export interface SavedObjectsBatchResponse { - // (undocumented) - savedObjects: Array>; -} - -// @public (undocumented) -export interface SavedObjectsBulkCreateObject extends SavedObjectsCreateOptions { - // (undocumented) - attributes: T; - // (undocumented) - type: string; -} - -// @public (undocumented) -export interface SavedObjectsBulkCreateOptions { - overwrite?: boolean; -} - -// @public (undocumented) -export interface SavedObjectsBulkUpdateObject { - // (undocumented) - attributes: T; - // (undocumented) - id: string; - // (undocumented) - references?: SavedObjectReference[]; - // (undocumented) - type: string; - // (undocumented) - version?: string; -} - -// @public (undocumented) -export interface SavedObjectsBulkUpdateOptions { - // (undocumented) - namespace?: string; -} - -// @public -export class SavedObjectsClient { - // @internal - constructor(http: HttpServiceBase); - bulkCreate: (objects?: SavedObjectsBulkCreateObject[], options?: SavedObjectsBulkCreateOptions) => Promise>; - bulkGet: (objects?: { - id: string; - type: string; - }[]) => Promise>; - bulkUpdate(objects?: SavedObjectsBulkUpdateObject[]): Promise>; - create: (type: string, attributes: T, options?: SavedObjectsCreateOptions) => Promise>; - delete: (type: string, id: string) => Promise<{}>; - find: (options: Pick) => Promise>; - get: (type: string, id: string) => Promise>; - update(type: string, id: string, attributes: T, { version, migrationVersion, references }?: SavedObjectsUpdateOptions): Promise>; -} - -// @public -export type SavedObjectsClientContract = PublicMethodsOf; - -// @public (undocumented) -export interface SavedObjectsCreateOptions { - id?: string; - migrationVersion?: SavedObjectsMigrationVersion; - overwrite?: boolean; - // (undocumented) - references?: SavedObjectReference[]; -} - -// @public (undocumented) -export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions { - // (undocumented) - defaultSearchOperator?: 'AND' | 'OR'; - fields?: string[]; - // (undocumented) - filter?: string; - // (undocumented) - hasReference?: { - type: string; - id: string; - }; - // (undocumented) - page?: number; - // (undocumented) - perPage?: number; - search?: string; - searchFields?: string[]; - // (undocumented) - sortField?: string; - // (undocumented) - sortOrder?: string; - // (undocumented) - type: string | string[]; -} - -// @public -export interface SavedObjectsFindResponsePublic extends SavedObjectsBatchResponse { - // (undocumented) - page: number; - // (undocumented) - perPage: number; - // (undocumented) - total: number; -} - -// @public -export interface SavedObjectsMigrationVersion { - // (undocumented) - [pluginName: string]: string; -} - -// @public (undocumented) -export interface SavedObjectsStart { - // (undocumented) - client: SavedObjectsClientContract; -} - -// @public (undocumented) -export interface SavedObjectsUpdateOptions { - migrationVersion?: SavedObjectsMigrationVersion; - // (undocumented) - references?: SavedObjectReference[]; - // (undocumented) - version?: string; -} - -// @public -export class SimpleSavedObject { - constructor(client: SavedObjectsClient, { id, type, version, attributes, error, references, migrationVersion }: SavedObject); - // (undocumented) - attributes: T; - // (undocumented) - delete(): Promise<{}>; - // (undocumented) - error: SavedObject['error']; - // (undocumented) - get(key: string): any; - // (undocumented) - has(key: string): boolean; - // (undocumented) - id: SavedObject['id']; - // (undocumented) - migrationVersion: SavedObject['migrationVersion']; - // (undocumented) - references: SavedObject['references']; - // (undocumented) - save(): Promise>; - // (undocumented) - set(key: string, value: any): T; - // (undocumented) - type: SavedObject['type']; - // (undocumented) - _version?: SavedObject['version']; -} - -// Warning: (ae-missing-release-tag) "Toast" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export type Toast = ToastInputFields & { - id: string; -}; - -// @public -export type ToastInput = string | ToastInputFields; - -// @public -export type ToastInputFields = Pick> & { - title?: string | MountPoint; - text?: string | MountPoint; -}; - -// @public -export class ToastsApi implements IToasts { - constructor(deps: { - uiSettings: UiSettingsClientContract; - }); - add(toastOrTitle: ToastInput): Toast; - addDanger(toastOrTitle: ToastInput): Toast; - addError(error: Error, options: ErrorToastOptions): Toast; - addSuccess(toastOrTitle: ToastInput): Toast; - addWarning(toastOrTitle: ToastInput): Toast; - get$(): Rx.Observable; - // @internal (undocumented) - registerOverlays(overlays: OverlayStart): void; - remove(toastOrId: Toast | string): void; - } - -// @public (undocumented) -export type ToastsSetup = IToasts; - -// @public (undocumented) -export type ToastsStart = IToasts; - -// @public (undocumented) -export class UiSettingsClient { - // Warning: (ae-forgotten-export) The symbol "UiSettingsClientParams" needs to be exported by the entry point index.d.ts - constructor(params: UiSettingsClientParams); - get$(key: string, defaultOverride?: any): Rx.Observable; - get(key: string, defaultOverride?: any): any; - getAll(): Record>; - getSaved$(): Rx.Observable<{ - key: string; - newValue: any; - oldValue: any; - }>; - getUpdate$(): Rx.Observable<{ - key: string; - newValue: any; - oldValue: any; - }>; - getUpdateErrors$(): Rx.Observable; - isCustom(key: string): boolean; - isDeclared(key: string): boolean; - isDefault(key: string): boolean; - isOverridden(key: string): boolean; - overrideLocalDefault(key: string, newDefault: any): void; - remove(key: string): Promise; - set(key: string, val: any): Promise; - stop(): void; - } - -// @public -export type UiSettingsClientContract = PublicMethodsOf; - -// @public (undocumented) -export interface UiSettingsState { - // (undocumented) - [key: string]: UiSettingsParams_2 & UserProvidedValues_2; -} - -// @public -export type UnmountCallback = () => void; - - -``` +## API Report File for "kibana" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { Breadcrumb } from '@elastic/eui'; +import { EuiGlobalToastListToast } from '@elastic/eui'; +import { IconType } from '@elastic/eui'; +import { Observable } from 'rxjs'; +import React from 'react'; +import * as Rx from 'rxjs'; +import { ShallowPromise } from '@kbn/utility-types'; +import { UiSettingsParams as UiSettingsParams_2 } from 'src/core/server/types'; +import { UserProvidedValues as UserProvidedValues_2 } from 'src/core/server/types'; + +// @public +export interface App extends AppBase { + chromeless?: boolean; + mount: (context: AppMountContext, params: AppMountParameters) => AppUnmount | Promise; +} + +// @public (undocumented) +export interface AppBase { + capabilities?: Partial; + euiIconType?: string; + icon?: string; + // (undocumented) + id: string; + order?: number; + title: string; + tooltip$?: Observable; +} + +// @public (undocumented) +export interface ApplicationSetup { + register(app: App): void; + registerMountContext(contextName: T, provider: IContextProvider): void; +} + +// @public (undocumented) +export interface ApplicationStart { + capabilities: RecursiveReadonly; + getUrlForApp(appId: string, options?: { + path?: string; + }): string; + navigateToApp(appId: string, options?: { + path?: string; + state?: any; + }): void; + registerMountContext(contextName: T, provider: IContextProvider): void; +} + +// @public +export interface AppMountContext { + core: { + application: Pick; + chrome: ChromeStart; + docLinks: DocLinksStart; + http: HttpStart; + i18n: I18nStart; + notifications: NotificationsStart; + overlays: OverlayStart; + uiSettings: UiSettingsClientContract; + injectedMetadata: { + getInjectedVar: (name: string, defaultValue?: any) => unknown; + }; + }; +} + +// @public (undocumented) +export interface AppMountParameters { + appBasePath: string; + element: HTMLElement; +} + +// @public +export type AppUnmount = () => void; + +// @public +export interface Capabilities { + [key: string]: Record>; + catalogue: Record; + management: { + [sectionId: string]: Record; + }; + navLinks: Record; +} + +// @public (undocumented) +export interface ChromeBadge { + // (undocumented) + iconType?: IconType; + // (undocumented) + text: string; + // (undocumented) + tooltip: string; +} + +// @public (undocumented) +export interface ChromeBrand { + // (undocumented) + logo?: string; + // (undocumented) + smallLogo?: string; +} + +// @public (undocumented) +export type ChromeBreadcrumb = Breadcrumb; + +// @public +export interface ChromeDocTitle { + // @internal (undocumented) + __legacy: { + setBaseTitle(baseTitle: string): void; + }; + change(newTitle: string | string[]): void; + reset(): void; +} + +// @public (undocumented) +export type ChromeHelpExtension = (element: HTMLDivElement) => () => void; + +// @public (undocumented) +export interface ChromeNavControl { + // (undocumented) + mount(targetDomElement: HTMLElement): () => void; + // (undocumented) + order?: number; +} + +// @public +export interface ChromeNavControls { + // @internal (undocumented) + getLeft$(): Observable; + // @internal (undocumented) + getRight$(): Observable; + registerLeft(navControl: ChromeNavControl): void; + registerRight(navControl: ChromeNavControl): void; +} + +// @public (undocumented) +export interface ChromeNavLink { + // @deprecated + readonly active?: boolean; + readonly baseUrl: string; + // @deprecated + readonly disabled?: boolean; + readonly euiIconType?: string; + readonly hidden?: boolean; + readonly icon?: string; + readonly id: string; + // @internal + readonly legacy: boolean; + // @deprecated + readonly linkToLastSubUrl?: boolean; + readonly order?: number; + // @deprecated + readonly subUrlBase?: string; + readonly title: string; + readonly tooltip?: string; + // @deprecated + readonly url?: string; +} + +// @public +export interface ChromeNavLinks { + enableForcedAppSwitcherNavigation(): void; + get(id: string): ChromeNavLink | undefined; + getAll(): Array>; + getForceAppSwitcherNavigation$(): Observable; + getNavLinks$(): Observable>>; + has(id: string): boolean; + showOnly(id: string): void; + update(id: string, values: ChromeNavLinkUpdateableFields): ChromeNavLink | undefined; +} + +// @public (undocumented) +export type ChromeNavLinkUpdateableFields = Partial>; + +// @public +export interface ChromeRecentlyAccessed { + // Warning: (ae-unresolved-link) The @link reference could not be resolved: No member was found with name "basePath" + add(link: string, label: string, id: string): void; + get$(): Observable; + get(): ChromeRecentlyAccessedHistoryItem[]; +} + +// @public (undocumented) +export interface ChromeRecentlyAccessedHistoryItem { + // (undocumented) + id: string; + // (undocumented) + label: string; + // (undocumented) + link: string; +} + +// @public +export interface ChromeStart { + addApplicationClass(className: string): void; + docTitle: ChromeDocTitle; + getApplicationClasses$(): Observable; + getBadge$(): Observable; + getBrand$(): Observable; + getBreadcrumbs$(): Observable; + getHelpExtension$(): Observable; + getIsCollapsed$(): Observable; + getIsVisible$(): Observable; + navControls: ChromeNavControls; + navLinks: ChromeNavLinks; + recentlyAccessed: ChromeRecentlyAccessed; + removeApplicationClass(className: string): void; + setAppTitle(appTitle: string): void; + setBadge(badge?: ChromeBadge): void; + setBrand(brand: ChromeBrand): void; + setBreadcrumbs(newBreadcrumbs: ChromeBreadcrumb[]): void; + setHelpExtension(helpExtension?: ChromeHelpExtension): void; + setIsCollapsed(isCollapsed: boolean): void; + setIsVisible(isVisible: boolean): void; +} + +// @public +export interface ContextSetup { + createContextContainer>(): IContextContainer; +} + +// @internal (undocumented) +export interface CoreContext { + // Warning: (ae-forgotten-export) The symbol "CoreId" needs to be exported by the entry point index.d.ts + // + // (undocumented) + coreId: CoreId; + // (undocumented) + env: { + mode: Readonly; + packageInfo: Readonly; + }; +} + +// @public +export interface CoreSetup { + // (undocumented) + application: ApplicationSetup; + // (undocumented) + context: ContextSetup; + // (undocumented) + fatalErrors: FatalErrorsSetup; + // (undocumented) + http: HttpSetup; + // @deprecated + injectedMetadata: { + getInjectedVar: (name: string, defaultValue?: any) => unknown; + }; + // (undocumented) + notifications: NotificationsSetup; + // (undocumented) + uiSettings: UiSettingsClientContract; +} + +// @public +export interface CoreStart { + // (undocumented) + application: ApplicationStart; + // (undocumented) + chrome: ChromeStart; + // (undocumented) + docLinks: DocLinksStart; + // (undocumented) + http: HttpStart; + // (undocumented) + i18n: I18nStart; + // @deprecated + injectedMetadata: { + getInjectedVar: (name: string, defaultValue?: any) => unknown; + }; + // (undocumented) + notifications: NotificationsStart; + // (undocumented) + overlays: OverlayStart; + // (undocumented) + savedObjects: SavedObjectsStart; + // (undocumented) + uiSettings: UiSettingsClientContract; +} + +// @internal +export class CoreSystem { + // Warning: (ae-forgotten-export) The symbol "Params" needs to be exported by the entry point index.d.ts + constructor(params: Params); + // (undocumented) + setup(): Promise<{ + fatalErrors: FatalErrorsSetup; + } | undefined>; + // (undocumented) + start(): Promise; + // (undocumented) + stop(): void; + } + +// @public (undocumented) +export interface DocLinksStart { + // (undocumented) + readonly DOC_LINK_VERSION: string; + // (undocumented) + readonly ELASTIC_WEBSITE_URL: string; + // (undocumented) + readonly links: { + readonly filebeat: { + readonly base: string; + readonly installation: string; + readonly configuration: string; + readonly elasticsearchOutput: string; + readonly startup: string; + readonly exportedFields: string; + }; + readonly auditbeat: { + readonly base: string; + }; + readonly metricbeat: { + readonly base: string; + }; + readonly heartbeat: { + readonly base: string; + }; + readonly logstash: { + readonly base: string; + }; + readonly functionbeat: { + readonly base: string; + }; + readonly winlogbeat: { + readonly base: string; + }; + readonly aggs: { + readonly date_histogram: string; + readonly date_range: string; + readonly filter: string; + readonly filters: string; + readonly geohash_grid: string; + readonly histogram: string; + readonly ip_range: string; + readonly range: string; + readonly significant_terms: string; + readonly terms: string; + readonly avg: string; + readonly avg_bucket: string; + readonly max_bucket: string; + readonly min_bucket: string; + readonly sum_bucket: string; + readonly cardinality: string; + readonly count: string; + readonly cumulative_sum: string; + readonly derivative: string; + readonly geo_bounds: string; + readonly geo_centroid: string; + readonly max: string; + readonly median: string; + readonly min: string; + readonly moving_avg: string; + readonly percentile_ranks: string; + readonly serial_diff: string; + readonly std_dev: string; + readonly sum: string; + readonly top_hits: string; + }; + readonly scriptedFields: { + readonly scriptFields: string; + readonly scriptAggs: string; + readonly painless: string; + readonly painlessApi: string; + readonly painlessSyntax: string; + readonly luceneExpressions: string; + }; + readonly indexPatterns: { + readonly loadingData: string; + readonly introduction: string; + }; + readonly kibana: string; + readonly siem: string; + readonly query: { + readonly luceneQuerySyntax: string; + readonly queryDsl: string; + readonly kueryQuerySyntax: string; + }; + readonly date: { + readonly dateMath: string; + }; + }; +} + +// @public (undocumented) +export interface EnvironmentMode { + // (undocumented) + dev: boolean; + // (undocumented) + name: 'development' | 'production'; + // (undocumented) + prod: boolean; +} + +// @public +export interface ErrorToastOptions { + title: string; + toastMessage?: string; +} + +// @public +export interface FatalErrorInfo { + // (undocumented) + message: string; + // (undocumented) + stack: string | undefined; +} + +// @public +export interface FatalErrorsSetup { + add: (error: string | Error, source?: string) => never; + get$: () => Rx.Observable; +} + +// @public +export type HandlerContextType> = T extends HandlerFunction ? U : never; + +// @public +export type HandlerFunction = (context: T, ...args: any[]) => any; + +// @public +export type HandlerParameters> = T extends (context: any, ...args: infer U) => any ? U : never; + +// @public (undocumented) +export type HttpBody = BodyInit | null | any; + +// @public (undocumented) +export interface HttpErrorRequest { + // (undocumented) + error: Error; + // (undocumented) + request: Request; +} + +// @public (undocumented) +export interface HttpErrorResponse extends HttpResponse { + // (undocumented) + error: Error | IHttpFetchError; +} + +// @public +export interface HttpFetchOptions extends HttpRequestInit { + headers?: HttpHeadersInit; + prependBasePath?: boolean; + query?: HttpFetchQuery; +} + +// @public (undocumented) +export interface HttpFetchQuery { + // (undocumented) + [key: string]: string | number | boolean | undefined; +} + +// @public +export type HttpHandler = (path: string, options?: HttpFetchOptions) => Promise; + +// @public (undocumented) +export interface HttpHeadersInit { + // (undocumented) + [name: string]: any; +} + +// @public +export interface HttpInterceptor { + request?(request: Request, controller: IHttpInterceptController): Promise | Request | void; + requestError?(httpErrorRequest: HttpErrorRequest, controller: IHttpInterceptController): Promise | Request | void; + response?(httpResponse: HttpResponse, controller: IHttpInterceptController): Promise | InterceptedHttpResponse | void; + responseError?(httpErrorResponse: HttpErrorResponse, controller: IHttpInterceptController): Promise | InterceptedHttpResponse | void; +} + +// @public +export interface HttpRequestInit { + body?: BodyInit | null; + cache?: RequestCache; + credentials?: RequestCredentials; + // (undocumented) + headers?: HttpHeadersInit; + integrity?: string; + keepalive?: boolean; + method?: string; + mode?: RequestMode; + redirect?: RequestRedirect; + referrer?: string; + referrerPolicy?: ReferrerPolicy; + signal?: AbortSignal | null; + window?: null; +} + +// @public (undocumented) +export interface HttpResponse extends InterceptedHttpResponse { + // (undocumented) + request: Readonly; +} + +// @public (undocumented) +export interface HttpServiceBase { + addLoadingCount(countSource$: Observable): void; + anonymousPaths: IAnonymousPaths; + basePath: IBasePath; + delete: HttpHandler; + fetch: HttpHandler; + get: HttpHandler; + getLoadingCount$(): Observable; + head: HttpHandler; + intercept(interceptor: HttpInterceptor): () => void; + options: HttpHandler; + patch: HttpHandler; + post: HttpHandler; + put: HttpHandler; + removeAllInterceptors(): void; + // @internal (undocumented) + stop(): void; +} + +// @public +export type HttpSetup = HttpServiceBase; + +// @public +export type HttpStart = HttpServiceBase; + +// @public +export interface I18nStart { + Context: ({ children }: { + children: React.ReactNode; + }) => JSX.Element; +} + +// Warning: (ae-missing-release-tag) "IAnonymousPaths" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export interface IAnonymousPaths { + isAnonymous(path: string): boolean; + register(path: string): void; +} + +// @public +export interface IBasePath { + get: () => string; + prepend: (url: string) => string; + remove: (url: string) => string; +} + +// @public +export interface IContextContainer> { + createHandler(pluginOpaqueId: PluginOpaqueId, handler: THandler): (...rest: HandlerParameters) => ShallowPromise>; + registerContext>(pluginOpaqueId: PluginOpaqueId, contextName: TContextName, provider: IContextProvider): this; +} + +// @public +export type IContextProvider, TContextName extends keyof HandlerContextType> = (context: Partial>, ...rest: HandlerParameters) => Promise[TContextName]> | HandlerContextType[TContextName]; + +// @public (undocumented) +export interface IHttpFetchError extends Error { + // (undocumented) + readonly body?: any; + // @deprecated (undocumented) + readonly req: Request; + // (undocumented) + readonly request: Request; + // @deprecated (undocumented) + readonly res?: Response; + // (undocumented) + readonly response?: Response; +} + +// @public +export interface IHttpInterceptController { + halt(): void; + halted: boolean; +} + +// @public (undocumented) +export interface InterceptedHttpResponse { + // (undocumented) + body?: HttpBody; + // (undocumented) + response?: Response; +} + +// @public +export type IToasts = Pick; + +// @public @deprecated +export interface LegacyCoreSetup extends CoreSetup { + // Warning: (ae-forgotten-export) The symbol "InjectedMetadataSetup" needs to be exported by the entry point index.d.ts + // + // @deprecated (undocumented) + injectedMetadata: InjectedMetadataSetup; +} + +// @public @deprecated +export interface LegacyCoreStart extends CoreStart { + // Warning: (ae-forgotten-export) The symbol "InjectedMetadataStart" needs to be exported by the entry point index.d.ts + // + // @deprecated (undocumented) + injectedMetadata: InjectedMetadataStart; +} + +// @public (undocumented) +export interface LegacyNavLink { + // (undocumented) + euiIconType?: string; + // (undocumented) + icon?: string; + // (undocumented) + id: string; + // (undocumented) + order: number; + // (undocumented) + title: string; + // (undocumented) + url: string; +} + +// @public +export type MountPoint = (element: T) => UnmountCallback; + +// @public (undocumented) +export interface NotificationsSetup { + // (undocumented) + toasts: ToastsSetup; +} + +// @public (undocumented) +export interface NotificationsStart { + // (undocumented) + toasts: ToastsStart; +} + +// @public (undocumented) +export interface OverlayBannersStart { + add(mount: MountPoint, priority?: number): string; + // Warning: (ae-forgotten-export) The symbol "OverlayBanner" needs to be exported by the entry point index.d.ts + // + // @internal (undocumented) + get$(): Observable; + // (undocumented) + getComponent(): JSX.Element; + remove(id: string): boolean; + replace(id: string | undefined, mount: MountPoint, priority?: number): string; +} + +// @public +export interface OverlayRef { + close(): Promise; + onClose: Promise; +} + +// @public (undocumented) +export interface OverlayStart { + // (undocumented) + banners: OverlayBannersStart; + // Warning: (ae-forgotten-export) The symbol "OverlayFlyoutStart" needs to be exported by the entry point index.d.ts + // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "OverlayFlyoutStart" + // + // (undocumented) + flyouts: OverlayFlyoutStart; + // Warning: (ae-forgotten-export) The symbol "OverlayModalStart" needs to be exported by the entry point index.d.ts + // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "OverlayModalStart" + // + // (undocumented) + modals: OverlayModalStart; + // @deprecated (undocumented) + openFlyout: OverlayFlyoutStart['open']; + // @deprecated (undocumented) + openModal: OverlayModalStart['open']; +} + +// @public (undocumented) +export interface PackageInfo { + // (undocumented) + branch: string; + // (undocumented) + buildNum: number; + // (undocumented) + buildSha: string; + // (undocumented) + dist: boolean; + // (undocumented) + version: string; +} + +// @public +export interface Plugin { + // (undocumented) + setup(core: CoreSetup, plugins: TPluginsSetup): TSetup | Promise; + // (undocumented) + start(core: CoreStart, plugins: TPluginsStart): TStart | Promise; + // (undocumented) + stop?(): void; +} + +// @public +export type PluginInitializer = (core: PluginInitializerContext) => Plugin; + +// @public +export interface PluginInitializerContext { + // (undocumented) + readonly env: { + mode: Readonly; + packageInfo: Readonly; + }; + readonly opaqueId: PluginOpaqueId; +} + +// @public (undocumented) +export type PluginOpaqueId = symbol; + +// Warning: (ae-forgotten-export) The symbol "RecursiveReadonlyArray" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export type RecursiveReadonly = T extends (...args: any[]) => any ? T : T extends any[] ? RecursiveReadonlyArray : T extends object ? Readonly<{ + [K in keyof T]: RecursiveReadonly; +}> : T; + +// @public (undocumented) +export interface SavedObject { + attributes: T; + // (undocumented) + error?: { + message: string; + statusCode: number; + }; + id: string; + migrationVersion?: SavedObjectsMigrationVersion; + references: SavedObjectReference[]; + type: string; + updated_at?: string; + version?: string; +} + +// @public +export type SavedObjectAttribute = SavedObjectAttributeSingle | SavedObjectAttributeSingle[]; + +// @public +export interface SavedObjectAttributes { + // (undocumented) + [key: string]: SavedObjectAttribute; +} + +// @public +export type SavedObjectAttributeSingle = string | number | boolean | null | undefined | SavedObjectAttributes; + +// @public +export interface SavedObjectReference { + // (undocumented) + id: string; + // (undocumented) + name: string; + // (undocumented) + type: string; +} + +// @public (undocumented) +export interface SavedObjectsBaseOptions { + namespace?: string; +} + +// @public (undocumented) +export interface SavedObjectsBatchResponse { + // (undocumented) + savedObjects: Array>; +} + +// @public (undocumented) +export interface SavedObjectsBulkCreateObject extends SavedObjectsCreateOptions { + // (undocumented) + attributes: T; + // (undocumented) + type: string; +} + +// @public (undocumented) +export interface SavedObjectsBulkCreateOptions { + overwrite?: boolean; +} + +// @public (undocumented) +export interface SavedObjectsBulkUpdateObject { + // (undocumented) + attributes: T; + // (undocumented) + id: string; + // (undocumented) + references?: SavedObjectReference[]; + // (undocumented) + type: string; + // (undocumented) + version?: string; +} + +// @public (undocumented) +export interface SavedObjectsBulkUpdateOptions { + // (undocumented) + namespace?: string; +} + +// @public +export class SavedObjectsClient { + // @internal + constructor(http: HttpServiceBase); + bulkCreate: (objects?: SavedObjectsBulkCreateObject[], options?: SavedObjectsBulkCreateOptions) => Promise>; + bulkGet: (objects?: { + id: string; + type: string; + }[]) => Promise>; + bulkUpdate(objects?: SavedObjectsBulkUpdateObject[]): Promise>; + create: (type: string, attributes: T, options?: SavedObjectsCreateOptions) => Promise>; + delete: (type: string, id: string) => Promise<{}>; + find: (options: Pick) => Promise>; + get: (type: string, id: string) => Promise>; + update(type: string, id: string, attributes: T, { version, migrationVersion, references }?: SavedObjectsUpdateOptions): Promise>; +} + +// @public +export type SavedObjectsClientContract = PublicMethodsOf; + +// @public (undocumented) +export interface SavedObjectsCreateOptions { + id?: string; + migrationVersion?: SavedObjectsMigrationVersion; + overwrite?: boolean; + // (undocumented) + references?: SavedObjectReference[]; +} + +// @public (undocumented) +export interface SavedObjectsFindOptions extends SavedObjectsBaseOptions { + // (undocumented) + defaultSearchOperator?: 'AND' | 'OR'; + fields?: string[]; + // (undocumented) + filter?: string; + // (undocumented) + hasReference?: { + type: string; + id: string; + }; + // (undocumented) + page?: number; + // (undocumented) + perPage?: number; + search?: string; + searchFields?: string[]; + // (undocumented) + sortField?: string; + // (undocumented) + sortOrder?: string; + // (undocumented) + type: string | string[]; +} + +// @public +export interface SavedObjectsFindResponsePublic extends SavedObjectsBatchResponse { + // (undocumented) + page: number; + // (undocumented) + perPage: number; + // (undocumented) + total: number; +} + +// @public +export interface SavedObjectsMigrationVersion { + // (undocumented) + [pluginName: string]: string; +} + +// @public (undocumented) +export interface SavedObjectsStart { + // (undocumented) + client: SavedObjectsClientContract; +} + +// @public (undocumented) +export interface SavedObjectsUpdateOptions { + migrationVersion?: SavedObjectsMigrationVersion; + // (undocumented) + references?: SavedObjectReference[]; + // (undocumented) + version?: string; +} + +// @public +export class SimpleSavedObject { + constructor(client: SavedObjectsClient, { id, type, version, attributes, error, references, migrationVersion }: SavedObject); + // (undocumented) + attributes: T; + // (undocumented) + delete(): Promise<{}>; + // (undocumented) + error: SavedObject['error']; + // (undocumented) + get(key: string): any; + // (undocumented) + has(key: string): boolean; + // (undocumented) + id: SavedObject['id']; + // (undocumented) + migrationVersion: SavedObject['migrationVersion']; + // (undocumented) + references: SavedObject['references']; + // (undocumented) + save(): Promise>; + // (undocumented) + set(key: string, value: any): T; + // (undocumented) + type: SavedObject['type']; + // (undocumented) + _version?: SavedObject['version']; +} + +// Warning: (ae-missing-release-tag) "Toast" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type Toast = ToastInputFields & { + id: string; +}; + +// @public +export type ToastInput = string | ToastInputFields; + +// @public +export type ToastInputFields = Pick> & { + title?: string | MountPoint; + text?: string | MountPoint; +}; + +// @public +export class ToastsApi implements IToasts { + constructor(deps: { + uiSettings: UiSettingsClientContract; + }); + add(toastOrTitle: ToastInput): Toast; + addDanger(toastOrTitle: ToastInput): Toast; + addError(error: Error, options: ErrorToastOptions): Toast; + addSuccess(toastOrTitle: ToastInput): Toast; + addWarning(toastOrTitle: ToastInput): Toast; + get$(): Rx.Observable; + // @internal (undocumented) + registerOverlays(overlays: OverlayStart): void; + remove(toastOrId: Toast | string): void; + } + +// @public (undocumented) +export type ToastsSetup = IToasts; + +// @public (undocumented) +export type ToastsStart = IToasts; + +// @public (undocumented) +export class UiSettingsClient { + // Warning: (ae-forgotten-export) The symbol "UiSettingsClientParams" needs to be exported by the entry point index.d.ts + constructor(params: UiSettingsClientParams); + get$(key: string, defaultOverride?: any): Rx.Observable; + get(key: string, defaultOverride?: any): any; + getAll(): Record>; + getSaved$(): Rx.Observable<{ + key: string; + newValue: any; + oldValue: any; + }>; + getUpdate$(): Rx.Observable<{ + key: string; + newValue: any; + oldValue: any; + }>; + getUpdateErrors$(): Rx.Observable; + isCustom(key: string): boolean; + isDeclared(key: string): boolean; + isDefault(key: string): boolean; + isOverridden(key: string): boolean; + overrideLocalDefault(key: string, newDefault: any): void; + remove(key: string): Promise; + set(key: string, val: any): Promise; + stop(): void; + } + +// @public +export type UiSettingsClientContract = PublicMethodsOf; + +// @public (undocumented) +export interface UiSettingsState { + // (undocumented) + [key: string]: UiSettingsParams_2 & UserProvidedValues_2; +} + +// @public +export type UnmountCallback = () => void; + + +``` From e26120b2cdf3c29e2c57492e9bd76323b03d807c Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Mon, 18 Nov 2019 11:16:17 +0100 Subject: [PATCH 21/23] undeprecates openFlyout/openModal & remove direct subservice access from overlayService --- ...bana-plugin-public.overlaystart.flyouts.md | 12 ------- .../kibana-plugin-public.overlaystart.md | 2 -- ...ibana-plugin-public.overlaystart.modals.md | 12 ------- ...a-plugin-public.overlaystart.openflyout.md | 4 --- ...na-plugin-public.overlaystart.openmodal.md | 4 --- .../public/overlays/overlay_service.mock.ts | 10 ++---- src/core/public/overlays/overlay_service.ts | 16 ++------- src/core/public/public.api.md | 8 +---- .../query_bar_input.test.tsx.snap | 36 ------------------- 9 files changed, 5 insertions(+), 99 deletions(-) delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaystart.modals.md diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md b/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md deleted file mode 100644 index f6109ea4a501b..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.flyouts.md +++ /dev/null @@ -1,12 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayStart](./kibana-plugin-public.overlaystart.md) > [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) - -## OverlayStart.flyouts property - - -Signature: - -```typescript -flyouts: OverlayFlyoutStart; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.md b/docs/development/core/public/kibana-plugin-public.overlaystart.md index 0db4e7b915c84..8b6f11bd819f8 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.md @@ -16,8 +16,6 @@ export interface OverlayStart | Property | Type | Description | | --- | --- | --- | | [banners](./kibana-plugin-public.overlaystart.banners.md) | OverlayBannersStart | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) | -| [flyouts](./kibana-plugin-public.overlaystart.flyouts.md) | OverlayFlyoutStart | | -| [modals](./kibana-plugin-public.overlaystart.modals.md) | OverlayModalStart | | | [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | OverlayFlyoutStart['open'] | | | [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | OverlayModalStart['open'] | | diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md b/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md deleted file mode 100644 index 5ed0b8aa262e4..0000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.modals.md +++ /dev/null @@ -1,12 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayStart](./kibana-plugin-public.overlaystart.md) > [modals](./kibana-plugin-public.overlaystart.modals.md) - -## OverlayStart.modals property - - -Signature: - -```typescript -modals: OverlayModalStart; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md index fb9fc52c6d9a1..ad3351fb4d098 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md @@ -4,10 +4,6 @@ ## OverlayStart.openFlyout property -> Warning: This API is now obsolete. -> -> Use [OverlayStart.flyouts](./kibana-plugin-public.overlaystart.flyouts.md) instead -> Signature: diff --git a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md index c3b3cbee32e1f..2c983d6151f4c 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md +++ b/docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md @@ -4,10 +4,6 @@ ## OverlayStart.openModal property -> Warning: This API is now obsolete. -> -> Use [OverlayStart.modals](./kibana-plugin-public.overlaystart.modals.md) instead -> Signature: diff --git a/src/core/public/overlays/overlay_service.mock.ts b/src/core/public/overlays/overlay_service.mock.ts index 283e6abd88c0f..2937ec89bfc74 100644 --- a/src/core/public/overlays/overlay_service.mock.ts +++ b/src/core/public/overlays/overlay_service.mock.ts @@ -23,16 +23,10 @@ import { overlayModalServiceMock } from './modal/modal_service.mock'; const createStartContractMock = () => { const startContract: DeeplyMockedKeys = { - openFlyout: jest.fn(), - openModal: jest.fn(), + openFlyout: overlayFlyoutServiceMock.createStartContract().open, + openModal: overlayModalServiceMock.createStartContract().open, banners: overlayBannersServiceMock.createStartContract(), - flyouts: overlayFlyoutServiceMock.createStartContract(), - modals: overlayModalServiceMock.createStartContract(), }; - startContract.openModal.mockReturnValue({ - close: jest.fn(), - onClose: Promise.resolve(), - }); return startContract; }; diff --git a/src/core/public/overlays/overlay_service.ts b/src/core/public/overlays/overlay_service.ts index 75eea8f0c4106..82fe753d6f283 100644 --- a/src/core/public/overlays/overlay_service.ts +++ b/src/core/public/overlays/overlay_service.ts @@ -48,9 +48,6 @@ export class OverlayService { return { banners, - flyouts, - modals, - openFlyout: flyouts.open.bind(flyouts), openModal: modals.open.bind(modals), }; @@ -61,17 +58,8 @@ export class OverlayService { export interface OverlayStart { /** {@link OverlayBannersStart} */ banners: OverlayBannersStart; - /** {@link OverlayModalStart} */ - modals: OverlayModalStart; - /** {@link OverlayFlyoutStart} */ - flyouts: OverlayFlyoutStart; - - /** - * @deprecated Use {@link OverlayStart.flyouts} instead - */ + /** {@link OverlayFlyoutStart#open} */ openFlyout: OverlayFlyoutStart['open']; - /** - * @deprecated Use {@link OverlayStart.modals} instead - */ + /** {@link OverlayModalStart#open} */ openModal: OverlayModalStart['open']; } diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index db1e564de5bc7..782cb4e712a17 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -658,18 +658,12 @@ export interface OverlayStart { // (undocumented) banners: OverlayBannersStart; // Warning: (ae-forgotten-export) The symbol "OverlayFlyoutStart" needs to be exported by the entry point index.d.ts - // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "OverlayFlyoutStart" // // (undocumented) - flyouts: OverlayFlyoutStart; + openFlyout: OverlayFlyoutStart['open']; // Warning: (ae-forgotten-export) The symbol "OverlayModalStart" needs to be exported by the entry point index.d.ts - // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "OverlayModalStart" // // (undocumented) - modals: OverlayModalStart; - // @deprecated (undocumented) - openFlyout: OverlayFlyoutStart['open']; - // @deprecated (undocumented) openModal: OverlayModalStart['open']; } diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap index 7eca9a652e674..5dc8702411783 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap @@ -289,12 +289,6 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -858,12 +852,6 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -1415,12 +1403,6 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1 "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -1981,12 +1963,6 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1 "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -2538,12 +2514,6 @@ exports[`QueryBarInput Should render the given query 1`] = ` "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, @@ -3104,12 +3074,6 @@ exports[`QueryBarInput Should render the given query 1`] = ` "remove": [MockFunction], "replace": [MockFunction], }, - "flyouts": Object { - "open": [MockFunction], - }, - "modals": Object { - "open": [MockFunction], - }, "openFlyout": [MockFunction], "openModal": [MockFunction], }, From 3ac8feb11095ab24ec9bbbc0aba5a2841e8a75bf Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Tue, 19 Nov 2019 08:38:14 +0100 Subject: [PATCH 22/23] adapt toast api to get i18n context from service --- .../notifications/toasts/error_toast.test.tsx | 1 + .../notifications/toasts/error_toast.tsx | 74 +++++++++++-------- .../notifications/toasts/toasts_api.test.ts | 7 +- .../notifications/toasts/toasts_api.tsx | 6 +- .../notifications/toasts/toasts_service.tsx | 2 +- src/core/public/public.api.md | 7 +- 6 files changed, 61 insertions(+), 36 deletions(-) diff --git a/src/core/public/notifications/toasts/error_toast.test.tsx b/src/core/public/notifications/toasts/error_toast.test.tsx index b72b2de85340a..b497be526093d 100644 --- a/src/core/public/notifications/toasts/error_toast.test.tsx +++ b/src/core/public/notifications/toasts/error_toast.test.tsx @@ -40,6 +40,7 @@ function render(props: ErrorToastProps = {}) { error={props.error || new Error('error message')} title={props.title || 'An error occured'} toastMessage={props.toastMessage || 'This is the toast message'} + i18nContext={() => ({ children }) => {children}} /> ); } diff --git a/src/core/public/notifications/toasts/error_toast.tsx b/src/core/public/notifications/toasts/error_toast.tsx index 956e56999849e..6b53719839b0f 100644 --- a/src/core/public/notifications/toasts/error_toast.tsx +++ b/src/core/public/notifications/toasts/error_toast.tsx @@ -30,22 +30,19 @@ import { EuiModalHeaderTitle, } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; -import { FormattedMessage, I18nProvider } from '@kbn/i18n/react'; +import { FormattedMessage } from '@kbn/i18n/react'; import { OverlayStart } from '../../overlays'; +import { I18nStart } from '../../i18n'; interface ErrorToastProps { title: string; error: Error; toastMessage: string; openModal: OverlayStart['openModal']; + i18nContext: () => I18nStart['Context']; } -const mount = (component: React.ReactElement) => (element: HTMLElement) => { - ReactDOM.render({component}, element); - return () => ReactDOM.unmountComponentAtNode(element); -}; - /** * This should instead be replaced by the overlay service once it's available. * This does not use React portals so that if the parent toast times out, this modal @@ -56,38 +53,48 @@ function showErrorDialog({ title, error, openModal, -}: Pick) { + i18nContext, +}: Pick) { + const I18nContext = i18nContext(); const modal = openModal( mount( - - {title} - - - - {error.stack && ( - - - - {error.stack} - - - )} - - - modal.close()} fill> - - - + + + {title} + + + + {error.stack && ( + + + + {error.stack} + + + )} + + + modal.close()} fill> + + + + ) ); } -export function ErrorToast({ title, error, toastMessage, openModal }: ErrorToastProps) { +export function ErrorToast({ + title, + error, + toastMessage, + openModal, + i18nContext, +}: ErrorToastProps) { return (

{toastMessage}

@@ -95,7 +102,7 @@ export function ErrorToast({ title, error, toastMessage, openModal }: ErrorToast showErrorDialog({ title, error, openModal })} + onClick={() => showErrorDialog({ title, error, openModal, i18nContext })} > ); } + +const mount = (component: React.ReactElement) => (container: HTMLElement) => { + ReactDOM.render(component, container); + return () => ReactDOM.unmountComponentAtNode(container); +}; diff --git a/src/core/public/notifications/toasts/toasts_api.test.ts b/src/core/public/notifications/toasts/toasts_api.test.ts index f99a28617aa5c..a0e419e989657 100644 --- a/src/core/public/notifications/toasts/toasts_api.test.ts +++ b/src/core/public/notifications/toasts/toasts_api.test.ts @@ -51,10 +51,13 @@ function uiSettingsMock() { function toastDeps() { return { uiSettings: uiSettingsMock(), - i18n: i18nServiceMock.createStartContract(), }; } +function startDeps() { + return { overlays: {} as any, i18n: i18nServiceMock.createStartContract() }; +} + describe('#get$()', () => { it('returns observable that emits NEW toast list when something added or removed', () => { const toasts = new ToastsApi(toastDeps()); @@ -188,6 +191,7 @@ describe('#addDanger()', () => { describe('#addError', () => { it('adds an error toast', async () => { const toasts = new ToastsApi(toastDeps()); + toasts.start(startDeps()); const toast = toasts.addError(new Error('unexpected error'), { title: 'Something went wrong' }); expect(toast).toHaveProperty('color', 'danger'); expect(toast).toHaveProperty('title', 'Something went wrong'); @@ -195,6 +199,7 @@ describe('#addError', () => { it('returns the created toast', async () => { const toasts = new ToastsApi(toastDeps()); + toasts.start(startDeps()); const toast = toasts.addError(new Error('unexpected error'), { title: 'Something went wrong' }); const currentToasts = await getCurrentToasts(toasts); expect(currentToasts[0]).toBe(toast); diff --git a/src/core/public/notifications/toasts/toasts_api.tsx b/src/core/public/notifications/toasts/toasts_api.tsx index b49bafda5b26e..a21b727b02d73 100644 --- a/src/core/public/notifications/toasts/toasts_api.tsx +++ b/src/core/public/notifications/toasts/toasts_api.tsx @@ -26,6 +26,7 @@ import { MountPoint } from '../../types'; import { mountReactNode } from '../../utils'; import { UiSettingsClientContract } from '../../ui_settings'; import { OverlayStart } from '../../overlays'; +import { I18nStart } from '../../i18n'; /** * Allowed fields for {@link ToastInput}. @@ -96,14 +97,16 @@ export class ToastsApi implements IToasts { private uiSettings: UiSettingsClientContract; private overlays?: OverlayStart; + private i18n?: I18nStart; constructor(deps: { uiSettings: UiSettingsClientContract }) { this.uiSettings = deps.uiSettings; } /** @internal */ - public registerOverlays(overlays: OverlayStart) { + public start({ overlays, i18n }: { overlays: OverlayStart; i18n: I18nStart }) { this.overlays = overlays; + this.i18n = i18n; } /** Observable of the toast messages to show to the user. */ @@ -206,6 +209,7 @@ export class ToastsApi implements IToasts { error={error} title={options.title} toastMessage={message} + i18nContext={() => this.i18n!.Context} /> ), }); diff --git a/src/core/public/notifications/toasts/toasts_service.tsx b/src/core/public/notifications/toasts/toasts_service.tsx index 47d8c14f9af8b..81d23afc4f4d3 100644 --- a/src/core/public/notifications/toasts/toasts_service.tsx +++ b/src/core/public/notifications/toasts/toasts_service.tsx @@ -58,7 +58,7 @@ export class ToastsService { } public start({ i18n, overlays, targetDomElement }: StartDeps) { - this.api!.registerOverlays(overlays); + this.api!.start({ overlays, i18n }); this.targetDomElement = targetDomElement; render( diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index 782cb4e712a17..b3b2e11a6da2d 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -938,9 +938,12 @@ export class ToastsApi implements IToasts { addSuccess(toastOrTitle: ToastInput): Toast; addWarning(toastOrTitle: ToastInput): Toast; get$(): Rx.Observable; - // @internal (undocumented) - registerOverlays(overlays: OverlayStart): void; remove(toastOrId: Toast | string): void; + // @internal (undocumented) + start({ overlays, i18n }: { + overlays: OverlayStart; + i18n: I18nStart; + }): void; } // @public (undocumented) From 54916e9f75fca865fbdc4e888d08a52f52047a24 Mon Sep 17 00:00:00 2001 From: pgayvallet Date: Tue, 19 Nov 2019 08:46:32 +0100 Subject: [PATCH 23/23] use MountPoint instead of inline definition --- .../kibana-plugin-public.chromenavcontrol.md | 7 +------ ...kibana-plugin-public.chromenavcontrol.mount.md | 15 ++------------- .../chrome/nav_controls/nav_controls_service.ts | 3 ++- .../public/chrome/ui/header/header_extension.tsx | 3 ++- src/core/public/legacy/legacy_service.ts | 4 ++-- src/core/public/public.api.md | 2 +- 6 files changed, 10 insertions(+), 24 deletions(-) diff --git a/docs/development/core/public/kibana-plugin-public.chromenavcontrol.md b/docs/development/core/public/kibana-plugin-public.chromenavcontrol.md index c6920fc30d4ee..fdf56012e4729 100644 --- a/docs/development/core/public/kibana-plugin-public.chromenavcontrol.md +++ b/docs/development/core/public/kibana-plugin-public.chromenavcontrol.md @@ -15,11 +15,6 @@ export interface ChromeNavControl | Property | Type | Description | | --- | --- | --- | +| [mount](./kibana-plugin-public.chromenavcontrol.mount.md) | MountPoint | | | [order](./kibana-plugin-public.chromenavcontrol.order.md) | number | | -## Methods - -| Method | Description | -| --- | --- | -| [mount(targetDomElement)](./kibana-plugin-public.chromenavcontrol.mount.md) | | - diff --git a/docs/development/core/public/kibana-plugin-public.chromenavcontrol.mount.md b/docs/development/core/public/kibana-plugin-public.chromenavcontrol.mount.md index 6ce5d7f0d5c4d..3e1f5a1f78f89 100644 --- a/docs/development/core/public/kibana-plugin-public.chromenavcontrol.mount.md +++ b/docs/development/core/public/kibana-plugin-public.chromenavcontrol.mount.md @@ -2,21 +2,10 @@ [Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [ChromeNavControl](./kibana-plugin-public.chromenavcontrol.md) > [mount](./kibana-plugin-public.chromenavcontrol.mount.md) -## ChromeNavControl.mount() method +## ChromeNavControl.mount property Signature: ```typescript -mount(targetDomElement: HTMLElement): () => void; +mount: MountPoint; ``` - -## Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| targetDomElement | HTMLElement | | - -Returns: - -`() => void` - diff --git a/src/core/public/chrome/nav_controls/nav_controls_service.ts b/src/core/public/chrome/nav_controls/nav_controls_service.ts index 0088ef68aaeb8..7f9c75595a4ce 100644 --- a/src/core/public/chrome/nav_controls/nav_controls_service.ts +++ b/src/core/public/chrome/nav_controls/nav_controls_service.ts @@ -20,11 +20,12 @@ import { sortBy } from 'lodash'; import { BehaviorSubject, ReplaySubject, Observable } from 'rxjs'; import { map, takeUntil } from 'rxjs/operators'; +import { MountPoint } from '../../types'; /** @public */ export interface ChromeNavControl { order?: number; - mount(targetDomElement: HTMLElement): () => void; + mount: MountPoint; } /** diff --git a/src/core/public/chrome/ui/header/header_extension.tsx b/src/core/public/chrome/ui/header/header_extension.tsx index 90e7907b0068c..76413a0ea0317 100644 --- a/src/core/public/chrome/ui/header/header_extension.tsx +++ b/src/core/public/chrome/ui/header/header_extension.tsx @@ -18,9 +18,10 @@ */ import React from 'react'; +import { MountPoint } from '../../../types'; interface Props { - extension?: (el: HTMLDivElement) => () => void; + extension?: MountPoint; } export class HeaderExtension extends React.Component { diff --git a/src/core/public/legacy/legacy_service.ts b/src/core/public/legacy/legacy_service.ts index 79fa32040b14c..22e315f9e1b03 100644 --- a/src/core/public/legacy/legacy_service.ts +++ b/src/core/public/legacy/legacy_service.ts @@ -19,7 +19,7 @@ import angular from 'angular'; import { InternalCoreSetup, InternalCoreStart } from '../core_system'; -import { LegacyCoreSetup, LegacyCoreStart } from '../'; +import { LegacyCoreSetup, LegacyCoreStart, MountPoint } from '../'; /** @internal */ export interface LegacyPlatformParams { @@ -40,7 +40,7 @@ interface StartDeps { } interface BootstrapModule { - bootstrap: (targetDomElement: HTMLElement) => void; + bootstrap: MountPoint; } /** diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index b3b2e11a6da2d..7abbbcd32fbb8 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -124,7 +124,7 @@ export type ChromeHelpExtension = (element: HTMLDivElement) => () => void; // @public (undocumented) export interface ChromeNavControl { // (undocumented) - mount(targetDomElement: HTMLElement): () => void; + mount: MountPoint; // (undocumented) order?: number; }