permission-react: remove deprecated PermissionedRoute component
Removed the deprecated `PermissionedRoute` component that was incompatible with React Router v6 stable. Use `RequirePermission` instead. Also removed the `react-router-dom` dependency from the package since it is no longer needed. Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com> Made-with: Cursor
This commit is contained in:
Patrik Oldsberg
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/plugin-permission-react': minor
|
||||
---
|
||||
|
||||
**BREAKING**: Removed the deprecated `PermissionedRoute` component. Use `RequirePermission` instead.
|
||||
@@ -151,31 +151,6 @@ Somewhat related to the `Routes` change, it is no longer possible to render a
|
||||
such a `Route` element would cause the contents of its `element` prop to be
|
||||
rendered instead, but it will now throw an error.
|
||||
|
||||
### `PermissionedRoute`
|
||||
|
||||
Because of the above change, the `PermissionedRoute` component no longer works in all situations with React Router v6 stable. It has been deprecated in favor of the new `RequirePermission` component, which can be placed anywhere in order to perform a permissions check.
|
||||
|
||||
It's crucial that you update to `RequirePermission` at the same time as you update to React Router v6 stable as the `PermissionedRoute` component will no longer function.
|
||||
|
||||
```tsx
|
||||
{/* highlight-remove-start */}
|
||||
<PermissionedRoute
|
||||
path="/catalog-import"
|
||||
permission={catalogEntityCreatePermission}
|
||||
element={<CatalogImportPage />}
|
||||
{/* highlight-remove-end */}
|
||||
{/* highlight-add-start */}
|
||||
<Route
|
||||
path="/catalog-import"
|
||||
element={
|
||||
<RequirePermission permission={catalogEntityCreatePermission}>
|
||||
<CatalogImportPage />
|
||||
</RequirePermission>
|
||||
}
|
||||
{/* highlight-add-end */}
|
||||
/>
|
||||
```
|
||||
|
||||
### `<Navigate />` component
|
||||
|
||||
When migrating over to React Router v6 stable, you might also see browser console warnings for the `Navigate` component. This will need to be wrapped up in a `Route` component with the `Navigate` component in the `element` prop.
|
||||
|
||||
@@ -55,14 +55,12 @@
|
||||
"@testing-library/react": "^16.0.0",
|
||||
"@types/react": "^18.0.0",
|
||||
"react": "^18.0.2",
|
||||
"react-dom": "^18.0.2",
|
||||
"react-router-dom": "^6.30.2"
|
||||
"react-dom": "^18.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^17.0.0 || ^18.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0",
|
||||
"react-router-dom": "^6.30.2"
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
|
||||
@@ -11,9 +11,7 @@ import { DiscoveryApi } from '@backstage/core-plugin-api';
|
||||
import { EvaluatePermissionRequest } from '@backstage/plugin-permission-common';
|
||||
import { EvaluatePermissionResponse } from '@backstage/plugin-permission-common';
|
||||
import { IdentityApi } from '@backstage/core-plugin-api';
|
||||
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
||||
import { Permission } from '@backstage/plugin-permission-common';
|
||||
import { ReactElement } from 'react';
|
||||
import { ReactNode } from 'react';
|
||||
import { ResourcePermission } from '@backstage/plugin-permission-common';
|
||||
|
||||
@@ -48,26 +46,6 @@ export type PermissionApi = {
|
||||
// @public
|
||||
export const permissionApiRef: ApiRef<PermissionApi>;
|
||||
|
||||
// @public @deprecated
|
||||
export const PermissionedRoute: (
|
||||
props: {
|
||||
caseSensitive?: boolean;
|
||||
children?: ReactNode;
|
||||
element?: ReactElement | null;
|
||||
path?: string;
|
||||
errorComponent?: ReactElement | null;
|
||||
} & (
|
||||
| {
|
||||
permission: Exclude<Permission, ResourcePermission>;
|
||||
resourceRef?: never;
|
||||
}
|
||||
| {
|
||||
permission: ResourcePermission;
|
||||
resourceRef: string | undefined;
|
||||
}
|
||||
),
|
||||
) => JSX_2.Element;
|
||||
|
||||
// @public
|
||||
export function RequirePermission(
|
||||
props: RequirePermissionProps,
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
/*
|
||||
* 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 { ReactElement, ReactNode } from 'react';
|
||||
import { Route } from 'react-router-dom';
|
||||
import { useApp } from '@backstage/core-plugin-api';
|
||||
import { usePermission } from '../hooks';
|
||||
import {
|
||||
isResourcePermission,
|
||||
Permission,
|
||||
ResourcePermission,
|
||||
} from '@backstage/plugin-permission-common';
|
||||
|
||||
/**
|
||||
* Returns a React Router Route which only renders the element when authorized. If unauthorized, the Route will render a
|
||||
* 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: {
|
||||
caseSensitive?: boolean;
|
||||
children?: ReactNode;
|
||||
element?: ReactElement | null;
|
||||
path?: string;
|
||||
errorComponent?: ReactElement | null;
|
||||
} & (
|
||||
| {
|
||||
permission: Exclude<Permission, ResourcePermission>;
|
||||
resourceRef?: never;
|
||||
}
|
||||
| {
|
||||
permission: ResourcePermission;
|
||||
resourceRef: string | undefined;
|
||||
}
|
||||
),
|
||||
) => {
|
||||
const { permission, resourceRef, errorComponent, ...otherProps } = props;
|
||||
|
||||
const permissionResult = usePermission(
|
||||
isResourcePermission(permission)
|
||||
? { permission, resourceRef }
|
||||
: { permission },
|
||||
);
|
||||
const app = useApp();
|
||||
const { NotFoundErrorPage } = app.getComponents();
|
||||
|
||||
let shownElement: ReactElement | null | undefined =
|
||||
errorComponent === undefined ? <NotFoundErrorPage /> : errorComponent;
|
||||
|
||||
if (permissionResult.loading) {
|
||||
shownElement = null;
|
||||
} else if (permissionResult.allowed) {
|
||||
shownElement = props.element;
|
||||
}
|
||||
|
||||
return <Route {...otherProps} element={shownElement} />;
|
||||
};
|
||||
@@ -14,6 +14,5 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export { PermissionedRoute } from './PermissionedRoute';
|
||||
export { RequirePermission } from './RequirePermission';
|
||||
export type { RequirePermissionProps } from './RequirePermission';
|
||||
|
||||
Reference in New Issue
Block a user