From c1f1a4c7606b10de740cc771d0b8c5c21a2601d6 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Fri, 25 Mar 2022 17:11:49 +0100
Subject: [PATCH] app,create-app: migrate to relative tab routes

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/flat-walls-kiss.md                 | 27 +++++++
 .../components/catalog/EntityPage.test.tsx    |  2 +-
 .../app/src/components/catalog/EntityPage.tsx | 78 +++++++++----------
 .../app/src/components/catalog/EntityPage.tsx | 36 ++++-----
 4 files changed, 85 insertions(+), 58 deletions(-)
 create mode 100644 .changeset/flat-walls-kiss.md

diff --git a/.changeset/flat-walls-kiss.md b/.changeset/flat-walls-kiss.md
new file mode 100644
index 0000000000..3e7c42e838
--- /dev/null
+++ b/.changeset/flat-walls-kiss.md
@@ -0,0 +1,27 @@
+---
+'@backstage/create-app': patch
+---
+
+Updated the entity page routes to use relative routes rather than absolute ones. This change is required to be able to upgrade to `react-router` v6 stable in the future.
+
+To apply this change to an existing app, update the path prop of `EntityLayout.Route`s to be relative. For example:
+
+```diff
+   <EntityLayoutWrapper>
+-    <EntityLayout.Route path="/" title="Overview">
++    <EntityLayout.Route path="." title="Overview">
+       {overviewContent}
+     </EntityLayout.Route>
+
+-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
++    <EntityLayout.Route path="ci-cd" title="CI/CD">
+       {cicdContent}
+     </EntityLayout.Route>
+
+-    <EntityLayout.Route path="/errors" title="Errors">
++    <EntityLayout.Route path="errors" title="Errors">
+       {errorsContent}
+     </EntityLayout.Route>
+```
+
+This change should also be applied to any other usage of `TabbedLayout`.
diff --git a/packages/app/src/components/catalog/EntityPage.test.tsx b/packages/app/src/components/catalog/EntityPage.test.tsx
index f9d23247c6..0ef355a2cd 100644
--- a/packages/app/src/components/catalog/EntityPage.test.tsx
+++ b/packages/app/src/components/catalog/EntityPage.test.tsx
@@ -64,7 +64,7 @@ describe('EntityPage Test', () => {
         >
           <EntityProvider entity={entity}>
             <EntityLayout>
-              <EntityLayout.Route path="/ci-cd" title="CI-CD">
+              <EntityLayout.Route path="ci-cd" title="CI-CD">
                 {cicdContent}
               </EntityLayout.Route>
             </EntityLayout>
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index e15df4bc6c..7986146d16 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -388,19 +388,19 @@ const overviewContent = (
 
 const serviceEntityPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+    <EntityLayout.Route path="ci-cd" title="CI/CD">
       {cicdContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/errors" title="Errors">
+    <EntityLayout.Route path="errors" title="Errors">
       {errorsContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/api" title="API">
+    <EntityLayout.Route path="api" title="API">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item xs={12} md={6}>
           <EntityProvidedApisCard />
@@ -411,7 +411,7 @@ const serviceEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/dependencies" title="Dependencies">
+    <EntityLayout.Route path="dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item xs={12} md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
@@ -422,31 +422,31 @@ const serviceEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
 
     <EntityLayout.Route
       if={isNewRelicDashboardAvailable}
-      path="/newrelic-dashboard"
+      path="newrelic-dashboard"
       title="New Relic Dashboard"
     >
       <EntityNewRelicDashboardContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/kubernetes" title="Kubernetes">
+    <EntityLayout.Route path="kubernetes" title="Kubernetes">
       <EntityKubernetesContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/pull-requests" title="Pull Requests">
+    <EntityLayout.Route path="pull-requests" title="Pull Requests">
       {pullRequestsContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/code-insights" title="Code Insights">
+    <EntityLayout.Route path="code-insights" title="Code Insights">
       <EntityGithubInsightsContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/tech-insights" title="Scorecards">
+    <EntityLayout.Route path="tech-insights" title="Scorecards">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item xs={12} md={6}>
           <EntityTechInsightsScorecardCard
@@ -464,20 +464,20 @@ const serviceEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/code-coverage" title="Code Coverage">
+    <EntityLayout.Route path="code-coverage" title="Code Coverage">
       <EntityCodeCoverageContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/kafka" title="Kafka">
+    <EntityLayout.Route path="kafka" title="Kafka">
       <EntityKafkaContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/todos" title="TODOs">
+    <EntityLayout.Route path="todos" title="TODOs">
       <EntityTodoContent />
     </EntityLayout.Route>
 
     <EntityLayout.Route
-      path="/dynatrace"
+      path="dynatrace"
       title="Dynatrace"
       if={isDynatraceAvailable}
     >
@@ -488,23 +488,23 @@ const serviceEntityPage = (
 
 const websiteEntityPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+    <EntityLayout.Route path="ci-cd" title="CI/CD">
       {cicdContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/lighthouse" title="Lighthouse">
+    <EntityLayout.Route path="lighthouse" title="Lighthouse">
       <EntityLighthouseContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/errors" title="Errors">
+    <EntityLayout.Route path="errors" title="Errors">
       {errorsContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/dependencies" title="Dependencies">
+    <EntityLayout.Route path="dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
@@ -515,24 +515,24 @@ const websiteEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
 
     <EntityLayout.Route
       if={isNewRelicDashboardAvailable}
-      path="/newrelic-dashboard"
+      path="newrelic-dashboard"
       title="New Relic Dashboard"
     >
       <EntityNewRelicDashboardContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/kubernetes" title="Kubernetes">
+    <EntityLayout.Route path="kubernetes" title="Kubernetes">
       <EntityKubernetesContent />
     </EntityLayout.Route>
 
     <EntityLayout.Route
-      path="/dynatrace"
+      path="dynatrace"
       title="Dynatrace"
       if={isDynatraceAvailable}
     >
@@ -541,25 +541,25 @@ const websiteEntityPage = (
 
     <EntityLayout.Route
       if={isAzureDevOpsAvailable}
-      path="/git-tags"
+      path="git-tags"
       title="Git Tags"
     >
       <EntityAzureGitTagsContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/pull-requests" title="Pull Requests">
+    <EntityLayout.Route path="pull-requests" title="Pull Requests">
       {pullRequestsContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/code-insights" title="Code Insights">
+    <EntityLayout.Route path="code-insights" title="Code Insights">
       <EntityGithubInsightsContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/code-coverage" title="Code Coverage">
+    <EntityLayout.Route path="code-coverage" title="Code Coverage">
       <EntityCodeCoverageContent />
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/todos" title="TODOs">
+    <EntityLayout.Route path="todos" title="TODOs">
       <EntityTodoContent />
     </EntityLayout.Route>
   </EntityLayoutWrapper>
@@ -567,15 +567,15 @@ const websiteEntityPage = (
 
 const defaultEntityPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/todos" title="TODOs">
+    <EntityLayout.Route path="todos" title="TODOs">
       <EntityTodoContent />
     </EntityLayout.Route>
   </EntityLayoutWrapper>
@@ -597,7 +597,7 @@ const componentPage = (
 
 const apiPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item md={6} xs={12}>
@@ -619,7 +619,7 @@ const apiPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/definition" title="Definition">
+    <EntityLayout.Route path="definition" title="Definition">
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <EntityApiDefinitionCard />
@@ -631,7 +631,7 @@ const apiPage = (
 
 const userPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
@@ -650,7 +650,7 @@ const userPage = (
 
 const groupPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
@@ -672,7 +672,7 @@ const groupPage = (
 
 const systemPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
@@ -692,7 +692,7 @@ const systemPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
-    <EntityLayout.Route path="/diagram" title="Diagram">
+    <EntityLayout.Route path="diagram" title="Diagram">
       <EntityCatalogGraphCard
         variant="gridItem"
         direction={Direction.TOP_BOTTOM}
@@ -716,7 +716,7 @@ const systemPage = (
 
 const domainPage = (
   <EntityLayoutWrapper>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index d98153f660..f6825b1b6c 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -147,15 +147,15 @@ const overviewContent = (
 
 const serviceEntityPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+    <EntityLayout.Route path="ci-cd" title="CI/CD">
       {cicdContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/api" title="API">
+    <EntityLayout.Route path="api" title="API">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
           <EntityProvidedApisCard />
@@ -166,7 +166,7 @@ const serviceEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/dependencies" title="Dependencies">
+    <EntityLayout.Route path="dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
@@ -177,7 +177,7 @@ const serviceEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
@@ -185,15 +185,15 @@ const serviceEntityPage = (
 
 const websiteEntityPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
+    <EntityLayout.Route path="ci-cd" title="CI/CD">
       {cicdContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/dependencies" title="Dependencies">
+    <EntityLayout.Route path="dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
         <Grid item md={6}>
           <EntityDependsOnComponentsCard variant="gridItem" />
@@ -204,7 +204,7 @@ const websiteEntityPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
@@ -219,11 +219,11 @@ const websiteEntityPage = (
 
 const defaultEntityPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/docs" title="Docs">
+    <EntityLayout.Route path="docs" title="Docs">
       {techdocsContent}
     </EntityLayout.Route>
   </EntityLayout>
@@ -245,7 +245,7 @@ const componentPage = (
 
 const apiPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item md={6}>
@@ -268,7 +268,7 @@ const apiPage = (
       </Grid>
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/definition" title="Definition">
+    <EntityLayout.Route path="definition" title="Definition">
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <EntityApiDefinitionCard />
@@ -280,7 +280,7 @@ const apiPage = (
 
 const userPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
@@ -296,7 +296,7 @@ const userPage = (
 
 const groupPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3}>
         {entityWarningContent}
         <Grid item xs={12} md={6}>
@@ -315,7 +315,7 @@ const groupPage = (
 
 const systemPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>
@@ -338,7 +338,7 @@ const systemPage = (
         </Grid>
       </Grid>
     </EntityLayout.Route>
-    <EntityLayout.Route path="/diagram" title="Diagram">
+    <EntityLayout.Route path="diagram" title="Diagram">
       <EntityCatalogGraphCard
         variant="gridItem"
         direction={Direction.TOP_BOTTOM}
@@ -362,7 +362,7 @@ const systemPage = (
 
 const domainPage = (
   <EntityLayout>
-    <EntityLayout.Route path="/" title="Overview">
+    <EntityLayout.Route path="." title="Overview">
       <Grid container spacing={3} alignItems="stretch">
         {entityWarningContent}
         <Grid item md={6}>