[kbn-plugin-generator] Fix eslint dependencies and template code linting (#20517) (#20612)

* Add missing peer dependency and upgraded to new import resolver kibana

* Fixed template code to follow eslint rules

* Fix lint script to lint all files in the generated dir

* More precise slurp :p

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

@@ -1,25 +1,27 @@
-<% if (generateApi) { %>import exampleRoute from './server/routes/example';<% } %>
+<% if (generateApi) { -%>
+import exampleRoute from './server/routes/example';
 
+<% } -%>
 export default function (kibana) {
   return new kibana.Plugin({
     require: ['elasticsearch'],
     name: '<%= kebabCase(name) %>',
     uiExports: {
-      <% if (generateApp) { %>
+      <%_ if (generateApp) { -%>
       app: {
         title: '<%= startCase(name) %>',
         description: '<%= description %>',
         main: 'plugins/<%= kebabCase(name) %>/app',
-        <% if (generateScss) { %>
+        <%_ if (generateScss) { -%>
         styleSheetPath: require('path').resolve(__dirname, 'public/app.scss'),
-        <% } %>
+        <%_ } -%>
       },
-      <% } %>
-      <% if (generateHack) { %>
+      <%_ } -%>
+      <%_ if (generateHack) { -%>
       hacks: [
         'plugins/<%= kebabCase(name) %>/hack'
       ]
-      <% } %>
+      <%_ } -%>
     },
 
     config(Joi) {
@@ -27,13 +29,12 @@ export default function (kibana) {
         enabled: Joi.boolean().default(true),
       }).default();
     },
+    <%_ if (generateApi) { -%>
 
-    <% if (generateApi) { %>
-    init(server, options) {
+    init(server, options) { // eslint-disable-line no-unused-vars
       // Add server routes and initialize the plugin here
       exampleRoute(server);
     }
-    <% } %>
-
+    <%_ } -%>
   });
-};
+}

packages/kbn-plugin-generator/sao_template/template/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "preinstall": "node ../../kibana/preinstall_check",
     "kbn": "node ../../kibana/scripts/kbn",
-    "lint": "eslint **/*.js",
+    "lint": "eslint .",
     "start": "plugin-helpers start",
     "test:server": "plugin-helpers test:server",
     "test:browser": "plugin-helpers test:browser",
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@elastic/eslint-config-kibana": "link:../../kibana/packages/eslint-config-kibana",
-    "@elastic/eslint-import-resolver-kibana": "^0.9.0",
+    "@elastic/eslint-import-resolver-kibana": "link:../../kibana/packages/kbn-eslint-import-resolver-kibana",
     "@kbn/plugin-helpers": "link:../../kibana/packages/kbn-plugin-helpers",
     "babel-eslint": "^8.0.2",
     "eslint": "^4.11.0",
@@ -26,6 +26,7 @@
     "eslint-plugin-import": "^2.3.0",
     "eslint-plugin-jest": "^21.3.2",
     "eslint-plugin-mocha": "^4.9.0",
+    "eslint-plugin-no-unsanitized": "^3.0.2",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-react": "^7.0.1",
     "expect.js": "^0.3.1"

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

@@ -7,7 +7,7 @@ import 'ui/autoload/styles';
 import './less/main.less';
 import { Main } from './components/main';
 
-const app = uiModules.get("apps/<%= camelCase(name) %>");
+const app = uiModules.get('apps/<%= camelCase(name) %>');
 
 app.config($locationProvider => {
   $locationProvider.html5Mode({
@@ -32,4 +32,4 @@ function RootController($scope, $element, $http) {
   });
 }
 
-chrome.setRootController("<%= camelCase(name) %>", RootController);
+chrome.setRootController('<%= camelCase(name) %>', RootController);

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   EuiPage,
   EuiPageHeader,
@@ -8,7 +8,7 @@ import {
   EuiPageContentHeader,
   EuiPageContentBody,
   EuiText
-} from "@elastic/eui";
+} from '@elastic/eui';
 
 export class Main extends React.Component {
   constructor(props) {
@@ -17,14 +17,14 @@ export class Main extends React.Component {
   }
 
   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) => {
+    httpClient.get('../api/<%= name %>/example').then((resp) => {
       this.setState({ time: resp.data.time });
-    });  
+    });
   }
   render() {
     const { title } = this.props;
@@ -44,8 +44,8 @@ export class Main extends React.Component {
             </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>
+                <h3>You have 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>
@@ -53,5 +53,4 @@ export class Main extends React.Component {
       </EuiPage>
     );
   }
-  
-};
+}