@backstage/plugin-permission-react 0.0.0-nightly-202111922557

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# @backstage/plugin-permission-react
+
+## 0.0.0-nightly-202111922557
+
+### Patch Changes
+
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- dcd1a0c3f4: Minor improvement to the API reports, by not unpacking arguments directly
+- Updated dependencies
+  - @backstage/core-plugin-api@0.0.0-nightly-202111922557
+
+## 0.1.0
+
+### Minor Changes
+
+- 6ed24445a9: Add @backstage/plugin-permission-react
+
+  @backstage/plugin-permission-react is a library containing utils for implementing permissions in your frontend Backstage plugins. See [the authorization PRFC](https://github.com/backstage/backstage/pull/7761) for more details.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-plugin-api@0.2.2

package/README.md

@@ -0,0 +1,5 @@
+# permission
+
+**NOTE: THIS PACKAGE IS EXPERIMENTAL!**
+
+Components and hooks to help implement permissions in Backstage frontend plugins. For more information, see the [authorization PRFC](https://github.com/backstage/backstage/pull/7761).

package/dist/index.cjs.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactRouter = require('react-router');
+var corePluginApi = require('@backstage/core-plugin-api');
+var reactUse = require('react-use');
+var pluginPermissionCommon = require('@backstage/plugin-permission-common');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const permissionApiRef = corePluginApi.createApiRef({
+  id: "plugin.permission.api"
+});
+
+class IdentityPermissionApi {
+  constructor(permissionClient, identityApi) {
+    this.permissionClient = permissionClient;
+    this.identityApi = identityApi;
+  }
+  static create(options) {
+    const { configApi, discoveryApi, identityApi } = options;
+    const permissionClient = new pluginPermissionCommon.PermissionClient({ discoveryApi, configApi });
+    return new IdentityPermissionApi(permissionClient, identityApi);
+  }
+  async authorize(request) {
+    const response = await this.permissionClient.authorize([request], {
+      token: await this.identityApi.getIdToken()
+    });
+    return response[0];
+  }
+}
+
+const usePermission = (permission, resourceRef) => {
+  const permissionApi = corePluginApi.useApi(permissionApiRef);
+  const { loading, error, value } = reactUse.useAsync(async () => {
+    const { result } = await permissionApi.authorize({
+      permission,
+      resourceRef
+    });
+    return result;
+  }, [permissionApi, permission, resourceRef]);
+  if (loading) {
+    return { loading: true, allowed: false };
+  }
+  if (error) {
+    return { error, loading: false, allowed: false };
+  }
+  return { loading: false, allowed: value === pluginPermissionCommon.AuthorizeResult.ALLOW };
+};
+
+const PermissionedRoute = (props) => {
+  const { permission, resourceRef, errorComponent, ...otherProps } = props;
+  const permissionResult = usePermission(permission, resourceRef);
+  const app = corePluginApi.useApp();
+  const { NotFoundErrorPage } = app.getComponents();
+  let shownElement = errorComponent === void 0 ? /* @__PURE__ */ React__default["default"].createElement(NotFoundErrorPage, null) : errorComponent;
+  if (permissionResult.loading) {
+    shownElement = null;
+  } else if (permissionResult.allowed) {
+    shownElement = props.element;
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(reactRouter.Route, {
+    ...otherProps,
+    element: shownElement
+  });
+};
+
+exports.IdentityPermissionApi = IdentityPermissionApi;
+exports.PermissionedRoute = PermissionedRoute;
+exports.permissionApiRef = permissionApiRef;
+exports.usePermission = usePermission;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.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  AuthorizeRequest,\n  AuthorizeResponse,\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 wihtin 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: AuthorizeRequest): Promise<AuthorizeResponse>;\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  AuthorizeRequest,\n  AuthorizeResponse,\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    configApi: Config;\n    discoveryApi: DiscoveryApi;\n    identityApi: IdentityApi;\n  }) {\n    const { configApi, discoveryApi, identityApi } = options;\n    const permissionClient = new PermissionClient({ discoveryApi, configApi });\n    return new IdentityPermissionApi(permissionClient, identityApi);\n  }\n\n  async authorize(request: AuthorizeRequest): Promise<AuthorizeResponse> {\n    const response = await this.permissionClient.authorize([request], {\n      token: await this.identityApi.getIdToken(),\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 { useAsync } from 'react-use';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { permissionApiRef } from '../apis';\nimport {\n  AuthorizeResult,\n  Permission,\n} from '@backstage/plugin-permission-common';\n\n/** @public */\nexport type AsyncPermissionResult = {\n  loading: boolean;\n  allowed: boolean;\n  error?: Error;\n};\n\n/**\n * React hook utlity for authorization. Given a {@link @backstage/plugin-permission-common#Permission} and an optional\n * resourceRef, it will return whether or not access is allowed (for the given resource, if resourceRef is provided). See\n * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for more details.\n * @public\n */\nexport const usePermission = (\n  permission: Permission,\n  resourceRef?: string,\n): AsyncPermissionResult => {\n  const permissionApi = useApi(permissionApiRef);\n\n  const { loading, error, value } = useAsync(async () => {\n    const { result } = await permissionApi.authorize({\n      permission,\n      resourceRef,\n    });\n\n    return result;\n  }, [permissionApi, permission, resourceRef]);\n\n  if (loading) {\n    return { loading: true, allowed: false };\n  }\n  if (error) {\n    return { error, loading: false, allowed: false };\n  }\n  return { loading: false, allowed: value === 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":["createApiRef","PermissionClient","useApi","useAsync","AuthorizeResult","useApp","Route"],"mappings":";;;;;;;;;;;;;;MAqCa,mBAA0CA,2BAAa;AAAA,EAClE,IAAI;AAAA;;4BCRsD;AAAA,EAClD,YACW,kBACA,aACjB;AAFiB;AACA;AAAA;AAAA,SAGZ,OAAO,SAIX;AACD,UAAM,EAAE,WAAW,cAAc,gBAAgB;AACjD,UAAM,mBAAmB,IAAIC,wCAAiB,EAAE,cAAc;AAC9D,WAAO,IAAI,sBAAsB,kBAAkB;AAAA;AAAA,QAG/C,UAAU,SAAuD;AACrE,UAAM,WAAW,MAAM,KAAK,iBAAiB,UAAU,CAAC,UAAU;AAAA,MAChE,OAAO,MAAM,KAAK,YAAY;AAAA;AAEhC,WAAO,SAAS;AAAA;AAAA;;MCbP,gBAAgB,CAC3B,YACA,gBAC0B;AAC1B,QAAM,gBAAgBC,qBAAO;AAE7B,QAAM,EAAE,SAAS,OAAO,UAAUC,kBAAS,YAAY;AACrD,UAAM,EAAE,WAAW,MAAM,cAAc,UAAU;AAAA,MAC/C;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,KACN,CAAC,eAAe,YAAY;AAE/B,MAAI,SAAS;AACX,WAAO,EAAE,SAAS,MAAM,SAAS;AAAA;AAEnC,MAAI,OAAO;AACT,WAAO,EAAE,OAAO,SAAS,OAAO,SAAS;AAAA;AAE3C,SAAO,EAAE,SAAS,OAAO,SAAS,UAAUC,uCAAgB;AAAA;;MC9BjD,oBAAoB,CAC/B,UAKG;AACH,QAAM,EAAE,YAAY,aAAa,mBAAmB,eAAe;AACnE,QAAM,mBAAmB,cAAc,YAAY;AACnD,QAAM,MAAMC;AACZ,QAAM,EAAE,sBAAsB,IAAI;AAElC,MAAI,eACF,mBAAmB,iEAAa,mBAAD,QAAwB;AAEzD,MAAI,iBAAiB,SAAS;AAC5B,mBAAe;AAAA,aACN,iBAAiB,SAAS;AACnC,mBAAe,MAAM;AAAA;AAGvB,iEAAQC,mBAAD;AAAA,OAAW;AAAA,IAAY,SAAS;AAAA;AAAA;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import { ComponentProps, ReactElement } from 'react';
+import { Route } from 'react-router';
+import { Permission, AuthorizeRequest, AuthorizeResponse } from '@backstage/plugin-permission-common';
+import { ApiRef, DiscoveryApi, IdentityApi } from '@backstage/core-plugin-api';
+import { Config } from '@backstage/config';
+
+/**
+ * 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
+ */
+declare const PermissionedRoute: (props: ComponentProps<typeof Route> & {
+    permission: Permission;
+    resourceRef?: string;
+    errorComponent?: ReactElement | null;
+}) => JSX.Element;
+
+/** @public */
+declare type AsyncPermissionResult = {
+    loading: boolean;
+    allowed: boolean;
+    error?: Error;
+};
+/**
+ * React hook utlity 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
+ * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for more details.
+ * @public
+ */
+declare const usePermission: (permission: Permission, resourceRef?: string | undefined) => AsyncPermissionResult;
+
+/**
+ * This API is used by various frontend utilities that allow developers to implement authorization wihtin their frontend
+ * plugins. A plugin developer will likely not have to interact with this API or its implementations directly, but
+ * rather with the aforementioned utility components/hooks.
+ * @public
+ */
+declare type PermissionApi = {
+    authorize(request: AuthorizeRequest): Promise<AuthorizeResponse>;
+};
+/**
+ * A Backstage ApiRef for the Permission API. See https://backstage.io/docs/api/utility-apis for more information on
+ * Backstage ApiRefs.
+ * @public
+ */
+declare const permissionApiRef: ApiRef<PermissionApi>;
+
+/**
+ * The default implementation of the PermissionApi, which simply calls the authorize method of the given
+ * {@link @backstage/plugin-permission-common#PermissionClient}.
+ * @public
+ */
+declare class IdentityPermissionApi implements PermissionApi {
+    private readonly permissionClient;
+    private readonly identityApi;
+    private constructor();
+    static create(options: {
+        configApi: Config;
+        discoveryApi: DiscoveryApi;
+        identityApi: IdentityApi;
+    }): IdentityPermissionApi;
+    authorize(request: AuthorizeRequest): Promise<AuthorizeResponse>;
+}
+
+export { AsyncPermissionResult, IdentityPermissionApi, PermissionApi, PermissionedRoute, permissionApiRef, usePermission };

package/dist/index.esm.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Route } from 'react-router';
+import { createApiRef, useApi, useApp } from '@backstage/core-plugin-api';
+import { useAsync } from 'react-use';
+import { PermissionClient, AuthorizeResult } from '@backstage/plugin-permission-common';
+
+const permissionApiRef = createApiRef({
+  id: "plugin.permission.api"
+});
+
+class IdentityPermissionApi {
+  constructor(permissionClient, identityApi) {
+    this.permissionClient = permissionClient;
+    this.identityApi = identityApi;
+  }
+  static create(options) {
+    const { configApi, discoveryApi, identityApi } = options;
+    const permissionClient = new PermissionClient({ discoveryApi, configApi });
+    return new IdentityPermissionApi(permissionClient, identityApi);
+  }
+  async authorize(request) {
+    const response = await this.permissionClient.authorize([request], {
+      token: await this.identityApi.getIdToken()
+    });
+    return response[0];
+  }
+}
+
+const usePermission = (permission, resourceRef) => {
+  const permissionApi = useApi(permissionApiRef);
+  const { loading, error, value } = useAsync(async () => {
+    const { result } = await permissionApi.authorize({
+      permission,
+      resourceRef
+    });
+    return result;
+  }, [permissionApi, permission, resourceRef]);
+  if (loading) {
+    return { loading: true, allowed: false };
+  }
+  if (error) {
+    return { error, loading: false, allowed: false };
+  }
+  return { loading: false, allowed: value === AuthorizeResult.ALLOW };
+};
+
+const PermissionedRoute = (props) => {
+  const { permission, resourceRef, errorComponent, ...otherProps } = props;
+  const permissionResult = usePermission(permission, resourceRef);
+  const app = useApp();
+  const { NotFoundErrorPage } = app.getComponents();
+  let shownElement = errorComponent === void 0 ? /* @__PURE__ */ React.createElement(NotFoundErrorPage, null) : errorComponent;
+  if (permissionResult.loading) {
+    shownElement = null;
+  } else if (permissionResult.allowed) {
+    shownElement = props.element;
+  }
+  return /* @__PURE__ */ React.createElement(Route, {
+    ...otherProps,
+    element: shownElement
+  });
+};
+
+export { IdentityPermissionApi, PermissionedRoute, permissionApiRef, usePermission };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +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  AuthorizeRequest,\n  AuthorizeResponse,\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 wihtin 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: AuthorizeRequest): Promise<AuthorizeResponse>;\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  AuthorizeRequest,\n  AuthorizeResponse,\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    configApi: Config;\n    discoveryApi: DiscoveryApi;\n    identityApi: IdentityApi;\n  }) {\n    const { configApi, discoveryApi, identityApi } = options;\n    const permissionClient = new PermissionClient({ discoveryApi, configApi });\n    return new IdentityPermissionApi(permissionClient, identityApi);\n  }\n\n  async authorize(request: AuthorizeRequest): Promise<AuthorizeResponse> {\n    const response = await this.permissionClient.authorize([request], {\n      token: await this.identityApi.getIdToken(),\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 { useAsync } from 'react-use';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { permissionApiRef } from '../apis';\nimport {\n  AuthorizeResult,\n  Permission,\n} from '@backstage/plugin-permission-common';\n\n/** @public */\nexport type AsyncPermissionResult = {\n  loading: boolean;\n  allowed: boolean;\n  error?: Error;\n};\n\n/**\n * React hook utlity for authorization. Given a {@link @backstage/plugin-permission-common#Permission} and an optional\n * resourceRef, it will return whether or not access is allowed (for the given resource, if resourceRef is provided). See\n * {@link @backstage/plugin-permission-common/PermissionClient#authorize} for more details.\n * @public\n */\nexport const usePermission = (\n  permission: Permission,\n  resourceRef?: string,\n): AsyncPermissionResult => {\n  const permissionApi = useApi(permissionApiRef);\n\n  const { loading, error, value } = useAsync(async () => {\n    const { result } = await permissionApi.authorize({\n      permission,\n      resourceRef,\n    });\n\n    return result;\n  }, [permissionApi, permission, resourceRef]);\n\n  if (loading) {\n    return { loading: true, allowed: false };\n  }\n  if (error) {\n    return { error, loading: false, allowed: false };\n  }\n  return { loading: false, allowed: value === 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":";;;;;;MAqCa,mBAA0C,aAAa;AAAA,EAClE,IAAI;AAAA;;4BCRsD;AAAA,EAClD,YACW,kBACA,aACjB;AAFiB;AACA;AAAA;AAAA,SAGZ,OAAO,SAIX;AACD,UAAM,EAAE,WAAW,cAAc,gBAAgB;AACjD,UAAM,mBAAmB,IAAI,iBAAiB,EAAE,cAAc;AAC9D,WAAO,IAAI,sBAAsB,kBAAkB;AAAA;AAAA,QAG/C,UAAU,SAAuD;AACrE,UAAM,WAAW,MAAM,KAAK,iBAAiB,UAAU,CAAC,UAAU;AAAA,MAChE,OAAO,MAAM,KAAK,YAAY;AAAA;AAEhC,WAAO,SAAS;AAAA;AAAA;;MCbP,gBAAgB,CAC3B,YACA,gBAC0B;AAC1B,QAAM,gBAAgB,OAAO;AAE7B,QAAM,EAAE,SAAS,OAAO,UAAU,SAAS,YAAY;AACrD,UAAM,EAAE,WAAW,MAAM,cAAc,UAAU;AAAA,MAC/C;AAAA,MACA;AAAA;AAGF,WAAO;AAAA,KACN,CAAC,eAAe,YAAY;AAE/B,MAAI,SAAS;AACX,WAAO,EAAE,SAAS,MAAM,SAAS;AAAA;AAEnC,MAAI,OAAO;AACT,WAAO,EAAE,OAAO,SAAS,OAAO,SAAS;AAAA;AAE3C,SAAO,EAAE,SAAS,OAAO,SAAS,UAAU,gBAAgB;AAAA;;MC9BjD,oBAAoB,CAC/B,UAKG;AACH,QAAM,EAAE,YAAY,aAAa,mBAAmB,eAAe;AACnE,QAAM,mBAAmB,cAAc,YAAY;AACnD,QAAM,MAAM;AACZ,QAAM,EAAE,sBAAsB,IAAI;AAElC,MAAI,eACF,mBAAmB,6CAAa,mBAAD,QAAwB;AAEzD,MAAI,iBAAiB,SAAS;AAC5B,mBAAe;AAAA,aACN,iBAAiB,SAAS;AACnC,mBAAe,MAAM;AAAA;AAGvB,6CAAQ,OAAD;AAAA,OAAW;AAAA,IAAY,SAAS;AAAA;AAAA;;;;"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@backstage/plugin-permission-react",
+  "version": "0.0.0-nightly-202111922557",
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/permission-react"
+  },
+  "keywords": [
+    "backstage"
+  ],
+  "scripts": {
+    "build": "backstage-cli build",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/config": "^0.1.11",
+    "@backstage/core-plugin-api": "^0.0.0-nightly-202111922557",
+    "@backstage/plugin-permission-common": "^0.2.0",
+    "cross-fetch": "^3.0.6",
+    "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"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.0.0-nightly-202111922557",
+    "@backstage/test-utils": "^0.0.0-nightly-202111922557",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.7"
+  },
+  "files": [
+    "dist"
+  ]
+}