@backstage/plugin-permission-react 0.3.4 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @backstage/plugin-permission-react
 
+## 0.4.0
+
+### Minor Changes
+
+- 5bdcb8c45d: **BREAKING**: More restrictive typing for `usePermission` hook and `PermissionedRoute` component. It's no longer possible to pass a `resourceRef` unless the permission is of type `ResourcePermission`.
+
+### Patch Changes
+
+- c98d271466: Use updated types from `@backstage/plugin-permission-common`
+- 322b69e46a: **BREAKING:** Make `IdentityPermissionApi#authorize` typing more strict, using `AuthorizePermissionRequest` and `AuthorizePermissionResponse`.
+- Updated dependencies
+  - @backstage/plugin-permission-common@0.6.0
+  - @backstage/core-plugin-api@1.0.1
+
+## 0.4.0-next.1
+
+### Patch Changes
+
+- 322b69e46a: **BREAKING:** Make `IdentityPermissionApi#authorize` typing more strict, using `AuthorizePermissionRequest` and `AuthorizePermissionResponse`.
+- Updated dependencies
+  - @backstage/core-plugin-api@1.0.1-next.0
+  - @backstage/plugin-permission-common@0.6.0-next.1
+
+## 0.4.0-next.0
+
+### Minor Changes
+
+- 5bdcb8c45d: **BREAKING**: More restrictive typing for `usePermission` hook and `PermissionedRoute` component. It's no longer possible to pass a `resourceRef` unless the permission is of type `ResourcePermission`.
+
+### Patch Changes
+
+- c98d271466: Use updated types from `@backstage/plugin-permission-common`
+- Updated dependencies
+  - @backstage/plugin-permission-common@0.6.0-next.0
+
 ## 0.3.4
 
 ### Patch Changes

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactElement } from 'react';
 import { Route } from 'react-router';
-import { Permission, AuthorizeQuery, AuthorizeDecision } from '@backstage/plugin-permission-common';
+import { Permission, ResourcePermission, EvaluatePermissionRequest, EvaluatePermissionResponse, AuthorizePermissionRequest, AuthorizePermissionResponse } from '@backstage/plugin-permission-common';
 import { ApiRef, DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
 import { Config } from '@backstage/config';
 
@@ -11,10 +11,14 @@ import { Config } from '@backstage/config';
  * @public
  */
 declare const PermissionedRoute: (props: ComponentProps<typeof Route> & {
-    permission: Permission;
-    resourceRef?: string;
     errorComponent?: ReactElement | null;
-}) => JSX.Element;
+} & ({
+    permission: Exclude<Permission, ResourcePermission>;
+    resourceRef?: never;
+} | {
+    permission: ResourcePermission;
+    resourceRef: string | undefined;
+})) => JSX.Element;
 
 /** @public */
 declare type AsyncPermissionResult = {
@@ -23,19 +27,30 @@ declare type AsyncPermissionResult = {
     error?: Error;
 };
 /**
- * React hook utility for authorization. Given a
- * {@link @backstage/plugin-permission-common#Permission} and an optional
- * resourceRef, it will return whether or not access is allowed (for the given
- * resource, if resourceRef is provided). See
+ * React hook utility for authorization. Given either a non-resource
+ * {@link @backstage/plugin-permission-common#Permission} or a
+ * {@link @backstage/plugin-permission-common#ResourcePermission} and an
+ * optional resourceRef, it will return whether or not access is allowed (for
+ * the given resource, if resourceRef is provided). See
  * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for
  * more details.
  *
+ * The resourceRef field is optional to allow calling this hook with an
+ * entity that might be loading asynchronously, but when resourceRef is not
+ * supplied, the value of `allowed` will always be false.
+ *
  * Note: This hook uses stale-while-revalidate to help avoid flicker in UI
  * elements that would be conditionally rendered based on the `allowed` result
  * of this hook.
  * @public
  */
-declare const usePermission: (permission: Permission, resourceRef?: string | undefined) => AsyncPermissionResult;
+declare function usePermission(input: {
+    permission: Exclude<Permission, ResourcePermission>;
+    resourceRef?: never;
+} | {
+    permission: ResourcePermission;
+    resourceRef: string | undefined;
+}): AsyncPermissionResult;
 
 /**
  * This API is used by various frontend utilities that allow developers to implement authorization within their frontend
@@ -44,7 +59,7 @@ declare const usePermission: (permission: Permission, resourceRef?: string | und
  * @public
  */
 declare type PermissionApi = {
-    authorize(request: AuthorizeQuery): Promise<AuthorizeDecision>;
+    authorize(request: EvaluatePermissionRequest): Promise<EvaluatePermissionResponse>;
 };
 /**
  * A Backstage ApiRef for the Permission API. See https://backstage.io/docs/api/utility-apis for more information on
@@ -67,7 +82,7 @@ declare class IdentityPermissionApi implements PermissionApi {
         discovery: DiscoveryApi;
         identity: IdentityApi;
     }): IdentityPermissionApi;
-    authorize(request: AuthorizeQuery): Promise<AuthorizeDecision>;
+    authorize(request: AuthorizePermissionRequest): Promise<AuthorizePermissionResponse>;
 }
 
 export { AsyncPermissionResult, IdentityPermissionApi, PermissionApi, PermissionedRoute, permissionApiRef, usePermission };

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route } from 'react-router';
 import { createApiRef, useApi, useApp } from '@backstage/core-plugin-api';
-import { PermissionClient, AuthorizeResult } from '@backstage/plugin-permission-common';
+import { PermissionClient, isResourcePermission, AuthorizeResult } from '@backstage/plugin-permission-common';
 import useSWR from 'swr';
 
 const permissionApiRef = createApiRef({
@@ -24,9 +24,12 @@ class IdentityPermissionApi {
   }
 }
 
-const usePermission = (permission, resourceRef) => {
+function usePermission(input) {
   const permissionApi = useApi(permissionApiRef);
-  const { data, error } = useSWR({ permission, resourceRef }, async (args) => {
+  const { data, error } = useSWR(input, async (args) => {
+    if (isResourcePermission(args.permission) && !args.resourceRef) {
+      return AuthorizeResult.DENY;
+    }
     const { result } = await permissionApi.authorize(args);
     return result;
   });
@@ -37,11 +40,11 @@ const usePermission = (permission, resourceRef) => {
     return { loading: true, allowed: false };
   }
   return { loading: false, allowed: data === AuthorizeResult.ALLOW };
-};
+}
 
 const PermissionedRoute = (props) => {
   const { permission, resourceRef, errorComponent, ...otherProps } = props;
-  const permissionResult = usePermission(permission, resourceRef);
+  const permissionResult = usePermission(isResourcePermission(permission) ? { permission, resourceRef } : { permission });
   const app = useApp();
   const { NotFoundErrorPage } = app.getComponents();
   let shownElement = errorComponent === void 0 ? /* @__PURE__ */ React.createElement(NotFoundErrorPage, null) : errorComponent;

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/apis/PermissionApi.ts","../src/apis/IdentityPermissionApi.ts","../src/hooks/usePermission.ts","../src/components/PermissionedRoute.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  AuthorizeQuery,\n  AuthorizeDecision,\n} from '@backstage/plugin-permission-common';\nimport { ApiRef, createApiRef } from '@backstage/core-plugin-api';\n\n/**\n * This API is used by various frontend utilities that allow developers to implement authorization within their frontend\n * plugins. A plugin developer will likely not have to interact with this API or its implementations directly, but\n * rather with the aforementioned utility components/hooks.\n * @public\n */\nexport type PermissionApi = {\n  authorize(request: AuthorizeQuery): Promise<AuthorizeDecision>;\n};\n\n/**\n * A Backstage ApiRef for the Permission API. See https://backstage.io/docs/api/utility-apis for more information on\n * Backstage ApiRefs.\n * @public\n */\nexport const permissionApiRef: ApiRef<PermissionApi> = createApiRef({\n  id: 'plugin.permission.api',\n});\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';\nimport { PermissionApi } from './PermissionApi';\nimport {\n  AuthorizeQuery,\n  AuthorizeDecision,\n  PermissionClient,\n} from '@backstage/plugin-permission-common';\nimport { Config } from '@backstage/config';\n\n/**\n * The default implementation of the PermissionApi, which simply calls the authorize method of the given\n * {@link @backstage/plugin-permission-common#PermissionClient}.\n * @public\n */\nexport class IdentityPermissionApi implements PermissionApi {\n  private constructor(\n    private readonly permissionClient: PermissionClient,\n    private readonly identityApi: IdentityApi,\n  ) {}\n\n  static create(options: {\n    config: Config;\n    discovery: DiscoveryApi;\n    identity: IdentityApi;\n  }) {\n    const { config, discovery, identity } = options;\n    const permissionClient = new PermissionClient({ discovery, config });\n    return new IdentityPermissionApi(permissionClient, identity);\n  }\n\n  async authorize(request: AuthorizeQuery): Promise<AuthorizeDecision> {\n    const response = await this.permissionClient.authorize(\n      [request],\n      await this.identityApi.getCredentials(),\n    );\n    return response[0];\n  }\n}\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { permissionApiRef } from '../apis';\nimport {\n  AuthorizeResult,\n  Permission,\n} from '@backstage/plugin-permission-common';\nimport useSWR from 'swr';\n\n/** @public */\nexport type AsyncPermissionResult = {\n  loading: boolean;\n  allowed: boolean;\n  error?: Error;\n};\n\n/**\n * React hook utility for authorization. Given a\n * {@link @backstage/plugin-permission-common#Permission} and an optional\n * resourceRef, it will return whether or not access is allowed (for the given\n * resource, if resourceRef is provided). See\n * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for\n * more details.\n *\n * Note: This hook uses stale-while-revalidate to help avoid flicker in UI\n * elements that would be conditionally rendered based on the `allowed` result\n * of this hook.\n * @public\n */\nexport const usePermission = (\n  permission: Permission,\n  resourceRef?: string,\n): AsyncPermissionResult => {\n  const permissionApi = useApi(permissionApiRef);\n  const { data, error } = useSWR({ permission, resourceRef }, async args => {\n    const { result } = await permissionApi.authorize(args);\n    return result;\n  });\n\n  if (error) {\n    return { error, loading: false, allowed: false };\n  }\n  if (data === undefined) {\n    return { loading: true, allowed: false };\n  }\n  return { loading: false, allowed: data === AuthorizeResult.ALLOW };\n};\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ComponentProps, ReactElement } from 'react';\nimport { Route } from 'react-router';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { usePermission } from '../hooks';\nimport { Permission } from '@backstage/plugin-permission-common';\n\n/**\n * Returns a React Router Route which only renders the element when authorized. If unauthorized, the Route will render a\n * NotFoundErrorPage (see {@link @backstage/core-app-api#AppComponents}).\n *\n * @public\n */\nexport const PermissionedRoute = (\n  props: ComponentProps<typeof Route> & {\n    permission: Permission;\n    resourceRef?: string;\n    errorComponent?: ReactElement | null;\n  },\n) => {\n  const { permission, resourceRef, errorComponent, ...otherProps } = props;\n  const permissionResult = usePermission(permission, resourceRef);\n  const app = useApp();\n  const { NotFoundErrorPage } = app.getComponents();\n\n  let shownElement: ReactElement | null | undefined =\n    errorComponent === undefined ? <NotFoundErrorPage /> : errorComponent;\n\n  if (permissionResult.loading) {\n    shownElement = null;\n  } else if (permissionResult.allowed) {\n    shownElement = props.element;\n  }\n\n  return <Route {...otherProps} element={shownElement} />;\n};\n"],"names":[],"mappings":";;;;;;AAqCO,MAAM,mBAA0C,YAAa,CAAA;AAAA,EAClE,EAAI,EAAA,uBAAA;AAAA,CAAA;;ACRsD,MAAA,qBAAA,CAAA;AAAA,EAClD,WAAA,CACW,kBACA,WACjB,EAAA;AAFiB,IAAA,IAAA,CAAA,gBAAA,GAAA,gBAAA,CAAA;AACA,IAAA,IAAA,CAAA,WAAA,GAAA,WAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAGZ,OAAO,OAIX,EAAA;AACD,IAAM,MAAA,EAAE,MAAQ,EAAA,SAAA,EAAW,QAAa,EAAA,GAAA,OAAA,CAAA;AACxC,IAAA,MAAM,gBAAmB,GAAA,IAAI,gBAAiB,CAAA,EAAE,SAAW,EAAA,MAAA,EAAA,CAAA,CAAA;AAC3D,IAAO,OAAA,IAAI,sBAAsB,gBAAkB,EAAA,QAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,MAG/C,UAAU,OAAqD,EAAA;AACnE,IAAM,MAAA,QAAA,GAAW,MAAM,IAAK,CAAA,gBAAA,CAAiB,UAC3C,CAAC,OAAA,CAAA,EACD,MAAM,IAAA,CAAK,WAAY,CAAA,cAAA,EAAA,CAAA,CAAA;AAEzB,IAAA,OAAO,QAAS,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAAA;;ACPP,MAAA,aAAA,GAAgB,CAC3B,UAAA,EACA,WAC0B,KAAA;AAC1B,EAAA,MAAM,gBAAgB,MAAO,CAAA,gBAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,EAAE,MAAM,KAAU,EAAA,GAAA,MAAA,CAAO,EAAE,UAAY,EAAA,WAAA,EAAA,EAAe,OAAM,IAAQ,KAAA;AACxE,IAAA,MAAM,EAAE,MAAA,EAAA,GAAW,MAAM,aAAA,CAAc,SAAU,CAAA,IAAA,CAAA,CAAA;AACjD,IAAO,OAAA,MAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAGT,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,OAAO,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,OAAS,EAAA,KAAA,EAAA,CAAA;AAAA,GAAA;AAE3C,EAAA,IAAI,SAAS,KAAW,CAAA,EAAA;AACtB,IAAO,OAAA,EAAE,OAAS,EAAA,IAAA,EAAM,OAAS,EAAA,KAAA,EAAA,CAAA;AAAA,GAAA;AAEnC,EAAA,OAAO,EAAE,OAAA,EAAS,KAAO,EAAA,OAAA,EAAS,SAAS,eAAgB,CAAA,KAAA,EAAA,CAAA;AAAA;;AChChD,MAAA,iBAAA,GAAoB,CAC/B,KAKG,KAAA;AACH,EAAA,MAAM,EAAE,UAAA,EAAY,WAAa,EAAA,cAAA,EAAA,GAAmB,UAAe,EAAA,GAAA,KAAA,CAAA;AACnE,EAAM,MAAA,gBAAA,GAAmB,cAAc,UAAY,EAAA,WAAA,CAAA,CAAA;AACnD,EAAA,MAAM,GAAM,GAAA,MAAA,EAAA,CAAA;AACZ,EAAM,MAAA,EAAE,sBAAsB,GAAI,CAAA,aAAA,EAAA,CAAA;AAElC,EAAA,IAAI,YACF,GAAA,cAAA,KAAmB,KAAY,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,mBAAD,IAAwB,CAAA,GAAA,cAAA,CAAA;AAEzD,EAAA,IAAI,iBAAiB,OAAS,EAAA;AAC5B,IAAe,YAAA,GAAA,IAAA,CAAA;AAAA,GAAA,MAAA,IACN,iBAAiB,OAAS,EAAA;AACnC,IAAA,YAAA,GAAe,KAAM,CAAA,OAAA,CAAA;AAAA,GAAA;AAGvB,EAAA,2CAAQ,KAAD,EAAA;AAAA,IAAW,GAAA,UAAA;AAAA,IAAY,OAAS,EAAA,YAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/apis/PermissionApi.ts","../src/apis/IdentityPermissionApi.ts","../src/hooks/usePermission.ts","../src/components/PermissionedRoute.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  EvaluatePermissionRequest,\n  EvaluatePermissionResponse,\n} from '@backstage/plugin-permission-common';\nimport { ApiRef, createApiRef } from '@backstage/core-plugin-api';\n\n/**\n * This API is used by various frontend utilities that allow developers to implement authorization within their frontend\n * plugins. A plugin developer will likely not have to interact with this API or its implementations directly, but\n * rather with the aforementioned utility components/hooks.\n * @public\n */\nexport type PermissionApi = {\n  authorize(\n    request: EvaluatePermissionRequest,\n  ): Promise<EvaluatePermissionResponse>;\n};\n\n/**\n * A Backstage ApiRef for the Permission API. See https://backstage.io/docs/api/utility-apis for more information on\n * Backstage ApiRefs.\n * @public\n */\nexport const permissionApiRef: ApiRef<PermissionApi> = createApiRef({\n  id: 'plugin.permission.api',\n});\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';\nimport { PermissionApi } from './PermissionApi';\nimport {\n  AuthorizePermissionRequest,\n  AuthorizePermissionResponse,\n  PermissionClient,\n} from '@backstage/plugin-permission-common';\nimport { Config } from '@backstage/config';\n\n/**\n * The default implementation of the PermissionApi, which simply calls the authorize method of the given\n * {@link @backstage/plugin-permission-common#PermissionClient}.\n * @public\n */\nexport class IdentityPermissionApi implements PermissionApi {\n  private constructor(\n    private readonly permissionClient: PermissionClient,\n    private readonly identityApi: IdentityApi,\n  ) {}\n\n  static create(options: {\n    config: Config;\n    discovery: DiscoveryApi;\n    identity: IdentityApi;\n  }) {\n    const { config, discovery, identity } = options;\n    const permissionClient = new PermissionClient({ discovery, config });\n    return new IdentityPermissionApi(permissionClient, identity);\n  }\n\n  async authorize(\n    request: AuthorizePermissionRequest,\n  ): Promise<AuthorizePermissionResponse> {\n    const response = await this.permissionClient.authorize(\n      [request],\n      await this.identityApi.getCredentials(),\n    );\n    return response[0];\n  }\n}\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { permissionApiRef } from '../apis';\nimport {\n  AuthorizeResult,\n  isResourcePermission,\n  Permission,\n  ResourcePermission,\n} from '@backstage/plugin-permission-common';\nimport useSWR from 'swr';\n\n/** @public */\nexport type AsyncPermissionResult = {\n  loading: boolean;\n  allowed: boolean;\n  error?: Error;\n};\n\n/**\n * React hook utility for authorization. Given either a non-resource\n * {@link @backstage/plugin-permission-common#Permission} or a\n * {@link @backstage/plugin-permission-common#ResourcePermission} and an\n * optional resourceRef, it will return whether or not access is allowed (for\n * the given resource, if resourceRef is provided). See\n * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for\n * more details.\n *\n * The resourceRef field is optional to allow calling this hook with an\n * entity that might be loading asynchronously, but when resourceRef is not\n * supplied, the value of `allowed` will always be false.\n *\n * Note: This hook uses stale-while-revalidate to help avoid flicker in UI\n * elements that would be conditionally rendered based on the `allowed` result\n * of this hook.\n * @public\n */\nexport function usePermission(\n  input:\n    | {\n        permission: Exclude<Permission, ResourcePermission>;\n        resourceRef?: never;\n      }\n    | {\n        permission: ResourcePermission;\n        resourceRef: string | undefined;\n      },\n): AsyncPermissionResult {\n  const permissionApi = useApi(permissionApiRef);\n  const { data, error } = useSWR(input, async (args: typeof input) => {\n    // We could make the resourceRef parameter required to avoid this check, but\n    // it would make using this hook difficult in situations where the entity\n    // must be asynchronously loaded, so instead we short-circuit to a deny when\n    // no resourceRef is supplied, on the assumption that the resourceRef is\n    // still loading outside the hook.\n    if (isResourcePermission(args.permission) && !args.resourceRef) {\n      return AuthorizeResult.DENY;\n    }\n\n    const { result } = await permissionApi.authorize(args);\n    return result;\n  });\n\n  if (error) {\n    return { error, loading: false, allowed: false };\n  }\n  if (data === undefined) {\n    return { loading: true, allowed: false };\n  }\n  return { loading: false, allowed: data === AuthorizeResult.ALLOW };\n}\n","/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ComponentProps, ReactElement } from 'react';\nimport { Route } from 'react-router';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { usePermission } from '../hooks';\nimport {\n  isResourcePermission,\n  Permission,\n  ResourcePermission,\n} from '@backstage/plugin-permission-common';\n\n/**\n * Returns a React Router Route which only renders the element when authorized. If unauthorized, the Route will render a\n * NotFoundErrorPage (see {@link @backstage/core-app-api#AppComponents}).\n *\n * @public\n */\nexport const PermissionedRoute = (\n  props: ComponentProps<typeof Route> & {\n    errorComponent?: ReactElement | null;\n  } & (\n      | {\n          permission: Exclude<Permission, ResourcePermission>;\n          resourceRef?: never;\n        }\n      | {\n          permission: ResourcePermission;\n          resourceRef: string | undefined;\n        }\n    ),\n) => {\n  const { permission, resourceRef, errorComponent, ...otherProps } = props;\n\n  const permissionResult = usePermission(\n    isResourcePermission(permission)\n      ? { permission, resourceRef }\n      : { permission },\n  );\n  const app = useApp();\n  const { NotFoundErrorPage } = app.getComponents();\n\n  let shownElement: ReactElement | null | undefined =\n    errorComponent === undefined ? <NotFoundErrorPage /> : errorComponent;\n\n  if (permissionResult.loading) {\n    shownElement = null;\n  } else if (permissionResult.allowed) {\n    shownElement = props.element;\n  }\n\n  return <Route {...otherProps} element={shownElement} />;\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-permission-react",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "main": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "license": "Apache-2.0",
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@backstage/config": "^1.0.0",
-    "@backstage/core-plugin-api": "^1.0.0",
-    "@backstage/plugin-permission-common": "^0.5.3",
+    "@backstage/core-plugin-api": "^1.0.1",
+    "@backstage/plugin-permission-common": "^0.6.0",
     "cross-fetch": "^3.1.5",
     "react-router": "6.0.0-beta.0",
     "react-use": "^17.2.4",
@@ -44,8 +44,8 @@
     "react": "^16.13.1 || ^17.0.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.16.0",
-    "@backstage/test-utils": "^1.0.0",
+    "@backstage/cli": "^0.17.0",
+    "@backstage/test-utils": "^1.0.1",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^12.1.3",
     "@types/jest": "^26.0.7"
@@ -53,5 +53,5 @@
   "files": [
     "dist"
   ],
-  "gitHead": "e9496f746b31600dbfac7fa76987479e66426257"
+  "gitHead": "e0e44c433319711c2fb8b175db411a621f7aaec2"
 }