DPL-1047: Cleanup - upgrade code linting to ES9 standard

.eslintrc.js

@@ -1,14 +1,13 @@
 module.exports = {
   env: {
+    'vitest/env': true,
     browser: true,
-    commonjs: true,
-    es6: true,
-    jasmine: true,
     node: true,
   },
-  plugins: ['vue'],
+  plugins: ['vitest', 'vue'],
   extends: ['eslint:recommended', 'plugin:vue/recommended', 'prettier'],
   parserOptions: {
+    ecmaVersion: 'latest',
     sourceType: 'module',
     requireConfigFile: false,
   },
@@ -23,8 +22,11 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
-    // The API sends snake case stuff, and this lets us pass things straight
-    // through. Not a great compromise though.
-    'vue/prop-name-casing': ['off'],
+    'no-var': 'error',
+    // We need a proper logging solution (see https://github.com/sanger/limber/issues/836),
+    // but until then:
+    'no-console': ['error', { allow: ['warn', 'error', 'log'] }],
+    // Legacy in from the old days. We should remove these:
+    'vue/prop-name-casing': ['warn'],
   },
 }

app/frontend/entrypoints/application.js

@@ -34,24 +34,15 @@ import 'bootstrap'
 import 'popper.js'
 
 // Load all javascript files previously in the app/assets directory
-import '@/javascript/bed_verification.js'
-import '@/javascript/choose_workflow.js'
-import '@/javascript/global_message_system.js'
 import '@/javascript/legacy_scripts_a.js'
-import '@/javascript/merged_plate.js'
-import '@/javascript/multi_plate_pooling.js'
-import '@/javascript/multi_tube_pooling.js'
-import '@/javascript/pooled_tubes_from_whole_plates.js'
 import '@/javascript/session_scripts.js'
 import '@/javascript/state_change_reasons.js'
 import '@/javascript/state_machine.js'
-import '@/javascript/tag_by_tag_plate.js'
 import '@/javascript/tooltips.js'
 // Load all javascript files previously in the app/assets/lib directory, these really should
 // be loaded as required, not globally as previously done.
 import '@/javascript/lib/ajax_support.js'
 import '@/javascript/lib/array_fill_polyfill.js'
-import '@/javascript/lib/disable_enter_key_submit.js'
 
 // Currently setting up each component as its own mini vue app.
 import '@/javascript/asset-comments/index.js'

app/frontend/entrypoints/pages/bed_verification.js

@@ -0,0 +1,169 @@
+import $ from 'jquery'
+import SCAPE from '@/javascript/lib/global_message_system.js'
+
+// Bed Robot Page
+
+//= require lib/ajax_support
+
+let closeIcon = function () {
+  return $(document.createElement('a'))
+    .attr('class', 'close')
+    .attr('aria-label', 'close')
+    .append($(document.createElement('span')).attr('aria-hidden', 'true').text('×'))
+}
+
+SCAPE.robot_beds = {}
+SCAPE.robot_barcode = ''
+
+let newScanned = function (bed, labware) {
+  let new_li
+  // $('#whole\\['+bed+'\\]').detach();
+  new_li = $(document.createElement('li'))
+    .attr('data-bed', bed)
+    .attr('data-labware', labware)
+    .attr('class', 'list-group-item list-group-item-action')
+    .on('click', removeEntry)
+    .append(
+      $(document.createElement('a'))
+        .attr('href', '#')
+        .attr('class', 'list-group-item-action')
+        .append(
+          $(document.createElement('h3'))
+            .attr('class', 'ui-li-heading')
+            .text('Bed: ' + bed)
+        )
+        .append(closeIcon())
+        .append(
+          $(document.createElement('p'))
+            .attr('class', 'ui-li-desc')
+            .text('Labware: ' + labware)
+        )
+        .append(
+          $(document.createElement('input'))
+            .attr('type', 'hidden')
+            .attr('id', 'bed_labwares[' + bed + ']')
+            .attr('name', 'bed_labwares[' + bed + '][]')
+            .val(labware)
+        )
+    )
+  SCAPE.robot_beds[bed] = SCAPE.robot_beds[bed] || []
+  SCAPE.robot_beds[bed].push(labware)
+  $('#start-robot').prop('disabled', true)
+  $('#bed_list').append(new_li)
+}
+
+let newRobotScanned = function (robot_barcode) {
+  $('#robot').text('Robot: ' + robot_barcode)
+  $('#robot_barcode').val(robot_barcode)
+  SCAPE.robot_barcode = robot_barcode
+}
+
+const removeEntry = function () {
+  let lw_index, bed_list
+  bed_list = SCAPE.robot_beds[$(this).attr('data-bed')]
+  lw_index = bed_list.indexOf($(this).attr('data-labware'))
+  bed_list.splice(lw_index, 1)
+  if (bed_list.length === 0) {
+    SCAPE.robot_beds[$(this).attr('data-bed')] = undefined
+  }
+  $(this).detach()
+  $('#bed_list')
+}
+
+let checkResponse = function (response) {
+  if ($('#bed_list').children().length === 0) {
+    // We don't have any content
+    $('#loadingModal').fadeOut(100)
+  } else if (response.valid) {
+    // Clear all bed error flags when valid
+    clearFlagFromBeds(response.beds)
+    pass()
+  } else {
+    // Set bed flags according to which are currently valid and which are not
+    flagBeds(response.beds, response.message)
+    fail()
+  }
+}
+
+const flagBeds = function (beds, message) {
+  let bad_beds = []
+  $.each(beds, function (bed_id) {
+    // here we check the validity of each bed in the hash returned from the ruby robot
+    // valid_relationships method and if the bed is valid clear the error flags (in case the
+    // bed was invalid in a previous validate cycle) or if invalid we set the error flags
+    if (beds[bed_id]) {
+      clearFlagFromBed(bed_id)
+    } else {
+      $('#bed_list li[data-bed="' + bed_id + '"]').addClass('bad_bed list-group-item-danger')
+      bad_beds.push(bed_id)
+    }
+  })
+  SCAPE.message('There were problems: ' + message, 'danger')
+}
+
+const clearFlagFromBeds = function (beds) {
+  $.each(beds, function (bed_id) {
+    if (beds[bed_id]) {
+      clearFlagFromBed(bed_id)
+    }
+  })
+}
+
+const clearFlagFromBed = function (bed_id) {
+  $('#bed_list li[data-bed="' + bed_id + '"]').removeClass('bad_bed list-group-item-danger')
+}
+
+let wait = function () {
+  $('#loadingModal').fadeIn(100)
+}
+
+const pass = function () {
+  $('#loadingModal').fadeOut(100)
+  SCAPE.message('No problems detected!', 'success')
+  $('#start-robot').prop('disabled', false)
+}
+
+const fail = function () {
+  $('#loadingModal').fadeOut(100)
+  $('#start-robot').prop('disabled', true)
+}
+
+$('#plate_scan').on('change', function () {
+  let plate_barcode, bed_barcode, robot_barcode
+  plate_barcode = this.value
+  bed_barcode = $('#bed_scan').val()
+  robot_barcode = $('#robot_scan').val()
+  SCAPE.robot_scan = robot_barcode
+  this.value = ''
+  $('#bed_scan').val('')
+  $('#bed_scan').focus()
+  newScanned(bed_barcode, plate_barcode)
+})
+
+$('#robot_scan').on('change', function () {
+  let robot_barcode
+  robot_barcode = this.value
+  newRobotScanned(robot_barcode)
+})
+
+$('#validate_layout').on('click', function () {
+  wait()
+  $.ajax({
+    dataType: 'json',
+    url: window.location.pathname + '/verify',
+    type: 'POST',
+    data: {
+      bed_labwares: SCAPE.robot_beds,
+      robot_barcode: SCAPE.robot_barcode,
+    },
+    success: function (data, _status) {
+      checkResponse(data)
+    },
+  }).fail(function (_data, _status) {
+    SCAPE.message(
+      'The beds could not be validated. There may be network issues, or problems with Sequencescape.',
+      'danger'
+    )
+    fail()
+  })
+})

app/frontend/entrypoints/pages/choose_workflow.js

@@ -0,0 +1,3 @@
+import { disableEnterKeySubmit } from '@/javascript/lib/disable_enter_key_submit.js'
+
+disableEnterKeySubmit('#choose_workflow_card', '#submission_forms')

app/frontend/entrypoints/pages/merged_plate.js

@@ -0,0 +1,3 @@
+import { disableEnterKeySubmit } from '@/javascript/lib/disable_enter_key_submit.js'
+
+disableEnterKeySubmit('#merged-plate-page', '#new_plate')