Build visual_review_toolbar with webpackvisual-review-script-webpack

3 files changed, 122 insertions, 78 deletions

diff --git a/public/-/visual-review-toolbar.js b/app/assets/javascripts/visual_review_toolbar/index.js
index 2cad4e430eb..4882084381d 100644
--- a/public/-/visual-review-toolbar.js
+++ b/app/assets/javascripts/visual_review_toolbar/index.js
@@ -104,7 +104,7 @@ const linkStyles = `
   background-image: none;
 `;
 
-const messageStyles =  `
+const messageStyles = `
   padding: .25rem 0;
   margin: 0;
   line-height: 1.2rem;
@@ -273,7 +273,7 @@ const comment = `
 
 const commentIcon = `
   <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/comment</title><path d="M4 11.132l1.446-.964A1 1 0 0 1 6 10h5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v6.132zM6.303 12l-2.748 1.832A1 1 0 0 1 2 13V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H6.303z" id="a"/></svg>
-`
+`;
 
 const compressIcon = `
   <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/compress</title><path d="M5.27 12.182l-1.562 1.561a1 1 0 0 1-1.414 0h-.001a1 1 0 0 1 0-1.415l1.56-1.56L2.44 9.353a.5.5 0 0 1 .353-.854H7.09a.5.5 0 0 1 .5.5v4.294a.5.5 0 0 1-.853.353l-1.467-1.465zm6.911-6.914l1.464 1.464a.5.5 0 0 1-.353.854H8.999a.5.5 0 0 1-.5-.5V2.793a.5.5 0 0 1 .854-.354l1.414 1.415 1.56-1.561a1 1 0 1 1 1.415 1.414l-1.561 1.56z" id="a"/></svg>
@@ -283,8 +283,7 @@ const collapseButton = `
   <button id='gitlab-collapse' style='${buttonClearStyles}' class='gitlab-collapse-open gitlab-button-secondary'>${compressIcon}</button>
 `;
 
-
-const form = (content) => `
+const form = content => `
   <div id='gitlab-form-wrapper'>
     ${content}
   </div>
@@ -310,28 +309,34 @@ const login = `
 ///////////////////////////////////////////////
 
 // from https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator
-function getBrowserId (sUsrAg) {
-  var aKeys = ["MSIE", "Edge", "Firefox", "Safari", "Chrome", "Opera"],
-      nIdx = aKeys.length - 1;
+function getBrowserId(sUsrAg) {
+  var aKeys = ['MSIE', 'Edge', 'Firefox', 'Safari', 'Chrome', 'Opera'],
+    nIdx = aKeys.length - 1;
 
   for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
   return aKeys[nIdx];
 }
 
-function addCommentButtonEvent () {
+function addCommentButtonEvent() {
   // get user agent data
-  const { innerWidth,
-          innerHeight,
-          location: { href },
-          navigator: {
-            platform, userAgent
-          } } = window;
+  const {
+    innerWidth,
+    innerHeight,
+    location: { href },
+    navigator: { platform, userAgent },
+  } = window;
   const browser = getBrowserId(userAgent);
 
   const scriptName = 'ReviewAppToolbar';
-  const projectId = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-project');
-  const discussionId = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-discussion');
-  const mrUrl = document.querySelector(`script[data-name='${scriptName}']`).getAttribute('data-mr-url');
+  const projectId = document
+    .querySelector(`script[data-name='${scriptName}']`)
+    .getAttribute('data-project');
+  const discussionId = document
+    .querySelector(`script[data-name='${scriptName}']`)
+    .getAttribute('data-discussion');
+  const mrUrl = document
+    .querySelector(`script[data-name='${scriptName}']`)
+    .getAttribute('data-mr-url');
   const commentButton = document.getElementById('gitlab-comment-button');
 
   const details = {
@@ -347,15 +352,14 @@ function addCommentButtonEvent () {
   };
 
   commentButton.onclick = postComment.bind(null, details);
-
 }
 
-function addCollapseEvent () {
+function addCollapseEvent() {
   const collapseButton = document.getElementById('gitlab-collapse');
   collapseButton.onclick = collapseForm;
 }
 
-function addCommentForm () {
+function addCommentForm() {
   const formWrapper = document.getElementById('gitlab-form-wrapper');
   formWrapper.innerHTML = comment;
   removeButtonAndClickEvent('gitlab-login', authorizeUser);
@@ -363,17 +367,21 @@ function addCommentForm () {
   addLogoutButtonEvent();
 }
 
-function addLoginButtonEvent () {
+function addLoginButtonEvent() {
   const loginButton = document.getElementById('gitlab-login');
-  if (loginButton) { loginButton.onclick = authorizeUser; }
+  if (loginButton) {
+    loginButton.onclick = authorizeUser;
+  }
 }
 
-function addLogoutButtonEvent () {
+function addLogoutButtonEvent() {
   const logoutButton = document.getElementById('gitlab-logout-button');
-  if (logoutButton) { logoutButton.onclick = logoutUser; }
+  if (logoutButton) {
+    logoutButton.onclick = logoutUser;
+  }
 }
 
-function addLoginForm () {
+function addLoginForm() {
   const formWrapper = document.getElementById('gitlab-form-wrapper');
   formWrapper.innerHTML = login;
   removeButtonAndClickEvent('gitlab-comment-button', authorizeUser);
@@ -382,8 +390,7 @@ function addLoginForm () {
   addLoginButtonEvent();
 }
 
-function authorizeUser () {
-
+function authorizeUser() {
   // Clear any old errors
   clearNote('gitlab-token');
 
@@ -401,16 +408,14 @@ function authorizeUser () {
 
   authSuccess(token);
   return;
-
 }
 
-function authSuccess (token) {
+function authSuccess(token) {
   data.token = token;
   addCommentForm();
 }
 
-
-function clearNote (inputId) {
+function clearNote(inputId) {
   const note = document.getElementById('gitlab-validation-note');
   note.innerText = '';
 
@@ -420,7 +425,7 @@ function clearNote (inputId) {
   }
 }
 
-function confirmAndClear (discussionId) {
+function confirmAndClear(discussionId) {
   const commentButton = document.getElementById('gitlab-comment-button');
   const note = document.getElementById('gitlab-validation-note');
 
@@ -429,44 +434,43 @@ function confirmAndClear (discussionId) {
 
   // we can add a fade animation here
   setTimeout(resetCommentButton, 1000);
-
 }
 
-function collapseForm () {
+function collapseForm() {
   const container = document.getElementById('gitlab-review-container');
   const collapseButton = document.getElementById('gitlab-collapse');
   const form = document.getElementById('gitlab-form-wrapper');
 
-  container.classList.replace('gitlab-open-wrapper', 'gitlab-closed-wrapper')
+  container.classList.replace('gitlab-open-wrapper', 'gitlab-closed-wrapper');
   container.style.backgroundColor = 'rgba(255, 255, 255, 0)';
   form.style.display = 'none';
 
-  collapseButton.classList.replace('gitlab-collapse-open', 'gitlab-collapse-closed')
+  collapseButton.classList.replace('gitlab-collapse-open', 'gitlab-collapse-closed');
   collapseButton.innerHTML = commentIcon;
   collapseButton.onclick = expandForm;
 }
 
-function expandForm () {
+function expandForm() {
   const container = document.getElementById('gitlab-review-container');
   const collapseButton = document.getElementById('gitlab-collapse');
   const form = document.getElementById('gitlab-form-wrapper');
 
-  container.classList.replace('gitlab-closed-wrapper', 'gitlab-open-wrapper')
+  container.classList.replace('gitlab-closed-wrapper', 'gitlab-open-wrapper');
   container.style.backgroundColor = 'rgba(255, 255, 255, 1)';
   form.style.display = 'flex';
 
-  collapseButton.classList.replace('gitlab-collapse-closed', 'gitlab-collapse-open')
+  collapseButton.classList.replace('gitlab-collapse-closed', 'gitlab-collapse-open');
   collapseButton.innerHTML = compressIcon;
   collapseButton.onclick = collapseForm;
 }
 
-function getInitialState () {
+function getInitialState() {
   const { localStorage } = window;
 
   if (!localStorage || !localStorage.getItem('token')) {
     return {
       content: login,
-      addEvent: addLoginButtonEvent
+      addEvent: addLoginButtonEvent,
     };
   }
 
@@ -477,11 +481,11 @@ function getInitialState () {
     addEvent: () => {
       addCommentButtonEvent();
       addLogoutButtonEvent();
-    }
+    },
   };
 }
 
-function logoutUser () {
+function logoutUser() {
   const { localStorage } = window;
 
   // All the browsers we support have localStorage, so let's silently fail
@@ -494,7 +498,7 @@ function logoutUser () {
   addLoginForm();
 }
 
-function postComment ({
+function postComment({
   href,
   platform,
   browser,
@@ -505,7 +509,6 @@ function postComment ({
   discussionId,
   mrUrl,
 }) {
-
   // Clear any old errors
   clearNote();
 
@@ -520,7 +523,7 @@ function postComment ({
       <br /><br />
       *User agent: ${userAgent}*
     </details>
-  `
+  `;
 
   const url = `
     ${mrUrl}/api/v4/projects/${projectId}/issues/${discussionId}/discussions`;
@@ -528,31 +531,31 @@ function postComment ({
   const body = `${commentText}${detailText}`;
 
   fetch(url, {
-     method: 'POST',
-     headers: {
+    method: 'POST',
+    headers: {
       'PRIVATE-TOKEN': data.token,
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ body }),
   })
-  .then((response) => {
-
-    if (response.ok) {
-      confirmAndClear(discussionId);
-      return;
-    }
-
-    throw new Error(`${response.status}: ${response.statusText}`)
-
-  })
-  .catch((err) => {
-    postError(`The feedback was not sent successfully. Please try again. Error: ${err.message}`, 'gitlab-comment');
-    resetCommentBox();
-  });
-
+    .then(response => {
+      if (response.ok) {
+        confirmAndClear(discussionId);
+        return;
+      }
+
+      throw new Error(`${response.status}: ${response.statusText}`);
+    })
+    .catch(err => {
+      postError(
+        `The feedback was not sent successfully. Please try again. Error: ${err.message}`,
+        'gitlab-comment',
+      );
+      resetCommentBox();
+    });
 }
 
-function postError (message, inputId) {
+function postError(message, inputId) {
   const note = document.getElementById('gitlab-validation-note');
   const field = document.getElementById(inputId);
   field.style.borderColor = '#db3b21';
@@ -560,7 +563,7 @@ function postError (message, inputId) {
   note.innerText = message;
 }
 
-function removeButtonAndClickEvent (buttonId, eventListener) {
+function removeButtonAndClickEvent(buttonId, eventListener) {
   const button = document.getElementById(buttonId);
   if (button) {
     button.removeEventListener(eventListener);
@@ -599,8 +602,7 @@ function setInProgressState() {
   commentBox.style.pointerEvents = 'none';
 }
 
-function storeToken (token) {
-
+function storeToken(token) {
   const { localStorage } = window;
 
   // All the browsers we support have localStorage, so let's silently fail
@@ -610,10 +612,8 @@ function storeToken (token) {
   }
 
   localStorage.setItem('token', token);
-
 }
 
-
 ///////////////////////////////////////////////
 ///////////////// INJECTION //////////////////
 ///////////////////////////////////////////////
diff --git a/config/karma.config.js b/config/karma.config.js
index 83ba46345f2..cfbe7d82dfc 100644
--- a/config/karma.config.js
+++ b/config/karma.config.js
@@ -3,7 +3,7 @@ const glob = require('glob');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const argumentsParser = require('commander');
-const webpackConfig = require('./webpack.config.js');
+const webpackConfig = require('./webpack.config.js')[0];
 const IS_EE = require('./helpers/is_ee_env');
 
 const ROOT_PATH = path.resolve(__dirname, '..');
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 19b48845305..821e4e5b735 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -102,15 +102,32 @@ if (IS_EE) {
   });
 }
 
-module.exports = {
+const baseConfig = {
   mode: IS_PRODUCTION ? 'production' : 'development',
 
   context: path.join(ROOT_PATH, 'app/assets/javascripts'),
 
+  output: {
+    path: path.join(ROOT_PATH, 'public/assets/webpack'),
+  },
+
+  plugins: [
+    // compression can require a lot of compute time and is disabled in CI
+    new CompressionPlugin(),
+  ].filter(Boolean),
+
+  devtool: NO_SOURCEMAPS ? false : devtool,
+};
+
+const mainConfig = {
+  ...baseConfig,
+
+  name: 'main',
+
   entry: generateEntries,
 
   output: {
-    path: path.join(ROOT_PATH, 'public/assets/webpack'),
+    ...baseConfig.output,
     publicPath: '/assets/webpack/',
     filename: IS_PRODUCTION ? '[name].[chunkhash:8].bundle.js' : '[name].bundle.js',
     chunkFilename: IS_PRODUCTION ? '[name].[chunkhash:8].chunk.js' : '[name].chunk.js',
@@ -236,6 +253,7 @@ module.exports = {
   },
 
   plugins: [
+    ...baseConfig.plugins,
     // manifest filename must match config.webpack.manifest_filename
     // webpack-rails only needs assetsByChunkName to function properly
     new StatsWriterPlugin({
@@ -268,7 +286,7 @@ module.exports = {
     }),
 
     new webpack.NormalModuleReplacementPlugin(/^ee_component\/(.*)\.vue/, function(resource) {
-      if (Object.keys(module.exports.resolve.alias).indexOf('ee') >= 0) {
+      if (Object.keys(module.exports[0].resolve.alias).indexOf('ee') >= 0) {
         resource.request = resource.request.replace(/^ee_component/, 'ee');
       } else {
         resource.request = path.join(
@@ -278,9 +296,6 @@ module.exports = {
       }
     }),
 
-    // compression can require a lot of compute time and is disabled in CI
-    IS_PRODUCTION && !NO_COMPRESSION && new CompressionPlugin(),
-
     // WatchForChangesPlugin
     // TODO: publish this as a separate plugin
     IS_DEV_SERVER && {
@@ -339,8 +354,37 @@ module.exports = {
     inline: DEV_SERVER_LIVERELOAD,
   },
 
-  devtool: NO_SOURCEMAPS ? false : devtool,
-
   // sqljs requires fs
   node: { fs: 'empty' },
 };
+
+const visualReviewToolbarConfig = {
+  ...baseConfig,
+
+  name: 'visual_review_toolbar',
+
+  entry: './visual_review_toolbar',
+
+  output: {
+    ...baseConfig.output,
+    filename: 'visual_review_toolbar.js',
+    library: 'VisualReviewToolbar',
+    libraryTarget: 'var',
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          cacheDirectory: path.join(CACHE_PATH, 'babel-loader'),
+        },
+      },
+    ],
+  },
+
+  plugins: [...baseConfig.plugins],
+};
+
+module.exports = [mainConfig, visualReviewToolbarConfig];