React upgrades

eslint.config.mjs

@@ -20,7 +20,6 @@ export default defineConfig([
         rules: {
             "@typescript-eslint/no-explicit-any": "off",
             'react/prop-types': 'off',
-            'react/no-deprecated': 'off', // We are currently using deprecated React features, so we disable this rule - this will change in the future
             '@stylistic/quotes': ['error', 'single'],
             '@stylistic/no-extra-semi': 'error',
             '@stylistic/semi': ['error', 'always'],

package.json

@@ -32,11 +32,11 @@
     "popper.js": "^1.16.1",
     "postcss": "^8.1.0",
     "propagating-hammerjs": "^3.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",
+    "react": "^19.1.1",
+    "react-bootstrap": "^2.10.10",
+    "react-dom": "^19.1.1",
+    "react-grid-layout": "^1.5.2",
+    "react-modal": "^3.16.3",
     "regenerator-runtime": "^0.14.1",
     "summernote": "^0.9.1",
     "tippy.js": "^6.3.7",
@@ -56,21 +56,22 @@
     "@eslint/js": "^9.31.0",
     "@jest/globals": "^30.0.5",
     "@stylistic/eslint-plugin": "^5.2.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "12",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "16.3.0",
+    "@types/form-serialize": "^0.7.4",
     "@types/jest": "^30.0.0",
     "@types/jquery": "^3.5.32",
     "@types/jstree": "^3.3.46",
     "@types/node": "^24.2.0",
-    "@types/react": "^17.0.41",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/react-grid-layout": "^1.3.2",
+    "@types/react-modal": "^3.16.3",
     "@types/typeahead.js": "^0.11.6",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "13.0.0",
-    "core-js": "^3.44.0",
     "css-loader": "^7.1.2",
     "cypress": "^14.5.3",
     "eslint": "^9.31.0",

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

@@ -25,6 +25,7 @@ export default function createDeleteButton(element: JQuery<HTMLElement>) {
             element.on('click', function (e: JQuery.ClickEvent) {
                 e.stopPropagation();
             });
+            /* @ts-expect-error Global function for testing */
             if (window.test) throw e;
         }
 

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

@@ -132,6 +132,7 @@ export default class SubmitFieldButton {
      * @returns {string} The URL for the tree API
      */
     private getURL(data: JQuery.PlainObject): string {
+        /* @ts-expect-error Global function for testing */
         if (window.test) return '';
 
         const devEndpoint = window.siteConfig && window.siteConfig.urls.treeApi;

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

@@ -3,7 +3,6 @@ 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/_dashboard.scss

@@ -41,20 +41,21 @@
   left: 0;
   height: 24px;
   margin: auto;
-  font-size: 24px;
+  @include font-size(24px);
   text-align: center;
 }
 
 .react-grid-item .minMax {
-  font-size: 12px;
+  @include font-size(12px);
 }
 
 .react-grid-item .add {
   cursor: pointer;
 }
 
 .react-grid-dragHandleExample {
-  cursor: move; /* fallback if grab cursor is unsupported */
+  cursor: move;
+  /* fallback if grab cursor is unsupported */
   cursor: grab;
 }
 
@@ -71,8 +72,19 @@
 }
 
 .react-grid-item:hover {
+
   .react-resizable-handle,
   .ld-widget-handlers {
     opacity: 1;
   }
 }
+
+.ld-footer-container {
+  .btn-group {
+    margin-right: $padding-base-vertical;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+}

src/frontend/components/dashboard/dashboard-graph/lib/component.js

@@ -2,21 +2,21 @@ import { do_plot_json } from '../../../graph/lib/chart';
 import GraphComponent from '../../../graph/lib/component';
 
 /**
- * DashboardGraphComponent class that initializes the dashboard graph and renders the graph using do_plot_json.
+ * Graph component for the dashboard
  */
 class DashboardGraphComponent extends GraphComponent {
     /**
-     * Create a DashboardGraphComponent instance.
-     * @param {HTMLElement} element The HTML element that this component will be attached to.
-     */
+   * Create a new dashboard graph component
+   * @param {HTMLElement} element The element to attach the component to
+   */
     constructor(element) {
         super(element);
         this.initDashboardGraph();
     }
 
     /**
-     * Initialize the dashboard graph by rendering the graph using do_plot_json.
-     */
+   * Initialize the dashboard graph
+   */
     initDashboardGraph() {
         const $graph = $(this.element);
         const graph_data = $graph.data('plot-data');

src/frontend/components/dashboard/lib/component.js → src/frontend/components/dashboard/lib/component.tsx

@@ -1,29 +1,23 @@
 import { Component } from 'component';
-import 'react-app-polyfill/stable';
-
-import 'core-js/es/array/is-array';
-import 'core-js/es/map';
-import 'core-js/es/set';
-import 'core-js/es/object/define-property';
-import 'core-js/es/object/keys';
-import 'core-js/es/object/set-prototype-of';
-
-import './react/polyfills/classlist';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './react/app';
+import ReactDOM from 'react-dom/client';
+import App from './react/App';
 import ApiClient from './react/api';
+import { ReactGridLayoutProps } from 'react-grid-layout';
 
 /**
- * DashboardComponent class that initializes the dashboard and renders the App component.
+ * DashboardComponent class to initialize and render the dashboard
  */
-class DashboardComponent extends Component {
+export default class DashboardComponent extends Component {
+    el: JQuery<HTMLElement>;
+    gridConfig: ReactGridLayoutProps;
+
     /**
-     * Create a DashboardComponent instance.
-     * @param {HTMLElement} element The HTML element that this component will be attached to.
+     * Create a new instance of DashboardComponent
+     * @param {HTMLElement} element The HTML element to attach the dashboard component to
      */
-    constructor(element) {
+    constructor(element: HTMLElement) {
         super(element);
         this.el = $(this.element);
 
@@ -38,18 +32,20 @@ class DashboardComponent extends Component {
     }
 
     /**
-     * Initialize the dashboard by rendering the App component with widgets and configurations.
+     * Initialize the dashboard by rendering the App component
      */
     initDashboard() {
         this.element.className = '';
         const widgetsEls = Array.prototype.slice.call(document.querySelectorAll('#ld-app > div'));
-        const widgets = widgetsEls.map(el => ({
+        const widgets = widgetsEls.map((el: HTMLElement) => ({
             html: el.innerHTML,
             config: JSON.parse(el.getAttribute('data-grid'))
         }));
         const api = new ApiClient(this.element.getAttribute('data-dashboard-endpoint') || '');
 
-        ReactDOM.render(
+        const root = ReactDOM.createRoot(this.element);
+
+        root.render(
             <App
                 widgets={widgets}
                 dashboardId={this.element.getAttribute('data-dashboard-id')}
@@ -61,10 +57,7 @@ class DashboardComponent extends Component {
                 api={api}
                 widgetTypes={JSON.parse(this.element.getAttribute('data-widget-types') || '[]')}
                 dashboards={JSON.parse(this.element.getAttribute('data-dashboards') || '[]')}
-                gridConfig={this.gridConfig} />,
-            this.element
+                gridConfig={this.gridConfig} />
         );
     }
 }
-
-export default DashboardComponent;