Resize Painless Lab bottom bar to accommodate nav drawer width (#60833)

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,7 @@
  * 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 { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { formatRequestPayload, formatJson } from '../lib/format';
@@ -17,11 +17,19 @@ import { Editor } from './editor';
 import { RequestFlyout } from './request_flyout';
 import { useAppContext } from '../context';
 
-export const Main: FunctionComponent = () => {
-  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(() => {
@@ -32,6 +40,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 +79,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/context.tsx

@@ -33,7 +33,7 @@ interface AppContextProviderArgs {
 
 export const AppContextProvider = ({
   children,
-  value: { http, links },
+  value: { http, links, chrome },
 }: AppContextProviderArgs) => {
   const [state, setState] = useState<Store>(() => ({
     ...initialState,
@@ -51,7 +51,7 @@ export const AppContextProvider = ({
   };
 
   return (
-    <AppContext.Provider value={{ updateState, state, services: { http }, links }}>
+    <AppContext.Provider value={{ updateState, state, services: { http, chrome }, links }}>
       {children}
     </AppContext.Provider>
   );

x-pack/plugins/painless_lab/public/application/index.tsx

@@ -19,23 +19,23 @@ interface AppDependencies {
   I18nContext: CoreStart['i18n']['Context'];
   uiSettings: CoreSetup['uiSettings'];
   links: Links;
+  chrome: CoreSetup['chrome'];
 }
 
 export function renderApp(
   element: HTMLElement | null,
-  { http, I18nContext, uiSettings, links }: AppDependencies
+  { http, I18nContext, uiSettings, links, chrome }: AppDependencies
 ) {
   if (!element) {
     return () => undefined;
   }
-
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
   });
   render(
     <I18nContext>
       <KibanaReactContextProvider>
-        <AppContextProvider value={{ http, links }}>
+        <AppContextProvider value={{ http, links, chrome }}>
           <Main />
         </AppContextProvider>
       </KibanaReactContextProvider>

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,
         } = core;
 
         this.languageService.setup();
@@ -90,7 +91,17 @@ 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),
+          chrome,
+        });
+
+        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;
+}