diff --git a/.changeset/fix-peer-deps-check-optional-deps.md b/.changeset/fix-peer-deps-check-optional-deps.md new file mode 100644 index 0000000000..42f4211bd7 --- /dev/null +++ b/.changeset/fix-peer-deps-check-optional-deps.md @@ -0,0 +1,5 @@ +--- +'@backstage/repo-tools': patch +--- + +Fixed the `peer-deps` command to only require peer dependencies that are actually referenced by each package, rather than requiring all tracked peer dependencies for every package with any React dependency. diff --git a/.changeset/remove-deprecated-permissioned-route.md b/.changeset/remove-deprecated-permissioned-route.md new file mode 100644 index 0000000000..9bd113d74d --- /dev/null +++ b/.changeset/remove-deprecated-permissioned-route.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-permission-react': minor +--- + +**BREAKING**: Removed the deprecated `PermissionedRoute` component. Use `RequirePermission` instead. diff --git a/docs/tutorials/react-router-stable-migration.md b/docs/tutorials/react-router-stable-migration.md index f4dcc33559..60e7da8c53 100644 --- a/docs/tutorials/react-router-stable-migration.md +++ b/docs/tutorials/react-router-stable-migration.md @@ -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 */} -} -{/* highlight-remove-end */} -{/* highlight-add-start */} - - - - } -{/* highlight-add-end */} -/> -``` - ### `` 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. diff --git a/packages/repo-tools/src/commands/peer-deps/peer-deps.ts b/packages/repo-tools/src/commands/peer-deps/peer-deps.ts index 7fc022a8eb..021e1d3835 100644 --- a/packages/repo-tools/src/commands/peer-deps/peer-deps.ts +++ b/packages/repo-tools/src/commands/peer-deps/peer-deps.ts @@ -143,7 +143,22 @@ export default async ({ fix }: { fix: boolean }) => { for (const pkg of packagesWithRelevantDependencies) { const packageJson = pkg.packageJson as ExtendedPackageJSON; const expectedPeerDeps = getExpectedPeerDependencies(packageJson); + const allDeps = { + ...packageJson.dependencies, + ...packageJson.devDependencies, + ...packageJson.peerDependencies, + }; for (const dep of Object.keys(peerDependencies)) { + const isReferencedInPackage = !!allDeps[dep]; + const isInGroupWithReferencedDep = groupsOfPeerDependencies.some( + group => + group.includes(dep) && group.some(groupDep => !!allDeps[groupDep]), + ); + + if (!isReferencedInPackage && !isInGroupWithReferencedDep) { + continue; + } + // Validate that the peer dependencies are present. if (isPeerDependency(dep, packageJson)) { if (isOptional(dep) && !isMarkedAsOptional(dep, packageJson)) { diff --git a/plugins/permission-react/package.json b/plugins/permission-react/package.json index 100d4f8207..63f721f794 100644 --- a/plugins/permission-react/package.json +++ b/plugins/permission-react/package.json @@ -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": { diff --git a/plugins/permission-react/report.api.md b/plugins/permission-react/report.api.md index e0c5f4772c..1f56e143a3 100644 --- a/plugins/permission-react/report.api.md +++ b/plugins/permission-react/report.api.md @@ -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; -// @public @deprecated -export const PermissionedRoute: ( - props: { - caseSensitive?: boolean; - children?: ReactNode; - element?: ReactElement | null; - path?: string; - errorComponent?: ReactElement | null; - } & ( - | { - permission: Exclude; - resourceRef?: never; - } - | { - permission: ResourcePermission; - resourceRef: string | undefined; - } - ), -) => JSX_2.Element; - // @public export function RequirePermission( props: RequirePermissionProps, diff --git a/plugins/permission-react/src/components/PermissionedRoute.tsx b/plugins/permission-react/src/components/PermissionedRoute.tsx deleted file mode 100644 index efc1d4867c..0000000000 --- a/plugins/permission-react/src/components/PermissionedRoute.tsx +++ /dev/null @@ -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; - 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 ? : errorComponent; - - if (permissionResult.loading) { - shownElement = null; - } else if (permissionResult.allowed) { - shownElement = props.element; - } - - return ; -}; diff --git a/plugins/permission-react/src/components/index.ts b/plugins/permission-react/src/components/index.ts index e443ad0b5e..6d33109952 100644 --- a/plugins/permission-react/src/components/index.ts +++ b/plugins/permission-react/src/components/index.ts @@ -14,6 +14,5 @@ * limitations under the License. */ -export { PermissionedRoute } from './PermissionedRoute'; export { RequirePermission } from './RequirePermission'; export type { RequirePermissionProps } from './RequirePermission'; diff --git a/yarn.lock b/yarn.lock index 8038c5ee0b..49ec264e08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6527,13 +6527,11 @@ __metadata: dataloader: "npm:^2.0.0" react: "npm:^18.0.2" react-dom: "npm:^18.0.2" - react-router-dom: "npm:^6.30.2" swr: "npm:^2.0.0" 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 peerDependenciesMeta: "@types/react": optional: true