Updated libraries and tooling

- Upgraded basic packages in `package.json` to latest version where possible
- Updated `webpack.config.js` to use latest versions of plugins and builders
- Updated `tsconfig.json` and `jest.config.js` to enable more consistent imports
- Updated JS, TS, and TSX files with the above changes
- Removed stale ESLint directives
- Updated configurations, and code to ensure tests now pass where they were failing due to breaking changes to libraries
- Updated configurations, and code to allow Webpack build to succeed

cypress/support/commands.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-namespace */
 /// <reference types="cypress" />
 
 import { IBuildable } from "./builders/layout/interfaces";

jest.config.js

@@ -94,6 +94,7 @@ const config = {
     "^validation$": "<rootDir>/src/frontend/js/lib/validation",
     "^logging$": "<rootDir>/src/frontend/js/lib/logging",
     "^util/(.*)$": "<rootDir>/src/frontend/js/lib/util/$1",
+    "^testing/(.*)$": "<rootDir>/src/frontend/testing/$1",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

package.json

@@ -16,76 +16,79 @@
     "e2e:electron": "yarn cypress run --browser electron"
   },
   "dependencies": {
-    "@egjs/hammerjs": "^2.0.0",
+    "@egjs/hammerjs": "^2.0.17",
     "@lol768/jquery-querybuilder-no-eval": "^2.6.0",
+    "@types/form-serialize": "^0.7.4",
+    "@types/react-modal": "^3.16.3",
     "bootstrap": "4.6",
     "bootstrap-datepicker": "^1.9.0",
     "bootstrap-html5sortable": "^1.0.0",
     "bootstrap-select": "^1.13.18",
     "component-emitter": "^1.3.0",
-    "datatables.net-bs4": "^2.0.8",
-    "datatables.net-buttons-bs4": "^3.0.2",
-    "datatables.net-responsive-bs4": "^3.0.2",
+    "datatables.net-bs4": "^2.1.8",
+    "datatables.net-buttons-bs4": "^3.2.0",
+    "datatables.net-responsive-bs4": "^3.0.3",
     "datatables.net-rowreorder-bs4": "^1.5.0",
     "form-serialize": "^0.7.2",
-    "handlebars": "^4.7.7",
-    "imports-loader": "^1.2.0",
-    "jquery": "^3.6.0",
+    "handlebars": "^4.7.8",
+    "imports-loader": "^5.0.0",
+    "jquery": "^3.7.1",
     "jquery-ui-sortable-npm": "^1.0.0",
-    "jstree": "^3.3.12",
-    "keycharm": "^0.3.0",
-    "marked": "^9.1.1",
-    "moment": "^2.24.0",
+    "jstree": "^3.3.17",
+    "keycharm": "^0.4.0",
+    "marked": "^15.0.4",
+    "moment": "^2.30.1",
     "popper.js": "^1.16.1",
-    "propagating-hammerjs": "^1.4.0",
+    "postcss": "^8.1.0",
+    "propagating-hammerjs": "^2.0.0",
     "react": "^16.13.1",
     "react-app-polyfill": "^1.0.6",
     "react-dom": "^16.13.1",
     "react-grid-layout": "^0.18.3",
     "react-modal": "^3.11.2",
-    "regenerator-runtime": "^0.13.11",
-    "summernote": "^0.8.20",
+    "regenerator-runtime": "^0.14.1",
+    "summernote": "^0.9.1",
     "tippy.js": "^6.3.7",
     "typeahead.js": "^0.11.1",
-    "uuid": "^7.0.0",
-    "vis-data": "^6.3.0",
-    "vis-timeline": "7.4.3",
-    "vis-util": "^4.0.0"
+    "uuid": "^9.0.0",
+    "vis-data": "^7.1.9",
+    "vis-timeline": "^7.7.3",
+    "vis-util": "^5.0.1",
+    "xss": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-transform-react-jsx": "^7.22.15",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime-corejs3": "^7.14.7",
+    "@babel/core": "^7.26.0",
+    "@babel/plugin-transform-react-jsx": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@babel/runtime-corejs3": "^7.26.0",
     "@jest/globals": "^29.7.0",
-    "@types/jquery": "^3.5.24",
+    "@types/jquery": "^3.5.32",
     "@types/jstree": "^3.3.46",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
     "@types/react-grid-layout": "^1.3.2",
     "@types/typeahead.js": "^0.11.6",
-    "@webpack-cli/serve": "^2.0.1",
-    "autoprefixer": "^9.8.8",
-    "babel-loader": "^8.2.2",
-    "buffer": "^6.0.3",
+    "@webpack-cli/serve": "^3.0.1",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "6",
-    "core-js": "^3.15.2",
-    "css-loader": "^3.2.0",
-    "cypress": "^13.7.2",
+    "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.39.0",
+    "css-loader": "^7.1.2",
+    "cypress": "^13.17.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.7.2",
-    "postcss-loader": "^3.0.0",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
-    "terser-webpack-plugin": "^5.3.6",
-    "ts-loader": "~8.2.0",
-    "typescript": "5.4.3",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss-loader": "^8.1.1",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.4",
+    "terser-webpack-plugin": "^5.3.11",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1",
     "webpack-manifest-plugin": "^5.0.0"
   },
   "browserslist": [

src/frontend/components/button/lib/component.test.ts

@@ -1,4 +1,5 @@
-import "../../../testing/globals.definitions";
+import { describe, it, expect} from "@jest/globals";
+import "testing/globals.definitions";
 import ButtonComponent from './component';
 
 describe("Button Component", () => {

src/frontend/components/button/lib/create-report-button.test.ts

@@ -1,6 +1,7 @@
-import "../../../testing/globals.definitions";
+import "testing/globals.definitions";
 import {validateRequiredFields} from 'validation';
 import CreateReportButtonComponent from "./create-report-button";
+import {describe, expect, it, jest} from "@jest/globals";
 
 describe('create-report-button', () => {
     it('does not submit form if no checkboxes are checked', () => {
@@ -24,7 +25,7 @@ describe('create-report-button', () => {
 
         const $submit = $('#submit');
         new CreateReportButtonComponent($submit);
-        const submitSpy = jest.fn((ev) => {
+        const submitSpy = jest.fn((ev: Event) => {
             ev.preventDefault();
             ev.stopPropagation();
         });
@@ -56,7 +57,7 @@ describe('create-report-button', () => {
 
         let $submit = $('#submit');
         new CreateReportButtonComponent($submit);
-        const submitSpy = jest.fn((ev) => {
+        const submitSpy = jest.fn((ev:Event) => {
             ev.preventDefault();
             ev.stopPropagation();
         });
@@ -90,7 +91,7 @@ describe('create-report-button', () => {
 
         const $submit = $('#submit');
         new CreateReportButtonComponent($submit);
-        const formSpyFn = jest.fn((ev) => {
+        const formSpyFn = jest.fn((ev:Event) => {
             ev.preventDefault();
             ev.stopPropagation();
         });

src/frontend/components/button/lib/rename-button.ts

@@ -26,6 +26,7 @@ declare global {
         renameButton(): JQuery<TElement>;
         /**
          * Handle the rename event
+         * @template TElement The element type
          * @param { RenameEvent } events The event name
          * @param { 'rename' } handler The event handler
          * @returns {JQuery<TElement>} the JQuery element
@@ -102,16 +103,17 @@ class RenameButton {
     /**
      * Perform click event
      * @param {number} id The id of the field
-     * @param {JQuery.ClickEvent} ev The event object 
+     * @param {JQuery.ClickEvent} ev The event object
      */
     private renameClick(id: number, ev: JQuery.ClickEvent) {
         ev.preventDefault();
-        const original = $(`#current-${id}`)
+        let $current = $(`#current-${id}`);
+        const original = $current
             .text()
             .split('.')
             .slice(0, -1)
             .join('.');
-        $(`#current-${id}`)
+        $current
             .addClass('hidden')
             .attr('aria-hidden', 'true');
         $(`#file-rename-${id}`)
@@ -127,7 +129,7 @@ class RenameButton {
             .removeClass('hidden')
             .attr('aria-hidden', null)
             .on('click', (e) => {
-                this.triggerRename(id, ev.target, e)
+                this.triggerRename(id, ev.target, <any>e)
             });
         $(`#rename-cancel-${id}`)
             .removeClass('hidden')
@@ -158,12 +160,13 @@ class RenameButton {
      * @param {JQuery<HTMLButtonElement>} button The button that was clicked
      * @param {JQuery.BlurEvent} ev The blur event
      */
-    private triggerRename(id: number, button: JQuery<HTMLButtonElement>, e: JQuery.Event) {
-        const previousValue = $(`#current-${id}`).text();
+    private triggerRename(id: number, button: JQuery<HTMLButtonElement>, ev: JQuery.BlurEvent) {
+        let $current = $(`#current-${id}`);
+        const previousValue = $current.text();
         const extension = '.' + previousValue.split('.').pop();
         const newName = this.value.endsWith(extension) ? this.value : this.value + extension;
         if (newName === '' || newName === previousValue) return;
-        $(`#current-${id}`).text(newName);
+        $current.text(newName);
         const event = $.Event('rename', { oldName: previousValue, newName, target: button });
         $(button).trigger(event);
         this.hideRenameControls(id, button);

src/frontend/components/button/lib/submit-field-button.test.ts

@@ -1,4 +1,5 @@
-import { initGlobals } from "../../../testing/globals.definitions";
+import {describe, beforeEach, it, expect} from "@jest/globals";
+import { initGlobals } from "testing/globals.definitions";
 import SubmitFieldButtonComponent from "./submit-field-button";
 
 describe("Submit field button tests", () => {

src/frontend/components/button/lib/submit-field-button.ts

@@ -90,7 +90,6 @@ export default class SubmitFieldButton {
                     url: this.getURL(data),
                     data: {data: mytext, csrf_token: data.csrfToken}
                 }).done(() => {
-                    // eslint-disable-next-line no-alert
                     alert('Tree has been updated')
                 });
             }
@@ -127,6 +126,7 @@ export default class SubmitFieldButton {
      * @returns The URL for the tree API
      */
     private getURL(data:JQuery.PlainObject):string {
+        // @ts-expect-error - This is a global variable
         if (window.test) return "";
 
         const devEndpoint = window.siteConfig && window.siteConfig.urls.treeApi;

src/frontend/components/dashboard/lib/react/app.tsx

@@ -7,7 +7,7 @@ import RGL, { WidthProvider } from "react-grid-layout";
 import Header from "./Header";
 import Widget from './Widget';
 import Footer from "./Footer";
-import { sidebarObservable } from '../../../sidebar/lib/sidebarObservable';
+import { sidebarObservable } from 'components/sidebar/lib/sidebarObservable';
 
 declare global {
   interface Window {
@@ -257,8 +257,9 @@ class App extends React.Component<any, any> {
     return false;
   }
 
-  renderModal = () => (
-    <Modal
+  renderModal = () =>{
+    // @ts-expect-error "Modal is not a valid component"
+    return (<Modal
       isOpen={this.state.editModalOpen}
       onRequestClose={this.closeModal}
       style={modalStyle}
@@ -286,7 +287,7 @@ class App extends React.Component<any, any> {
         </div>
       </div>
     </Modal>
-  )
+  )}
 
   overWriteSubmitEventListener = () => {
     const formContainer = document.getElementById("ld-form-container");
@@ -320,6 +321,7 @@ class App extends React.Component<any, any> {
         />}
         {this.renderModal()}
         <div className="content-block__main">
+          {// @ts-expect-error "ReactGridLayout is not a valid JSX element"
           <ReactGridLayout
             className={`content-block__main-content ${this.props.readOnly ? "" : "react-grid-layout--editable"}`}
             isDraggable={!this.props.readOnly}
@@ -332,7 +334,7 @@ class App extends React.Component<any, any> {
             {...this.props.gridConfig}
           >
             {this.generateDOM()}
-          </ReactGridLayout>
+          </ReactGridLayout>}
         </div>
         {this.props.hideMenu ? null : <Footer
           addWidget={this.addWidget}

src/frontend/components/data-table/lib/component.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
 
 import { Component, initializeRegisteredComponents } from 'component'
 import 'datatables.net-bs4'
@@ -714,7 +713,6 @@ class DataTableComponent extends Component {
     I have tried manually changing the DOM, as well as the methods already present in the code, and I currently believe there is a bug within the DataTables button
     code that is meaning that this won't change (although I am open to the fact that I am being a little slow and missing something glaringly obvious).
   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   toggleFullScreenMode(buttonElement) {
     const table = document.querySelector("table.data-table");
     const currentTable = $(table);

src/frontend/components/form-group/calc-fields/lib/component.js

@@ -63,7 +63,6 @@ class CalcFieldsComponent extends Component {
         });
 
         // Evaluate the code with the values
-        // eslint-disable-next-line no-undef
         var func = fengari.load(code)()
         var first = vars.shift()
         // Use apply() to be able to pass the params as a single array. The

src/frontend/components/form-group/common/bootstrap-select.js

@@ -12,8 +12,6 @@ export const refreshSelects = (el)=>{
       ruleFilterSelect.data("live-search","true");
       ruleFilterSelect.selectpicker();
     });
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     el.on("afterCreateRuleOperators.queryBuilder", (e, rule, operators) => {
       const operatorSelect = $(rule.$el.find(`select[name=${rule.id}_operator]`));
       if(!operatorSelect || !operatorSelect[0]) {

src/frontend/components/form-group/filter/lib/component.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
 import { Component } from 'component'
 import '@lol768/jquery-querybuilder-no-eval/dist/js/query-builder.standalone.min'
 import 'bootstrap-select/dist/js/bootstrap-select'

src/frontend/components/form-group/input/lib/dateComponent.ts

@@ -1,4 +1,4 @@
-import initDateField from "../../../datepicker/lib/helper";
+import initDateField from "components/datepicker/lib/helper";
 
 class DateComponent {
     readonly type = 'date';

src/frontend/components/form-group/input/lib/documentComponent.ts

@@ -83,7 +83,10 @@ class DocumentComponent {
 
     async handleAjaxUpload(uri: string, csrf_token: string, file: File) {
         try {
-            if (!file) throw this.showException(new Error('No file provided'));
+            if (!file) {
+                this.showException(new Error('No file provided'));
+                return;
+            }
 
             const fileData = formdataMapper({ file, csrf_token });
 

src/frontend/components/form-group/input/lib/fileComponent.ts

@@ -22,7 +22,7 @@ class FileComponent {
         const dropTarget = this.el.closest('.file-upload');
         if (dropTarget) {
             const dragOptions = { allowMultiple: false };
-            (dropTarget as any).filedrag(dragOptions).on('onFileDrop', (ev, file) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+            (dropTarget as any).filedrag(dragOptions).on('onFileDrop', (ev, file) => {
                 this.handleFormUpload(file);
             });
         } else {

src/frontend/components/form-group/select-widget/lib/component.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
 import { Component } from 'component'
 import { logging } from 'logging'
 import { initValidationOnField } from 'validation'

src/frontend/components/help-view/lib/component.test.ts

@@ -1,5 +1,6 @@
-import "../../../testing/globals.definitions";
+import "testing/globals.definitions";
 import HelpView from "./component";
+import {describe, expect, it} from "@jest/globals";
 
 class TestHelpView extends HelpView {
     public get button() {

src/frontend/components/markdown/index.js

@@ -1,4 +1,4 @@
-import { getComponentElements, initializeComponent } from "../../js/lib/component";
+import { getComponentElements, initializeComponent } from "component";
 
 export default (scope) => {
   if (getComponentElements(scope, ".js-markdown-section").length === 0) return;

src/frontend/components/markdown/lib/component.js

@@ -9,7 +9,7 @@ class MarkdownComponent extends Component {
 
   renderMarkdown(md) {
     const mdEncoded = $('<span>').text(md).html()
-    return marked(mdEncoded);
+    return marked(mdEncoded, {async: false});
   }
 
   initMarkdownEditor() {

src/frontend/components/modal/lib/component.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-this-alias */
 import { Component } from 'component'
 import { modal } from './modal'
 import { Frame } from './frame'