Disable unregister entity button in catalog if unauthorized

Signed-off-by: Joon Park <joonp@spotify.com>

.changeset/five-rockets-punch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/test-utils': patch
+---
+
+Add MockPermissionApi

.changeset/nice-trains-cross.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Add permission check to unregister entity button
+
+If the permissions framework is disabled, this change should have no effect. If the permission framework is enabled, the unregister entity button will be disabled for those who do not have access to the `catalogEntityDeletePermission` as specified in your permission policy.

.changeset/sweet-grapes-argue.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Add useEntityPermission hook

packages/app/package.json

@@ -69,6 +69,7 @@
     "zen-observable": "^0.8.15"
   },
   "devDependencies": {
+    "@backstage/plugin-permission-react": "^0.2.2",
     "@backstage/test-utils": "^0.2.3-next.0",
     "@rjsf/core": "^3.2.1",
     "@testing-library/cypress": "^8.0.2",

packages/app/src/components/catalog/EntityPage.test.tsx

@@ -21,7 +21,9 @@ import {
   starredEntitiesApiRef,
 } from '@backstage/plugin-catalog-react';
 import { githubActionsApiRef } from '@backstage/plugin-github-actions';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
 import {
+  MockPermissionApi,
   MockStorageApi,
   renderInTestApp,
   TestApiProvider,
@@ -49,6 +51,7 @@ describe('EntityPage Test', () => {
   const mockedApi = {
     listWorkflowRuns: jest.fn().mockResolvedValue([]),
   };
+  const mockPermissionApi = new MockPermissionApi();
 
   describe('cicdContent', () => {
     it('Should render GitHub Actions View', async () => {
@@ -62,6 +65,7 @@ describe('EntityPage Test', () => {
                 storageApi: MockStorageApi.create(),
               }),
             ],
+            [permissionApiRef, mockPermissionApi],
           ]}
         >
           <EntityProvider entity={entity}>

packages/test-utils/api-report.md

@@ -7,6 +7,9 @@ import { AnalyticsApi } from '@backstage/core-plugin-api';
 import { AnalyticsEvent } from '@backstage/core-plugin-api';
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ApiRef } from '@backstage/core-plugin-api';
+import { AuthorizeDecision } from '@backstage/plugin-permission-common';
+import { AuthorizeQuery } from '@backstage/plugin-permission-common';
+import { AuthorizeResult } from '@backstage/plugin-permission-common';
 import { ComponentType } from 'react';
 import { Config } from '@backstage/config';
 import { ConfigApi } from '@backstage/core-plugin-api';
@@ -17,6 +20,7 @@ import { ExternalRouteRef } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { Observable } from '@backstage/types';
+import { PermissionApi } from '@backstage/plugin-permission-react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RenderResult } from '@testing-library/react';
@@ -113,6 +117,17 @@ export type MockErrorApiOptions = {
   collect?: boolean;
 };
 
+// @public
+export class MockPermissionApi implements PermissionApi {
+  constructor(
+    requestHandler?: (
+      request: AuthorizeQuery,
+    ) => AuthorizeResult.ALLOW | AuthorizeResult.DENY,
+  );
+  // (undocumented)
+  authorize(request: AuthorizeQuery): Promise<AuthorizeDecision>;
+}
+
 // @public
 export class MockStorageApi implements StorageApi {
   // (undocumented)

packages/test-utils/package.json

@@ -32,6 +32,8 @@
     "@backstage/config": "^0.1.13-next.0",
     "@backstage/core-app-api": "^0.5.0-next.0",
     "@backstage/core-plugin-api": "^0.6.0-next.0",
+    "@backstage/plugin-permission-common": "^0.3.1",
+    "@backstage/plugin-permission-react": "^0.2.2",
     "@backstage/theme": "^0.2.14",
     "@backstage/types": "^0.1.1",
     "@material-ui/core": "^4.12.2",

packages/test-utils/src/testUtils/apis/PermissionApi/MockPermissionApi.test.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 {
+  AuthorizeResult,
+  Permission,
+} from '@backstage/plugin-permission-common';
+import { MockPermissionApi } from './MockPermissionApi';
+
+describe('MockPermissionApi', () => {
+  it('returns ALLOW by default', async () => {
+    const api = new MockPermissionApi();
+
+    await expect(
+      api.authorize({ permission: { name: 'permission.1' } as Permission }),
+    ).resolves.toEqual({ result: AuthorizeResult.ALLOW });
+  });
+
+  it('allows passing a handler to customize the result', async () => {
+    const api = new MockPermissionApi(request =>
+      request.permission.name === 'permission.2'
+        ? AuthorizeResult.DENY
+        : AuthorizeResult.ALLOW,
+    );
+
+    await expect(
+      api.authorize({ permission: { name: 'permission.2' } as Permission }),
+    ).resolves.toEqual({ result: AuthorizeResult.DENY });
+  });
+});

packages/test-utils/src/testUtils/apis/PermissionApi/MockPermissionApi.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2022 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 { PermissionApi } from '@backstage/plugin-permission-react';
+import {
+  AuthorizeDecision,
+  AuthorizeQuery,
+  AuthorizeResult,
+} from '@backstage/plugin-permission-common';
+
+/**
+ * Mock implementation of {@link core-plugin-api#PermissionApi}. Supply a
+ * requestHandler function to override the mock result returned for a given
+ * request.
+ * @public
+ */
+export class MockPermissionApi implements PermissionApi {
+  constructor(
+    private readonly requestHandler: (
+      request: AuthorizeQuery,
+    ) => AuthorizeResult.ALLOW | AuthorizeResult.DENY = () =>
+      AuthorizeResult.ALLOW,
+  ) {}
+
+  async authorize(request: AuthorizeQuery): Promise<AuthorizeDecision> {
+    return { result: this.requestHandler(request) };
+  }
+}

packages/test-utils/src/testUtils/apis/PermissionApi/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 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.
+ */
+
+export { MockPermissionApi } from './MockPermissionApi';

packages/test-utils/src/testUtils/apis/index.ts

@@ -17,4 +17,5 @@
 export * from './AnalyticsApi';
 export * from './ConfigApi';
 export * from './ErrorApi';
+export * from './PermissionApi';
 export * from './StorageApi';

plugins/catalog-react/api-report.md

@@ -6,6 +6,7 @@
 /// <reference types="react" />
 
 import { ApiRef } from '@backstage/core-plugin-api';
+import { AsyncPermissionResult } from '@backstage/plugin-permission-react';
 import { AsyncState } from 'react-use/lib/useAsync';
 import { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { CatalogApi } from '@backstage/catalog-client';
@@ -20,6 +21,7 @@ import { IdentityApi } from '@backstage/core-plugin-api';
 import { LinkProps } from '@backstage/core-components';
 import { Observable } from '@backstage/types';
 import { Overrides } from '@material-ui/core/styles/overrides';
+import { Permission } from '@backstage/plugin-permission-common';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
@@ -879,6 +881,11 @@ export function useEntityOwnership(): {
   isOwnedEntity: (entity: Entity | EntityName) => boolean;
 };
 
+// @public
+export function useEntityPermission(
+  permission: Permission,
+): AsyncPermissionResult;
+
 // Warning: (ae-forgotten-export) The symbol "EntityTypeReturn" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useEntityTypeFilter" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

plugins/catalog-react/package.json

@@ -35,6 +35,8 @@
     "@backstage/core-plugin-api": "^0.6.0-next.0",
     "@backstage/errors": "^0.2.0",
     "@backstage/integration": "^0.7.2-next.0",
+    "@backstage/plugin-permission-common": "^0.3.1",
+    "@backstage/plugin-permission-react": "^0.2.2",
     "@backstage/types": "^0.1.1",
     "@backstage/version-bridge": "^0.1.1",
     "@material-ui/core": "^4.12.2",
@@ -54,6 +56,7 @@
   "devDependencies": {
     "@backstage/cli": "^0.12.0-next.0",
     "@backstage/core-app-api": "^0.5.0-next.0",
+    "@backstage/plugin-catalog-common": "^0.1.0",
     "@backstage/test-utils": "^0.2.3-next.0",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^11.2.5",

plugins/catalog-react/src/hooks/index.ts

@@ -43,3 +43,4 @@ export {
   loadIdentityOwnerRefs,
 } from './useEntityOwnership';
 export { useOwnedEntities } from './useOwnedEntities';
+export { useEntityPermission } from './useEntityPermission';

plugins/catalog-react/src/hooks/useEntityPermission.test.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2022 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 React, { PropsWithChildren } from 'react';
+import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common';
+import { renderHook } from '@testing-library/react-hooks';
+import { useEntityPermission } from './useEntityPermission';
+import { MockPermissionApi, TestApiProvider } from '@backstage/test-utils';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
+import { Entity } from '@backstage/catalog-model';
+import { EntityProvider } from './useEntity';
+
+const mockPermissionApi = new MockPermissionApi();
+
+function createWrapper(entity?: Entity) {
+  return ({ children }: PropsWithChildren<{}>) => (
+    <TestApiProvider apis={[[permissionApiRef, mockPermissionApi]]}>
+      <EntityProvider entity={entity} children={children} />
+    </TestApiProvider>
+  );
+}
+
+describe('useEntityPermission', () => {
+  it('returns authorization result', async () => {
+    const { result, waitForValueToChange } = renderHook(
+      () => useEntityPermission(catalogEntityDeletePermission),
+      {
+        wrapper: createWrapper({
+          apiVersion: 'a',
+          kind: 'b',
+          metadata: { name: 'c' },
+        }),
+      },
+    );
+
+    await waitForValueToChange(() => result.current);
+
+    expect(result.current.allowed).toBe(true);
+  });
+
+  it('throws error if no entity is found', async () => {
+    const { waitForNextUpdate } = renderHook(
+      () => useEntityPermission(catalogEntityDeletePermission),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await expect(() => waitForNextUpdate()).rejects.toThrowError();
+  });
+});

plugins/catalog-react/src/hooks/useEntityPermission.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2022 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 { stringifyEntityRef } from '@backstage/catalog-model';
+import { Permission } from '@backstage/plugin-permission-common';
+import { usePermission } from '@backstage/plugin-permission-react';
+import { useEntity } from './useEntity';
+
+/**
+ * A thin wrapper around the
+ * {@link @backstage/plugin-permission-react#usePermission} hook which uses the
+ * current entity in context to make an authorization request for the given
+ * permission.
+ * @public
+ */
+export function useEntityPermission(permission: Permission) {
+  const { entity } = useEntity();
+  if (!entity) {
+    throw new Error('No entity in current context.');
+  }
+  return usePermission(permission, stringifyEntityRef(entity));
+}

plugins/catalog/package.json

@@ -37,6 +37,7 @@
     "@backstage/core-plugin-api": "^0.6.0-next.0",
     "@backstage/errors": "^0.2.0",
     "@backstage/integration-react": "^0.1.19-next.0",
+    "@backstage/plugin-catalog-common": "^0.1.0",
     "@backstage/plugin-catalog-react": "^0.6.12-next.0",
     "@backstage/theme": "^0.2.14",
     "@material-ui/core": "^4.12.2",

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.test.tsx

@@ -20,6 +20,11 @@ import { fireEvent, screen } from '@testing-library/react';
 import * as React from 'react';
 import { EntityContextMenu } from './EntityContextMenu';
 
+jest.mock('@backstage/plugin-catalog-react', () => ({
+  ...jest.requireActual('@backstage/plugin-catalog-react'),
+  useEntityPermission: () => ({ isAllowed: true }),
+}));
+
 describe('ComponentContextMenu', () => {
   it('should call onUnregisterEntity on button click', async () => {
     const mockCallback = jest.fn();

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx

@@ -28,6 +28,8 @@ import Cancel from '@material-ui/icons/Cancel';
 import MoreVert from '@material-ui/icons/MoreVert';
 import React, { useState } from 'react';
 import { IconComponent } from '@backstage/core-plugin-api';
+import { useEntityPermission } from '@backstage/plugin-catalog-react';
+import { catalogEntityDeletePermission } from '@backstage/plugin-catalog-common';
 
 // TODO(freben): It should probably instead be the case that Header sets the theme text color to white inside itself unconditionally instead
 const useStyles = makeStyles({
@@ -62,6 +64,9 @@ export const EntityContextMenu = ({
 }: Props) => {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>();
   const classes = useStyles();
+  const unregisterPermission = useEntityPermission(
+    catalogEntityDeletePermission,
+  );
 
   const onOpen = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
@@ -90,7 +95,9 @@ export const EntityContextMenu = ({
   ];
 
   const disableUnregister =
-    UNSTABLE_contextMenuOptions?.disableUnregister ?? false;
+    (!unregisterPermission.allowed ||
+      UNSTABLE_contextMenuOptions?.disableUnregister) ??
+    false;
 
   return (
     <>

plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx

@@ -36,6 +36,11 @@ import React from 'react';
 import { Route, Routes } from 'react-router';
 import { EntityLayout } from './EntityLayout';
 
+jest.mock('@backstage/plugin-catalog-react', () => ({
+  ...jest.requireActual('@backstage/plugin-catalog-react'),
+  useEntityPermission: () => ({ isAllowed: true }),
+}));
+
 const mockEntity = {
   kind: 'MyKind',
   metadata: {