bugy#282 migrated index page to vue-cli structure + got rid of jQuery…

… in production
antonellocaroli · Aug 1, 2020 · 98cbf4c · 98cbf4c
1 parent 38f6bb3
commit 98cbf4c
Show file tree

Hide file tree

Showing 51 changed files with 297 additions and 236 deletions.
diff --git a/.gitignore b/.gitignore
@@ -71,5 +71,9 @@ temp
 /web
 web-src/node_modules
 web-src/package-lock.json
+web-src/tests/e2e/reports/
+web-src/selenium-debug.log
+web-src/chromedriver.log
+web-src/geckodriver.log
 
 venv/
diff --git a/web-src/babel.config.js b/web-src/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+};
diff --git a/web-src/package.json b/web-src/package.json
@@ -1,63 +1,52 @@
 {
   "name": "script-server",
   "version": "1.15.0",
+  "private": true,
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "axios": "^0.19.2",
     "core-js": "^3.6.4",
-    "jquery": "^3.4.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.5",
+    "vuex": "^3.1.2",
+    "axios": "^0.19.2",
     "marked": "^0.7.0",
     "material-design-icons": "^3.0.1",
     "materialize-css": "^1.0.0",
-    "typeface-roboto": "0.0.54",
-    "vue": "^2.6.11",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
+    "typeface-roboto": "0.0.75"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/preset-env": "^7.7.7",
     "@stryker-mutator/babel-transpiler": "^1.3.1",
     "@stryker-mutator/core": "^1.3.1",
     "@stryker-mutator/javascript-mutator": "^1.3.1",
     "@stryker-mutator/karma-runner": "^1.3.1",
     "@stryker-mutator/mocha-framework": "^1.3.1",
     "@stryker-mutator/webpack-transpiler": "^1.3.1",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-e2e-nightwatch": "~4.2.0",
+    "@vue/cli-plugin-router": "~4.2.0",
+    "@vue/cli-plugin-unit-mocha": "~4.2.0",
+    "@vue/cli-plugin-vuex": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "@vue/test-utils": "1.0.0-beta.31",
     "axios-mock-adapter": "^1.18.1",
-    "babel-loader": "^8.1.0",
     "babel-plugin-rewire": "^1.2.0",
-    "chai": "^4.2.0",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.0",
-    "html-webpack-plugin": "^3.2.0",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-mocha": "^1.3.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "^4.0.2",
-    "mini-css-extract-plugin": "^0.5.0",
-    "mocha": "^5.2.0",
+    "chai": "^4.1.2",
+    "chromedriver": "80",
+    "geckodriver": "^1.19.1",
+    "jquery": "^3.4.1",
     "mock-socket": "^9.0.2",
     "sinon": "^7.5.0",
-    "style-loader": "^0.23.1",
-    "url-loader": "^2.3.0",
-    "vue-loader": "^15.8.3",
-    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1",
-    "webpack-merge": "^4.2.2"
+    "http-proxy-middleware": "^1.0.3"
   },
   "scripts": {
-    "start:dev": "webpack-dev-server --config webpack.dev.js",
-    "build:prod": "webpack --mode production --config webpack.prod.js",
-    "build:dev": "webpack --mode development --config webpack.dev.js",
-    "test": "karma start tests/karma.conf.js",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
     "stryker": "stryker run tests/stryker.conf.js"
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
 }
diff --git a/web-src/public/index.html b/web-src/public/index.html
@@ -6,20 +6,12 @@
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
 
-    <% for (var css in htmlWebpackPlugin.files.css) { %>
-    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
-    <% } %>
+    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
 
-    <link rel="stylesheet" href="css/index.css">
-    <link rel="stylesheet" href="css/bash_styles.css">
-
-    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
-    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
-    <% } %>
 </head>
 
 <body>
-<div id='index-page'></div>
+<div id="app"></div>
 </body>
 
 </html>
diff --git a/web-src/src/admin/components/scripts-config/ParameterConfigForm.vue b/web-src/src/admin/components/scripts-config/ParameterConfigForm.vue
@@ -69,10 +69,10 @@
     import Vue from 'vue';
     import {forEachKeyValue, isEmptyString} from '../../common';
     import Checkbox from '../../components/checkbox';
+    import ChipsList from '../../components/ChipsList';
     import Combobox from '../../components/combobox';
     import TextArea from '../../components/TextArea';
     import Textfield from '../../components/textfield';
-    import ChipsList from '../../components/ChipsList';
     import {
         allowedValuesFromScriptField,
         allowedValuesScriptField,
@@ -171,18 +171,18 @@
                 fileType: null,
                 fileExtensions: null,
                 nameField,
-                argField: $.extend({}, argField),
+                argField: Object.assign({}, argField),
                 envVarField,
                 typeField,
                 noValueField,
                 requiredField,
                 secureField,
                 descriptionField,
                 minField,
-                maxField: $.extend({}, maxField),
+                maxField: Object.assign({}, maxField),
                 allowedValuesScriptField,
                 allowedValuesFromScriptField,
-                defaultValueField: $.extend({}, defaultValueField),
+                defaultValueField: Object.assign({}, defaultValueField),
                 constantField,
                 multipleArgumentsField,
                 separatorField,

diff --git a/web-src/src/admin/components/scripts-config/ScriptParamList.vue b/web-src/src/admin/components/scripts-config/ScriptParamList.vue
@@ -60,11 +60,12 @@
                     displayLength: 8000
                 });
 
-                $(toast.el).find('button').click(() => {
+                const undoButton = toast.el.getElementsByTagName('BUTTON')[0];
+                undoButton.onclick = () => {
                     toast.dismiss();
                     const insertPosition = Math.min(index, this.parameters.length);
                     this.parameters.splice(insertPosition, 0, param);
-                });
+                };
             },
 
             moveUp(param) {
@@ -124,7 +125,7 @@
             },
 
             scrollToNewParam() {
-                const parameterElements = $(this.$refs.parametersPanel).children('li');
+                const parameterElements = this.$refs.parametersPanel.getElementsByTagName('li');
                 const newParamElement = parameterElements[parameterElements.length - 2];
 
                 newParamElement.scrollIntoView();

diff --git a/web-src/src/admin/store/script-config-module.js b/web-src/src/admin/store/script-config-module.js
@@ -1,6 +1,7 @@
+import {contains, forEachKeyValue, isEmptyArray, isEmptyValue} from '@/common/utils/common';
 import axios from 'axios';
-import {contains, forEachKeyValue, isEmptyArray, isEmptyValue} from '../../common';
-import router from '../router'
+import {cloneDeep} from 'lodash'
+import router from '../router/router'
 
 const allowedEmptyValuesInParam = ['name'];
 
@@ -55,7 +56,7 @@ export default {
         },
 
         save({dispatch, state}) {
-            const config = $.extend({}, state.scriptConfig);
+            const config = cloneDeep(state.scriptConfig);
             const oldName = state.scriptName;
 
             removeEmptyValues(config);

diff --git a/web-src/src/assets/css/index.css b/web-src/src/assets/css/index.css
@@ -89,10 +89,10 @@ input[type=checkbox]:not(.browser-default) + span {
     margin: auto;
 
     border-top: 50px solid;
-    -moz-border-image: url("../images/titleBackground.jpg") 300;
-    -webkit-border-image: url("../images/titleBackground.jpg") 300;
-    -o-border-image: url("../images/titleBackground.jpg") 300;
-    border-image: url("../images/titleBackground.jpg") 300;
+    -moz-border-image: url("../titleBackground.jpg") 300;
+    -webkit-border-image: url("../titleBackground.jpg") 300;
+    -o-border-image: url("../titleBackground.jpg") 300;
+    border-image: url("../titleBackground.jpg") 300;
 }
 
 #login-panel .login-form .input-field {
@@ -152,7 +152,7 @@ input[type=checkbox]:not(.browser-default) + span {
     box-shadow: 0 1px 3px -1px #202020;
     border: none;
 
-    background-image: url('../images/g-logo-plain.png');
+    background-image: url('../g-logo-plain.png');
     background-color: white;
     background-position-y: 50%;
     background-position-x: -4px;
@@ -162,7 +162,7 @@ input[type=checkbox]:not(.browser-default) + span {
 
 #login-google_oauth-button:active {
     background-color: #EEE;
-    background-image: url('../images/g-logo-plain-pressed.png');
+    background-image: url('../g-logo-plain-pressed.png');
 }
 
 #login-google_oauth-button[disabled] {
@@ -198,6 +198,6 @@ input[type=checkbox]:not(.browser-default) + span {
 }
 
 .main-content-header {
-    background: url('../images/titleBackground.jpg') no-repeat center;
+    background: url('../titleBackground.jpg') no-repeat center;
     background-size: cover;
 }
diff --git a/web-src/src/common/components/AppLayout.vue b/web-src/src/common/components/AppLayout.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-    import {hasClass, isNull} from '../common';
+    import {hasClass, isNull} from '@/common/utils/common';
 
     export default {
         name: 'AppLayout',

diff --git a/web-src/src/common/components/ChipsList.vue b/web-src/src/common/components/ChipsList.vue
@@ -6,8 +6,8 @@
 </template>
 
 <script>
+    import {isNull} from '@/common/utils/common';
     import * as M from 'materialize-css';
-    import {isNull} from '../common';
 
     export default {
         name: 'ChipsList',

diff --git a/web-src/src/common/components/ComboboxSearch.vue b/web-src/src/common/components/ComboboxSearch.vue
@@ -12,7 +12,16 @@
 </template>
 
 <script>
-    import {addClass, destroyChildren, hasClass, isEmptyString, isNull, removeClass, uuidv4} from '../../common';
+    import {
+        addClass,
+        destroyChildren,
+        hasClass,
+        isEmptyString,
+        isNull,
+        removeClass,
+        uuidv4
+    } from '@/common/utils/common';
+    import {closestByClass} from '../utils/common';
 
     export default {
         name: 'ComboboxSearch',
@@ -75,13 +84,12 @@
                     comboboxWrapper.dropdown.dropdownEl.style.maxHeight = null;
                 });
 
-                $(comboboxWrapper.dropdown.dropdownEl).find('.disabled').each(function () {
-                    destroyChildren(this);
-
-                    this.appendChild(searchElement);
-
-                    addClass(this, 'combobox-search-header');
-                });
+                const headerItems = comboboxWrapper.dropdown.dropdownEl.getElementsByClassName('disabled');
+                for (const headerItem of headerItems) {
+                    destroyChildren(headerItem);
+                    headerItem.appendChild(searchElement);
+                    addClass(headerItem, 'combobox-search-header');
+                }
 
                 this.executeSearch(this.value);
 
@@ -106,17 +114,18 @@
             executeSearch(searchString) {
                 searchString = searchString.toLowerCase();
 
-                $(this.comboboxWrapper.dropdown.dropdownEl).children('li').each(function () {
-                    const keepElement = this.textContent.toLowerCase().includes(searchString)
-                        || hasClass(this, 'disabled')
-                        || hasClass(this, 'selected');
+                const items = this.comboboxWrapper.dropdown.dropdownEl.getElementsByTagName('li');
+                for (const item of items) {
+                    const keepElement = item.textContent.toLowerCase().includes(searchString)
+                        || hasClass(item, 'disabled')
+                        || hasClass(item, 'selected');
 
                     if (keepElement) {
-                        removeClass(this, 'search-hidden');
+                        removeClass(item, 'search-hidden');
                     } else {
-                        addClass(this, 'search-hidden');
+                        addClass(item, 'search-hidden');
                     }
-                });
+                }
             },
 
             // when user inputs a letter, combobox focuses an element starting with this letter
@@ -144,8 +153,8 @@
         comboboxWrapper.dropdown.options.closeOnClick = false;
 
         const autoclose = (e) => {
-            const closest = $(e.target).closest('.input-field');
-            if (closest.hasClass('combobox-search')) {
+            const closest = closestByClass(e.target, 'input-field');
+            if (!isNull(closest) && hasClass(closest, 'combobox-search')) {
                 return;
             }
 

diff --git a/web-src/src/common/components/PromisableButton.vue b/web-src/src/common/components/PromisableButton.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-    import {isEmptyString} from '../common';
+    import {isEmptyString} from '@/common/utils/common';
 
     export default {
         name: 'PromisableButton',

diff --git a/web-src/src/common/components/TextArea.vue b/web-src/src/common/components/TextArea.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-    import {isBlankString, isNull} from '../common';
+    import {isBlankString, isNull} from '@/common/utils/common';
 
     export default {
         name: 'TextArea',

diff --git a/web-src/src/common/components/checkbox.vue b/web-src/src/common/components/checkbox.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-    import {toBoolean} from '../common';
+    import {toBoolean} from '@/common/utils/common';
 
     export default {
         props: {