[Canvas] Provide service stubs

x-pack/plugins/canvas/public/application.tsx

@@ -31,7 +31,7 @@ import { init as initStatsReporter } from './lib/ui_metric';
 
 import { CapabilitiesStrings } from '../i18n';
 
-import { startServices, services } from './services';
+import { startServices, services, ServicesProvider } from './services';
 // @ts-expect-error untyped local
 import { createHistory, destroyHistory } from './lib/history_provider';
 // @ts-expect-error untyped local
@@ -52,19 +52,16 @@ export const renderApp = (
 ) => {
   element.classList.add('canvas');
   element.classList.add('canvasContainerWrapper');
-  const canvasServices = Object.entries(services).reduce((reduction, [key, provider]) => {
-    reduction[key] = provider.getService();
-
-    return reduction;
-  }, {} as Record<string, any>);
 
   ReactDOM.render(
-    <KibanaContextProvider services={{ ...plugins, ...coreStart, canvas: canvasServices }}>
-      <I18nProvider>
-        <Provider store={canvasStore}>
-          <App />
-        </Provider>
-      </I18nProvider>
+    <KibanaContextProvider services={{ ...plugins, ...coreStart }}>
+      <ServicesProvider providers={services}>
+        <I18nProvider>
+          <Provider store={canvasStore}>
+            <App />
+          </Provider>
+        </I18nProvider>
+      </ServicesProvider>
     </KibanaContextProvider>,
     element
   );

x-pack/plugins/canvas/public/components/app/index.js

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
 import { getAppReady, getBasePath } from '../../state/selectors/app';
 import { appReady, appError } from '../../state/actions/app';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { withServices } from '../../services';
 
 import { App as Component } from './app';
 
@@ -45,8 +45,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
 export const App = compose(
   connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withKibana,
+  withServices,
   withProps((props) => ({
-    onRouteChange: props.kibana.services.canvas.navLink.updatePath,
+    onRouteChange: props.services.navLink.updatePath,
   }))
 )(Component);

x-pack/plugins/canvas/public/components/element_content/index.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose, withProps } from 'recompose';
 import { get } from 'lodash';
+import { withServices } from '../../services';
 import { getSelectedPage, getPageById } from '../../state/selectors/workpad';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { ElementContent as Component } from './element_content';
 
 const mapStateToProps = (state) => ({
@@ -18,9 +18,9 @@ const mapStateToProps = (state) => ({
 
 export const ElementContent = compose(
   connect(mapStateToProps),
-  withKibana,
-  withProps(({ renderable, kibana }) => ({
-    renderFunction: kibana.services.expressions.getRenderer(get(renderable, 'as')),
+  withServices,
+  withProps(({ renderable, services }) => ({
+    renderFunction: services.expressions.getRenderer(get(renderable, 'as')),
   }))
 )(Component);
 

x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx

@@ -4,30 +4,31 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { FC } from 'react';
 import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
 import {
   SavedObjectFinderUi,
   SavedObjectMetaData,
 } from '../../../../../../src/plugins/saved_objects/public/';
 import { ComponentStrings } from '../../../i18n';
-import { CoreStart } from '../../../../../../src/core/public';
-import { CanvasStartDeps } from '../../plugin';
+import { useServices } from '../../services';
 
 const { AddEmbeddableFlyout: strings } = ComponentStrings;
 
 export interface Props {
   onClose: () => void;
   onSelect: (id: string, embeddableType: string) => void;
   availableEmbeddables: string[];
-  savedObjects: CoreStart['savedObjects'];
-  uiSettings: CoreStart['uiSettings'];
-  getEmbeddableFactories: CanvasStartDeps['embeddable']['getEmbeddableFactories'];
 }
 
-export class AddEmbeddableFlyout extends React.Component<Props> {
-  onAddPanel = (id: string, savedObjectType: string, name: string) => {
-    const embeddableFactories = this.props.getEmbeddableFactories();
+export const AddEmbeddableFlyout: FC<Props> = ({ onSelect, availableEmbeddables, onClose }) => {
+  const services = useServices();
+  const { embeddables, platform } = services;
+  const { getEmbeddableFactories } = embeddables;
+  const { getSavedObjects, getUISettings } = platform;
+
+  const onAddPanel = (id: string, savedObjectType: string, name: string) => {
+    const embeddableFactories = getEmbeddableFactories();
 
     // Find the embeddable type from the saved object type
     const found = Array.from(embeddableFactories).find((embeddableFactory) => {
@@ -39,41 +40,39 @@ export class AddEmbeddableFlyout extends React.Component<Props> {
 
     const foundEmbeddableType = found ? found.type : 'unknown';
 
-    this.props.onSelect(id, foundEmbeddableType);
+    onSelect(id, foundEmbeddableType);
   };
 
-  render() {
-    const embeddableFactories = this.props.getEmbeddableFactories();
+  const embeddableFactories = getEmbeddableFactories();
 
-    const availableSavedObjects = Array.from(embeddableFactories)
-      .filter((factory) => {
-        return this.props.availableEmbeddables.includes(factory.type);
-      })
-      .map((factory) => factory.savedObjectMetaData)
-      .filter<SavedObjectMetaData<{}>>(function (
-        maybeSavedObjectMetaData
-      ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
-        return maybeSavedObjectMetaData !== undefined;
-      });
+  const availableSavedObjects = Array.from(embeddableFactories)
+    .filter((factory) => {
+      return availableEmbeddables.includes(factory.type);
+    })
+    .map((factory) => factory.savedObjectMetaData)
+    .filter<SavedObjectMetaData<{}>>(function (
+      maybeSavedObjectMetaData
+    ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
+      return maybeSavedObjectMetaData !== undefined;
+    });
 
-    return (
-      <EuiFlyout ownFocus onClose={this.props.onClose} data-test-subj="dashboardAddPanel">
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <h2>{strings.getTitleText()}</h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <SavedObjectFinderUi
-            onChoose={this.onAddPanel}
-            savedObjectMetaData={availableSavedObjects}
-            showFilter={true}
-            noItemsMessage={strings.getNoItemsText()}
-            savedObjects={this.props.savedObjects}
-            uiSettings={this.props.uiSettings}
-          />
-        </EuiFlyoutBody>
-      </EuiFlyout>
-    );
-  }
-}
+  return (
+    <EuiFlyout ownFocus onClose={onClose} data-test-subj="dashboardAddPanel">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>{strings.getTitleText()}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <SavedObjectFinderUi
+          onChoose={onAddPanel}
+          savedObjectMetaData={availableSavedObjects}
+          showFilter={true}
+          noItemsMessage={strings.getNoItemsText()}
+          savedObjects={getSavedObjects()}
+          uiSettings={getUISettings()}
+        />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx

@@ -14,8 +14,6 @@ import { AddEmbeddableFlyout, Props } from './flyout';
 import { addElement } from '../../state/actions/elements';
 import { getSelectedPage } from '../../state/selectors/workpad';
 import { EmbeddableTypes } from '../../../canvas_plugin_src/expression_types/embeddable';
-import { WithKibanaProps } from '../../index';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
 
 const allowedEmbeddables = {
   [EmbeddableTypes.map]: (id: string) => {
@@ -74,10 +72,10 @@ const mergeProps = (
   };
 };
 
-export class EmbeddableFlyoutPortal extends React.Component<Props & WithKibanaProps> {
+export class EmbeddableFlyoutPortal extends React.Component<Props> {
   el?: HTMLElement;
 
-  constructor(props: Props & WithKibanaProps) {
+  constructor(props: Props) {
     super(props);
 
     this.el = document.createElement('div');
@@ -103,17 +101,13 @@ export class EmbeddableFlyoutPortal extends React.Component<Props & WithKibanaPr
         <AddEmbeddableFlyout
           {...this.props}
           availableEmbeddables={Object.keys(allowedEmbeddables)}
-          savedObjects={this.props.kibana.services.savedObjects}
-          uiSettings={this.props.kibana.services.uiSettings}
-          getEmbeddableFactories={this.props.kibana.services.embeddable.getEmbeddableFactories}
         />,
         this.el
       );
     }
   }
 }
 
-export const AddEmbeddablePanel = compose<Props & WithKibanaProps, { onClose: () => void }>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withKibana
+export const AddEmbeddablePanel = compose<Props, { onClose: () => void }>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(EmbeddableFlyoutPortal);

x-pack/plugins/canvas/public/components/expression/index.js

@@ -15,7 +15,7 @@ import {
   renderComponent,
 } from 'recompose';
 import { fromExpression } from '@kbn/interpreter/common';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { withServices } from '../../services';
 import { getSelectedPage, getSelectedElement } from '../../state/selectors/workpad';
 import { setExpression, flushContext } from '../../state/actions/elements';
 import { ElementNotSelected } from './element_not_selected';
@@ -46,7 +46,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 
   const { expression } = element;
 
-  const functions = Object.values(allProps.kibana.services.expressions.getFunctions());
+  const functions = Object.values(allProps.services.expressions.getFunctions());
 
   return {
     ...allProps,
@@ -71,7 +71,7 @@ const expressionLifecycle = lifecycle({
 });
 
 export const Expression = compose(
-  withKibana,
+  withServices,
   connect(mapStateToProps, mapDispatchToProps, mergeProps),
   withState('formState', 'setFormState', ({ expression }) => ({
     expression,

x-pack/plugins/canvas/public/components/render_with_fn/render_with_fn.tsx

@@ -7,7 +7,7 @@
 import React, { useState, useEffect, useRef, FC, useCallback } from 'react';
 import { useDebounce } from 'react-use';
 
-import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
+import { useNotifyService } from '../../services';
 import { RenderToDom } from '../render_to_dom';
 import { ErrorStrings } from '../../../i18n';
 import { RendererHandlers } from '../../../types';
@@ -39,8 +39,7 @@ export const RenderWithFn: FC<Props> = ({
   width,
   height,
 }) => {
-  const { services } = useKibana();
-  const onError = services.canvas.notify.error;
+  const { error: onError } = useNotifyService();
 
   const [domNode, setDomNode] = useState<HTMLElement | null>(null);
 

x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts

@@ -10,8 +10,7 @@ import { compose, withState } from 'recompose';
 import { camelCase } from 'lodash';
 import { cloneSubgraphs } from '../../lib/clone_subgraphs';
 import * as customElementService from '../../lib/custom_element_service';
-import { withKibana } from '../../../../../../src/plugins/kibana_react/public';
-import { WithKibanaProps } from '../../';
+import { withServices, WithServicesProps } from '../../services';
 // @ts-expect-error untyped local
 import { selectToplevelNodes } from '../../state/actions/transient';
 // @ts-expect-error untyped local
@@ -63,7 +62,7 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
 const mergeProps = (
   stateProps: StateProps,
   dispatchProps: DispatchProps,
-  ownProps: OwnPropsWithState & WithKibanaProps
+  ownProps: OwnPropsWithState & WithServicesProps
 ): ComponentProps => {
   const { pageId } = stateProps;
   const { onClose, search, setCustomElements } = ownProps;
@@ -91,7 +90,7 @@ const mergeProps = (
       try {
         await findCustomElements();
       } catch (err) {
-        ownProps.kibana.services.canvas.notify.error(err, {
+        ownProps.services.notify.error(err, {
           title: `Couldn't find custom elements`,
         });
       }
@@ -102,7 +101,7 @@ const mergeProps = (
         await customElementService.remove(id);
         await findCustomElements();
       } catch (err) {
-        ownProps.kibana.services.canvas.notify.error(err, {
+        ownProps.services.notify.error(err, {
           title: `Couldn't delete custom elements`,
         });
       }
@@ -118,7 +117,7 @@ const mergeProps = (
         });
         await findCustomElements();
       } catch (err) {
-        ownProps.kibana.services.canvas.notify.error(err, {
+        ownProps.services.notify.error(err, {
           title: `Couldn't update custom elements`,
         });
       }
@@ -127,7 +126,7 @@ const mergeProps = (
 };
 
 export const SavedElementsModal = compose<ComponentProps, OwnProps>(
-  withKibana,
+  withServices,
   withState('search', 'setSearch', ''),
   withState('customElements', 'setCustomElements', []),
   connect(mapStateToProps, mapDispatchToProps, mergeProps)