Js refactor

.github/workflows/tests.yml

@@ -1,5 +1,5 @@
 name: 'GADS Tests'
-on: 
+on:
   push:
     branches:
       - master

package.json

@@ -8,16 +8,13 @@
     "test": "jest",
     "build:dev": "webpack --env development --progress -w",
     "test:watch": "jest --watch",
-    "e2e": "yarn cypress run",
-    "prebuild": "npx update-browserslist-db@latest",
-    "pretest": "npx update-browserslist-db@latest"
+    "e2e": "yarn cypress run"
   },
   "dependencies": {
     "@egjs/hammerjs": "^2.0.0",
     "@lol768/jquery-querybuilder-no-eval": "^2.6.0",
     "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",
@@ -26,7 +23,6 @@
     "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",
     "jquery-ui-sortable-npm": "^1.0.0",
     "jstree": "^3.3.12",
@@ -51,27 +47,25 @@
   },
   "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",
     "@eslint/css": "^0.10.0",
     "@eslint/js": "^9.31.0",
     "@jest/globals": "^29.7.0",
     "@stylistic/eslint-plugin": "^5.2.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "12",
     "@types/jest": "^29.5.6",
     "@types/jquery": "^3.5.24",
     "@types/jstree": "^3.3.46",
+    "@types/node": "^24.2.0",
     "@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",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "6",
     "core-js": "^3.15.2",
@@ -89,12 +83,10 @@
     "sass-loader": "^8.0.0",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "~8.2.0",
-    "typescript": "5.4.3",
+    "typescript": "^5.9.2",
     "typescript-eslint": "^8.37.0",
     "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
-    "webpack-manifest-plugin": "^5.0.0"
+    "webpack-cli": "^5.0.1"
   },
   "browserslist": [
     "last 2 versions",

src/frontend/components/button/lib/common.ts

@@ -39,6 +39,6 @@ export function table_key(): string {
  * Get the storage object - this originally was used in debugging to allow for the storage object to be mocked
  * @returns { StorageProvider } The storage object
  */
-export function storage(): StorageProvider {
+function storage(): StorageProvider {
     return new StorageProvider(table_key());
 }

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

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* @ts-ignore */
 import { validateRequiredFields } from 'validation';
 import CreateReportButtonComponent from './create-report-button';
 import { describe, it, expect, jest } from '@jest/globals';

src/frontend/components/button/lib/remove-curval-button.test.js

@@ -61,4 +61,4 @@ describe('RemoveCurvalButton', () => {
         button.click();
         expect(current.children.length).toBe(0);
     });
-});
+});

src/frontend/components/button/lib/show-blank-button.test.ts

@@ -29,4 +29,4 @@ describe('ShowBlankButton', () => {
         button.trigger('click');
         expect(item.css('display')).toBe('none');
     });
-});
+});

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

@@ -1,5 +1,5 @@
 import 'jstree';
-import 'datatables.net';
+import 'datatables.net-bs4';
 import '@lol768/jquery-querybuilder-no-eval';
 import { validateQueryBuilder } from 'validation';
 
@@ -97,7 +97,6 @@ export default class SubmitFieldButton {
                     url: this.getURL(data),
                     data: { data: mytext, csrf_token: data.csrfToken }
                 }).done(() => {
-
                     alert('Tree has been updated');
                 });
             }

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

@@ -1,7 +1,7 @@
 import { Component } from 'component';
 
 /**
- *
+ * CollapsibleComponent class that initializes the collapsible component and handles the toggle functionality for collapsing and expanding content.
  */
 class CollapsibleComponent extends Component {
     /**

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

@@ -3,6 +3,7 @@ import Collapsible from './component';
 
 describe('Collapsible', () => {
     beforeEach(() => {
+        // Set up the HTML structure for the collapsible component
         document.body.innerHTML = `
         <div id="target" class="collapsible">
             <div class="form-group">

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

@@ -100,6 +100,7 @@ export default class ApiClient {
             const strippedLayout = layout.map(widget => ({ ...widget, moved: undefined }));
             return this.PUT(`/dashboard/${id}`, strippedLayout);
         }
+        return Promise.resolve(new Response());
     };
 
     /**
@@ -127,7 +128,7 @@ export default class ApiClient {
      * @param {string} id The ID of the widget to delete.
      * @returns {promise<Response>} A promise that resolves when the widget is deleted.
      */
-    deleteWidget = (id: string): Promise<Response> => !this.isDev && this.DELETE(`/widget/${id}`);
+    deleteWidget = (id: string): Promise<Response> => this.isDev ? Promise.resolve(new Response()) : this.DELETE(`/widget/${id}`);
 
     /**
      * Get the edit form for a widget.

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

@@ -358,11 +358,11 @@ class DataTableComponent extends Component {
         $searchInput.appendTo($('.input', $searchElement));
         if (col.typeahead_use_id) {
             $searchInput.after('<input type="hidden" class="search">');
-            if(searchValue) {
-                const response = await fetch(this.getApiEndpoint(columnId) + searchValue + '&use_id=1', {method: 'POST', data: {csrf_token: $('body').data('csrf')}});
+            if (searchValue) {
+                const response = await fetch(this.getApiEndpoint(columnId) + searchValue + '&use_id=1', { method: 'POST', data: { csrf_token: $('body').data('csrf') } });
                 const data = await response.json();
                 if (!data.error) {
-                    if(data.records.length != 0) {
+                    if (data.records.length != 0) {
                         $searchInput.val(data.records[0].label);
                         $('input.search', $searchElement).val(data.records[0].id)
                             .trigger('change');
@@ -379,22 +379,22 @@ class DataTableComponent extends Component {
 
         if (col && col.typeahead) {
             import(/*webpackChunkName: "typeahead" */ 'util/typeahead')
-                .then(({default: TypeaheadBuilder})=>{
+                .then(({ default: TypeaheadBuilder }) => {
                     const builder = new TypeaheadBuilder();
                     builder
                         .withAjaxSource(this.getApiEndpoint(columnId))
                         .withMethod('POST')
-                        .withData({csrf_token: $('body').data('csrf')})
+                        .withData({ csrf_token: $('body').data('csrf') })
                         .withInput($('input', $header))
                         .withAppendQuery()
                         .withDefaultMapper()
                         .withName(columnId.replace(/\s+/g, '') + 'Search')
                         .withCallback((data) => {
-                            if(col.typeahead_use_id) {
+                            if (col.typeahead_use_id) {
                                 $searchInput.val(data.name);
-                                $('input.search',$searchElement).val(data.id)
+                                $('input.search', $searchElement).val(data.id)
                                     .trigger('change');
-                            }else{
+                            } else {
                                 $('input', $searchElement).addClass('search')
                                     .val(data.name)
                                     .trigger('change');
@@ -687,7 +687,7 @@ class DataTableComponent extends Component {
 
         if (data.limit_rows && data.values.length >= data.limit_rows) {
             strHTML += `<p><em>(showing maximum ${data.limit_rows} rows.
-                            <a href="/${data.parent_layout_identifier}/data?curval_record_id=${data.curval_record_id}&curval_layout_id=${data.column_id }">view all</a>)</em>
+                            <a href="/${data.parent_layout_identifier}/data?curval_record_id=${data.curval_record_id}&curval_layout_id=${data.column_id}">view all</a>)</em>
                         </p>`;
         }
 
@@ -876,7 +876,7 @@ class DataTableComponent extends Component {
         */
         const table = document.querySelector('table.data-table');
         const currentTable = $(table);
-        if(currentTable && $.fn.dataTable.isDataTable(currentTable)) {
+        if (currentTable && $.fn.dataTable.isDataTable(currentTable)) {
             currentTable.DataTable().destroy();
         }
         if (!this.isFullScreen) {
@@ -918,8 +918,8 @@ class DataTableComponent extends Component {
 
         // Toggle the full screen button
         this.isFullScreen = !this.isFullScreen;
-        $('#full-screen-btn').removeClass(this.isFullScreen ? 'btn-toggle-off': 'btn-toggle');
-        $('#full-screen-btn').addClass(this.isFullScreen ? 'btn-toggle': 'btn-toggle-off');
+        $('#full-screen-btn').removeClass(this.isFullScreen ? 'btn-toggle-off' : 'btn-toggle');
+        $('#full-screen-btn').addClass(this.isFullScreen ? 'btn-toggle' : 'btn-toggle-off');
     }
 
     /**
@@ -938,8 +938,8 @@ class DataTableComponent extends Component {
                 .each((i, el) => {
                     const data = rows[i] ? rows[i] : undefined;
                     if (data) {
-                    // URL will be record link for standard view, or filtered URL for
-                    // grouped view (in which case _count parameter will be present not _id)
+                        // URL will be record link for standard view, or filtered URL for
+                        // grouped view (in which case _count parameter will be present not _id)
                         const url = data['_id'] ? `${this.base_url}/${data['_id']}` : `?${data['_count']['url']}`;
 
                         $(el).find('td:not(".dtr-control")')

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

@@ -34,23 +34,4 @@ const clearTable = (table) => {
         .draw();
 };
 
-/**
- * Get the order of a row in the table.
- * @param {object} row The row to get the order from.
- * @returns {number} The order value of the row, or -1 if not found.
- */
-const getRowOrder = (row) => {
-    try {
-        const orderValue = $(row.node()).find('input')
-            .first()
-            .data('order');
-        if (typeof orderValue === 'undefined') {
-            return -1;
-        }
-        return parseInt(orderValue);
-    } catch {
-        return -1;
-    }
-};
-
-export { addRow, updateRow, clearTable, getRowOrder };
+export { addRow, updateRow, clearTable };

src/frontend/components/data-table/lib/helper.test.ts

@@ -4,6 +4,7 @@ import Datatable from 'datatables.net-bs4';
 
 describe('helper', () => {
     beforeEach(() => {
+        // create the DOM structure for the tests
         document.body.innerHTML = `
         <table id="target" class="table table-striped">
             <thead>
@@ -71,4 +72,4 @@ describe('helper', () => {
         clearTable($(target));
         expect(target.querySelectorAll('tbody tr').length).toBe(1);
     });
-});
+});

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

@@ -109,4 +109,4 @@ const toggleRowInTable = (clickedRow, sourceTable, destinationTableID, forceChec
     }
 };
 
-export { bindToggleTableClickHandlers, toggleRow, toggleRowInTable };
+export { bindToggleTableClickHandlers, toggleRowInTable };

src/frontend/components/form-group/autosave/lib/autosave.test.ts

@@ -2,6 +2,7 @@
 import AutosaveBase from './autosaveBase';
 import { describe, it, expect, beforeAll, afterAll } from '@jest/globals';
 
+// Mocking the AutosaveBase class for testing
 class TestAutosave extends AutosaveBase {
     initAutosave(): void {
         console.log('initAutosave');

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

@@ -172,7 +172,13 @@ class FilterComponent extends Component {
             };
 
             // This is required to ensure that the correct query is sent each time
-            const buildQuery = () => { return { q: $ruleInputText.val(), oi: filterConfig.instanceId, csrf_token: $('body').data('csrf') }; };
+            const buildQuery = () => {
+                return {
+                    q: $ruleInputText.val(),
+                    oi: filterConfig.instanceId,
+                    csrf_token: $('body').data('csrf')
+                };
+            };
 
             const builder = new TypeaheadBuilder();
             builder

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

@@ -56,16 +56,16 @@ class SelectWidgetComponent extends Component {
         if (this.$widget.is('[readonly]')) return;
         this.connect();
 
-        this.$widget.unbind('click');
+        this.$widget.off('click');
         this.$widget.on('click', () => { this.handleWidgetClick(); });
 
-        this.$search.unbind('blur');
+        this.$search.off('blur');
         this.$search.on('blur', (e) => { this.possibleCloseWidget(e); });
 
-        this.$availableItems.unbind('blur');
+        this.$availableItems.off('blur');
         this.$availableItems.on('blur', (e) => { this.possibleCloseWidget(e); });
 
-        this.$moreInfoButtons.unbind('blur');
+        this.$moreInfoButtons.off('blur');
         this.$moreInfoButtons.on('blur', (e) => { this.possibleCloseWidget(e); });
 
         $(document).on('click', (e) => { this.handleDocumentClick(e); });
@@ -286,7 +286,6 @@ class SelectWidgetComponent extends Component {
     /**
      * Connects the multi-select items to their associated checkboxes.
      * @returns {(...*)=>*} A function that connects the multi-select items.
-     * @todo Remove deprecated key codes and ensure compatibility with modern browsers.
      */
     connectMulti() {
         const self = this;
@@ -295,7 +294,7 @@ class SelectWidgetComponent extends Component {
             const itemId = $item.data('list-item');
             const $associated = $('#' + itemId);
 
-            $associated.unbind('change');
+            $associated.off('change');
             $associated.on('change', (e) => {
                 if ($(e.target).prop('checked')) {
                     $item.removeAttr('hidden');
@@ -305,7 +304,7 @@ class SelectWidgetComponent extends Component {
                 self.updateState();
             });
 
-            $associated.unbind('keydown');
+            $associated.off('keydown');
             $associated.on('keydown', function (e) {
                 const key = e.which || e.keyCode;
 
@@ -345,7 +344,6 @@ class SelectWidgetComponent extends Component {
 
     /**
      * Connects the single-select items to their associated checkboxes.
-     * @todo Remove deprecated key codes and ensure compatibility with modern browsers.
      */
     connectSingle() {
         const self = this;
@@ -375,7 +373,7 @@ class SelectWidgetComponent extends Component {
                 self.updateState();
             });
 
-            $associated.parent().unbind('keypress');
+            $associated.parent().off('keypress');
             $associated.parent().on('keypress', (e) => {
                 // KeyCode Enter or Spacebar
                 if (e.keyCode === 13 || e.keyCode === 32) {
@@ -634,7 +632,8 @@ class SelectWidgetComponent extends Component {
     }
 
     /**
-     * Fetches options for the select widget based on linked fields.
+     * Fetch options for the select widget based on linked fields.
+     * @throws {string} Will throw an error if the filter fields are not a valid array.
      */
     fetchOptions() {
         const filterEndpoint = this.$selectWidget.data('filter-endpoint');

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

@@ -2,6 +2,7 @@
 import HelpView from './component';
 import { describe, it, expect } from '@jest/globals';
 
+// Mock class to test the HelpView component exposing private members
 class TestHelpView extends HelpView {
     public get button() {
         return this.$button;

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

@@ -205,7 +205,6 @@ class ModalComponent extends Component {
         return selectedFrame;
     }
 
-
     /**
      * Activate a frame by it's number
      * @param {number} frameNumber The frame number to activate.