More preparation for React Router v6 update

Composition of `<Route>` elements https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f#get-started-upgrading-today `<Redirect>` inside `<Switch>` https://gist.github.com/mjackson/b5748add2795ce7448a366ae8f8ae3bb#get-started-upgrading-today
tektoncd · Sep 9, 2022 · 9737cc4 · 9737cc4
1 parent e9f7ce4
commit 9737cc4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/src/containers/App/App.js b/src/containers/App/App.js
@@ -80,7 +80,6 @@ import {
 import {
   NamespaceContext,
   useExtensions,
-  useIsReadOnly,
   useLogoutURL,
   useNamespaces,
   useProperties,
@@ -157,7 +156,6 @@ export function App({ lang }) {
     isFetching: isFetchingProperties,
     isPlaceholderData: isPropertiesPlaceholder
   } = useProperties();
-  const isReadOnly = useIsReadOnly();
   const logoutURL = useLogoutURL();
   const tenantNamespace = useTenantNamespace();
 
@@ -240,18 +238,25 @@ export function App({ lang }) {
               >
                 <PageErrorBoundary>
                   <Switch>
-                    <Redirect exact from="/" to={urls.about()} />
+                    <Route
+                      path="/"
+                      exact
+                      render={() => <Redirect to={urls.about()} />}
+                    />
                     <Route path={paths.pipelines.all()} exact>
                       <Pipelines />
                     </Route>
                     <Route path={paths.pipelines.byNamespace()} exact>
                       <Pipelines />
                     </Route>
-                    <ReadWriteRoute
-                      isReadOnly={isReadOnly}
+                    <Route
                       path={paths.pipelineRuns.create()}
                       exact
-                      component={CreatePipelineRun}
+                      render={() => (
+                        <ReadWriteRoute>
+                          <CreatePipelineRun />
+                        </ReadWriteRoute>
+                      )}
                     />
                     <Route path={paths.pipelineRuns.all()}>
                       <PipelineRuns />
@@ -274,11 +279,14 @@ export function App({ lang }) {
                     <Route path={paths.pipelineResources.byName()} exact>
                       <PipelineResource />
                     </Route>
-                    <ReadWriteRoute
-                      isReadOnly={isReadOnly}
+                    <Route
                       path={paths.pipelineResources.create()}
                       exact
-                      component={CreatePipelineResource}
+                      render={() => (
+                        <ReadWriteRoute>
+                          <CreatePipelineResource />
+                        </ReadWriteRoute>
+                      )}
                     />
 
                     <Route path={paths.tasks.all()} exact>
@@ -287,11 +295,14 @@ export function App({ lang }) {
                     <Route path={paths.tasks.byNamespace()} exact>
                       <Tasks />
                     </Route>
-                    <ReadWriteRoute
-                      isReadOnly={isReadOnly}
+                    <Route
                       path={paths.taskRuns.create()}
                       exact
-                      component={CreateTaskRun}
+                      render={() => (
+                        <ReadWriteRoute>
+                          <CreateTaskRun />
+                        </ReadWriteRoute>
+                      )}
                     />
                     <Route path={paths.taskRuns.all()}>
                       <TaskRuns />
@@ -327,10 +338,13 @@ export function App({ lang }) {
                       <Settings />
                     </Route>
 
-                    <ReadWriteRoute
-                      isReadOnly={isReadOnly}
+                    <Route
                       path={paths.importResources()}
-                      component={ImportResources}
+                      render={() => (
+                        <ReadWriteRoute>
+                          <ImportResources />
+                        </ReadWriteRoute>
+                      )}
                     />
 
                     <Route path={paths.eventListeners.all()} exact>

diff --git a/src/containers/ReadWriteRoute/ReadWriteRoute.js b/src/containers/ReadWriteRoute/ReadWriteRoute.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020-2021 The Tekton Authors
+Copyright 2020-2022 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,20 +12,13 @@ limitations under the License.
 */
 /* istanbul ignore file */
 import React from 'react';
-import { Route } from 'react-router-dom';
 
+import { useIsReadOnly } from '../../api';
 import { NotFound } from '..';
 
-const ReadWriteRoute = ({
-  component: Component,
-  exact,
-  isReadOnly,
-  path,
-  ...rest
-}) => (
-  <Route {...rest} exact={exact} path={path}>
-    {isReadOnly ? <NotFound /> : <Component />}
-  </Route>
-);
+const ReadWriteRoute = ({ children }) => {
+  const isReadOnly = useIsReadOnly();
+  return isReadOnly ? <NotFound /> : children;
+};
 
 export default ReadWriteRoute;