From 82bc0c06612ccbc95d5bcf2f288dd267e74b8a9c Mon Sep 17 00:00:00 2001 From: Harri Lehtola <1781172+peruukki@users.noreply.github.com> Date: Sat, 7 Dec 2024 16:44:09 +0200 Subject: [PATCH] chore: Upgrade react-router-dom and use-query-params to latest in /ui (#4764) --- ui/package.json | 4 +- ui/src/FeastUI.tsx | 9 ++-- ui/src/components/EuiCustomLink.jsx | 2 +- ui/src/components/ProjectSelector.test.tsx | 2 +- ui/src/hacks/RouteAdapter.ts | 39 ---------------- ui/src/test-utils.tsx | 12 +++-- ui/yarn.lock | 54 +++++++++++----------- 7 files changed, 41 insertions(+), 81 deletions(-) delete mode 100644 ui/src/hacks/RouteAdapter.ts diff --git a/ui/package.json b/ui/package.json index ea7e953edc..ea91134209 100644 --- a/ui/package.json +++ b/ui/package.json @@ -35,9 +35,9 @@ "react-app-polyfill": "^3.0.0", "react-code-blocks": "^0.1.6", "react-query": "^3.39.3", - "react-router-dom": "<6.4.0", + "react-router-dom": "^6.28.0", "tslib": "^2.3.1", - "use-query-params": "^1.2.3", + "use-query-params": "^2.2.1", "zod": "^3.11.6" }, "scripts": { diff --git a/ui/src/FeastUI.tsx b/ui/src/FeastUI.tsx index 628b916f2d..210ff7a4aa 100644 --- a/ui/src/FeastUI.tsx +++ b/ui/src/FeastUI.tsx @@ -3,7 +3,7 @@ import React from "react"; import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "react-query"; import { QueryParamProvider } from "use-query-params"; -import RouteAdapter from "./hacks/RouteAdapter"; +import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import FeastUISansProviders, { FeastUIConfigs } from "./FeastUISansProviders"; interface FeastUIProps { @@ -17,11 +17,10 @@ const FeastUI = ({ reactQueryClient, feastUIConfigs }: FeastUIProps) => { const queryClient = reactQueryClient || defaultQueryClient; return ( - + // Disable v7_relativeSplatPath: custom tab routes don't currently work with it + - + diff --git a/ui/src/components/EuiCustomLink.jsx b/ui/src/components/EuiCustomLink.jsx index cf646d43f7..6872dae427 100644 --- a/ui/src/components/EuiCustomLink.jsx +++ b/ui/src/components/EuiCustomLink.jsx @@ -39,7 +39,7 @@ export default function EuiCustomLink({ to, ...rest }) { } // Generate the correct link href (with basename accounted for) - const href = useHref({ pathname: to }); + const href = useHref(to); const props = { ...rest, href, onClick }; return ; diff --git a/ui/src/components/ProjectSelector.test.tsx b/ui/src/components/ProjectSelector.test.tsx index fc5b3c6840..dfaaab7f62 100644 --- a/ui/src/components/ProjectSelector.test.tsx +++ b/ui/src/components/ProjectSelector.test.tsx @@ -40,7 +40,7 @@ test("in a full App render, it shows the right initial project", async () => { name: "Top Level", }); - within(topLevelNavigation).getByDisplayValue("Credit Score Project"); + await within(topLevelNavigation).findByDisplayValue("Credit Score Project"); expect(options.length).toBe(1); diff --git a/ui/src/hacks/RouteAdapter.ts b/ui/src/hacks/RouteAdapter.ts deleted file mode 100644 index e7743c9d90..0000000000 --- a/ui/src/hacks/RouteAdapter.ts +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import { Location } from "history"; -import { - useLocation, - useNavigate, - Location as RouterLocation, -} from "react-router-dom"; - -// via: https://github.com/pbeshai/use-query-params/issues/196#issuecomment-996893750 -interface RouteAdapterProps { - children: React.FunctionComponent<{ - history: { - replace(location: Location): void; - push(location: Location): void; - }; - location: RouterLocation; - }>; -} - -// Via: https://github.com/pbeshai/use-query-params/blob/cd44e7fb3394620f757bfb09ff57b7f296d9a5e6/examples/react-router-6/src/index.js#L36 -const RouteAdapter = ({ children }: RouteAdapterProps) => { - const navigate = useNavigate(); - const location = useLocation(); - - const adaptedHistory = React.useMemo( - () => ({ - replace(location: Location) { - navigate(location, { replace: true, state: location.state }); - }, - push(location: Location) { - navigate(location, { replace: false, state: location.state }); - }, - }), - [navigate] - ); - return children && children({ history: adaptedHistory, location }); -}; - -export default RouteAdapter; diff --git a/ui/src/test-utils.tsx b/ui/src/test-utils.tsx index c180b01872..0130686252 100644 --- a/ui/src/test-utils.tsx +++ b/ui/src/test-utils.tsx @@ -2,8 +2,8 @@ import React from "react"; import { render, RenderOptions } from "@testing-library/react"; import { QueryClient, QueryClientProvider } from "react-query"; import { QueryParamProvider } from "use-query-params"; +import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import { MemoryRouter as Router } from "react-router-dom"; -import RouteAdapter from "./hacks/RouteAdapter"; interface ProvidersProps { children: React.ReactNode; @@ -14,10 +14,12 @@ const queryClient = new QueryClient(); const AllTheProviders = ({ children }: ProvidersProps) => { return ( - - + + {children} diff --git a/ui/yarn.lock b/ui/yarn.lock index 0057595f39..773260ad86 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1869,7 +1869,7 @@ "@babel/plugin-transform-modules-commonjs" "^7.25.9" "@babel/plugin-transform-typescript" "^7.25.9" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.7.6", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.9.2": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa" integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ== @@ -2709,6 +2709,11 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== +"@remix-run/router@1.21.0": + version "1.21.0" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.21.0.tgz#c65ae4262bdcfe415dbd4f64ec87676e4a56e2b5" + integrity sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA== + "@rollup/plugin-babel@^5.2.0", "@rollup/plugin-babel@^5.3.1": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -6715,13 +6720,6 @@ highlightjs-vue@^1.0.0: resolved "https://registry.yarnpkg.com/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz#fdfe97fbea6354e70ee44e3a955875e114db086d" integrity sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA== -history@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c" - integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig== - dependencies: - "@babel/runtime" "^7.7.6" - hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -9962,20 +9960,20 @@ react-remove-scroll@^2.6.0: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-router-dom@<6.4.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d" - integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== +react-router-dom@^6.28.0: + version "6.28.0" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.28.0.tgz#f73ebb3490e59ac9f299377062ad1d10a9f579e6" + integrity sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg== dependencies: - history "^5.2.0" - react-router "6.3.0" + "@remix-run/router" "1.21.0" + react-router "6.28.0" -react-router@6.3.0: - version "6.3.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557" - integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== +react-router@6.28.0: + version "6.28.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.28.0.tgz#29247c86d7ba901d7e5a13aa79a96723c3e59d0d" + integrity sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg== dependencies: - history "^5.2.0" + "@remix-run/router" "1.21.0" react-style-singleton@^2.2.1: version "2.2.1" @@ -10588,10 +10586,10 @@ serialize-javascript@^6.0.0, serialize-javascript@^6.0.1: dependencies: randombytes "^2.1.0" -serialize-query-params@^1.3.5: - version "1.3.6" - resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-1.3.6.tgz#5dd5225db85ce747fe6fbc4897628504faafec6d" - integrity sha512-VlH7sfWNyPVZClPkRacopn6sn5uQMXBsjPVz1+pBHX895VpcYVznfJtZ49e6jymcrz+l/vowkepCZn/7xEAEdw== +serialize-query-params@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-2.0.2.tgz#598a3fb9e13f4ea1c1992fbd20231aa16b31db81" + integrity sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q== serve-index@^1.9.1: version "1.9.1" @@ -11709,12 +11707,12 @@ use-memo-one@^1.1.3: resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99" integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ== -use-query-params@^1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-1.2.3.tgz#306c31a0cbc714e8a3b4bd7e91a6a9aaccaa5e22" - integrity sha512-cdG0tgbzK+FzsV6DAt2CN8Saa3WpRnze7uC4Rdh7l15epSFq7egmcB/zuREvPNwO5Yk80nUpDZpiyHsoq50d8w== +use-query-params@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.1.tgz#c558ab70706f319112fbccabf6867b9f904e947d" + integrity sha512-i6alcyLB8w9i3ZK3caNftdb+UnbfBRNPDnc89CNQWkGRmDrm/gfydHvMBfVsQJRq3NoHOM2dt/ceBWG2397v1Q== dependencies: - serialize-query-params "^1.3.5" + serialize-query-params "^2.0.2" use-sidecar@^1.1.2: version "1.1.2"