[Canvas] New Platform shim Canvas Client Side (elastic#49358)

* New Platform shim Canvas

* Fix typing

* Use some new platform methods

* Fix formatting issue

x-pack/legacy/plugins/canvas/.storybook/config.js

@@ -4,11 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs/react';
 import { withInfo } from '@storybook/addon-info';
 import { create } from '@storybook/theming';
 
+import { coreMock } from 'src/core/public/mocks';
+import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
+
 // If we're running Storyshots, be sure to register the require context hook.
 // Otherwise, add the other decorators.
 if (process.env.NODE_ENV === 'test') {
@@ -33,6 +37,11 @@ if (process.env.NODE_ENV === 'test') {
   addDecorator(withKnobs);
 }
 
+// Add New Platform Context for any stories that need it
+addDecorator(fn => (
+  <KibanaContextProvider services={coreMock.createStart()}>{fn()}</KibanaContextProvider>
+));
+
 function loadStories() {
   require('./dll_contexts');
 

x-pack/legacy/plugins/canvas/index.js

@@ -22,7 +22,7 @@ export function canvas(kibana) {
         description: 'Data driven workpads',
         icon: 'plugins/canvas/icon.svg',
         euiIconType: 'canvasApp',
-        main: 'plugins/canvas/app',
+        main: 'plugins/canvas/legacy_start',
       },
       interpreter: [
         'plugins/canvas/browser_functions',

x-pack/legacy/plugins/canvas/public/angular/config/index.js

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './state_management'; // Requires 6.2.0+
-import './location_provider';
+export * from './state_management'; // Requires 6.2.0+
+export * from './location_provider';

x-pack/legacy/plugins/canvas/public/angular/config/location_provider.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ILocationProvider } from 'angular';
+import { CoreStart, CanvasStartDeps } from '../../plugin';
+
+export function initLocationProvider(coreStart: CoreStart, plugins: CanvasStartDeps) {
+  // disable angular's location provider
+  const app = plugins.__LEGACY.uiModules.get('apps/canvas');
+
+  app.config(($locationProvider: ILocationProvider) => {
+    $locationProvider.html5Mode({
+      enabled: false,
+      requireBase: false,
+      rewriteLinks: false,
+    });
+  });
+}

x-pack/legacy/plugins/canvas/public/angular/config/state_management.js

@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { uiModules } from 'ui/modules';
-
-// disable the kibana state management
-const app = uiModules.get('apps/canvas');
-app.config(stateManagementConfigProvider => {
-  stateManagementConfigProvider.disable();
-});
+export function initStateManagement(coreStart, plugins) {
+  // disable the kibana state management
+  const app = plugins.__LEGACY.uiModules.get('apps/canvas');
+  app.config(stateManagementConfigProvider => {
+    stateManagementConfigProvider.disable();
+  });
+}

x-pack/legacy/plugins/canvas/public/angular/controllers/canvas.tsx

@@ -8,44 +8,47 @@ import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
-import chrome from 'ui/chrome';
-import { UICapabilities } from 'ui/capabilities';
+import { CanvasStartDeps, CoreStart } from '../../plugin';
+import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
 
 // @ts-ignore Untyped local
 import { App } from '../../components/app';
 import { AngularStrings } from '../../../i18n';
 
 const { CanvasRootController: strings } = AngularStrings;
 
-export function CanvasRootController(
-  canvasStore: Store,
-  $scope: any, // Untyped in Kibana
-  $element: any, // Untyped in Kibana
-  uiCapabilities: UICapabilities
-) {
-  const domNode = $element[0];
+export function CanvasRootControllerFactory(coreStart: CoreStart, plugins: CanvasStartDeps) {
+  return function CanvasRootController(
+    canvasStore: Store,
+    $scope: any, // Untyped in Kibana
+    $element: any // Untyped in Kibana
+  ) {
+    const domNode = $element[0];
 
-  // set the read-only badge when appropriate
-  chrome.badge.set(
-    uiCapabilities.canvas.save
-      ? undefined
-      : {
-          text: strings.getReadOnlyBadgeText(),
-          tooltip: strings.getReadOnlyBadgeTooltip(),
-          iconType: 'glasses',
-        }
-  );
+    // set the read-only badge when appropriate
+    coreStart.chrome.setBadge(
+      coreStart.application.capabilities.canvas.save
+        ? undefined
+        : {
+            text: strings.getReadOnlyBadgeText(),
+            tooltip: strings.getReadOnlyBadgeTooltip(),
+            iconType: 'glasses',
+          }
+    );
 
-  render(
-    <I18nProvider>
-      <Provider store={canvasStore}>
-        <App />
-      </Provider>
-    </I18nProvider>,
-    domNode
-  );
+    render(
+      <KibanaContextProvider services={{ ...coreStart, ...plugins }}>
+        <I18nProvider>
+          <Provider store={canvasStore}>
+            <App />
+          </Provider>
+        </I18nProvider>
+      </KibanaContextProvider>,
+      domNode
+    );
 
-  $scope.$on('$destroy', () => {
-    unmountComponentAtNode(domNode);
-  });
+    $scope.$on('$destroy', () => {
+      unmountComponentAtNode(domNode);
+    });
+  };
 }

x-pack/legacy/plugins/canvas/public/angular/controllers/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { CanvasRootController } from './canvas';
+export { CanvasRootControllerFactory } from './canvas';

x-pack/legacy/plugins/canvas/public/angular/services/index.js

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './store';
+export * from './store';

x-pack/legacy/plugins/canvas/public/angular/services/store.js

@@ -4,27 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { uiModules } from 'ui/modules';
 import { createStore } from '../../state/store';
 import { getInitialState } from '../../state/initial_state';
 
-const app = uiModules.get('apps/canvas');
-app.service('canvasStore', (kbnVersion, basePath, reportingBrowserType, serverFunctions) => {
-  const initialState = getInitialState();
+export function initStore(coreStart, plugins) {
+  const app = plugins.__LEGACY.uiModules.get('apps/canvas');
+  app.service('canvasStore', (kbnVersion, basePath, reportingBrowserType, serverFunctions) => {
+    const initialState = getInitialState();
 
-  // Set the defaults from Kibana plugin
-  initialState.app = {
-    kbnVersion,
-    basePath,
-    reportingBrowserType,
-    serverFunctions,
-    ready: false,
-  };
+    // Set the defaults from Kibana plugin
+    initialState.app = {
+      kbnVersion,
+      basePath,
+      reportingBrowserType,
+      serverFunctions,
+      ready: false,
+    };
 
-  const store = createStore(initialState);
+    const store = createStore(initialState);
 
-  // TODO: debugging, remove this
-  window.canvasStore = store;
+    // TODO: debugging, remove this
+    window.canvasStore = store;
 
-  return store;
-});
+    return store;
+  });
+}

x-pack/legacy/plugins/canvas/public/components/app/track_route_change.js

@@ -5,16 +5,15 @@
  */
 
 import { get } from 'lodash';
-import chrome from 'ui/chrome';
-import { absoluteToParsedUrl } from 'ui/url/absolute_to_parsed_url';
 import { getWindow } from '../../lib/get_window';
 import { CANVAS_APP } from '../../../common/lib/constants';
+import { getCoreStart, getStartPlugins } from '../../legacy';
 
 export function trackRouteChange() {
-  const basePath = chrome.getBasePath();
+  const basePath = getCoreStart().http.basePath.get();
   // storage.set(LOCALSTORAGE_LASTPAGE, pathname);
-  chrome.trackSubUrlForApp(
+  getStartPlugins().__LEGACY.trackSubUrlForApp(
     CANVAS_APP,
-    absoluteToParsedUrl(get(getWindow(), 'location.href'), basePath)
+    getStartPlugins().__LEGACY.absoluteToParsedUrl(get(getWindow(), 'location.href'), basePath)
   );
 }

x-pack/legacy/plugins/canvas/public/components/editor/editor.tsx

@@ -19,9 +19,9 @@ import 'monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js'; // Ne
 import 'monaco-editor/esm/vs/editor/contrib/hover/hover.js'; // Needed for hover
 import 'monaco-editor/esm/vs/editor/contrib/parameterHints/parameterHints.js'; // Needed for signature
 
-import { theme } from './editor_theme';
+import { LIGHT_THEME, DARK_THEME } from './editor_theme';
 
-interface Props {
+export interface Props {
   /** Width of editor. Defaults to 100%. */
   width?: string | number;
 
@@ -79,6 +79,11 @@ interface Props {
    * Function called after the editor is mounted in the view
    */
   editorDidMount?: EditorDidMount;
+
+  /**
+   * Should the editor use the dark theme
+   */
+  useDarkTheme?: boolean;
 }
 
 export class Editor extends React.Component<Props, {}> {
@@ -115,7 +120,7 @@ export class Editor extends React.Component<Props, {}> {
     });
 
     // Register the theme
-    monaco.editor.defineTheme('euiColors', theme);
+    monaco.editor.defineTheme('euiColors', this.props.useDarkTheme ? DARK_THEME : LIGHT_THEME);
   };
 
   _editorDidMount = (