From 8f8009665ac48b9da9c4e1acbe2ccad23f3ab0b9 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Wed, 5 Apr 2023 15:09:58 +0100 Subject: [PATCH 01/39] #1205 - Upgrade React to 18 and change render function - also, upgrade other libraries to support react 18 and fix anything that broke immediately --- package.json | 26 +-- public/index.html | 46 ++-- src/App.test.tsx | 7 +- src/example.component.tsx | 8 +- src/index.tsx | 10 +- .../navigationDrawer.component.tsx | 6 +- yarn.lock | 209 ++++++++---------- 7 files changed, 151 insertions(+), 161 deletions(-) diff --git a/package.json b/package.json index 29e350ae..0ccc7652 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "version": "1.1.0", "private": true, "resolutions": { - "@types/react": "17.0.38", - "@types/react-dom": "17.0.11" + "@types/react": "18.0.33", + "@types/react-dom": "18.0.11" }, "dependencies": { "@emotion/react": "11.10.0", @@ -14,12 +14,12 @@ "@types/history": "4.7.3", "@types/jest": "29.4.0", "@types/js-cookie": "3.0.1", - "@types/react-dom": "17.0.11", - "@types/react-redux-toastr": "7.6.0", - "@types/react-router-dom": "5.3.1", + "@types/react-dom": "18.0.11", + "@types/react-redux-toastr": "7.6.2", + "@types/react-router-dom": "5.3.3", "@types/redux-logger": "3.0.8", "axios": "0.27.2", - "connected-react-router": "6.9.1", + "connected-react-router": "6.9.3", "cookie-parser": "1.4.5", "custom-event-polyfill": "1.0.7", "cypress-failed-log": "2.10.0", @@ -37,14 +37,14 @@ "prettier": "2.8.0", "prop-types": "15.8.1", "query-string": "7.1.1", - "react": "17.0.2", + "react": "18.2.0", "react-app-polyfill": "3.0.0", - "react-dom": "17.0.2", + "react-dom": "18.2.0", "react-i18next": "12.1.1", "react-joyride": "2.5.0", "react-redux": "8.0.4", - "react-redux-toastr": "7.6.8", - "react-router-dom": "5.3.0", + "react-redux-toastr": "7.6.11", + "react-router-dom": "5.3.4", "react-scripts": "5.0.0", "redux": "4.2.0", "redux-logger": "3.0.6", @@ -102,13 +102,13 @@ ], "devDependencies": { "@testing-library/jest-dom": "5.16.5", - "@testing-library/react": "12.1.5", + "@testing-library/react": "14.0.0", "@testing-library/user-event": "14.4.2", "@types/jsonwebtoken": "9.0.1", "@types/node": "18.11.9", - "@types/react": "17.0.38", + "@types/react": "18.0.33", "@types/react-redux": "7.1.20", - "@types/react-router": "5.1.12", + "@types/react-router": "5.1.20", "@types/redux-mock-store": "1.0.2", "@typescript-eslint/eslint-plugin": "5.49.0", "@typescript-eslint/parser": "5.49.0", diff --git a/public/index.html b/public/index.html index 6de9f64d..fdecfc10 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,17 @@ - - - - - - - - - SciGateway - - - - - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.test.tsx b/src/App.test.tsx index 8d2e7aff..5d04d1fa 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App, { AppSansHoc } from './App'; import { act, fireEvent, render, screen } from '@testing-library/react'; import { flushPromises } from './setupTests'; @@ -26,8 +26,9 @@ describe('App', () => { it('renders without crashing', () => { const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); + const root = createRoot(div); + root.render(); + root.unmount(); }); it('should show preloader when react-i18next is not ready', () => { diff --git a/src/example.component.tsx b/src/example.component.tsx index 01899290..566c5300 100644 --- a/src/example.component.tsx +++ b/src/example.component.tsx @@ -7,7 +7,13 @@ interface ExampleComponentProps { } const ExampleComponent = (props: ExampleComponentProps): React.ReactElement => ( -
{props.notifications}
+
+ {props.notifications.map((notification, index) => ( +
+ {notification.severity} {notification.message} +
+ ))} +
); const mapStateToProps = (state: StateType): ExampleComponentProps => { diff --git a/src/index.tsx b/src/index.tsx index a165bb45..bb213cf1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,11 +3,11 @@ import 'react-app-polyfill/stable'; import 'custom-event-polyfill'; import './i18n'; import React from 'react'; -import ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import App from './App'; import 'typeface-roboto'; -ReactDOM.render( - , - document.getElementById('scigateway') -); +const container = document.getElementById('scigateway'); +// eslint-disable-next-line @typescript-eslint/no-non-null-assertion +const root = createRoot(container!); +root.render(); diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx index 0385722c..cb7e2b76 100644 --- a/src/navigationDrawer/navigationDrawer.component.tsx +++ b/src/navigationDrawer/navigationDrawer.component.tsx @@ -110,7 +110,7 @@ export const NavigationDrawer = ( [createLink] ); - const renderRoutes = useCallback((): React.ReactFragment => { + const renderRoutes = useCallback((): React.ReactElement => { let plugins = props.plugins; if (props.homepageUrl) { @@ -123,7 +123,7 @@ export const NavigationDrawer = ( ); return ( - + <> {Object.keys(sectionPlugins) .sort() .map((section, i) => @@ -133,7 +133,7 @@ export const NavigationDrawer = ( i ) )} - + ); }, [buildMenuSection, props.plugins, props.homepageUrl]); diff --git a/yarn.lock b/yarn.lock index 5cee937d..00bca00b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2839,9 +2839,9 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^8.0.0": - version: 8.20.0 - resolution: "@testing-library/dom@npm:8.20.0" +"@testing-library/dom@npm:^9.0.0": + version: 9.2.0 + resolution: "@testing-library/dom@npm:9.2.0" dependencies: "@babel/code-frame": ^7.10.4 "@babel/runtime": ^7.12.5 @@ -2849,9 +2849,9 @@ __metadata: aria-query: ^5.0.0 chalk: ^4.1.0 dom-accessibility-api: ^0.5.9 - lz-string: ^1.4.4 + lz-string: ^1.5.0 pretty-format: ^27.0.2 - checksum: 1e599129a2fe91959ce80900a0a4897232b89e2a8e22c1f5950c36d39c97629ea86b4986b60b173b5525a05de33fde1e35836ea597b03de78cc51b122835c6f0 + checksum: b145f43cd06ff083012cf2503aff6ccba97ff80715fcb106fe64af690f5536557bf24d37b97e8d685bbe3803d7f71d685ce71426cb1b9e250c3611e4372dcfa9 languageName: node linkType: hard @@ -2872,17 +2872,17 @@ __metadata: languageName: node linkType: hard -"@testing-library/react@npm:12.1.5": - version: 12.1.5 - resolution: "@testing-library/react@npm:12.1.5" +"@testing-library/react@npm:14.0.0": + version: 14.0.0 + resolution: "@testing-library/react@npm:14.0.0" dependencies: "@babel/runtime": ^7.12.5 - "@testing-library/dom": ^8.0.0 - "@types/react-dom": <18.0.0 + "@testing-library/dom": ^9.0.0 + "@types/react-dom": ^18.0.0 peerDependencies: - react: <18.0.0 - react-dom: <18.0.0 - checksum: 4abd0490405e709a7df584a0db604e508a4612398bb1326e8fa32dd9393b15badc826dcf6d2f7525437886d507871f719f127b9860ed69ddd204d1fa834f576a + react: ^18.0.0 + react-dom: ^18.0.0 + checksum: 4a54c8f56cc4a39b50803205f84f06280bb76521d6d5d4b3b36651d760c7c7752ef142d857d52aaf4fad4848ed7a8be49afc793a5dda105955d2f8bef24901ac languageName: node linkType: hard @@ -3075,13 +3075,6 @@ __metadata: languageName: node linkType: hard -"@types/history@npm:*, @types/history@npm:^4.7.11": - version: 4.7.11 - resolution: "@types/history@npm:4.7.11" - checksum: c92e2ba407dcab0581a9afdf98f533aa41b61a71133420a6d92b1ca9839f741ab1f9395b17454ba5b88cb86020b70b22d74a1950ccfbdfd9beeaa5459fdc3464 - languageName: node - linkType: hard - "@types/history@npm:4.7.3": version: 4.7.3 resolution: "@types/history@npm:4.7.3" @@ -3089,6 +3082,13 @@ __metadata: languageName: node linkType: hard +"@types/history@npm:^4.7.11": + version: 4.7.11 + resolution: "@types/history@npm:4.7.11" + checksum: c92e2ba407dcab0581a9afdf98f533aa41b61a71133420a6d92b1ca9839f741ab1f9395b17454ba5b88cb86020b70b22d74a1950ccfbdfd9beeaa5459fdc3464 + languageName: node + linkType: hard + "@types/hoist-non-react-statics@npm:^3.3.0, @types/hoist-non-react-statics@npm:^3.3.1": version: 3.3.1 resolution: "@types/hoist-non-react-statics@npm:3.3.1" @@ -3243,12 +3243,12 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:17.0.11": - version: 17.0.11 - resolution: "@types/react-dom@npm:17.0.11" +"@types/react-dom@npm:18.0.11": + version: 18.0.11 + resolution: "@types/react-dom@npm:18.0.11" dependencies: "@types/react": "*" - checksum: 4d5730dffbef86c887cecad7e3cecda424ce6a64d0b5441c63b5b015d48219868660a2bb1aa15e897e565ad8867fa6b885d4358b04e1c4e589ba4c07c3fda55c + checksum: 579691e4d5ec09688087568037c35edf8cfb1ab3e07f6c60029280733ee7b5c06d66df6fcc90786702c93ac8cb13bc7ff16c79ddfc75d082938fbaa36e1cdbf4 languageName: node linkType: hard @@ -3261,13 +3261,13 @@ __metadata: languageName: node linkType: hard -"@types/react-redux-toastr@npm:7.6.0": - version: 7.6.0 - resolution: "@types/react-redux-toastr@npm:7.6.0" +"@types/react-redux-toastr@npm:7.6.2": + version: 7.6.2 + resolution: "@types/react-redux-toastr@npm:7.6.2" dependencies: "@types/react": "*" redux: ^3.6.0 || ^4.0.0 - checksum: cd27db3267a4339a9e9b04171d073799ce8ac03e9f72120f7d54e0b6cc7c6a9e3cd6ebc4bdf03c4a63e446e01ac84242a7b5898cb56bb1bb9a01e02cdfab45ae + checksum: 9d4a3fa49f4302c4c0709c258e87bdb801eba4af4e99c81b157b19b0426215382f193e392dcd23697f3b0f7a431bfc3cb61723849f074489b1633cd9db4ddd4f languageName: node linkType: hard @@ -3283,14 +3283,14 @@ __metadata: languageName: node linkType: hard -"@types/react-router-dom@npm:5.3.1": - version: 5.3.1 - resolution: "@types/react-router-dom@npm:5.3.1" +"@types/react-router-dom@npm:5.3.3": + version: 5.3.3 + resolution: "@types/react-router-dom@npm:5.3.3" dependencies: - "@types/history": "*" + "@types/history": ^4.7.11 "@types/react": "*" "@types/react-router": "*" - checksum: 44621f53c124eb42e0c90fd8c393534b6679c0613dc94577705cec1ed93ee475cd5130fea5aedbf7b53175f4c49753d132eb113480a088982d774a482b373120 + checksum: 28c4ea48909803c414bf5a08502acbb8ba414669b4b43bb51297c05fe5addc4df0b8fd00e0a9d1e3535ec4073ef38aaafac2c4a2b95b787167d113bc059beff3 languageName: node linkType: hard @@ -3304,13 +3304,13 @@ __metadata: languageName: node linkType: hard -"@types/react-router@npm:5.1.12": - version: 5.1.12 - resolution: "@types/react-router@npm:5.1.12" +"@types/react-router@npm:5.1.20": + version: 5.1.20 + resolution: "@types/react-router@npm:5.1.20" dependencies: - "@types/history": "*" + "@types/history": ^4.7.11 "@types/react": "*" - checksum: c2697e608c2ba007370a23e490b0811f564777e01b51f5f5f61b365357a32f6470d4ace6a99f21f026217d10030cc28e2ce292b065558a9e7ab762bc0e3f3d5a + checksum: 128764143473a5e9457ddc715436b5d49814b1c214dde48939b9bef23f0e77f52ffcdfa97eb8d3cc27e2c229869c0cdd90f637d887b62f2c9f065a87d6425419 languageName: node linkType: hard @@ -3323,14 +3323,14 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:17.0.38": - version: 17.0.38 - resolution: "@types/react@npm:17.0.38" +"@types/react@npm:18.0.33": + version: 18.0.33 + resolution: "@types/react@npm:18.0.33" dependencies: "@types/prop-types": "*" "@types/scheduler": "*" csstype: ^3.0.2 - checksum: 4079f4f959cd4a4bfaeda8b89fe8a1b1f8bdc9d87acfdc5f74a0b39cec9ec6a470724357c62778c0f063180b360c250e920c5a142f1dbcda67d9cc25a6d43a85 + checksum: 4fbd2b2b6a26378bdfde121081a6406ec2d39e4ba87ea5f6897ab7bb2198713165e6fd703ad4ed7ba1d4f23ef54a4c9f108f3105c7ed8e136411ee6bdebc5669 languageName: node linkType: hard @@ -5472,11 +5472,11 @@ __metadata: languageName: node linkType: hard -"connected-react-router@npm:6.9.1": - version: 6.9.1 - resolution: "connected-react-router@npm:6.9.1" +"connected-react-router@npm:6.9.3": + version: 6.9.3 + resolution: "connected-react-router@npm:6.9.3" dependencies: - immutable: ^3.8.1 || ^4.0.0-rc.1 + immutable: ^3.8.1 || ^4.0.0 lodash.isequalwith: ^4.4.0 prop-types: ^15.7.2 seamless-immutable: ^7.1.3 @@ -5491,7 +5491,7 @@ __metadata: optional: true seamless-immutable: optional: true - checksum: 9657f76f7bbc660df8e668973898129a47e5d89d81619e2b0c1a210e84f14df6539cf36f3d4041b775dfc34fbede47289cee3e1ed2a718530c672314986e173e + checksum: 047a11c2f3c9993087f3cd467789445781320c61f3184e1016e7b05862a275006004867231cc7396c7f213afd2fbce7e8ac0df39ba2cda7502d72a140657f9e7 languageName: node linkType: hard @@ -8589,10 +8589,10 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^3.8.1 || ^4.0.0-rc.1": - version: 4.1.0 - resolution: "immutable@npm:4.1.0" - checksum: b9bc1f14fb18eb382d48339c064b24a1f97ae4cf43102e0906c0a6e186a27afcd18b55ca4a0b63c98eefb58143e2b5ebc7755a5fb4da4a7ad84b7a6096ac5b13 +"immutable@npm:^3.8.1 || ^4.0.0": + version: 4.3.0 + resolution: "immutable@npm:4.3.0" + checksum: bbd7ea99e2752e053323543d6ff1cc71a4b4614fa6121f321ca766db2bd2092f3f1e0a90784c5431350b7344a4f792fa002eac227062d59b9377b6c09063b58b languageName: node linkType: hard @@ -10417,12 +10417,12 @@ __metadata: languageName: node linkType: hard -"lz-string@npm:^1.4.4": - version: 1.4.4 - resolution: "lz-string@npm:1.4.4" +"lz-string@npm:^1.5.0": + version: 1.5.0 + resolution: "lz-string@npm:1.5.0" bin: lz-string: bin/bin.js - checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61 + checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d languageName: node linkType: hard @@ -10614,19 +10614,6 @@ __metadata: languageName: node linkType: hard -"mini-create-react-context@npm:^0.4.0": - version: 0.4.1 - resolution: "mini-create-react-context@npm:0.4.1" - dependencies: - "@babel/runtime": ^7.12.1 - tiny-warning: ^1.0.3 - peerDependencies: - prop-types: ^15.0.0 - react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 - checksum: f8cb2c7738aac355fe9ce7e8425f371b7fa90daddd5133edda4ccfdc18c49043b2ec04be6f3abf09b60a0f52549d54f158d5bfd81cdfb1a658531e5b9fe7bc6a - languageName: node - linkType: hard - "mini-css-extract-plugin@npm:^2.4.5": version: 2.7.0 resolution: "mini-css-extract-plugin@npm:2.7.0" @@ -12684,16 +12671,15 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:17.0.2": - version: 17.0.2 - resolution: "react-dom@npm:17.0.2" +"react-dom@npm:18.2.0": + version: 18.2.0 + resolution: "react-dom@npm:18.2.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - scheduler: ^0.20.2 + scheduler: ^0.23.0 peerDependencies: - react: 17.0.2 - checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c + react: ^18.2.0 + checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc languageName: node linkType: hard @@ -12788,18 +12774,18 @@ __metadata: languageName: node linkType: hard -"react-redux-toastr@npm:7.6.8": - version: 7.6.8 - resolution: "react-redux-toastr@npm:7.6.8" +"react-redux-toastr@npm:7.6.11": + version: 7.6.11 + resolution: "react-redux-toastr@npm:7.6.11" dependencies: classnames: ^2.2.3 eventemitter3: ^3.1.0 peerDependencies: prop-types: ^15.5.7 - react: ^0.14 || ^15.0.1 || ^16.0.0 || ^17.0.0 - react-redux: ^4.0.1 || ^5.0.1 || ^6.0.0 || ^7.0.0 + react: ^0.14 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-redux: ^4.0.1 || ^5.0.1 || ^6.0.0 || ^7.0.0 || ^8.0.0 redux: ^3.0.5 || ^4.0.0 - checksum: 5548b9966977638ab2a846d49d9a16843f1aa5b7a4695553ca60484655984076186de31f12eb19562ec48adb634df8815a48f9ce48a59776d06ac2584b36f7eb + checksum: 9e4ac8fbfe0bb3c3a5f5c7036e1d6c57651b955b1323de1a5eb82e8b8c0155bebd6ac133433c70b247c1825beffd8b072d07426d2bc4f89d30eb2e25b66fa568 languageName: node linkType: hard @@ -12842,32 +12828,31 @@ __metadata: languageName: node linkType: hard -"react-router-dom@npm:5.3.0": - version: 5.3.0 - resolution: "react-router-dom@npm:5.3.0" +"react-router-dom@npm:5.3.4": + version: 5.3.4 + resolution: "react-router-dom@npm:5.3.4" dependencies: "@babel/runtime": ^7.12.13 history: ^4.9.0 loose-envify: ^1.3.1 prop-types: ^15.6.2 - react-router: 5.2.1 + react-router: 5.3.4 tiny-invariant: ^1.0.2 tiny-warning: ^1.0.0 peerDependencies: react: ">=15" - checksum: 47584fd629ecca52398d7888cab193b8a74057cc99a7ef44410c405d4082f618c3c0399db5325bc3524f9c511404086169570013b61a94dfa6acdfdc850d7a1f + checksum: b86a6f2f5222f041e38adf4e4b32c7643d6735a1a915ef25855b2db285fd059d72ba8d62e5bcd5d822b8ef9520a80453209e55077f5a90d0f72e908979b8f535 languageName: node linkType: hard -"react-router@npm:5.2.1": - version: 5.2.1 - resolution: "react-router@npm:5.2.1" +"react-router@npm:5.3.4": + version: 5.3.4 + resolution: "react-router@npm:5.3.4" dependencies: "@babel/runtime": ^7.12.13 history: ^4.9.0 hoist-non-react-statics: ^3.1.0 loose-envify: ^1.3.1 - mini-create-react-context: ^0.4.0 path-to-regexp: ^1.7.0 prop-types: ^15.6.2 react-is: ^16.6.0 @@ -12875,7 +12860,7 @@ __metadata: tiny-warning: ^1.0.0 peerDependencies: react: ">=15" - checksum: 7daae084bf64531eb619cc5f4cc40ce5ae0a541b64f71d74ec71a38cbf6130ebdbb7cf38f157303fad5846deec259401f96c4d6c7386466dcc989719e01f9aaa + checksum: 892d4e274a23bf4f39abc2efca54472fb646d3aed4b584020cf49654d2f50d09a2bacebe7c92b4ec7cb8925077376dfcd0664bad6442a73604397cefec9f01f9 languageName: node linkType: hard @@ -12961,13 +12946,12 @@ __metadata: languageName: node linkType: hard -"react@npm:17.0.2": - version: 17.0.2 - resolution: "react@npm:17.0.2" +"react@npm:18.2.0": + version: 18.2.0 + resolution: "react@npm:18.2.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b + checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b languageName: node linkType: hard @@ -13513,13 +13497,12 @@ __metadata: languageName: node linkType: hard -"scheduler@npm:^0.20.2": - version: 0.20.2 - resolution: "scheduler@npm:0.20.2" +"scheduler@npm:^0.23.0": + version: 0.23.0 + resolution: "scheduler@npm:0.23.0" dependencies: loose-envify: ^1.1.0 - object-assign: ^4.1.1 - checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc + checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a languageName: node linkType: hard @@ -13577,19 +13560,19 @@ __metadata: "@mui/icons-material": 5.10.3 "@mui/material": 5.10.0 "@testing-library/jest-dom": 5.16.5 - "@testing-library/react": 12.1.5 + "@testing-library/react": 14.0.0 "@testing-library/user-event": 14.4.2 "@types/history": 4.7.3 "@types/jest": 29.4.0 "@types/js-cookie": 3.0.1 "@types/jsonwebtoken": 9.0.1 "@types/node": 18.11.9 - "@types/react": 17.0.38 - "@types/react-dom": 17.0.11 + "@types/react": 18.0.33 + "@types/react-dom": 18.0.11 "@types/react-redux": 7.1.20 - "@types/react-redux-toastr": 7.6.0 - "@types/react-router": 5.1.12 - "@types/react-router-dom": 5.3.1 + "@types/react-redux-toastr": 7.6.2 + "@types/react-router": 5.1.20 + "@types/react-router-dom": 5.3.3 "@types/redux-logger": 3.0.8 "@types/redux-mock-store": 1.0.2 "@typescript-eslint/eslint-plugin": 5.49.0 @@ -13598,7 +13581,7 @@ __metadata: axios-mock-adapter: 1.21.1 babel-eslint: 10.1.0 concurrently: 7.6.0 - connected-react-router: 6.9.1 + connected-react-router: 6.9.3 cookie-parser: 1.4.5 cross-env: 7.0.3 custom-event-polyfill: 1.0.7 @@ -13621,14 +13604,14 @@ __metadata: prettier: 2.8.0 prop-types: 15.8.1 query-string: 7.1.1 - react: 17.0.2 + react: 18.2.0 react-app-polyfill: 3.0.0 - react-dom: 17.0.2 + react-dom: 18.2.0 react-i18next: 12.1.1 react-joyride: 2.5.0 react-redux: 8.0.4 - react-redux-toastr: 7.6.8 - react-router-dom: 5.3.0 + react-redux-toastr: 7.6.11 + react-router-dom: 5.3.4 react-scripts: 5.0.0 redux: 4.2.0 redux-logger: 3.0.6 @@ -14705,7 +14688,7 @@ __metadata: languageName: node linkType: hard -"tiny-warning@npm:^1.0.0, tiny-warning@npm:^1.0.3": +"tiny-warning@npm:^1.0.0": version: 1.0.3 resolution: "tiny-warning@npm:1.0.3" checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71 From f4d18e2bd2360ec12724cac76b19ce1d1b755bd9 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Tue, 25 Apr 2023 17:47:28 +0100 Subject: [PATCH 02/39] Add CssBaseline to theme provider Plus some misc styling fixes --- src/footer/footer.component.tsx | 4 +-- .../navigationDrawer.component.tsx | 31 ++++++++++--------- src/routing/routing.component.tsx | 4 +-- src/theming.tsx | 10 ++---- 4 files changed, 23 insertions(+), 26 deletions(-) diff --git a/src/footer/footer.component.tsx b/src/footer/footer.component.tsx index c80abe6d..5c4f16b9 100644 --- a/src/footer/footer.component.tsx +++ b/src/footer/footer.component.tsx @@ -11,8 +11,8 @@ import { Link as RouterLink } from 'react-router-dom'; const RootDiv = styled('div')(({ theme }) => ({ position: 'absolute', bottom: 0, - paddingBottom: theme.footerPaddingBottom, - paddingTop: theme.footerPaddingTop, + paddingBottom: theme.spacing(1), + paddingTop: theme.spacing(1), width: '100%', height: theme.footerHeight, display: 'flex', diff --git a/src/navigationDrawer/navigationDrawer.component.tsx b/src/navigationDrawer/navigationDrawer.component.tsx index cb7e2b76..ccee353a 100644 --- a/src/navigationDrawer/navigationDrawer.component.tsx +++ b/src/navigationDrawer/navigationDrawer.component.tsx @@ -1,5 +1,5 @@ import React, { Fragment, useCallback } from 'react'; -import { Box, styled, Theme, Typography } from '@mui/material'; +import { Box, ListItemButton, styled, Theme, Typography } from '@mui/material'; import Drawer from '@mui/material/Drawer'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; @@ -58,21 +58,22 @@ export const NavigationDrawer = ( component={ForwardRefLink} to={plugin.link} id={`plugin-link-${plugin.link.replace(/\//g, '-')}`} - button + disablePadding dense > - theme.colours.blue, - }, - }} - /> + + theme.colours.blue, + }, + }} + /> + ); }, @@ -162,7 +163,7 @@ export const NavigationDrawer = ( width: theme.drawerWidth, background: theme.palette.background.default, top: theme.mainAppBarHeight, - height: `calc(100% - ${theme.footerPaddingBottom} - ${theme.footerPaddingTop} - ${theme.footerHeight} - ${theme.mainAppBarHeight})`, + height: `calc(100% - ${theme.footerHeight} - ${theme.mainAppBarHeight})`, position: 'absolute', }), }} diff --git a/src/routing/routing.component.tsx b/src/routing/routing.component.tsx index ffc802e9..8a08d3d2 100644 --- a/src/routing/routing.component.tsx +++ b/src/routing/routing.component.tsx @@ -32,7 +32,7 @@ const ContainerDiv = styled('div', { if (drawerOpen) { return { width: `calc(100% - ${theme.drawerWidth})`, - maxHeight: `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight} - ${theme.footerPaddingTop} - ${theme.footerPaddingBottom})`, + maxHeight: `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight})`, overflow: 'auto', marginLeft: theme.drawerWidth, transition: theme.transitions.create(['margin', 'width'], { @@ -44,7 +44,7 @@ const ContainerDiv = styled('div', { return { width: '100%', - maxHeight: `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight} - ${theme.footerPaddingTop} - ${theme.footerPaddingBottom})`, + maxHeight: `calc(100vh - ${theme.mainAppBarHeight} - ${theme.footerHeight})`, overflow: 'auto', transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.easeIn, diff --git a/src/theming.tsx b/src/theming.tsx index 35570c61..4643cb69 100644 --- a/src/theming.tsx +++ b/src/theming.tsx @@ -10,6 +10,7 @@ import { StateType } from './state/state.types'; import { connect, useSelector } from 'react-redux'; import { checkboxClasses } from '@mui/material/Checkbox'; import { + CssBaseline, formHelperTextClasses, formLabelClasses, inputClasses, @@ -114,8 +115,6 @@ declare module '@mui/material/styles' { interface Theme { colours: ThemeColours; drawerWidth: string; - footerPaddingTop: string; - footerPaddingBottom: string; footerHeight: string; mainAppBarHeight: string; } @@ -123,8 +122,6 @@ declare module '@mui/material/styles' { interface ThemeOptions { colours: ThemeColours; drawerWidth: string; - footerPaddingTop: string; - footerPaddingBottom: string; footerHeight: string; mainAppBarHeight: string; } @@ -493,9 +490,7 @@ export const buildTheme = ( components: componentOverrides, colours: colours, drawerWidth: '220px', - footerPaddingTop: '8px', - footerPaddingBottom: '8px', - footerHeight: '20px', + footerHeight: '32px', mainAppBarHeight: '64px', }); }; @@ -531,6 +526,7 @@ const SciGatewayThemeProvider = (props: { primaryColour )} > + {props.children} From b1c03f9408c41c4c38a917fd342cf559b7c43a44 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Tue, 25 Apr 2023 17:48:27 +0100 Subject: [PATCH 03/39] Change jwt & github auth provider URL paths to support OG --- .gitignore | 3 +- micro-frontend-tools/.gitignore | 3 +- package.json | 7 ++-- server/auth-server.js | 17 ++++---- src/authentication/githubAuthProvider.tsx | 4 +- src/authentication/jwtAuthProvider.tsx | 8 ++-- yarn.lock | 48 ++++++++++++++++------- 7 files changed, 56 insertions(+), 34 deletions(-) diff --git a/.gitignore b/.gitignore index 86281662..343d0d06 100644 --- a/.gitignore +++ b/.gitignore @@ -31,5 +31,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -public/settings.json +**/public/*settings*.json +!**/public/*settings.example.json public/*.js \ No newline at end of file diff --git a/micro-frontend-tools/.gitignore b/micro-frontend-tools/.gitignore index bc71dcdf..b2664113 100644 --- a/micro-frontend-tools/.gitignore +++ b/micro-frontend-tools/.gitignore @@ -1 +1,2 @@ -dev-plugin-settings.json \ No newline at end of file +/*settings*.json +!/*settings.example.json \ No newline at end of file diff --git a/package.json b/package.json index 0ccc7652..34b6ed80 100644 --- a/package.json +++ b/package.json @@ -42,14 +42,14 @@ "react-dom": "18.2.0", "react-i18next": "12.1.1", "react-joyride": "2.5.0", - "react-redux": "8.0.4", + "react-redux": "8.0.5", "react-redux-toastr": "7.6.11", "react-router-dom": "5.3.4", "react-scripts": "5.0.0", - "redux": "4.2.0", + "redux": "4.2.1", "redux-logger": "3.0.6", "redux-thunk": "2.4.1", - "single-spa": "5.9.1", + "single-spa": "5.9.4", "typeface-roboto": "1.1.13", "typescript": "4.9.3" }, @@ -115,6 +115,7 @@ "axios-mock-adapter": "1.21.1", "babel-eslint": "10.1.0", "concurrently": "7.6.0", + "cors": "2.8.5", "cross-env": "7.0.3", "cypress": "12.3.0", "eslint": "8.33.0", diff --git a/server/auth-server.js b/server/auth-server.js index 47c48bf1..5a59f88e 100644 --- a/server/auth-server.js +++ b/server/auth-server.js @@ -6,9 +6,11 @@ const cookieParser = require('cookie-parser'); const https = require('https'); const fs = require('fs'); const waitOn = require('wait-on'); +const cors = require('cors'); const app = express(); const port = 8000; +app.use(cors()); app.use(express.json()); app.use(cookieParser()); @@ -40,7 +42,7 @@ function isValidLogin(username, password) { return username === 'username' && password === 'password'; } -app.post(`/api/jwt/authenticate`, function (req, res) { +app.post(`/login`, function (req, res) { const { username, password } = req.body; if (username === 'error') { @@ -68,10 +70,7 @@ app.post(`/api/jwt/authenticate`, function (req, res) { sameSite: 'lax', maxAge: 604800, }); - res.status(200).json({ - username, - token: accessToken, - }); + res.status(200).json(accessToken); } else { res.status(401).json({ error: 'Incorrect email or password', @@ -79,7 +78,7 @@ app.post(`/api/jwt/authenticate`, function (req, res) { } }); -app.post(`/api/jwt/checkToken`, withAuth, function (req, res) { +app.post(`/verify`, withAuth, function (req, res) { const { token } = req.body; if (jwt.verify(token, jwtSecret)) { res.sendStatus(200); @@ -90,7 +89,7 @@ app.post(`/api/jwt/checkToken`, withAuth, function (req, res) { } }); -app.post(`/api/jwt/refresh`, function (req, res) { +app.post(`/refresh`, function (req, res) { const refreshToken = req.cookies['scigateway:refresh_token']; const accessToken = req.body.token; @@ -121,7 +120,7 @@ app.post(`/api/jwt/refresh`, function (req, res) { } }); -app.post(`/api/github/authenticate`, function (req, res) { +app.post(`/github/login`, function (req, res) { const { code } = req.body; const headers = { @@ -158,7 +157,7 @@ app.post(`/api/github/authenticate`, function (req, res) { }); }); -app.post(`/api/github/checkToken`, function (req, res) { +app.post(`/github/verify`, function (req, res) { const { token } = req.body; axios .get('https://api.github.com/user', { diff --git a/src/authentication/githubAuthProvider.tsx b/src/authentication/githubAuthProvider.tsx index 714ca3ec..9d5ed76a 100644 --- a/src/authentication/githubAuthProvider.tsx +++ b/src/authentication/githubAuthProvider.tsx @@ -18,7 +18,7 @@ export default class GithubAuthProvider extends BaseAuthProvider { return Promise.resolve(); } - return Axios.post(`${this.authUrl}/api/github/authenticate`, { + return Axios.post(`${this.authUrl}/github/login`, { code: params.code, }) .then((res) => { @@ -32,7 +32,7 @@ export default class GithubAuthProvider extends BaseAuthProvider { } public verifyLogIn(): Promise { - return Axios.post(`${this.authUrl}/api/github/checkToken`, { + return Axios.post(`${this.authUrl}/github/verify`, { token: this.token, }) .then((res) => { diff --git a/src/authentication/jwtAuthProvider.tsx b/src/authentication/jwtAuthProvider.tsx index 534757ec..ccbf23e4 100644 --- a/src/authentication/jwtAuthProvider.tsx +++ b/src/authentication/jwtAuthProvider.tsx @@ -7,12 +7,12 @@ export default class JWTAuthProvider extends BaseAuthProvider { return Promise.resolve(); } - return Axios.post(`${this.authUrl}/api/jwt/authenticate`, { + return Axios.post(`${this.authUrl}/login`, { username, password, }) .then((res) => { - this.storeToken(res.data.token); + this.storeToken(res.data); this.storeUser(username); return; }) @@ -22,7 +22,7 @@ export default class JWTAuthProvider extends BaseAuthProvider { } public verifyLogIn(): Promise { - return Axios.post(`${this.authUrl}/api/jwt/checkToken`, { + return Axios.post(`${this.authUrl}/verify`, { token: this.token, }) .then(() => { @@ -32,7 +32,7 @@ export default class JWTAuthProvider extends BaseAuthProvider { } public refresh(): Promise { - return Axios.post(`${this.authUrl}/api/jwt/refresh`, { + return Axios.post(`${this.authUrl}/refresh`, { token: this.token, }) .then((res) => { diff --git a/yarn.lock b/yarn.lock index 00bca00b..12a5b2ed 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5600,6 +5600,16 @@ __metadata: languageName: node linkType: hard +"cors@npm:2.8.5": + version: 2.8.5 + resolution: "cors@npm:2.8.5" + dependencies: + object-assign: ^4 + vary: ^1 + checksum: ced838404ccd184f61ab4fdc5847035b681c90db7ac17e428f3d81d69e2989d2b680cc254da0e2554f5ed4f8a341820a1ce3d1c16b499f6e2f47a1b9b07b5006 + languageName: node + linkType: hard + "cosmiconfig@npm:^6.0.0": version: 6.0.0 resolution: "cosmiconfig@npm:6.0.0" @@ -10969,7 +10979,7 @@ __metadata: languageName: node linkType: hard -"object-assign@npm:^4.1.1": +"object-assign@npm:^4, object-assign@npm:^4.1.1": version: 4.1.1 resolution: "object-assign@npm:4.1.1" checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f @@ -12789,9 +12799,9 @@ __metadata: languageName: node linkType: hard -"react-redux@npm:8.0.4": - version: 8.0.4 - resolution: "react-redux@npm:8.0.4" +"react-redux@npm:8.0.5": + version: 8.0.5 + resolution: "react-redux@npm:8.0.5" dependencies: "@babel/runtime": ^7.12.1 "@types/hoist-non-react-statics": ^3.3.1 @@ -12817,7 +12827,7 @@ __metadata: optional: true redux: optional: true - checksum: fd940de6a691c734ea975cb73a4413ee6beadb48434d6306fc2edbcf40c0c8c6432b0008663372d01b3578c9381b0acae7766d9f2f5f5f61a0cdaf7abc5eab7d + checksum: a108f4f7ead6ac005e656d46051474a2bbdb31ede481bbbb3d8d779c1a35e1940b8655577cc5021313411864d305f67fc719aa48d6e5ed8288cf9cbe8b7042e4 languageName: node linkType: hard @@ -13045,7 +13055,16 @@ __metadata: languageName: node linkType: hard -"redux@npm:4.2.0, redux@npm:^3.6.0 || ^4.0.0, redux@npm:^4.0.0, redux@npm:^4.0.5": +"redux@npm:4.2.1": + version: 4.2.1 + resolution: "redux@npm:4.2.1" + dependencies: + "@babel/runtime": ^7.9.2 + checksum: f63b9060c3a1d930ae775252bb6e579b42415aee7a23c4114e21a0b4ba7ec12f0ec76936c00f546893f06e139819f0e2855e0d55ebfce34ca9c026241a6950dd + languageName: node + linkType: hard + +"redux@npm:^3.6.0 || ^4.0.0, redux@npm:^4.0.0, redux@npm:^4.0.5": version: 4.2.0 resolution: "redux@npm:4.2.0" dependencies: @@ -13583,6 +13602,7 @@ __metadata: concurrently: 7.6.0 connected-react-router: 6.9.3 cookie-parser: 1.4.5 + cors: 2.8.5 cross-env: 7.0.3 custom-event-polyfill: 1.0.7 cypress: 12.3.0 @@ -13609,16 +13629,16 @@ __metadata: react-dom: 18.2.0 react-i18next: 12.1.1 react-joyride: 2.5.0 - react-redux: 8.0.4 + react-redux: 8.0.5 react-redux-toastr: 7.6.11 react-router-dom: 5.3.4 react-scripts: 5.0.0 - redux: 4.2.0 + redux: 4.2.1 redux-logger: 3.0.6 redux-mock-store: 1.5.4 redux-thunk: 2.4.1 serve: 14.2.0 - single-spa: 5.9.1 + single-spa: 5.9.4 start-server-and-test: 1.15.0 typeface-roboto: 1.1.13 typescript: 4.9.3 @@ -13848,10 +13868,10 @@ __metadata: languageName: node linkType: hard -"single-spa@npm:5.9.1": - version: 5.9.1 - resolution: "single-spa@npm:5.9.1" - checksum: 027cd1a416082074ddfe533329c607d1961b834c3566781b846814f1c6831e92bfce9118a5b635bdc488f33a4ea871b7c369fb35b9d9166e67ff4df907e2e1e6 +"single-spa@npm:5.9.4": + version: 5.9.4 + resolution: "single-spa@npm:5.9.4" + checksum: 8547b5db3d1c6788f44833b1bf7a89697a72a4ca4b801c3f9ddbf4e2949a40bc1d9e9a24650460c7a16f5a668d4e332fc237acacb84f329031815c19578a5907 languageName: node linkType: hard @@ -15183,7 +15203,7 @@ __metadata: languageName: node linkType: hard -"vary@npm:~1.1.2": +"vary@npm:^1, vary@npm:~1.1.2": version: 1.1.2 resolution: "vary@npm:1.1.2" checksum: ae0123222c6df65b437669d63dfa8c36cee20a504101b2fcd97b8bf76f91259c17f9f2b4d70a1e3c6bbcee7f51b28392833adb6b2770b23b01abec84e369660b From d139560974a8d837a49852e125c335bee3adbca8 Mon Sep 17 00:00:00 2001 From: Louise Davies Date: Wed, 26 Apr 2023 15:28:12 +0100 Subject: [PATCH 04/39] #1205 - fix unit tests for react 18 & OG compatibility changes --- src/App.test.tsx | 25 +++++++++++++------ .../example.component.test.tsx.snap | 4 ++- src/__snapshots__/pageContainer.test.tsx.snap | 6 ++--- src/authentication/jwtAuthProvider.test.tsx | 15 ++++------- src/example.component.test.tsx | 4 ++- .../footer.component.test.tsx.snap | 2 +- .../navigationDrawer.component.test.tsx.snap | 4 +-- .../routing.component.test.tsx.snap | 12 ++++----- .../authorisedRoute.component.test.tsx | 20 ++++++++++++--- 9 files changed, 56 insertions(+), 36 deletions(-) diff --git a/src/App.test.tsx b/src/App.test.tsx index 5d04d1fa..2fc9c054 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -27,8 +27,12 @@ describe('App', () => { it('renders without crashing', () => { const div = document.createElement('div'); const root = createRoot(div); - root.render(); - root.unmount(); + act(() => { + root.render(); + }); + act(() => { + root.unmount(); + }); }); it('should show preloader when react-i18next is not ready', () => { @@ -59,11 +63,14 @@ describe('App', () => { order: 0, }, }; - document.dispatchEvent( - new CustomEvent('scigateway', { - detail: registerRouteAction, - }) - ); + + act(() => { + document.dispatchEvent( + new CustomEvent('scigateway', { + detail: registerRouteAction, + }) + ); + }); // go to plugin page await fireEvent.click(screen.getByRole('link', { name: 'Test plugin' })); @@ -81,7 +88,9 @@ describe('App', () => { }) ); - jest.runOnlyPendingTimers(); + act(() => { + jest.runOnlyPendingTimers(); + }); await act(async () => { await flushPromises(); diff --git a/src/__snapshots__/example.component.test.tsx.snap b/src/__snapshots__/example.component.test.tsx.snap index 90e6b261..d74f7669 100644 --- a/src/__snapshots__/example.component.test.tsx.snap +++ b/src/__snapshots__/example.component.test.tsx.snap @@ -3,7 +3,9 @@ exports[`Example component renders correctly 1`] = `
- test notification +
+ warning test notification +
`; diff --git a/src/__snapshots__/pageContainer.test.tsx.snap b/src/__snapshots__/pageContainer.test.tsx.snap index 79b37ff3..1b989c8b 100644 --- a/src/__snapshots__/pageContainer.test.tsx.snap +++ b/src/__snapshots__/pageContainer.test.tsx.snap @@ -170,7 +170,7 @@ exports[`PageContainer - Tests renders correctly 1`] = ` class="MuiDrawer-root MuiDrawer-docked css-ak80xd-MuiDrawer-docked" >