[canvas] Relocate Legacy Services; create Workpad Service (#103386) (#…

…104010)

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Clint Andrew Hall <[email protected]>

src/plugins/presentation_util/public/index.ts

@@ -15,6 +15,16 @@ export {
   getStubPluginServices,
 } from './services';
 
+export {
+  KibanaPluginServiceFactory,
+  PluginServiceFactory,
+  PluginServices,
+  PluginServiceProviders,
+  PluginServiceProvider,
+  PluginServiceRegistry,
+  KibanaPluginServiceParams,
+} from './services/create';
+
 export { PresentationUtilPluginSetup, PresentationUtilPluginStart } from './types';
 export { SaveModalDashboardProps } from './components/types';
 export { projectIDs, ProjectID, Project } from '../common/labs';

x-pack/plugins/canvas/jest.config.js

@@ -9,4 +9,7 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: '../../..',
   roots: ['<rootDir>/x-pack/plugins/canvas'],
+  transform: {
+    '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
+  },
 };

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

@@ -17,9 +17,11 @@ import { includes, remove } from 'lodash';
 
 import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from 'kibana/public';
 
+import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
+import { PluginServices } from '../../../../src/plugins/presentation_util/public';
+
 import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
 import { App } from './components/app';
-import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
 import { registerLanguage } from './lib/monaco_language_def';
 import { SetupRegistries } from './plugin_api';
 import { initRegistries, populateRegistries, destroyRegistries } from './registries';
@@ -30,7 +32,7 @@ import { init as initStatsReporter } from './lib/ui_metric';
 
 import { CapabilitiesStrings } from '../i18n';
 
-import { startServices, services, ServicesProvider } from './services';
+import { startServices, services, LegacyServicesProvider, CanvasPluginServices } from './services';
 import { initFunctions } from './functions';
 // @ts-expect-error untyped local
 import { appUnload } from './state/actions/app';
@@ -44,27 +46,38 @@ import './style/index.scss';
 
 const { ReadOnlyBadge: strings } = CapabilitiesStrings;
 
-export const renderApp = (
-  coreStart: CoreStart,
-  plugins: CanvasStartDeps,
-  { element }: AppMountParameters,
-  canvasStore: Store
-) => {
-  const { presentationUtil } = plugins;
+export const renderApp = ({
+  coreStart,
+  startPlugins,
+  params,
+  canvasStore,
+  pluginServices,
+}: {
+  coreStart: CoreStart;
+  startPlugins: CanvasStartDeps;
+  params: AppMountParameters;
+  canvasStore: Store;
+  pluginServices: PluginServices<CanvasPluginServices>;
+}) => {
+  const { presentationUtil } = startPlugins;
+  const { element } = params;
   element.classList.add('canvas');
   element.classList.add('canvasContainerWrapper');
+  const ServicesContextProvider = pluginServices.getContextProvider();
 
   ReactDOM.render(
-    <KibanaContextProvider services={{ ...plugins, ...coreStart }}>
-      <ServicesProvider providers={services}>
-        <presentationUtil.ContextProvider>
-          <I18nProvider>
-            <Provider store={canvasStore}>
-              <App />
-            </Provider>
-          </I18nProvider>
-        </presentationUtil.ContextProvider>
-      </ServicesProvider>
+    <KibanaContextProvider services={{ ...startPlugins, ...coreStart }}>
+      <ServicesContextProvider>
+        <LegacyServicesProvider providers={services}>
+          <presentationUtil.ContextProvider>
+            <I18nProvider>
+              <Provider store={canvasStore}>
+                <App />
+              </Provider>
+            </I18nProvider>
+          </presentationUtil.ContextProvider>
+        </LegacyServicesProvider>
+      </ServicesContextProvider>
     </KibanaContextProvider>,
     element
   );
@@ -89,7 +102,7 @@ export const initializeCanvas = async (
   // of our bundle entry point. Moving them here pushes that load to when canvas is actually loaded.
   const canvasFunctions = initFunctions({
     timefilter: setupPlugins.data.query.timefilter.timefilter,
-    prependBasePath: coreSetup.http.basePath.prepend,
+    prependBasePath: coreStart.http.basePath.prepend,
     types: setupPlugins.expressions.getTypes(),
     paletteService: await setupPlugins.charts.palettes.getPalettes(),
   });
@@ -99,7 +112,7 @@ export const initializeCanvas = async (
   }
 
   // Create Store
-  const canvasStore = await createStore(coreSetup, setupPlugins);
+  const canvasStore = await createStore(coreSetup);
 
   registerLanguage(Object.values(services.expressions.getService().getFunctions()));
 
@@ -147,7 +160,7 @@ export const initializeCanvas = async (
   return canvasStore;
 };
 
-export const teardownCanvas = (coreStart: CoreStart, startPlugins: CanvasStartDeps) => {
+export const teardownCanvas = (coreStart: CoreStart) => {
   destroyRegistries();
 
   // Canvas pollutes the jQuery plot plugins collection with custom plugins that only work in Canvas.

x-pack/plugins/canvas/public/components/home/home.stories.tsx

@@ -7,24 +7,17 @@
 
 import React from 'react';
 
-import {
-  reduxDecorator,
-  getAddonPanelParameters,
-  servicesContextDecorator,
-  getDisableStoryshotsParameter,
-} from '../../../storybook';
+import { reduxDecorator } from '../../../storybook';
+import { argTypes } from '../../services/storybook';
 
-import { Home } from './home.component';
+import { Home } from './home';
 
 export default {
-  title: 'Home/Home Page',
-  argTypes: {},
+  title: 'Home',
+  component: Home,
+  argTypes,
   decorators: [reduxDecorator()],
-  parameters: { ...getAddonPanelParameters(), ...getDisableStoryshotsParameter() },
+  parameters: {},
 };
 
-export const NoContent = () => <Home />;
-export const HasContent = () => <Home />;
-
-NoContent.decorators = [servicesContextDecorator()];
-HasContent.decorators = [servicesContextDecorator({ findWorkpads: 5, findTemplates: true })];
+export const HomePage = () => <Home />;