Resize Painless Lab bottom bar to accommodate nav drawer width

src/plugins/dev_tools/public/plugin.ts

@@ -132,4 +132,6 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup, DevToolsStart> {
       getSortedDevTools: this.getSortedDevTools.bind(this),
     };
   }
+
+  public stop() {}
 }

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<boolean>;
+}
+
+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 (
     <div className="painlessLabMainContainer">
       <EuiFlexGroup className="painlessLabPanelsContainer" responsive={false} gutterSize="none">
@@ -61,6 +76,7 @@ export const Main: FunctionComponent = () => {
         toggleRequestFlyout={toggleRequestFlyout}
         isRequestFlyoutOpen={isRequestFlyoutOpen}
         reset={() => updateState(() => ({ code: exampleScript }))}
+        isNavDrawerLocked={isNavDrawerLocked}
       />
 
       {isRequestFlyoutOpen && (

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,
     </EuiContextMenuItem>,
   ];
 
+  const classes = classNames('painlessLab__bottomBar', {
+    'painlessLab__bottomBar-isNavDrawerLocked': isNavDrawerLocked,
+  });
+
   return (
-    <EuiBottomBar paddingSize="s">
+    <EuiBottomBar paddingSize="s" className={classes}>
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s" justifyContent="flexStart">

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(
     <I18nContext>
       <KibanaReactContextProvider>
         <AppContextProvider value={{ http, links }}>
-          <Main />
+          <Main {...props} />
         </AppContextProvider>
       </KibanaReactContextProvider>
     </I18nContext>,

x-pack/plugins/painless_lab/public/plugin.tsx

@@ -72,6 +72,7 @@ export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencie
           i18n: { Context: I18nContext },
           notifications,
           docLinks,
+          chrome: { getIsNavDrawerLocked$ },
         } = core;
 
         this.languageService.setup();
@@ -90,7 +91,15 @@ export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencie
         }
 
         const { renderApp } = await import('./application');
-        return renderApp(element, { I18nContext, http, uiSettings, links: getLinks(docLinks) });
+        const tearDownApp = renderApp(
+          element,
+          { I18nContext, http, uiSettings, links: getLinks(docLinks) },
+          { getIsNavDrawerLocked$ }
+        );
+
+        return () => {
+          tearDownApp();
+        };
       },
     });
   }

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;
+}