Update eslint configs & align linting changes

- Align JS with latest Eslint package updates
- Update configs to ignore new defaults not required in test files
- Update Controller js usage & configs for classProperty naming rules
- Remove eslint ignore directives no longer required due to changed defaults

.eslintrc.js

@@ -99,7 +99,7 @@ module.exports = {
             },
           },
           {
-            selector: 'property',
+            selector: 'classProperty',
             format: ['camelCase'],
             custom: {
               // Use Stimulus values where possible for internal state, avoid a generic state object as these are not reactive.
@@ -135,11 +135,13 @@ module.exports = {
       ],
       rules: {
         '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-this-alias': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
         '@typescript-eslint/no-var-requires': 'off',
         'global-require': 'off',
         'import/first': 'off',
         'import/no-extraneous-dependencies': 'off',
+        'jsx-a11y/control-has-associated-label': 'off',
         'no-unused-expressions': 'off',
         'react/function-component-definition': 'off',
         'react/jsx-props-no-spreading': 'off',

client/src/components/StreamField/blocks/StaticBlock.js

@@ -15,10 +15,10 @@ export class StaticBlock {
     placeholder.replaceWith(element);
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setState(_state) {}
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   setError(_errorList) {}
 
   getState() {
@@ -29,7 +29,6 @@ export class StaticBlock {
     return null;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   focus() {}
 }
 

client/src/components/StreamField/blocks/StructBlock.js

@@ -55,10 +55,10 @@ export class StructBlock {
         const childDom = $(`
         <div data-contentpath="${childBlockDef.name}">
           <label class="w-field__label">${h(childBlockDef.meta.label)}${
-          childBlockDef.meta.required
-            ? '<span class="w-required-mark">*</span>'
-            : ''
-        }</label>
+            childBlockDef.meta.required
+              ? '<span class="w-required-mark">*</span>'
+              : ''
+          }</label>
             <div data-streamfield-block></div>
           </div>
         `);

client/src/controllers/DismissibleController.ts

@@ -21,7 +21,7 @@ export const updateDismissibles = (
     method: 'PATCH',
     headers: {
       [WAGTAIL_CONFIG.CSRF_HEADER_NAME]: WAGTAIL_CONFIG.CSRF_TOKEN,
-      'Content-Type': 'application/json', // eslint-disable-line @typescript-eslint/naming-convention
+      'Content-Type': 'application/json',
     },
     body: JSON.stringify(data),
     mode: 'same-origin',

client/src/controllers/SwapController.test.js

@@ -125,7 +125,7 @@ describe('SwapController', () => {
       <div id="page-results"></div>
       `;
 
-      SwapController.afterLoad('w-swap');
+      SwapController.afterLoad('w-swap', application);
 
       // trigger next browser render cycle
       await Promise.resolve();

client/src/controllers/SwapController.ts

@@ -1,4 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
+import type { Application } from '@hotwired/stimulus';
+
 import { debounce } from '../utils/debounce';
 import { domReady } from '../utils/domReady';
 
@@ -97,7 +99,9 @@ export class SwapController extends Controller<
    *
    * @deprecated RemovedInWagtail60
    */
-  static afterLoad(identifier: string) {
+  static afterLoad(identifier: string, application: Application) {
+    const { actionAttribute, controllerAttribute } = application.schema;
+
     domReady().then(() => {
       const { termInput, targetOutput, url } = getGlobalHeaderSearchOptions();
 
@@ -114,8 +118,8 @@ export class SwapController extends Controller<
       }
 
       Object.entries({
-        'data-controller': identifier,
-        'data-action': [
+        [controllerAttribute]: identifier,
+        [actionAttribute]: [
           `change->${identifier}#searchLazy`,
           `input->${identifier}#searchLazy`,
         ].join(' '),

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -2,11 +2,11 @@ import '../draftail';
 import './telepath';
 import './widgets';
 
+import $ from 'jquery';
 import { createEditorStateFromRaw } from 'draftail';
 import { EditorState } from 'draft-js';
 
 import ReactTestUtils from 'react-dom/test-utils';
-import $ from 'jquery';
 
 window.$ = $;
 

client/src/entrypoints/contrib/table_block/table.js

@@ -240,7 +240,6 @@ class TableInput {
         input.value = JSON.stringify(state);
         initTable(id, options);
       },
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       focus() {},
     };
     widget.setState(initialState);

client/src/utils/noop.ts

@@ -1,7 +1,6 @@
 /**
  * This method does nothing, returns `undefined`.
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = (): void => {};
 
 export { noop };

wagtail/images/static_src/wagtailimages/js/focal-point-chooser.js

@@ -25,10 +25,8 @@ function setupJcrop(image, original, focalPointOriginal, fields) {
       },
     },
     function () {
-      jcropapi = this;
-
       // Set alt="" on the image so its src is not read out loud to screen reader users.
-      var $holderImage = $('img', jcropapi.ui.holder);
+      var $holderImage = $('img', this.ui.holder);
       $holderImage.attr('alt', '');
 
       const labelContent = focalPointOriginal.label;
@@ -37,7 +35,7 @@ function setupJcrop(image, original, focalPointOriginal, fields) {
 
       // set the id on the input
       const id = 'jcrop-holder-input';
-      var $holderInput = $('input', jcropapi.ui.holder);
+      var $holderInput = $('input', this.ui.holder);
       $holderInput.attr('id', id);
 
       // create a label that references the id