Update to React 18 and Patternfly 5

jdrews · Mar 2, 2024 · 98313e0 · 98313e0
1 parent 2996ed7
commit 98313e0
Show file tree

Hide file tree

Showing 3 changed files with 574 additions and 638 deletions.
diff --git a/web/package.json b/web/package.json
@@ -1,32 +1,32 @@
 {
  "name": "logstation",
- "version": "2.0.0",
+ "version": "2.3.0",
  "private": true,
  "dependencies": {
- "@emotion/react": "^11.11.0",
+ "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.0",
- "@mui/material": "^5.13.3",
- "@patternfly/react-core": "^4.276.9",
- "@patternfly/react-icons": "^4.93.6",
- "@patternfly/react-log-viewer": "^4.87.100",
- "react": "^17.0.1",
+ "@mui/material": "^5.15.11",
+ "@patternfly/react-core": "^5.2.1",
+ "@patternfly/react-icons": "^5.2.1",
+ "@patternfly/react-log-viewer": "^5.1.0",
+ "react": "^18.2.0",
  "react-device-detect": "^2.2.3",
- "react-dom": "^17.0.1",
+ "react-dom": "^18.2.0",
  "reconnecting-websocket": "^4.4.0"
  },
  "devDependencies": {
- "@parcel/packager-raw-url": "^2.11.0",
- "@parcel/transformer-webmanifest": "^2.11.0",
- "parcel": "^2.11.0",
+ "@parcel/packager-raw-url": "^2.12.0",
+ "@parcel/transformer-webmanifest": "^2.12.0",
+ "parcel": "^2.12.0",
  "path-browserify": "^1.0.1",
- "prettier": "3.0.1",
+ "prettier": "3.2.5",
  "process": "^0.11.10",
  "rimraf": "^5.0.1",
  "shx": "^0.3.4"
  },
  "scripts": {
  "start": "parcel --port 1234 --no-hmr public/index.html --open",
- "build": "yarn clean; yarn patch-patternfly; parcel build public/index.html",
+ "build": "yarn clean; parcel build public/index.html",
  "clean": "rimraf dist",
  "//": "TODO: patch-patternfly is to fix an upstream problem tracked at: https://github.com/patternfly/patternfly/issues/4930",
  "patch-patternfly": "shx sed -i 's/..\\/..\\/assets\\//\\/node_modules\\/@patternfly\\/react-styles\\/css\\/assets\\//g' node_modules/@patternfly/react-styles/css/components/BackgroundImage/background-image.css node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css node_modules/@patternfly/react-styles/css/components/FormControl/form-control.css node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/components/BackgroundImage/background-image.css node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/components/FormControl/form-control.css node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css/components/AboutModalBox/about-modal-box.css"

diff --git a/web/src/index.js b/web/src/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
@@ -19,12 +19,15 @@ const darkTheme = createTheme({
  },
 });
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
  <React.StrictMode>
  <ThemeProvider theme={darkTheme}>
  <CssBaseline />
  <App />
  </ThemeProvider>
  </React.StrictMode>,
- document.getElementById("root")
+ document.getElementById("root"),
 );