feat(quay): add permissions support for quay plugin

plugins/quay-common/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

plugins/quay-common/README.md

@@ -0,0 +1,11 @@
+# Quay Common plugin
+
+Welcome to the quay-common plugin!
+
+This plugin contains common utilities for the quay plugin.
+
+# Quay plugin for Backstage
+
+The Quay plugin displays the information about your container images within the Quay registry in your Backstage application.
+
+For more information about Quay plugin, see the [Quay plugin documentation](https://github.com/janus-idp/backstage-plugins/tree/main/plugins/quay) on GitHub.

plugins/quay-common/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@janus-idp/backstage-plugin-quay-common",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "common-library",
+    "supported-versions": "1.28.4",
+    "pluginId": "quay",
+    "pluginPackage": "@janus-idp/backstage-plugin-quay-common",
+    "pluginPackages": [
+      "@janus-idp/backstage-plugin-quay",
+      "@janus-idp/backstage-plugin-quay-common"
+    ]
+  },
+  "author": "Red Hat",
+  "homepage": "https://red.ht/rhdh",
+  "bugs": "https://github.com/janus-idp/backstage-plugins/issues",
+  "maintainers": [
+    "janus-idp/rhtap"
+  ],
+  "keywords": [
+    "support:production",
+    "lifecycle:active",
+    "backstage",
+    "plugin"
+  ],
+  "scripts": {
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "lint": "backstage-cli package lint",
+    "postpack": "backstage-cli package postpack",
+    "prepack": "backstage-cli package prepack",
+    "test": "backstage-cli package test --passWithNoTests --coverage",
+    "tsc": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/janus-idp/backstage-plugins",
+    "directory": "plugins/quay-common"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@backstage/plugin-permission-common": "^0.8.0"
+  },
+  "peerDependencies": {
+    "react": "16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "0.26.11"
+  }
+}

plugins/quay-common/src/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Common functionalities for the quay plugin.
+ *
+ * @packageDocumentation
+ */
+
+export * from './permissions';

plugins/quay-common/src/permissions.ts

@@ -0,0 +1,13 @@
+import { createPermission } from '@backstage/plugin-permission-common';
+
+export const quayViewPermission = createPermission({
+  name: 'quay.view.read',
+  attributes: {
+    action: 'read',
+  },
+});
+
+/**
+ * List of all permissions on permission polices.
+ */
+export const quayPermissions = [quayViewPermission];

plugins/quay-common/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": ["src", "dev"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "outDir": "../../dist-types/plugins/quay-common",
+    "rootDir": "."
+  }
+}

plugins/quay-common/turbo.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "tsc": {
+      "outputs": ["../../dist-types/plugins/quay-common/**"],
+      "dependsOn": ["^tsc"]
+    }
+  }
+}

plugins/quay/dev/index.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { Entity } from '@backstage/catalog-model';
 import { createDevApp } from '@backstage/dev-utils';
 import { EntityProvider } from '@backstage/plugin-catalog-react';
-import { TestApiProvider } from '@backstage/test-utils';
+import { permissionApiRef } from '@backstage/plugin-permission-react';
+import { MockPermissionApi, TestApiProvider } from '@backstage/test-utils';
 
 import { createDevAppThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 
@@ -48,13 +49,19 @@ export class MockQuayApiClient implements QuayApiV1 {
     return securityDetails;
   }
 }
+const mockPermissionApi = new MockPermissionApi();
 
 createDevApp()
   .registerPlugin(quayPlugin)
   .addThemes(createDevAppThemes())
   .addPage({
     element: (
-      <TestApiProvider apis={[[quayApiRef, new MockQuayApiClient()]]}>
+      <TestApiProvider
+        apis={[
+          [quayApiRef, new MockQuayApiClient()],
+          [permissionApiRef, mockPermissionApi],
+        ]}
+      >
         <EntityProvider entity={mockEntity}>
           <QuayPage />
         </EntityProvider>

plugins/quay/package.json

@@ -15,7 +15,8 @@
     "pluginId": "quay",
     "pluginPackage": "@janus-idp/backstage-plugin-quay",
     "pluginPackages": [
-      "@janus-idp/backstage-plugin-quay"
+      "@janus-idp/backstage-plugin-quay",
+      "@janus-idp/backstage-plugin-quay-common"
     ]
   },
   "sideEffects": false,
@@ -40,6 +41,9 @@
     "@backstage/plugin-catalog-react": "^1.12.2",
     "@backstage/theme": "^0.5.6",
     "@janus-idp/shared-react": "2.10.0",
+    "@backstage/plugin-catalog-common": "^1.0.25",
+    "@backstage/plugin-permission-react": "^0.4.24",
+    "@janus-idp/backstage-plugin-quay-common": "1.0.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",

plugins/quay/src/components/PermissionAlert/PermissionAlert.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Alert, AlertTitle } from '@material-ui/lab';
+
+const PermissionAlert = () => {
+  return (
+    <Alert severity="warning" data-testid="no-permission-alert">
+      <AlertTitle>Permission required</AlertTitle>
+      To view quay image registry, contact your administrator to give you the
+      quay.view.read permission.
+    </Alert>
+  );
+};
+export default PermissionAlert;

plugins/quay/src/components/QuayRepository/QuayRepository.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 
+import { usePermission } from '@backstage/plugin-permission-react';
+
 import { render } from '@testing-library/react';
 
 import { useTags } from '../../hooks';
@@ -26,11 +28,33 @@ jest.mock('../../hooks/', () => ({
   useTags: jest.fn().mockReturnValue({}),
 }));
 
+jest.mock('@backstage/plugin-permission-react', () => ({
+  usePermission: jest.fn(),
+}));
+
+const mockUsePermission = usePermission as jest.MockedFunction<
+  typeof usePermission
+>;
+
 describe('QuayRepository', () => {
+  beforeEach(() => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: true });
+  });
+
   afterAll(() => {
     jest.resetAllMocks();
   });
 
+  it('should render permission alert when user does not have view permission', () => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: false });
+    const { queryByTestId } = render(<QuayRepository />);
+
+    expect(queryByTestId('no-permission-alert')).toBeInTheDocument();
+
+    expect(queryByTestId('quay-repo-progress')).toBeNull();
+    expect(queryByTestId('quay-repo-table')).toBeNull();
+  });
+
   it('should show loading if loading is true', () => {
     (useTags as jest.Mock).mockReturnValue({ loading: true, data: [] });
     const { getByTestId } = render(<QuayRepository />);

plugins/quay/src/components/QuayRepository/QuayRepository.tsx

@@ -4,6 +4,8 @@ import { Link, Progress, Table } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 import { useRepository, useTags } from '../../hooks';
+import { useQuayViewPermission } from '../../hooks/useQuayViewPermission';
+import PermissionAlert from '../PermissionAlert/PermissionAlert';
 import { columns, useStyles } from './tableHeading';
 
 type QuayRepositoryProps = Record<never, any>;
@@ -14,6 +16,8 @@ export function QuayRepository(_props: QuayRepositoryProps) {
   const configApi = useApi(configApiRef);
   const quayUiUrl = configApi.getOptionalString('quay.uiUrl');
 
+  const hasViewPermission = useQuayViewPermission();
+
   const title = quayUiUrl ? (
     <>
       {`Quay repository: `}
@@ -26,6 +30,10 @@ export function QuayRepository(_props: QuayRepositoryProps) {
   );
   const { loading, data } = useTags(organization, repository);
 
+  if (!hasViewPermission) {
+    return <PermissionAlert />;
+  }
+
   if (loading) {
     return (
       <div data-testid="quay-repo-progress">

plugins/quay/src/components/QuayTagPage/QuayTagPage.test.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { errorApiRef } from '@backstage/core-plugin-api';
 import { translationApiRef } from '@backstage/core-plugin-api/alpha';
+import { usePermission } from '@backstage/plugin-permission-react';
 import { MockErrorApi, TestApiProvider } from '@backstage/test-utils';
 import { MockTranslationApi } from '@backstage/test-utils/alpha';
 
@@ -37,12 +38,37 @@ jest.mock('../QuayTagDetails', () => ({
   QuayTagDetails: () => <div>QuayTagDetails</div>,
 }));
 
+jest.mock('@backstage/plugin-permission-react', () => ({
+  usePermission: jest.fn(),
+}));
+
+const mockUsePermission = usePermission as jest.MockedFunction<
+  typeof usePermission
+>;
+
 describe('QuayTagPage', () => {
+  beforeEach(() => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: true });
+  });
+
   afterAll(() => {
     jest.resetAllMocks();
   });
 
+  it('should render permission alert when user does not have view permission', () => {
+    mockUsePermission.mockReturnValue({ loading: false, allowed: false });
+    (useParams as jest.Mock).mockReturnValue({ digest: 'digest_data' });
+
+    const { queryByText, queryByTestId } = render(<QuayTagPage />);
+
+    expect(queryByTestId('no-permission-alert')).toBeInTheDocument();
+    expect(queryByTestId('quay-tag-page-progress')).toBeNull();
+    expect(queryByText(/QuayTagDetails/i)).not.toBeInTheDocument();
+  });
+
   it('should throw error if digest is not defined', () => {
+    (useParams as jest.Mock).mockReturnValue({});
+
     expect(() => render(<QuayTagPage />)).toThrow('digest is not defined');
   });
 

plugins/quay/src/components/QuayTagPage/component.tsx

@@ -5,17 +5,25 @@ import { ErrorPanel, Progress } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 import { useRepository, useTagDetails } from '../../hooks';
+import { useQuayViewPermission } from '../../hooks/useQuayViewPermission';
 import { rootRouteRef } from '../../routes';
+import PermissionAlert from '../PermissionAlert/PermissionAlert';
 import { QuayTagDetails } from '../QuayTagDetails';
 
 export const QuayTagPage = () => {
   const rootLink = useRouteRef(rootRouteRef);
   const { repository, organization } = useRepository();
   const { digest } = useParams();
+  const hasViewPermission = useQuayViewPermission();
   if (!digest) {
     throw new Error('digest is not defined');
   }
   const { loading, value } = useTagDetails(organization, repository, digest);
+
+  if (!hasViewPermission) {
+    return <PermissionAlert />;
+  }
+
   if (loading) {
     return (
       <div data-testid="quay-tag-page-progress">

plugins/quay/src/hooks/useQuayViewPermission.ts

@@ -0,0 +1,11 @@
+import { usePermission } from '@backstage/plugin-permission-react';
+
+import { quayViewPermission } from '@janus-idp/backstage-plugin-quay-common';
+
+export const useQuayViewPermission = () => {
+  const quayViewPermissionResult = usePermission({
+    permission: quayViewPermission,
+  });
+
+  return quayViewPermissionResult.allowed;
+};

plugins/rbac-backend/docs/permissions.md

@@ -129,8 +129,12 @@ Resource type permissions on the other hand are basic named permissions with a r
 
 ## Argocd
 
-| Name | Resource Type | Policy | Description | Requirements |
+| Name             | Resource Type | Policy | Description                               | Requirements        |
+| ---------------- | ------------- | ------ | ----------------------------------------- | ------------------- |
+| argocd.view.read |               | read   | Allows the user to view the argocd plugin | catalog.entity.read |
 
-| -------------- | ------------- | ------ | --------------------------------------- | ------------------- |
+## Quay
 
-| argocd.view.read | | read | Allows the user to view the argocd plugin | catalog.entity.read |
+| Name           | Resource Type | Policy | Description                             | Requirements        |
+| -------------- | ------------- | ------ | --------------------------------------- | ------------------- |
+| quay.view.read |               | read   | Allows the user to view the quay plugin | catalog.entity.read |