diff --git a/src/plugins/dev_tools/public/plugin.ts b/src/plugins/dev_tools/public/plugin.ts index 9ebfeb5387b26..df61271baf879 100644 --- a/src/plugins/dev_tools/public/plugin.ts +++ b/src/plugins/dev_tools/public/plugin.ts @@ -132,4 +132,6 @@ export class DevToolsPlugin implements Plugin { getSortedDevTools: this.getSortedDevTools.bind(this), }; } + + public stop() {} } diff --git a/x-pack/plugins/painless_lab/public/application/components/main.tsx b/x-pack/plugins/painless_lab/public/application/components/main.tsx index faeeb9b9f86c9..7e11dfc67ed9b 100644 --- a/x-pack/plugins/painless_lab/public/application/components/main.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/main.tsx @@ -4,7 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useState, useEffect, FunctionComponent } from 'react'; +import React, { useState, useEffect } from 'react'; +import { Observable } from 'rxjs'; import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { formatRequestPayload, formatJson } from '../lib/format'; @@ -17,7 +18,11 @@ import { Editor } from './editor'; import { RequestFlyout } from './request_flyout'; import { useAppContext } from '../context'; -export const Main: FunctionComponent = () => { +export interface Props { + getIsNavDrawerLocked$: () => Observable; +} + +export const Main = ({ getIsNavDrawerLocked$ }: Props) => { const { state, updateState, services, links } = useAppContext(); const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false); @@ -32,6 +37,16 @@ export const Main: FunctionComponent = () => { setRequestFlyoutOpen(!isRequestFlyoutOpen); }; + const [isNavDrawerLocked, setIsNavDrawerLocked] = useState(false); + + useEffect(() => { + const subscription = getIsNavDrawerLocked$().subscribe((newIsNavDrawerLocked: boolean) => { + setIsNavDrawerLocked(newIsNavDrawerLocked); + }); + + return () => subscription.unsubscribe(); + }); + return (
@@ -61,6 +76,7 @@ export const Main: FunctionComponent = () => { toggleRequestFlyout={toggleRequestFlyout} isRequestFlyoutOpen={isRequestFlyoutOpen} reset={() => updateState(() => ({ code: exampleScript }))} + isNavDrawerLocked={isNavDrawerLocked} /> {isRequestFlyoutOpen && ( diff --git a/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx b/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx index 44bbe89665756..6307c21e26dc4 100644 --- a/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ import React, { useState } from 'react'; +import classNames from 'classnames'; import { EuiPopover, EuiBottomBar, @@ -23,9 +24,16 @@ interface Props { isLoading: boolean; reset: () => void; links: Links; + isNavDrawerLocked: boolean; } -export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset, links }: Props) { +export function MainControls({ + toggleRequestFlyout, + isRequestFlyoutOpen, + reset, + links, + isNavDrawerLocked, +}: Props) { const [isHelpOpen, setIsHelpOpen] = useState(false); const items = [ @@ -79,8 +87,12 @@ export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset, , ]; + const classes = classNames('painlessLab__bottomBar', { + 'painlessLab__bottomBar-isNavDrawerLocked': isNavDrawerLocked, + }); + return ( - + diff --git a/x-pack/plugins/painless_lab/public/application/index.scss b/x-pack/plugins/painless_lab/public/application/index.scss deleted file mode 100644 index 69c1f8c217655..0000000000000 --- a/x-pack/plugins/painless_lab/public/application/index.scss +++ /dev/null @@ -1,33 +0,0 @@ -// Import the EUI global scope so we can use EUI constants -@import 'src/legacy/ui/public/styles/_styling_constants'; - -/** - * 1. This is a very brittle way of preventing the editor and other content from disappearing - * behind the bottom bar. - */ -.painlessLabBottomBarPlaceholder { - height: $euiSize * 3; /* [1] */ -} - -.painlessLabRightPane { - border-right: none; - border-top: none; - border-bottom: none; - border-radius: 0; - padding-top: 0; - height: 100%; -} - -.painlessLabRightPane__tabs { - display: flex; - flex-direction: column; - height: 100%; - - [role="tabpanel"] { - height: 100%; - } -} - -.painlessLab__betaLabelContainer { - line-height: 0; -} diff --git a/x-pack/plugins/painless_lab/public/application/index.tsx b/x-pack/plugins/painless_lab/public/application/index.tsx index 8057988d1488e..abfc003dbd94d 100644 --- a/x-pack/plugins/painless_lab/public/application/index.tsx +++ b/x-pack/plugins/painless_lab/public/application/index.tsx @@ -12,7 +12,7 @@ import { createKibanaReactContext } from '../../../../../src/plugins/kibana_reac import { Links } from '../links'; import { AppContextProvider } from './context'; -import { Main } from './components/main'; +import { Main, Props as MainProps } from './components/main'; interface AppDependencies { http: CoreSetup['http']; @@ -23,7 +23,8 @@ interface AppDependencies { export function renderApp( element: HTMLElement | null, - { http, I18nContext, uiSettings, links }: AppDependencies + { http, I18nContext, uiSettings, links }: AppDependencies, + props: MainProps ) { if (!element) { return () => undefined; @@ -36,7 +37,7 @@ export function renderApp( -
+
, diff --git a/x-pack/plugins/painless_lab/public/plugin.tsx b/x-pack/plugins/painless_lab/public/plugin.tsx index 7f5d753b0041b..9fcbec63449a7 100644 --- a/x-pack/plugins/painless_lab/public/plugin.tsx +++ b/x-pack/plugins/painless_lab/public/plugin.tsx @@ -72,6 +72,7 @@ export class PainlessLabUIPlugin implements Plugin { + tearDownApp(); + }; }, }); } diff --git a/x-pack/plugins/painless_lab/public/styles/_index.scss b/x-pack/plugins/painless_lab/public/styles/_index.scss index 733c5a4b56aef..ed9f7d5a8d248 100644 --- a/x-pack/plugins/painless_lab/public/styles/_index.scss +++ b/x-pack/plugins/painless_lab/public/styles/_index.scss @@ -1,4 +1,5 @@ @import '@elastic/eui/src/components/header/variables'; +@import '@elastic/eui/src/components/nav_drawer/variables'; /** * This is a very brittle way of preventing the editor and other content from disappearing @@ -42,3 +43,15 @@ $bottomBarHeight: calc(#{$euiSize} * 3); // The panels container should adopt the height of the main container height: 100%; } + +/** + * 1. Hack EUI so the bottom bar doesn't obscure the nav drawer flyout. + */ +.painlessLab__bottomBar { + z-index: 0; /* 1 */ + left: $euiNavDrawerWidthCollapsed; +} + +.painlessLab__bottomBar-isNavDrawerLocked { + left: $euiNavDrawerWidthExpanded; +}