Move chrome service from props to context.

elastic · Mar 23, 2020 · 62129a1 · 62129a1
1 parent dabaee8
commit 62129a1
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 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
@@ -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<boolean>;
-}
-
-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
@@ -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>
   );

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

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