wizard: lint redirects_app

- update eslint to support import.meta
- update eslint plugins
- update eslint config
- add script to run eslint --fix
- adapt code to comply with the rules

campaignion_wizard/redirects_app/.eslintignore

@@ -1,2 +1 @@
-build/*.js
-config/*.js
+dist/

campaignion_wizard/redirects_app/.eslintrc.yml

@@ -1,22 +1,27 @@
 root: true
-extends: standard
+plugins:
+  - babel
+  - html
+  - mocha
+extends:
+  - standard
+  - plugin:vue/base
 env:
   browser: true
+  mocha: true
 globals:
+  assert: false
   Drupal: false
-parser: 'babel-eslint'
-parserOptions:
-  sourceType: module
-plugins:
-  - html
+  globalThis: false
 rules:
   allow-parens: 0
   generator-star-spacing: 0
   no-multi-spaces:
     - error
     - {ignoreEOLComments: true}
   no-debugger: 0
-  require-jsdoc: error
-  valid-jsdoc:
-    - error
-    - {requireReturn: false}
+overrides:
+  -
+    files: test/**/specs/**/*.js
+    rules:
+      no-unused-expressions: off

campaignion_wizard/redirects_app/api-server.mjs

@@ -1,4 +1,3 @@
-import path from 'path'
 import fakeNodes from './test/fixtures/node-list.mjs'
 import jsonServer from 'json-server'
 const server = jsonServer.create()

campaignion_wizard/redirects_app/drupal-fixture.js

@@ -1,7 +1,7 @@
 // This module is used to provide the Drupal global in development and test mode.
 // Functions taken from drupal.js.
 
-import exampleData from '/test/fixtures/example-data'
+import exampleData from './test/fixtures/example-data'
 
 const Drupal = {
   settings: {
@@ -18,16 +18,17 @@ const Drupal = {
    * @ingroup sanitization
    */
   checkPlain: function (str) {
-    var character, regex,
-        replace = { '&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;' };
-    str = String(str);
+    let character; let regex
+
+    const replace = { '&': '&amp;', '"': '&quot;', '<': '&lt;', '>': '&gt;' }
+    str = String(str)
     for (character in replace) {
-      if (replace.hasOwnProperty(character)) {
-        regex = new RegExp(character, 'g');
-        str = str.replace(regex, replace[character]);
+      if (Object.hasOwn(replace, character)) {
+        regex = new RegExp(character, 'g')
+        str = str.replace(regex, replace[character])
       }
     }
-    return str;
+    return str
   },
 
   /**
@@ -47,26 +48,26 @@ const Drupal = {
    * @see Drupal.t()
    * @ingroup sanitization
    */
-  formatString: function(str, args) {
+  formatString: function (str, args) {
     // Transform arguments before inserting them.
-    for (var key in args) {
+    for (const key in args) {
       switch (key.charAt(0)) {
         // Escaped only.
         case '@':
-          args[key] = Drupal.checkPlain(args[key]);
-        break;
+          args[key] = Drupal.checkPlain(args[key])
+          break
         // Pass-through.
         case '!':
-          break;
+          break
         // Escaped and placeholder.
         case '%':
         default:
-          args[key] = Drupal.theme('placeholder', args[key]);
-          break;
+          args[key] = Drupal.theme('placeholder', args[key])
+          break
       }
-      str = str.replace(key, args[key]);
+      str = str.replace(key, args[key])
     }
-    return str;
+    return str
   },
 
   /**
@@ -89,18 +90,18 @@ const Drupal = {
    *   The translated string.
    */
   t: function (str, args, options) {
-    options = options || {};
-    options.context = options.context || '';
+    options = options || {}
+    options.context = options.context || ''
 
     // Fetch the localized version of the string.
     if (Drupal.locale.strings && Drupal.locale.strings[options.context] && Drupal.locale.strings[options.context][str]) {
-      str = Drupal.locale.strings[options.context][str];
+      str = Drupal.locale.strings[options.context][str]
     }
 
     if (args) {
-      str = Drupal.formatString(str, args);
+      str = Drupal.formatString(str, args)
     }
-    return str;
+    return str
   },
 
   /**
@@ -133,21 +134,19 @@ const Drupal = {
    *   A translated string.
    */
   formatPlural: function (count, singular, plural, args, options) {
-    var args = args || {};
-    args['@count'] = count;
+    args = args || {}
+    args['@count'] = count
     // Determine the index of the plural form.
-    var index = Drupal.locale.pluralFormula ? Drupal.locale.pluralFormula(args['@count']) : ((args['@count'] == 1) ? 0 : 1);
+    const index = Drupal.locale.pluralFormula ? Drupal.locale.pluralFormula(args['@count']) : ((args['@count'] === 1) ? 0 : 1)
 
-    if (index == 0) {
-      return Drupal.t(singular, args, options);
-    }
-    else if (index == 1) {
-      return Drupal.t(plural, args, options);
-    }
-    else {
-      args['@count[' + index + ']'] = args['@count'];
-      delete args['@count'];
-      return Drupal.t(plural.replace('@count', '@count[' + index + ']'), args, options);
+    if (index === 0) {
+      return Drupal.t(singular, args, options)
+    } else if (index === 1) {
+      return Drupal.t(plural, args, options)
+    } else {
+      args['@count[' + index + ']'] = args['@count']
+      delete args['@count']
+      return Drupal.t(plural.replace('@count', '@count[' + index + ']'), args, options)
     }
   },
 
@@ -172,9 +171,9 @@ const Drupal = {
    *   but also a complex object.
    */
   theme: function (func) {
-    var args = Array.prototype.slice.apply(arguments, [1]);
+    const args = Array.prototype.slice.apply(arguments, [1])
 
-    return (Drupal.theme[func] || Drupal.theme.prototype[func]).apply(this, args);
+    return (Drupal.theme[func] || Drupal.theme.prototype[func]).apply(this, args)
   }
 }
 

campaignion_wizard/redirects_app/nightwatch.conf.js

@@ -18,10 +18,10 @@ module.exports = {
     port: 9515
   },
 
-  test_settings : {
-    default : {
-      desiredCapabilities : {
-        browserName : 'chrome'
+  test_settings: {
+    default: {
+      desiredCapabilities: {
+        browserName: 'chrome'
       },
       screenshots: {
         enabled: true,

campaignion_wizard/redirects_app/package.json

@@ -10,7 +10,8 @@
     "preview": "concurrently \"vite preview --port 4173\" \"node api-server.mjs\"",
     "unit": "vitest run --environment jsdom",
     "e2e": "start-server-and-test preview http://localhost:4173/ 'PREVIEW_PORT=4173 NODE_ENV=testing nightwatch test/e2e/'",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs",
+    "fix": "eslint . --fix --ext .vue,.js,.jsx,.cjs,.mjs"
   },
   "dependencies": {
     "axios": "0.21.1",
@@ -22,14 +23,18 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue2": "1.1.2",
-    "babel-eslint": "7.2.3",
     "chromedriver": "119.0.1",
     "concurrently": "7.6.0",
-    "eslint": "5.4.0",
-    "eslint-config-standard": "6.2.1",
-    "eslint-plugin-html": "4.0.5",
-    "eslint-plugin-promise": "3.4.0",
-    "eslint-plugin-standard": "2.0.1",
+    "eslint": "8.52.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-html": "7.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-mocha": "^10.2.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^9.18.1",
     "jsdom": "20.0.3",
     "json-server": "0.12.2",
     "nightwatch": "1.7.13",

campaignion_wizard/redirects_app/src/App.vue

@@ -27,9 +27,9 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import { mapState } from 'vuex'
 import isEqual from 'lodash/isEqual'
-import {clone, dispatch, validateDestination} from '@/utils'
+import { clone, dispatch, validateDestination } from '@/utils'
 import api from '@/utils/api'
 import RedirectList from './components/RedirectList.vue'
 import RedirectDialog from './components/RedirectDialog.vue'
@@ -142,8 +142,6 @@ export default {
         } else {
           leavePage()
         }
-
-        return
       } else if (e.type === 'request-submit-page') {
         // User clicked one of the submit buttons.
 
@@ -201,11 +199,11 @@ export default {
     persistData () {
       return new Promise((resolve, reject) => {
         // Append the default redirect to the redirects array.
-        var redirects = clone(this.redirects)
+        const redirects = clone(this.redirects)
         redirects.push(clone(this.defaultRedirect))
         api.postData({
           url: this.$root.$options.settings.endpoints.redirects,
-          data: {redirects},
+          data: { redirects },
           headers: {}
         }).then(() => {
           resolve()

campaignion_wizard/redirects_app/src/components/DestinationField.vue

@@ -37,7 +37,7 @@ You can use this component with `v-model` to get/set its value.
 </template>
 
 <script>
-import {fixedEncodeURIComponent, escapeRegExp} from '../utils'
+import { fixedEncodeURIComponent, escapeRegExp } from '../utils'
 
 const _DELAY_ = 200
 
@@ -123,7 +123,7 @@ export default {
       return {
         template: typeof this.template === 'string' ? '<span v-html="this.template"></span>' : '<span v-html="highlight(item.' + this.labelKey + ', value)"></span>',
         props: {
-          item: {default: null},
+          item: { default: null },
           value: String
         },
         methods: {
@@ -187,7 +187,7 @@ export default {
       if (this.urlMode) {
         return
       }
-      var lastVal = this.val
+      const lastVal = this.val
       setTimeout(() => {
         // Only query if the value didn’t change during the delay period.
         if (this.val === lastVal) {
@@ -208,7 +208,7 @@ export default {
       }).then(response => {
         // get the search term from the url
         const re = new RegExp('[&|?]' + this.queryParam + '=([^&]*)')
-        var searchVal
+        let searchVal
         try {
           searchVal = response.config.url.match(re)[1]
         } catch (error) {
@@ -217,7 +217,7 @@ export default {
         // Throw the response away if the typeahead value has changed in the meantime.
         if (fixedEncodeURIComponent(this.val) !== searchVal) return
 
-        var data = response.data
+        const data = response.data
         this.items = (this.dataKey ? data[this.dataKey] : data).slice(0, this.count)
         this.showDropdown = this.items.length > 0
       })

campaignion_wizard/redirects_app/src/components/FilterEditor.vue

@@ -82,8 +82,8 @@ export default {
      * @return {Object[]} Collection of options like `{value: '==', label: 'is'}`
      */
     operatorOptions () {
-      var arr = []
-      Object.keys(this.operators).map(key => {
+      const arr = []
+      Object.keys(this.operators).forEach(key => {
         arr.push({
           value: key,
           label: this.operators[key].label
@@ -97,7 +97,7 @@ export default {
      * @return {boolean} Has an opt-in filter already been used?
      */
     optInUsed () {
-      return !!find(this.f, {type: 'opt-in'})
+      return !!find(this.f, { type: 'opt-in' })
     }
   },
 
@@ -136,7 +136,7 @@ export default {
      * @param {string} type - The type of the new filter.
      */
     addFilter (type) {
-      var filter = {
+      const filter = {
         id: null,
         type
       }

campaignion_wizard/redirects_app/src/components/RedirectDescription.vue

@@ -13,7 +13,7 @@ Display a human readable description of a redirect’s filters.
 </template>
 
 <script>
-import {OPERATORS} from '@/utils/defaults'
+import { OPERATORS } from '@/utils/defaults'
 import find from 'lodash/find'
 
 export default {
@@ -35,8 +35,8 @@ export default {
      * @return {string} The filter operator’s translated phrase.
      */
     filterDescription (filter) {
-      const fieldLabel = find(this.$root.$options.settings.fields, {id: filter.field}).label
-      return Drupal.t(OPERATORS[filter.operator].phrase, {'@attribute': fieldLabel, '@value': filter.value})
+      const fieldLabel = find(this.$root.$options.settings.fields, { id: filter.field }).label
+      return Drupal.t(OPERATORS[filter.operator].phrase, { '@attribute': fieldLabel, '@value': filter.value })
     }
   }
 }