turning it all into one React app

x-pack/plugins/watcher/plugin_definition.js

@@ -21,14 +21,9 @@ export const pluginDefinition = {
   publicDir: resolve(__dirname, 'public'),
   require: ['kibana', 'elasticsearch', 'xpack_main'],
   uiExports: {
-    managementSections: [
-      'plugins/watcher/sections/watch_detail',
-      'plugins/watcher/sections/watch_edit',
-      'plugins/watcher/sections/watch_list',
-      'plugins/watcher/sections/watch_history_item',
-    ],
+    managementSections: ['plugins/watcher'],
     styleSheetPaths: resolve(__dirname, 'public/index.scss'),
-    home: ['plugins/watcher/register_feature']
+    home: ['plugins/watcher/register_feature'],
   },
   init: function (server) {
     registerLicenseChecker(server);
@@ -40,5 +35,5 @@ export const pluginDefinition = {
     registerSettingsRoutes(server);
     registerWatchesRoutes(server);
     registerWatchRoutes(server);
-  }
+  },
 };

x-pack/plugins/watcher/public/app.html

@@ -0,0 +1,3 @@
+<kbn-management-app section="elasticsearch/watcher">
+  <div id="watchReactRoot"></div>
+</kbn-management-app>

x-pack/plugins/watcher/public/app.js

@@ -0,0 +1,59 @@
+/*
+ * 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 React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
+import { WatchStatus } from './sections/watch_status/watch_status';
+import { WatchEdit } from './sections/watch_edit/components/watch_edit';
+import { WatchList } from './sections/watch_list/components/watch_list';
+import { registerRouter } from './lib/navigation';
+import { BASE_PATH } from './constants';
+
+class ShareRouter extends Component {
+  static contextTypes = {
+    router: PropTypes.shape({
+      history: PropTypes.shape({
+        push: PropTypes.func.isRequired,
+        createHref: PropTypes.func.isRequired
+      }).isRequired
+    }).isRequired
+  }
+  constructor(...args) {
+    super(...args);
+    this.registerRouter();
+  }
+
+  registerRouter() {
+    // Share the router with the app without requiring React or context.
+    const { router } = this.context;
+    registerRouter(router);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+export const App = () => {
+  return (
+    <HashRouter>
+      <ShareRouter>
+        <AppWithoutRouter />
+      </ShareRouter>
+    </HashRouter>
+  );
+};
+
+// Export this so we can test it with a different router.
+export const AppWithoutRouter = () => (
+  <Switch>
+    <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}watches`} />
+    <Route exact path={`${BASE_PATH}watches`} component={WatchList} />
+    <Route exact path={`${BASE_PATH}watches/watch/:id/status`} component={WatchStatus} />
+    <Route exact path={`${BASE_PATH}watches/watch/:id/edit`} component={WatchEdit} />
+    <Route exact path={`${BASE_PATH}watches/new-watch/:type`} component={WatchEdit} />
+  </Switch>
+);