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,9 +32,9 @@
     "popper.js": "^1.16.1",
     "propagating-hammerjs": "^3.0.0",
     "react": "^19.2.7",
-    "react-app-polyfill": "^3.0.0",
+    "react-bootstrap": "^2.10.10",
     "react-dom": "^19.2.7",
-    "react-grid-layout": "^2.2.3",
+    "react-grid-layout": "^1.0.0",
     "react-modal": "^3.16.3",
     "regenerator-runtime": "^0.14.1",
     "summernote": "^0.9.1",
@@ -63,7 +63,7 @@
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@types/react-grid-layout": "^2.1.0",
+    "@types/react-grid-layout": "^1.0.0",
     "@types/typeahead.js": "^0.11.6",
     "autoprefixer": "^10.5.0",
     "babel-loader": "^10.1.1",

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

@@ -131,6 +131,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/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/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.
  */
-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.
      */
-    constructor(element) {
+    constructor(element: HTMLElement) {
         super(element);
         this.el = $(this.element);
 
@@ -43,13 +37,15 @@ class DashboardComponent extends 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;