Build visual_review_toolbar with webpack

It takes a lot of lines to move a script

app/assets/javascripts/visual_review_toolbar/index.js

+import './styles/toolbar.css';
+import 'vendor/visual_review_toolbar';

app/assets/javascripts/visual_review_toolbar/styles/toolbar.css

+/*
+  As a standalone script, the toolbar has its own css
+ */
+
+#gitlab-collapse > * {
+  pointer-events: none;
+}
+
+#gitlab-form-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%
+}
+
+#gitlab-review-container {
+  max-width: 22rem;
+  max-height: 22rem;
+  overflow: scroll;
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 1rem;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji';
+  font-size: .8rem;
+  font-weight: 400;
+  color: #2e2e2e;
+}
+
+.gitlab-open-wrapper {
+  max-width: 22rem;
+  max-height: 22rem;
+}
+
+.gitlab-closed-wrapper {
+  max-width: 3.4rem;
+  max-height: 3.4rem;
+}
+
+.gitlab-button {
+  cursor: pointer;
+  transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear, box-shadow 100ms linear;
+}
+
+.gitlab-button-secondary {
+  background: none #fff;
+  margin: 0 .5rem;
+  border: 1px solid #e3e3e3;
+}
+
+.gitlab-button-secondary:hover {
+  background-color: #f0f0f0;
+  border-color: #e3e3e3;
+  color: #2e2e2e;
+}
+
+.gitlab-button-secondary:active {
+  color: #2e2e2e;
+  background-color: #e1e1e1;
+  border-color: #dadada;
+}
+
+.gitlab-button-success:hover {
+  color: #fff;
+  background-color: #137e3f;
+  border-color: #127339;
+}
+
+.gitlab-button-success:active {
+  background-color: #168f48;
+  border-color: #12753a;
+  color: #fff;
+}
+
+.gitlab-button-success {
+  background-color: #1aaa55;
+  border: 1px solid #168f48;
+  color: #fff;
+}
+
+.gitlab-button-wide {
+  width: 100%;
+}
+
+.gitlab-button-wrapper {
+  margin-top: 1rem;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+.gitlab-collapse {
+  width: 2.4rem;
+  height: 2.2rem;
+  margin-left: 1rem;
+  padding: .5rem;
+}
+
+.gitlab-collapse-closed {
+  align-self: center;
+}
+
+.gitlab-checkbox-label {
+  padding: 0 .2rem;
+}
+
+.gitlab-checkbox-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+.gitlab-label {
+  font-weight: 600;
+  display: inline-block;
+  width: 100%;
+}
+
+.gitlab-link {
+  color: #1b69b6;
+  text-decoration: none;
+  background-color: transparent;
+  background-image: none;
+}
+
+.gitlab-message {
+  padding: .25rem 0;
+  margin: 0;
+  line-height: 1.2rem;
+}
+
+.gitlab-metadata-note {
+  font-size: .7rem;
+  line-height: 1rem;
+  color: #666;
+  margin-bottom: 0;
+}
+
+.gitlab-input {
+  width: 100%;
+  border: 1px solid #dfdfdf;
+  border-radius: 4px;
+  padding: .1rem .2rem;
+  min-height: 2rem;
+  max-width: 17rem;
+}

config/webpack.config.review_toolbar.js

+const path = require('path');
+const CompressionPlugin = require('compression-webpack-plugin');
+
+const ROOT_PATH = path.resolve(__dirname, '..');
+const CACHE_PATH = process.env.WEBPACK_CACHE_PATH || path.join(ROOT_PATH, 'tmp/cache');
+const NO_SOURCEMAPS = process.env.NO_SOURCEMAPS;
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
+const devtool = IS_PRODUCTION ? 'source-map' : 'cheap-module-eval-source-map';
+
+const alias = {
+  vendor: path.join(ROOT_PATH, 'vendor/assets/javascripts'),
+  spec: path.join(ROOT_PATH, 'spec/javascripts'),
+};
+
+module.exports = {
+  mode: IS_PRODUCTION ? 'production' : 'development',
+
+  context: path.join(ROOT_PATH, 'app/assets/javascripts'),
+
+  name: 'visual_review_toolbar',
+
+  entry: './visual_review_toolbar',
+
+  output: {
+    path: path.join(ROOT_PATH, 'public/assets/webpack'),
+    filename: 'visual_review_toolbar.js',
+    library: 'VisualReviewToolbar',
+    libraryTarget: 'var',
+  },
+
+  resolve: {
+    alias,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: path.join(CACHE_PATH, 'babel-loader'),
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+
+  plugins: [
+    // compression can require a lot of compute time and is disabled in CI
+    new CompressionPlugin(),
+  ].filter(Boolean),
+
+  devtool: NO_SOURCEMAPS ? false : devtool,
+};

lib/gitlab/path_regex.rb

@@ -58,7 +58,6 @@ module Gitlab
       uploads
       users
       v2
-      visual-review-toolbar.js
     ].freeze
 
     # This list should contain all words following `/*namespace_id/:project_id` in

lib/tasks/gitlab/assets.rake

@@ -10,9 +10,15 @@ namespace :gitlab do
         rake:assets:precompile
         webpack:compile
         gitlab:assets:fix_urls
+        gitlab:assets:compile_vrt
       ].each(&Gitlab::TaskHelpers.method(:invoke_and_time_task))
     end
 
+    desc 'GitLab | Assets | Compile visual review toolbar'
+    task :compile_vrt do
+      system 'yarn', 'webpack-vrt'
+    end
+
     desc 'GitLab | Assets | Clean up old compiled frontend assets'
     task clean: ['rake:assets:clean']
 

package.json

@@ -25,7 +25,8 @@
     "stylelint-create-utility-map": "node scripts/frontend/stylelint/stylelint-utility-map.js",
     "test": "node scripts/frontend/test",
     "webpack": "NODE_OPTIONS=\"--max-old-space-size=3584\" webpack --config config/webpack.config.js",
-    "webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js"
+    "webpack-prod": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.js",
+    "webpack-vrt": "NODE_OPTIONS=\"--max-old-space-size=3584\" NODE_ENV=production webpack --config config/webpack.config.review_toolbar.js"
   },
   "dependencies": {
     "@babel/core": "^7.4.4",