From dabaee8f4b3a01f30912957397f239045ca2ea91 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 20 Mar 2020 16:05:15 -0700 Subject: [PATCH 1/2] Resize Painless Lab bottom bar to accommodate nav drawer width. --- src/plugins/dev_tools/public/plugin.ts | 2 ++ .../public/application/components/main.tsx | 20 +++++++++-- .../application/components/main_controls.tsx | 16 +++++++-- .../public/application/index.scss | 33 ------------------- .../painless_lab/public/application/index.tsx | 7 ++-- x-pack/plugins/painless_lab/public/plugin.tsx | 11 ++++++- .../painless_lab/public/styles/_index.scss | 13 ++++++++ 7 files changed, 61 insertions(+), 41 deletions(-) delete mode 100644 x-pack/plugins/painless_lab/public/application/index.scss 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; +} From 62129a166b1e2ed9f4b9bed2566c0a669e549d8a Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 23 Mar 2020 10:28:26 -0700 Subject: [PATCH 2/2] Move chrome service from props to context. --- .../public/application/components/main.tsx | 19 +++++++++++-------- .../public/application/context.tsx | 4 ++-- .../painless_lab/public/application/index.tsx | 11 +++++------ x-pack/plugins/painless_lab/public/plugin.tsx | 14 ++++++++------ 4 files changed, 26 insertions(+), 22 deletions(-) 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 7e11dfc67ed9b..d692eab27ff42 100644 --- a/x-pack/plugins/painless_lab/public/application/components/main.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/main.tsx @@ -5,7 +5,6 @@ */ 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'; @@ -18,15 +17,19 @@ import { Editor } from './editor'; import { RequestFlyout } from './request_flyout'; import { useAppContext } from '../context'; -export interface Props { - getIsNavDrawerLocked$: () => Observable; -} - -export const Main = ({ getIsNavDrawerLocked$ }: Props) => { - const { state, updateState, services, links } = useAppContext(); +export const Main = () => { + const { + state, + updateState, + services: { + http, + chrome: { getIsNavDrawerLocked$ }, + }, + links, + } = useAppContext(); const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false); - const { inProgress, response, submit } = useSubmitCode(services.http); + const { inProgress, response, submit } = useSubmitCode(http); // Live-update the output and persist state as the user changes it. useEffect(() => { diff --git a/x-pack/plugins/painless_lab/public/application/context.tsx b/x-pack/plugins/painless_lab/public/application/context.tsx index e61b331c833a3..808c55f63b0de 100644 --- a/x-pack/plugins/painless_lab/public/application/context.tsx +++ b/x-pack/plugins/painless_lab/public/application/context.tsx @@ -33,7 +33,7 @@ interface AppContextProviderArgs { export const AppContextProvider = ({ children, - value: { http, links }, + value: { http, links, chrome }, }: AppContextProviderArgs) => { const [state, setState] = useState(() => ({ ...initialState, @@ -51,7 +51,7 @@ export const AppContextProvider = ({ }; return ( - + {children} ); diff --git a/x-pack/plugins/painless_lab/public/application/index.tsx b/x-pack/plugins/painless_lab/public/application/index.tsx index abfc003dbd94d..f0a0280d12457 100644 --- a/x-pack/plugins/painless_lab/public/application/index.tsx +++ b/x-pack/plugins/painless_lab/public/application/index.tsx @@ -12,32 +12,31 @@ import { createKibanaReactContext } from '../../../../../src/plugins/kibana_reac import { Links } from '../links'; import { AppContextProvider } from './context'; -import { Main, Props as MainProps } from './components/main'; +import { Main } from './components/main'; interface AppDependencies { http: CoreSetup['http']; I18nContext: CoreStart['i18n']['Context']; uiSettings: CoreSetup['uiSettings']; links: Links; + chrome: CoreSetup['chrome']; } export function renderApp( element: HTMLElement | null, - { http, I18nContext, uiSettings, links }: AppDependencies, - props: MainProps + { http, I18nContext, uiSettings, links, chrome }: AppDependencies ) { if (!element) { return () => undefined; } - const { Provider: KibanaReactContextProvider } = createKibanaReactContext({ uiSettings, }); render( - -
+ +
, diff --git a/x-pack/plugins/painless_lab/public/plugin.tsx b/x-pack/plugins/painless_lab/public/plugin.tsx index 9fcbec63449a7..d3342b4cf9585 100644 --- a/x-pack/plugins/painless_lab/public/plugin.tsx +++ b/x-pack/plugins/painless_lab/public/plugin.tsx @@ -72,7 +72,7 @@ export class PainlessLabUIPlugin implements Plugin { tearDownApp();