Merge pull request #10450 from backstage/rugvip/rr-refactors

react-router v6 stable compatibility
This commit is contained in:
Patrik Oldsberg
2022-08-30 12:50:24 +02:00
committed by GitHub
113 changed files with 3811 additions and 345 deletions
+2 -2
View File
@@ -37,12 +37,12 @@
"git-url-parse": "^12.0.0",
"octokit": "^2.0.0",
"react-markdown": "^8.0.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4",
"remark-gfm": "^3.0.1"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -37,7 +37,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/app-defaults": "^1.0.6-next.0",
@@ -51,8 +52,7 @@
"@types/node": "^16.11.26",
"@types/object-hash": "^2.2.1",
"cross-fetch": "^3.1.5",
"msw": "^0.45.0",
"react-router": "6.0.0-beta.0"
"msw": "^0.45.0"
},
"files": [
"dist"
+4 -2
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { EntityAirbrakeContent } from './extensions';
import { Route } from 'react-router';
import { Route, Routes } from 'react-router';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { airbrakeApiRef, MockAirbrakeApi } from './api';
import { createEntity } from './api';
@@ -26,7 +26,9 @@ describe('The Airbrake entity', () => {
const rendered = await renderInTestApp(
<TestApiProvider apis={[[airbrakeApiRef, new MockAirbrakeApi()]]}>
<EntityProvider entity={createEntity(123)}>
<Route path="/" element={<EntityAirbrakeContent />} />
<Routes>
<Route path="/" element={<EntityAirbrakeContent />} />
</Routes>
</EntityProvider>
</TestApiProvider>,
);
+2 -2
View File
@@ -33,11 +33,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -47,14 +47,14 @@
"graphql": "^16.0.0",
"graphql-ws": "^5.4.1",
"isomorphic-form-data": "^2.0.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4",
"swagger-ui-react": "^4.11.1"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -42,11 +42,11 @@
"@material-ui/lab": "4.0.0-alpha.57",
"humanize-duration": "^3.27.0",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -39,11 +39,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -40,11 +40,11 @@
"luxon": "^3.0.0",
"material-ui-search-bar": "^1.0.0",
"react-hook-form": "^7.13.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -37,12 +37,12 @@
"lodash": "^4.17.15",
"p-limit": "^3.1.0",
"qs": "^6.9.4",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -51,13 +51,13 @@
"js-base64": "^3.6.0",
"lodash": "^4.17.21",
"react-hook-form": "^7.12.2",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"yaml": "^2.0.0"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -53,14 +53,14 @@
"jwt-decode": "^3.1.0",
"lodash": "^4.17.21",
"qs": "^6.9.4",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"yaml": "^2.0.0",
"zen-observable": "^0.8.15"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -52,13 +52,13 @@
"history": "^5.0.0",
"lodash": "^4.17.21",
"react-helmet": "6.1.0",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"zen-observable": "^0.8.15"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -34,7 +34,6 @@ import {
} from '@backstage/test-utils';
import { act, fireEvent } from '@testing-library/react';
import React from 'react';
import { Route, Routes } from 'react-router';
import { EntityLayout } from './EntityLayout';
const mockEntity = {
@@ -160,28 +159,21 @@ describe('EntityLayout', () => {
it('navigates when user clicks different tab', async () => {
const rendered = await renderInTestApp(
<Routes>
<Route
path="/*"
element={
<ApiProvider apis={mockApis}>
<EntityProvider entity={mockEntity}>
<EntityLayout>
<EntityLayout.Route path="/" title="tabbed-test-title">
<div>tabbed-test-content</div>
</EntityLayout.Route>
<EntityLayout.Route
path="/some-other-path"
title="tabbed-test-title-2"
>
<div>tabbed-test-content-2</div>
</EntityLayout.Route>
</EntityLayout>
</EntityProvider>
</ApiProvider>
}
/>
</Routes>,
<ApiProvider apis={mockApis}>
<EntityProvider entity={mockEntity}>
<EntityLayout>
<EntityLayout.Route path="/" title="tabbed-test-title">
<div>tabbed-test-content</div>
</EntityLayout.Route>
<EntityLayout.Route
path="/some-other-path"
title="tabbed-test-title-2"
>
<div>tabbed-test-content-2</div>
</EntityLayout.Route>
</EntityLayout>
</EntityProvider>
</ApiProvider>,
{
mountedRoutes: {
'/catalog/:namespace/:kind/:name': entityRouteRef,
+3 -3
View File
@@ -47,12 +47,12 @@
"humanize-duration": "^3.27.0",
"lodash": "^4.17.21",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -44,12 +44,12 @@
"@material-ui/lab": "4.0.0-alpha.57",
"luxon": "^3.0.0",
"qs": "^6.9.4",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -33,11 +33,11 @@
"@material-ui/lab": "4.0.0-alpha.57",
"humanize-duration": "^3.27.1",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -37,13 +37,13 @@
"@material-ui/styles": "^4.11.0",
"highlight.js": "^10.6.0",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4",
"recharts": "^1.8.5"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -31,11 +31,11 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.57",
"rc-progress": "3.4.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -50,7 +50,6 @@
"luxon": "^3.0.0",
"pluralize": "^8.0.0",
"qs": "^6.9.4",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4",
"recharts": "^1.8.5",
"regression": "^2.0.1",
@@ -58,7 +57,8 @@
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -44,13 +44,13 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"classnames": "^2.2.6",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -40,11 +40,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"@react-hookz/web": "^15.0.0",
"react-router-dom": "6.0.0-beta.0"
"@react-hookz/web": "^15.0.0"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -34,13 +34,13 @@
"@octokit/rest": "^19.0.3",
"luxon": "^3.0.0",
"qs": "^6.10.1",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"recharts": "^1.8.5"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -47,12 +47,12 @@
"@material-ui/lab": "4.0.0-alpha.57",
"@octokit/rest": "^19.0.3",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -41,11 +41,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -46,7 +46,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -60,8 +61,7 @@
"@types/jest": "^26.0.7",
"@types/node": "^16.11.26",
"cross-fetch": "^3.1.5",
"msw": "^0.45.0",
"react-router-dom": "6.0.0-beta.0"
"msw": "^0.45.0"
},
"files": [
"dist"
+2 -2
View File
@@ -45,12 +45,12 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"lodash": "^4.17.21",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -46,12 +46,12 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -34,11 +34,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -50,11 +50,11 @@
"js-yaml": "^4.0.0",
"lodash": "^4.17.21",
"luxon": "^3.0.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -44,11 +44,11 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -40,12 +40,12 @@
"p-limit": "^3.1.0",
"pluralize": "^8.0.0",
"qs": "^6.10.1",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/catalog-client": "^1.0.5-next.0",
+2 -2
View File
@@ -45,12 +45,12 @@
"@material-ui/lab": "4.0.0-alpha.57",
"classnames": "^2.2.6",
"luxon": "^3.0.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+36 -13
View File
@@ -6,7 +6,6 @@
import { ApiRef } from '@backstage/core-plugin-api';
import { AuthorizePermissionRequest } from '@backstage/plugin-permission-common';
import { AuthorizePermissionResponse } from '@backstage/plugin-permission-common';
import { ComponentProps } from 'react';
import { Config } from '@backstage/config';
import { DiscoveryApi } from '@backstage/core-plugin-api';
import { EvaluatePermissionRequest } from '@backstage/plugin-permission-common';
@@ -14,8 +13,8 @@ import { EvaluatePermissionResponse } from '@backstage/plugin-permission-common'
import { IdentityApi } from '@backstage/core-plugin-api';
import { Permission } from '@backstage/plugin-permission-common';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ResourcePermission } from '@backstage/plugin-permission-common';
import { Route } from 'react-router';
// @public (undocumented)
export type AsyncPermissionResult = {
@@ -48,22 +47,46 @@ export type PermissionApi = {
// @public
export const permissionApiRef: ApiRef<PermissionApi>;
// @public
// @public @deprecated
export const PermissionedRoute: (
props: ComponentProps<typeof Route> & {
props: {
caseSensitive?: boolean;
children?: ReactNode;
element?: ReactElement | null;
path?: string;
errorComponent?: ReactElement | null;
} & (
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
),
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
),
) => JSX.Element;
// @public
export function RequirePermission(
props: RequirePermissionProps,
): JSX.Element | null;
// @public
export type RequirePermissionProps = (
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
) & {
errorPage?: ReactNode;
children: ReactNode;
};
// @public
export function usePermission(
input:
+2 -2
View File
@@ -35,13 +35,13 @@
"@backstage/core-plugin-api": "^1.0.6-next.0",
"@backstage/plugin-permission-common": "^0.6.4-next.0",
"cross-fetch": "^3.1.5",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"swr": "^1.1.2"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ComponentProps, ReactElement } from 'react';
import React, { ReactElement, ReactNode } from 'react';
import { Route } from 'react-router';
import { useApp } from '@backstage/core-plugin-api';
import { usePermission } from '../hooks';
@@ -29,20 +29,25 @@ import {
* NotFoundErrorPage (see {@link @backstage/core-app-api#AppComponents}).
*
* @public
* @deprecated This component no longer works with the most recent version of `@backstage/core-app-api` and react-router v6, use {@link RequirePermission} instead.
*/
export const PermissionedRoute = (
props: ComponentProps<typeof Route> & {
props: {
caseSensitive?: boolean;
children?: ReactNode;
element?: ReactElement | null;
path?: string;
errorComponent?: ReactElement | null;
} & (
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
),
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
),
) => {
const { permission, resourceRef, errorComponent, ...otherProps } = props;
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { PermissionedRoute } from '.';
import { RequirePermission } from './RequirePermission';
import { usePermission } from '../hooks';
import { renderInTestApp } from '@backstage/test-utils';
import { createPermission } from '@backstage/plugin-permission-common';
@@ -32,14 +32,14 @@ const permission = createPermission({
attributes: { action: 'read' },
});
describe('PermissionedRoute', () => {
describe('RequirePermission', () => {
it('Does not render when loading', async () => {
mockUsePermission.mockReturnValue({ loading: true, allowed: false });
const { queryByText } = await renderInTestApp(
<PermissionedRoute
<RequirePermission
permission={permission}
element={<div>content</div>}
children={<div>content</div>}
/>,
);
@@ -50,9 +50,9 @@ describe('PermissionedRoute', () => {
mockUsePermission.mockReturnValue({ loading: false, allowed: true });
const { getByText } = await renderInTestApp(
<PermissionedRoute
<RequirePermission
permission={permission}
element={<div>content</div>}
children={<div>content</div>}
/>,
);
@@ -64,9 +64,9 @@ describe('PermissionedRoute', () => {
await expect(
renderInTestApp(
<PermissionedRoute
<RequirePermission
permission={permission}
element={<div>content</div>}
children={<div>content</div>}
/>,
),
).rejects.toThrowError('Reached NotFound Page');
@@ -76,10 +76,10 @@ describe('PermissionedRoute', () => {
mockUsePermission.mockReturnValue({ loading: false, allowed: false });
const { getByText } = await renderInTestApp(
<PermissionedRoute
<RequirePermission
permission={permission}
element={<div>content</div>}
errorComponent={<h1>Custom Error</h1>}
children={<div>content</div>}
errorPage={<h1>Custom Error</h1>}
/>,
);
@@ -0,0 +1,82 @@
/*
* Copyright 2021 The Backstage 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
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { ReactNode } from 'react';
import { useApp } from '@backstage/core-plugin-api';
import { usePermission } from '../hooks';
import {
isResourcePermission,
Permission,
ResourcePermission,
} from '@backstage/plugin-permission-common';
/**
* Properties for {@link RequirePermission}
*
* @public
*/
export type RequirePermissionProps = (
| {
permission: Exclude<Permission, ResourcePermission>;
resourceRef?: never;
}
| {
permission: ResourcePermission;
resourceRef: string | undefined;
}
) & {
/**
* The error page to be displayed if the user is not allowed access.
*
* Defaults to the `NotFoundErrorPage` app component.
*/
errorPage?: ReactNode;
children: ReactNode;
};
/**
* A boundary that only renders its child elements if the user has the specified permission.
*
* While loading, nothing will be rendered. If the user does not have
* permission, the `errorPage` element will be rendered, falling back
* to the `NotFoundErrorPage` app component if no `errorPage` is provider.
*
* @public
*/
export function RequirePermission(
props: RequirePermissionProps,
): JSX.Element | null {
const { permission, resourceRef } = props;
const permissionResult = usePermission(
isResourcePermission(permission)
? { permission, resourceRef }
: { permission },
);
const app = useApp();
if (permissionResult.loading) {
return null;
} else if (permissionResult.allowed) {
return <>{props.children}</>;
}
if (props.errorPage) {
return <>{props.errorPage}</>;
}
// If no explicit error element is provided, the not found page is used as fallback.
const { NotFoundErrorPage } = app.getComponents();
return <NotFoundErrorPage />;
}
@@ -15,3 +15,5 @@
*/
export { PermissionedRoute } from './PermissionedRoute';
export { RequirePermission } from './RequirePermission';
export type { RequirePermissionProps } from './RequirePermission';
+3 -3
View File
@@ -44,13 +44,13 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"lodash": "^4.17.21",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-sparklines": "^1.7.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+3 -3
View File
@@ -69,8 +69,6 @@
"lodash": "^4.17.21",
"luxon": "^3.0.0",
"qs": "^6.9.4",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4",
"use-immer": "^0.7.0",
"yaml": "^2.0.0",
@@ -78,7 +76,9 @@
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+5 -3
View File
@@ -125,6 +125,7 @@ export const Router = (props: RouterProps) => {
return (
<Routes>
<Route
path="/"
element={
<ScaffolderPage
groups={groups}
@@ -133,9 +134,10 @@ export const Router = (props: RouterProps) => {
/>
}
/>
<Route path={legacySelectedTemplateRouteRef.path}>
<RedirectingComponent />
</Route>
<Route
path={legacySelectedTemplateRouteRef.path}
element={<RedirectingComponent />}
/>
<Route
path={selectedTemplateRouteRef.path}
element={
@@ -13,16 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
renderInTestApp,
renderWithEffects,
TestApiRegistry,
} from '@backstage/test-utils';
import { lightTheme } from '@backstage/theme';
import { ThemeProvider } from '@material-ui/core';
import { renderInTestApp, TestApiRegistry } from '@backstage/test-utils';
import { act, fireEvent, within } from '@testing-library/react';
import React from 'react';
import { MemoryRouter, Route } from 'react-router';
import { Route, Routes } from 'react-router';
import { scaffolderApiRef } from '../../api';
import { ScaffolderApi } from '../../types';
import { rootRouteRef } from '../../routes';
@@ -169,17 +163,17 @@ describe('TemplatePage', () => {
undefined as any,
);
const rendered = await renderWithEffects(
const rendered = await renderInTestApp(
<ApiProvider apis={apis}>
<ThemeProvider theme={lightTheme}>
<MemoryRouter initialEntries={['/create/test']}>
<Route path="/create/test">
<TemplatePage />
</Route>
<Route path="/create" element={<>This is root</>} />
</MemoryRouter>
</ThemeProvider>
<Routes>
<Route path="/create/test" element={<TemplatePage />} />
<Route path="/create" element={<>This is root</>} />
</Routes>
</ApiProvider>,
{
routeEntries: ['/create'],
mountedRoutes: { '/create': rootRouteRef },
},
);
expect(
@@ -78,6 +78,7 @@ export const Router = (props: PropsWithChildren<NextRouterProps>) => {
return (
<Routes>
<Route
path="/"
element={
<TemplateListPage
TemplateCardComponent={TemplateCardComponent}
+2 -2
View File
@@ -40,12 +40,12 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router": "6.0.0-beta.0",
"react-use": "^17.3.2"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/core-app-api": "^1.0.6-next.0",
+3 -3
View File
@@ -48,13 +48,13 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"qs": "^6.9.4",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+4 -10
View File
@@ -18,7 +18,6 @@ import React from 'react';
import { wrapInTestApp } from '@backstage/test-utils';
import { act, render } from '@testing-library/react';
import { useNavigateToQuery } from './util';
import { Routes, Route } from 'react-router-dom';
import { rootRouteRef } from '../plugin';
const navigate = jest.fn();
@@ -38,16 +37,11 @@ describe('util', () => {
await act(async () => {
await render(
wrapInTestApp(
<Routes>
<Route element={<MyComponent />} />
</Routes>,
{
mountedRoutes: {
'/search': rootRouteRef,
},
wrapInTestApp(<MyComponent />, {
mountedRoutes: {
'/search': rootRouteRef,
},
),
}),
);
expect(navigate).toHaveBeenCalledTimes(1);
+2 -2
View File
@@ -45,12 +45,12 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"luxon": "^3.0.0",
"react-router": "6.0.0-beta.0",
"react-sparklines": "^1.7.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -33,13 +33,13 @@
"@material-ui/lab": "4.0.0-alpha.57",
"@types/zen-observable": "^0.8.2",
"react-hook-form": "^7.12.2",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4",
"uuid": "^8.3.2",
"zen-observable": "^0.8.15"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -44,11 +44,11 @@
"@material-ui/lab": "4.0.0-alpha.57",
"classnames": "^2.2.6",
"luxon": "^3.0.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -39,12 +39,12 @@
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -46,14 +46,14 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-use": "^17.2.4",
"react-router-dom": "6.0.0-beta.0",
"@testing-library/react": "^12.1.3",
"testing-library__dom": "^7.29.4-beta.1"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0"
"react-dom": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
+2 -2
View File
@@ -46,12 +46,12 @@
"jss": "~10.8.2",
"lodash": "^4.17.21",
"react-helmet": "6.1.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.10.1",
+3 -3
View File
@@ -57,14 +57,14 @@
"jss": "~10.8.2",
"lodash": "^4.17.21",
"react-helmet": "6.1.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
"react": "^16.13.1 || ^17.0.0",
"react-dom": "^16.13.1 || ^17.0.0"
"react-dom": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import React, { ReactNode, ReactChild, Children } from 'react';
import React, { ReactNode, Children, ReactElement } from 'react';
import { useOutlet } from 'react-router-dom';
import { Page } from '@backstage/core-components';
@@ -30,15 +30,10 @@ import { TechDocsReaderPageContent } from '../TechDocsReaderPageContent';
import { TechDocsReaderPageHeader } from '../TechDocsReaderPageHeader';
import { TechDocsReaderPageSubheader } from '../TechDocsReaderPageSubheader';
import { rootDocsRouteRef } from '../../../routes';
import { useRouteRefParams } from '@backstage/core-plugin-api';
type Extension = ReactChild & {
type: {
__backstage_data: {
map: Map<string, boolean>;
};
};
};
import {
getComponentData,
useRouteRefParams,
} from '@backstage/core-plugin-api';
/**
* Props for {@link TechDocsReaderLayout}
@@ -94,8 +89,18 @@ export const TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
const childrenList = outlet ? Children.toArray(outlet.props.children) : [];
const page = childrenList.find(child => {
const { type } = child as Extension;
return !type?.__backstage_data?.map?.get(TECHDOCS_ADDONS_WRAPPER_KEY);
if (getComponentData(child, TECHDOCS_ADDONS_WRAPPER_KEY)) {
return false;
}
// react-router 6 stable wraps children in a routing context provider, so check one level deeper
const nestedChildren = (child as ReactElement)?.props?.children;
if (nestedChildren) {
return !Children.toArray(nestedChildren).some(nested =>
getComponentData(nested, TECHDOCS_ADDONS_WRAPPER_KEY),
);
}
return true;
});
return (
+3 -3
View File
@@ -42,7 +42,8 @@
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",
@@ -55,8 +56,7 @@
"@types/jest": "^26.0.7",
"@types/node": "^16.11.26",
"cross-fetch": "^3.1.5",
"msw": "^0.45.0",
"react-router": "6.0.0-beta.0"
"msw": "^0.45.0"
},
"files": [
"dist"
+4 -2
View File
@@ -15,7 +15,7 @@
*/
import React from 'react';
import { Route } from 'react-router';
import { Route, Routes } from 'react-router';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { todoPlugin, EntityTodoContent } from './plugin';
import { todoApiRef } from './api';
@@ -55,7 +55,9 @@ describe('todo', () => {
metadata: { name: 'Test TODO' },
}}
>
<Route path="/" element={<EntityTodoContent />} />
<Routes>
<Route path="/" element={<EntityTodoContent />} />
</Routes>
</EntityProvider>
</TestApiProvider>,
);
+2 -2
View File
@@ -41,11 +41,11 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"@types/react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
"react": "^16.13.1 || ^17.0.0",
"react-router": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "^0.18.2-next.0",