chore: supporting the PermissionedRoute in rr-beta

Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Fredrik Adelöw <freben@gmail.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: blam <ben@blam.sh>

docs/tutorials/react-router-stable-migration.md

@@ -155,6 +155,8 @@ rendered instead, but it will now throw an error.
 
 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.
+
 ```diff
 -    <PermissionedRoute
 -      path="/catalog-import"

packages/core-app-api/src/routing/FlatRoutes.tsx

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { useRoutes } from 'react-router-dom';
 import { useApp, useElementFilter } from '@backstage/core-plugin-api';
+import { isReactRouterBeta } from '../app/isReactRouterBeta';
 
 let warned = false;
 
@@ -49,6 +50,7 @@ export type FlatRoutesProps = {
 export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
+  const isBeta = useMemo(() => isReactRouterBeta(), []);
   const routes = useElementFilter(props.children, elements =>
     elements
       .getElements<{
@@ -65,14 +67,14 @@ export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
         }
         path = path?.replace(/\/\*$/, '') ?? '/';
 
-        let element = child.props.element;
-        if (!element) {
+        let element = isBeta ? child : child.props.element;
+        if (!isBeta && !element) {
           element = child;
           if (!warned && process.env.NODE_ENV !== 'test') {
             // eslint-disable-next-line no-console
             console.warn(
               'DEPRECATION WARNING: All elements within <FlatRoutes> must be of type <Route> with an element prop. ' +
-                'Existing usages of <Navigate key=[path] to=[to] /> should be replaced with <Route path=[path] element={<Navigate to=[to] />} />',
+                'Existing usages of <Navigate key=[path] to=[to] /> should be replaced with <Route path=[path] element={<Navigate to=[to] />} />.',
             );
             warned = true;
           }

plugins/permission-react/src/components/PermissionedRoute.tsx

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-import { ComponentProps, ReactElement } from 'react';
+import React, { ComponentProps, ReactElement, ReactNode } from 'react';
 import { Route } from 'react-router';
+import { useApp } from '@backstage/core-plugin-api';
+import { usePermission } from '../hooks';
 import {
+  isResourcePermission,
   Permission,
   ResourcePermission,
 } from '@backstage/plugin-permission-common';
@@ -29,20 +32,41 @@ import {
  * @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;
+      }
+  ),
 ) => {
-  throw new Error(
-    'PermissionedRoute is no longer supported, switch to using <RequirePermission> instead: <Route path="/" element={<RequirePermission permission={...}>...<RequirePermission/>}/>',
+  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} />;
 };