Merge pull request #10450 from backstage/rugvip/rr-refactors
react-router v6 stable compatibility
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>,
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
+11
-11
@@ -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';
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>,
|
||||
);
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user