Update dashboard UI dependencies #1429

ui/dashboard/package.json

@@ -27,15 +27,15 @@
     "jq-web": "0.5.1",
     "lodash": "4.17.21",
     "moment": "2.29.2",
-    "react": "17.0.2",
+    "react": "18.0.0",
     "react-cool-img": "1.2.12",
-    "react-dom": "17.0.2",
+    "react-dom": "18.0.0",
     "react-hotkeys": "2.0.0",
     "react-markdown": "8.0.2",
     "react-papaparse": "4.0.2",
     "react-placeholder": "4.1.0",
     "react-router-dom": "6.3.0",
-    "react-select": "5.2.2",
+    "react-select": "5.3.0",
     "react-syntax-highlighter": "15.5.0",
     "react-table": "7.7.0",
     "remark-gfm": "3.0.1",
@@ -45,26 +45,26 @@
   },
   "devDependencies": {
     "@craco/craco": "6.4.3",
-    "@storybook/addon-actions": "6.5.0-alpha.55",
-    "@storybook/addon-essentials": "6.5.0-alpha.55",
-    "@storybook/addon-links": "6.5.0-alpha.55",
-    "@storybook/addons": "6.5.0-alpha.55",
-    "@storybook/builder-webpack5": "6.5.0-alpha.55",
-    "@storybook/manager-webpack5": "6.5.0-alpha.55",
-    "@storybook/node-logger": "6.5.0-alpha.55",
+    "@storybook/addon-actions": "6.5.0-alpha.60",
+    "@storybook/addon-essentials": "6.5.0-alpha.60",
+    "@storybook/addon-links": "6.5.0-alpha.60",
+    "@storybook/addons": "6.5.0-alpha.60",
+    "@storybook/builder-webpack5": "6.5.0-alpha.60",
+    "@storybook/manager-webpack5": "6.5.0-alpha.60",
+    "@storybook/node-logger": "6.5.0-alpha.60",
     "@storybook/preset-create-react-app": "4.1.0",
-    "@storybook/react": "6.5.0-alpha.55",
-    "@storybook/theming": "6.5.0-alpha.55",
+    "@storybook/react": "6.5.0-alpha.60",
+    "@storybook/theming": "6.5.0-alpha.60",
     "@tailwindcss/forms": "0.5.0",
     "@tailwindcss/typography": "0.5.2",
-    "@testing-library/jest-dom": "5.16.3",
+    "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.0.0",
     "@tsconfig/create-react-app": "1.0.2",
     "@types/jest": "27.4.1",
     "@types/lodash": "4.14.181",
     "@types/node": "17.0.23",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
+    "@types/react": "18.0.1",
+    "@types/react-dom": "18.0.0",
     "autoprefixer": "10.4.4",
     "lint-staged": "12.3.7",
     "npm-run-all": "4.1.5",

ui/dashboard/src/index.js

@@ -1,26 +1,26 @@
 import App from "./App";
 import ErrorBoundary from "./components/ErrorBoundary";
 import React from "react";
-import ReactDOM from "react-dom";
 import { AnalyticsProvider } from "./hooks/useAnalytics";
 import { BreakpointProvider } from "./hooks/useBreakpoint";
 import { BrowserRouter as Router } from "react-router-dom";
+import { createRoot } from "react-dom/client";
 import { ThemeProvider } from "./hooks/useTheme";
 import "./styles/index.css";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Router>
-      <ThemeProvider>
-        <ErrorBoundary>
-          <BreakpointProvider>
-            <AnalyticsProvider>
-              <App />
-            </AnalyticsProvider>
-          </BreakpointProvider>
-        </ErrorBoundary>
-      </ThemeProvider>
-    </Router>
-  </React.StrictMode>,
-  document.getElementById("root")
+const container = document.getElementById("root");
+const root = createRoot(container);
+
+root.render(
+  <Router>
+    <ThemeProvider>
+      <ErrorBoundary>
+        <BreakpointProvider>
+          <AnalyticsProvider>
+            <App />
+          </AnalyticsProvider>
+        </BreakpointProvider>
+      </ErrorBoundary>
+    </ThemeProvider>
+  </Router>
 );