app,create-app: migrate to relative tab routes

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2022-03-25 17:11:49 +01:00
parent 8f363363b8
commit c1f1a4c760
4 changed files with 85 additions and 58 deletions
+27
View File
@@ -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`.
@@ -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>
@@ -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}>
@@ -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}>