Rewrite report.js (#221)

* Rewrite report.js to a react component

README.md

@@ -50,6 +50,10 @@ This is simply a measurement of the number of vulnerabilities to the vulnerable
 
 > $ mvn clean package
 
+### Working with NodeJS
+
+This plugin used the same project setup as [sonar-custom-plugin-example][]. Checkout this project to get informations to work with NodeJS components.
+
 ## Distribution
 
 Ready to use binaries are available from [GitHub][] and [bintray][].
@@ -133,3 +137,4 @@ Permission to modify and redistribute is granted under the terms of the [LGPLv3]
 [sonarqube 5.x]: https://github.com/dependency-check/dependency-check-sonar-plugin/tree/SonarQube_5.x
 [sonarqube 6.x]: https://github.com/dependency-check/dependency-check-sonar-plugin/tree/SonarQube_6.x
 [bintray]: https://bintray.com/dependency-check/owasp/sonar-dependency-check
+[sonar-custom-plugin-example]: https://github.com/SonarSource/sonar-custom-plugin-example

sonar-dependency-check-plugin/.eslintrc.yml

@@ -0,0 +1,18 @@
+env:
+  browser: true
+  commonjs: true
+  node: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 2018
+  sourceType: module
+plugins:
+  - react
+rules: {}

sonar-dependency-check-plugin/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+target/
+node/

sonar-dependency-check-plugin/conf/env.js

@@ -0,0 +1,24 @@
+/*
+ * Copy from https://github.com/SonarSource/sonar-custom-plugin-example/blob/7.x/conf/env.js
+ *
+ * Copyright (C) 2017-2017 SonarSource SA
+ * All rights reserved
+ * mailto:info AT sonarsource DOT com
+ */
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment() {
+  return Object.keys(process.env).filter(key => REACT_APP.test(key)).reduce((env, key) => {
+    env['process.env.' + key] = JSON.stringify(process.env[key]);
+    return env;
+  }, {
+    // Useful for determining whether we’re running in production mode.
+    // Most importantly, it switches React into the correct mode.
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+  });
+}
+
+module.exports = getClientEnvironment;

sonar-dependency-check-plugin/conf/webpack/webpack.config.dev.js

@@ -0,0 +1,23 @@
+/*
+ * Copy from https://github.com/SonarSource/sonar-custom-plugin-example/blob/7.x/conf/webpack/webpack.config.dev.js
+ *
+ * Copyright (C) 2017-2017 SonarSource SA
+ * All rights reserved
+ * mailto:info AT sonarsource DOT com
+ */
+const webpack = require("webpack");
+const config = require("./webpack.config");
+
+config.devtool = "eval";
+
+config.output.publicPath = "/static/dependencycheck/";
+
+config.output.pathinfo = true;
+
+Object.keys(config.entry).forEach((key) => {
+  config.entry[key].unshift(require.resolve("react-dev-utils/webpackHotDevClient"));
+});
+
+config.plugins = [new webpack.HotModuleReplacementPlugin()];
+
+module.exports = config;

sonar-dependency-check-plugin/conf/webpack/webpack.config.js

@@ -0,0 +1,70 @@
+/*
+ * Copy from https://github.com/SonarSource/sonar-custom-plugin-example/blob/7.x/conf/webpack/webpack.config.js
+ *
+ * Copyright (C) 2017-2017 SonarSource SA
+ * All rights reserved
+ * mailto:info AT sonarsource DOT com
+ */
+const path = require("path");
+const autoprefixer = require("autoprefixer");
+
+module.exports = {
+  // Define the entry points here. They MUST have the same name as the page_id
+  // defined in src/main/java/org/sonarsource/plugins/example/web/MyPluginPageDefinition.java
+  entry: {
+    // Using React:
+    report_page: ["./src/main/js/report_page/index.js"],
+  },
+  output: {
+    // The entry point files MUST be shipped inside the final JAR's static/
+    // directory.
+    path: path.join(__dirname, "../../target/classes/static"),
+    filename: "[name].js"
+  },
+  resolve: {
+    root: path.join(__dirname, "src/main/js")
+  },
+  externals: {
+    // React 16.8 ships with SonarQube, and should be re-used to avoid
+    // collisions at runtime.
+    react: "React",
+    "react-dom": "ReactDOM",
+    // Register the Sonar* globals as packages, to simplify importing.
+    // See src/main/js/common/api.js for more information on what is exposed
+    // in SonarRequest.
+    "sonar-request": "SonarRequest",
+    // TODO: provide an example
+    "sonar-measures": "SonarMeasures",
+    // See src/main/js/portfolio_page/components/MeasuresHistory.js for some
+    // examples using React components from SonarQube.
+    "sonar-components": "SonarComponents"
+  },
+  module: {
+    // Our example uses Babel to transpile our code.
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: "babel",
+        exclude: /(node_modules)/
+      },
+      {
+        test: /\.css/,
+        loader: "style-loader!css-loader!postcss-loader"
+      },
+      { test: /\.json$/, loader: "json" }
+    ]
+  },
+  postcss() {
+    return [
+      autoprefixer({
+        browsers: [
+          "last 3 Chrome versions",
+          "last 3 Firefox versions",
+          "last 3 Safari versions",
+          "last 3 Edge versions",
+          "IE 11"
+        ]
+      })
+    ];
+  }
+};

sonar-dependency-check-plugin/conf/webpack/webpack.config.prod.js

@@ -0,0 +1,58 @@
+/*
+ * Copy from https://github.com/SonarSource/sonar-custom-plugin-example/blob/7.x/conf/webpack/webpack.config.prod.js
+ *
+ * Copyright (C) 2017-2017 SonarSource SA
+ * All rights reserved
+ * mailto:info AT sonarsource DOT com
+ */
+const webpack = require('webpack');
+const config = require('./webpack.config');
+const getClientEnvironment = require('../env');
+
+// Get environment variables to inject into our app.
+const env = getClientEnvironment();
+
+// Assert this just to be safe.
+// Development builds of React are slow and not intended for production.
+if (env['process.env.NODE_ENV'] !== '"production"') {
+  throw new Error('Production builds must have NODE_ENV=production.');
+}
+
+const noUglify = process.argv.some(arg => arg.indexOf('--no-uglify') > -1);
+
+// Don't attempt to continue if there are any errors.
+config.bail = true;
+
+config.plugins = [
+  // Makes some environment variables available to the JS code, for example:
+  // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+  // It is absolutely essential that NODE_ENV was set to production here.
+  // Otherwise React will be compiled in the very slow development mode.
+  new webpack.DefinePlugin(env),
+
+  // This helps ensure the builds are consistent if source hasn't changed:
+  new webpack.optimize.OccurrenceOrderPlugin(),
+
+  // Try to dedupe duplicated modules, if any:
+  new webpack.optimize.DedupePlugin()
+];
+
+if (!noUglify) {
+  config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        screw_ie8: true, // React doesn't support IE8
+        warnings: false
+      },
+      mangle: {
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+        screw_ie8: true
+      }
+    })
+  );
+}
+
+module.exports = config;