chore(deps): upgrade to react 18 and styled-components 6 (#4334)

* chore(deps): upgrade to react 18

* fix: styled

* chore: regen snapshots

Author: tenstad

package.json

@@ -44,17 +44,18 @@
   "homepage": "https://github.com/weaveworks/weave-gitops#readme",
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-toastify": "^7.0.4",
-    "styled-components": "^5.3.0"
+    "styled-components": "^6.1.13"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^6.3.0",
     "@mui/lab": "^6.0.0-beta.21",
     "@mui/material": "^6.3.0",
+    "@types/styled-components": "^5.1.34",
     "ansi-styles": "^6.2.1",
     "commander": "^11.0.0",
     "cross-spawn": "^7.0.5",
@@ -70,17 +71,17 @@
     "mnemonic-browser": "^0.0.1",
     "postcss": "^8.4.31",
     "query-string": "^4.3.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^19.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-is": "^18.0.0",
     "react-lottie-player": "^1.4.3",
     "react-markdown": "^8.0.7",
-    "react-query": "^3.34.7",
+    "react-query": "^3.39.3",
     "react-router-dom": "^5.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.2",
     "remark-gfm": "^3.0.1",
-    "styled-components": "^5.3.0",
+    "styled-components": "^6.1.13",
     "yaml": "^2.2.2"
   },
   "devDependencies": {
@@ -92,17 +93,16 @@
     "@parcel/optimizer-data-url": "^2.8.3",
     "@parcel/transformer-inline-string": "^2.8.3",
     "@parcel/transformer-typescript-tsc": "^2.8.3",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^6.0.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/react-hooks": "^7.0.0",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.14.165",
     "@types/luxon": "^1.26.5",
-    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.5",
-    "@types/react-is": "^19",
-    "@types/react-router-dom": "^5.1.6",
-    "@types/styled-components": "^5.1.9",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-is": "^18",
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "babel-jest": "^29.7.0",
@@ -119,7 +119,7 @@
     "parcel": "^2.13.3",
     "prettier": "^2.6.2",
     "process": "^0.11.10",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.0.0",
     "ts-jest": "^29.2.5",
     "typescript": "^5.2.2",
     "yarn-audit-fix": "^10.0.1"

ui/components/Breadcrumbs.tsx

@@ -17,6 +17,7 @@ export interface Breadcrumb {
   url?: string;
 }
 interface Props {
+  className?: string;
   path: Breadcrumb[];
 }
 export const Breadcrumbs = ({ path = [] }: Props) => {

ui/components/ClusterDashboardLink.tsx

@@ -14,6 +14,6 @@ function ClusterDashboardLink({ clusterName }: { clusterName: string }) {
 
   return <Text>{clusterName}</Text>;
 }
-export default styled(ClusterDashboardLink).attrs({
+export default styled(ClusterDashboardLink).attrs<{ className?: string }>({
   className: ClusterDashboardLink.name,
 })``;

ui/components/DataTable/__tests__/DataTable.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+import { fireEvent, render } from "@testing-library/react";
 import "jest-styled-components";
 import React from "react";
 import renderer from "react-test-renderer";

ui/components/DataTable/__tests__/DataTableFilters.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+import { fireEvent, render } from "@testing-library/react";
 import "jest-styled-components";
 import _ from "lodash";
 import React from "react";