moving plugin template to React and EUI (#16937)

* moving plugin template to React and EUI

* fixing method reference error

* adding whitespace and comments per PR feedback

* adjusting test

* fixing test

* reducing Angular dependency and fixing issue with hack not loading properly

* fixing tests

* reacting to PR feedback

packages/kbn-plugin-generator/sao_template/sao.test.js

@@ -167,11 +167,9 @@ describe('plugin generator sao integration', () => {
     });
 
     const contents = getFileContents(res.files['public/app.js']);
-    const controllerLine = contents.match('.controller(.*)')[1];
-    const titleLine = contents.match('\\$scope.title(.*)')[1];
+    const controllerLine = contents.match('setRootController(.*)')[1];
 
-    expect(controllerLine).toContain('someFancyPluginHelloWorld');
-    expect(titleLine).toContain('Some Fancy Plugin');
+    expect(controllerLine).toContain('someFancyPlugin');
   });
 
   it('includes dotfiles', async () => {

packages/kbn-plugin-generator/sao_template/template/index.js

@@ -14,7 +14,7 @@ export default function (kibana) {
       <% } %>
       <% if (generateHack) { %>
       hacks: [
-        'plugins/<%= name %>/hack'
+        'plugins/<%= kebabCase(name) %>/hack'
       ]
       <% } %>
     },

packages/kbn-plugin-generator/sao_template/template/public/app.js

@@ -1,34 +1,35 @@
-import moment from 'moment';
+import React from 'react';
 import { uiModules } from 'ui/modules';
-import uiRoutes from 'ui/routes';
+import chrome from 'ui/chrome';
+import { render, unmountComponentAtNode } from 'react-dom';
 
 import 'ui/autoload/styles';
 import './less/main.less';
-import template from './templates/index.html';
+import { Main } from './components/main';
 
-uiRoutes.enable();
-uiRoutes
-  .when('/', {
-    template,
-    resolve: {
-      currentTime($http) {
-        return $http.get('../api/<%= name %>/example').then(function (resp) {
-          return resp.data.time;
-        });
-      }
-    }
+const app = uiModules.get("apps/<%= camelCase(name) %>");
+
+app.config($locationProvider => {
+  $locationProvider.html5Mode({
+    enabled: false,
+    requireBase: false,
+    rewriteLinks: false,
   });
+});
+app.config(stateManagementConfigProvider =>
+  stateManagementConfigProvider.disable()
+);
 
-uiModules
-  .get('app/<%= name %>', [])
-  .controller('<%= camelCase(name) %>HelloWorld', function ($scope, $route, $interval) {
-    $scope.title = '<%= startCase(name) %>';
-    $scope.description = '<%= description %>';
+function RootController($scope, $element, $http) {
+  const domNode = $element[0];
 
-    const currentTime = moment($route.current.locals.currentTime);
-    $scope.currentTime = currentTime.format('HH:mm:ss');
-    const unsubscribe = $interval(function () {
-      $scope.currentTime = currentTime.add(1, 'second').format('HH:mm:ss');
-    }, 1000);
-    $scope.$watch('$destroy', unsubscribe);
+  // render react to DOM
+  render(<Main title="<%= name %>" httpClient={$http} />, domNode);
+
+  // unmount react on controller destroy
+  $scope.$on('$destroy', () => {
+    unmountComponentAtNode(domNode);
   });
+}
+
+chrome.setRootController("<%= camelCase(name) %>", RootController);

packages/kbn-plugin-generator/sao_template/template/public/components/main/index.js

@@ -0,0 +1 @@
+export { Main } from './main';

packages/kbn-plugin-generator/sao_template/template/public/components/main/main.js

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  EuiPage,
+  EuiPageHeader,
+  EuiTitle,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentBody,
+  EuiText
+} from "@elastic/eui";
+
+export class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    /* 
+       FOR EXAMPLE PURPOSES ONLY.  There are much better ways to
+       manage state and update your UI than this.
+    */
+    const { httpClient } = this.props;
+    httpClient.get("../api/<%= name %>/example").then((resp) => {
+      this.setState({ time: resp.data.time });
+    });  
+  }
+  render() {
+    const { title } = this.props;
+    return (
+      <EuiPage>
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>{title} Hello World!</h1>
+          </EuiTitle>
+        </EuiPageHeader>
+        <EuiPageBody>
+          <EuiPageContent>
+            <EuiPageContentHeader>
+              <EuiTitle>
+                <h2>Congratulations</h2>
+              </EuiTitle>
+            </EuiPageContentHeader>
+            <EuiPageContentBody>
+              <EuiText>
+                <h3>You've successfully created your first Kibana Plugin!</h3>
+                <p>The server time (via API call) is {this.state.time || "NO API CALL YET"}</p>
+              </EuiText>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    );
+  }
+  
+};

packages/kbn-plugin-generator/sao_template/template/public/templates/index.html

@@ -1,13 +0,0 @@
-<div class="container" ng-controller="<%= camelCase(name) %>HelloWorld">
-  <div class="row">
-    <div class="col-12-sm">
-      <div class="well">
-        <h2>Congratulations</h2>
-        <p class="lead">You've successfully created your first Kibana Plugin!</p>
-      </div>
-      <h1>{{ title }}</h1>
-      <p class="lead">{{ description }}</p>
-      <p>The current time is {{ currentTime }}</p>
-    </div>
-  </div>
-</div>