From f7eb9e8d2791607f789ba3f37b2730d37517eeb6 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Sat, 4 May 2024 17:39:00 +0100 Subject: [PATCH] Update react-router-dom-v5-compat to latest version Add workaround for breaking change introduced in `6.5.0` which removed support for query params in paths as part of adding support for optional route segments. --- package-lock.json | 31 ++++++++++--------- package.json | 2 +- packages/utils/src/utils/router.js | 41 ++++++++++++++++--------- packages/utils/src/utils/router.test.js | 36 ++++++++++++++++------ src/containers/App/App.jsx | 33 ++++++-------------- 5 files changed, 79 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ebf2616f..779a2ba55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "react-hot-loader": "^4.13.1", "react-intl": "^6.6.5", "react-router-dom": "^5.3.4", - "react-router-dom-v5-compat": "^6.4.5", + "react-router-dom-v5-compat": "^6.23.0", "reconnecting-websocket": "^4.4.0" }, "devDependencies": { @@ -3699,11 +3699,11 @@ } }, "node_modules/@remix-run/router": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.5.tgz", - "integrity": "sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", "engines": { - "node": ">=14" + "node": ">=14.0.0" } }, "node_modules/@rollup/pluginutils": { @@ -15904,15 +15904,16 @@ } }, "node_modules/react-router-dom-v5-compat": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.4.5.tgz", - "integrity": "sha512-+Ld5n7yP5zAYU1mmtr3yAysl2N4D/FxSDJPVLqA084WgbpjIsacAhzymuMBtySCg0O+LGVh0meORBmJnuIlIRQ==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.23.0.tgz", + "integrity": "sha512-ffDaOI5UuahWs+n8qFj0S3N8L6VsUjU9RX2WMQWQPyoGRUxaBeaXjEngZDXhz5nsbyF+N5YAY21SmGC/8DlPug==", "dependencies": { + "@remix-run/router": "1.16.0", "history": "^5.3.0", - "react-router": "6.4.5" + "react-router": "6.23.0" }, "engines": { - "node": ">=14" + "node": ">=14.0.0" }, "peerDependencies": { "react": ">=16.8", @@ -15921,14 +15922,14 @@ } }, "node_modules/react-router-dom-v5-compat/node_modules/react-router": { - "version": "6.4.5", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.5.tgz", - "integrity": "sha512-1RQJ8bM70YEumHIlNUYc6mFfUDoWa5EgPDenK/fq0bxD8DYpQUi/S6Zoft+9DBrh2xmtg92N5HMAJgGWDhKJ5Q==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", "dependencies": { - "@remix-run/router": "1.0.5" + "@remix-run/router": "1.16.0" }, "engines": { - "node": ">=14" + "node": ">=14.0.0" }, "peerDependencies": { "react": ">=16.8" diff --git a/package.json b/package.json index 3053ae3ef..30acd2e32 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "react-hot-loader": "^4.13.1", "react-intl": "^6.6.5", "react-router-dom": "^5.3.4", - "react-router-dom-v5-compat": "^6.4.5", + "react-router-dom-v5-compat": "^6.23.0", "reconnecting-websocket": "^4.4.0" }, "devDependencies": { diff --git a/packages/utils/src/utils/router.js b/packages/utils/src/utils/router.js index cafde225c..d49dde6be 100644 --- a/packages/utils/src/utils/router.js +++ b/packages/utils/src/utils/router.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -11,6 +11,7 @@ See the License for the specific language governing permissions and limitations under the License. */ import { generatePath } from 'react-router-dom-v5-compat'; +import { labels } from './constants'; function byNamespace({ path = '' } = {}) { return `/namespaces/:namespace${path}`; @@ -115,11 +116,6 @@ export const paths = { byNamespace() { return byNamespace({ path: '/pipelineruns' }); }, - byPipeline() { - return byNamespace({ - path: '/pipelineruns?labelSelector=tekton.dev%2Fpipeline%3D:pipelineName' - }); - }, create() { return '/pipelineruns/create'; } @@ -156,14 +152,6 @@ export const paths = { byNamespace() { return byNamespace({ path: '/taskruns' }); }, - byClusterTask() { - return '/taskruns?labelSelector=tekton.dev%2FclusterTask%3D:taskName'; - }, - byTask() { - return byNamespace({ - path: '/taskruns?labelSelector=tekton.dev%2Ftask%3D:taskName' - }); - }, create() { return '/taskruns/create'; } @@ -221,4 +209,27 @@ const reducer = target => return accumulator; }, {}); -export const urls = reducer(paths); +const urls = reducer(paths); + +function filteredURL({ baseURL, label, name }) { + const labelSelector = `${label}=${name}`; + const searchParams = new URLSearchParams({ labelSelector }).toString(); + return `${baseURL}?${searchParams}`; +} + +urls.pipelineRuns.byPipeline = ({ namespace, pipelineName: name }) => { + const baseURL = urls.pipelineRuns.byNamespace({ namespace }); + return filteredURL({ baseURL, label: labels.PIPELINE, name }); +}; + +urls.taskRuns.byClusterTask = ({ taskName: name }) => { + const baseURL = urls.taskRuns.all(); + return filteredURL({ baseURL, label: labels.CLUSTER_TASK, name }); +}; + +urls.taskRuns.byTask = ({ namespace, taskName: name }) => { + const baseURL = urls.taskRuns.byNamespace({ namespace }); + return filteredURL({ baseURL, label: labels.TASK, name }); +}; + +export { urls }; diff --git a/packages/utils/src/utils/router.test.js b/packages/utils/src/utils/router.test.js index 470f0ad6e..631c4c6cd 100644 --- a/packages/utils/src/utils/router.test.js +++ b/packages/utils/src/utils/router.test.js @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,6 +12,7 @@ limitations under the License. */ import { generatePath } from 'react-router-dom-v5-compat'; import { paths, urls } from './router'; +import { labels } from './constants'; const clusterInterceptorName = 'fake_clusterInterceptorName'; const clusterTriggerBindingName = 'fake_clusterTriggerBindingName'; @@ -209,8 +210,16 @@ describe('pipelineRuns', () => { }); it('byPipeline', () => { - expect(urls.pipelineRuns.byPipeline({ namespace, pipelineName })).toEqual( - generatePath(paths.pipelineRuns.byPipeline(), { namespace, pipelineName }) + const base = 'http://localhost'; + const url = new URL( + urls.pipelineRuns.byPipeline({ namespace, pipelineName }), + base + ); + expect(url.pathname).toEqual( + generatePath(paths.pipelineRuns.byNamespace(), { namespace }) + ); + expect(url.searchParams.get('labelSelector')).toEqual( + `${labels.PIPELINE}=${pipelineName}` ); }); }); @@ -283,11 +292,13 @@ describe('taskRuns', () => { }); it('byClusterTask', () => { - expect(urls.taskRuns.byClusterTask({ namespace, taskName })).toEqual( - generatePath(paths.taskRuns.byClusterTask(), { - namespace, - taskName - }) + const base = 'http://localhost'; + const url = new URL(urls.taskRuns.byClusterTask({ taskName }), base); + expect(url.pathname).toEqual( + generatePath(paths.taskRuns.all(), { namespace }) + ); + expect(url.searchParams.get('labelSelector')).toEqual( + `${labels.CLUSTER_TASK}=${taskName}` ); }); @@ -304,8 +315,13 @@ describe('taskRuns', () => { }); it('byTask', () => { - expect(urls.taskRuns.byTask({ namespace, taskName })).toEqual( - generatePath(paths.taskRuns.byTask(), { namespace, taskName }) + const base = 'http://localhost'; + const url = new URL(urls.taskRuns.byTask({ namespace, taskName }), base); + expect(url.pathname).toEqual( + generatePath(paths.taskRuns.byNamespace(), { namespace }) + ); + expect(url.searchParams.get('labelSelector')).toEqual( + `${labels.TASK}=${taskName}` ); }); diff --git a/src/containers/App/App.jsx b/src/containers/App/App.jsx index f55cbbbf8..277143412 100644 --- a/src/containers/App/App.jsx +++ b/src/containers/App/App.jsx @@ -270,29 +270,21 @@ export function App({ lang }) { - - - + + + - + - + - - - - - @@ -308,26 +300,21 @@ export function App({ lang }) { - - - + + + - + - + - - - - -