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.
tektoncd · May 7, 2024 · 78ff06c · 78ff06c
1 parent 7e9e7b2
commit 78ff06c
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -270,29 +270,21 @@ export function App({ lang }) {
                           <CreatePipelineRun />
                         </ReadWriteRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.pipelineRuns.all()}>
-                        <NamespacedRoute>
-                          <PipelineRuns />
+                      <CompatRoute path={paths.pipelineRuns.byName()}>
+                        <NamespacedRoute isResourceDetails>
+                          <PipelineRun />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute
-                        path={paths.pipelineRuns.byNamespace()}
-                        exact
-                      >
+                      <CompatRoute path={paths.pipelineRuns.all()}>
                         <NamespacedRoute>
                           <PipelineRuns />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.pipelineRuns.byPipeline()} exact>
+                      <CompatRoute path={paths.pipelineRuns.byNamespace()}>
                         <NamespacedRoute>
                           <PipelineRuns />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.pipelineRuns.byName()}>
-                        <NamespacedRoute isResourceDetails>
-                          <PipelineRun />
-                        </NamespacedRoute>
-                      </CompatRoute>
                       <CompatRoute path={paths.tasks.all()} exact>
                         <NamespacedRoute>
                           <Tasks />
@@ -308,26 +300,21 @@ export function App({ lang }) {
                           <CreateTaskRun />
                         </ReadWriteRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.taskRuns.all()}>
-                        <NamespacedRoute>
-                          <TaskRuns />
+                      <CompatRoute path={paths.taskRuns.byName()}>
+                        <NamespacedRoute isResourceDetails>
+                          <TaskRun />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.taskRuns.byNamespace()} exact>
+                      <CompatRoute path={paths.taskRuns.all()}>
                         <NamespacedRoute>
                           <TaskRuns />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.taskRuns.byTask()} exact>
+                      <CompatRoute path={paths.taskRuns.byNamespace()}>
                         <NamespacedRoute>
                           <TaskRuns />
                         </NamespacedRoute>
                       </CompatRoute>
-                      <CompatRoute path={paths.taskRuns.byName()} exact>
-                        <NamespacedRoute isResourceDetails>
-                          <TaskRun />
-                        </NamespacedRoute>
-                      </CompatRoute>
                       <CompatRoute path={paths.customRuns.create()} exact>
                         <ReadWriteRoute>
                           <CreateCustomRun />