fix(rbac): hide frontend when permission framework was disabled (janus-idp#1493)

* fix(rbac): hide frontend when permission framework was disabled

Signed-off-by: Oleksandr Andriienko <[email protected]>

* fix(rbac): fix playwright test

Signed-off-by: Oleksandr Andriienko <[email protected]>

* fix(rbac): update rbac backend plugin

Signed-off-by: Oleksandr Andriienko <[email protected]>

---------

Signed-off-by: Oleksandr Andriienko <[email protected]>

Author: AndrienkoAleksandr

.github/workflows/pr-playwright.yaml

@@ -64,6 +64,9 @@ jobs:
           cd packages/backend
           readarray folders < <(echo $PLUGINS | sed 's/[][]//g' | sed 's/,/ /g')
 
+          # enable permission support and RBAC plugins
+          printf "\npermission:\n  enabled: true\n" >> ${root}/app-config.yaml
+
           # Start backend
           echo "Starting backend"
           logfile=$(mktemp)

packages/backend/package.json

@@ -38,7 +38,7 @@
     "@backstage/plugin-search-backend-module-pg": "^0.5.25",
     "@backstage/plugin-search-backend-node": "^1.2.20",
     "@backstage/plugin-techdocs-backend": "^1.10.3",
-    "@janus-idp/backstage-plugin-rbac-backend": "^2.7.0",
+    "@janus-idp/backstage-plugin-rbac-backend": "^2.8.1",
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "^0.1.14",
     "@backstage/plugin-search-backend-module-catalog": "^0.1.21",
     "@backstage/plugin-search-backend-module-techdocs": "^0.1.21",

plugins/rbac/src/components/Administration.test.tsx

@@ -1,20 +1,45 @@
 import React from 'react';
-import { useAsync } from 'react-use';
 
 import { SidebarItem } from '@backstage/core-components';
+import { ApiRef, configApiRef } from '@backstage/core-plugin-api';
 
 import { render, screen } from '@testing-library/react';
 
+import { rbacApiRef } from '../api/RBACBackendClient';
 import { Administration } from './Administration';
 
+let useAsyncMockResult: { loading: boolean; value?: { status: string } } = {
+  loading: false,
+  value: { status: 'Authorized' },
+};
+
 jest.mock('react-use', () => ({
   ...jest.requireActual('react-use'),
-  useAsync: jest.fn(),
+  useAsync: jest.fn().mockImplementation((fn: any, _deps: any) => {
+    fn();
+    return useAsyncMockResult;
+  }),
 }));
 
+const mockGetUserAuthorization = jest.fn();
+
+const configMock = {
+  getOptionalBoolean: jest.fn(() => true),
+};
+
 jest.mock('@backstage/core-plugin-api', () => ({
   ...jest.requireActual('@backstage/core-plugin-api'),
-  useApi: jest.fn(),
+  useApi: jest.fn((apiRef: ApiRef<any>) => {
+    if (apiRef === rbacApiRef) {
+      return {
+        getUserAuthorization: mockGetUserAuthorization,
+      };
+    }
+    if (apiRef === configApiRef) {
+      return configMock;
+    }
+    return undefined;
+  }),
 }));
 
 jest.mock('@backstage/core-components', () => ({
@@ -29,8 +54,6 @@ const mockedSidebarItem = SidebarItem as jest.MockedFunction<
   typeof SidebarItem
 >;
 
-const mockGetUserAuthorization = jest.fn();
-
 const mockUseApi = jest.fn(() => ({
   getUserAuthorization: mockGetUserAuthorization,
 }));
@@ -41,56 +64,50 @@ describe('Administration component', () => {
   beforeEach(() => {
     mockGetUserAuthorization.mockClear();
     mockUseApi.mockClear();
-    (useAsync as jest.Mock).mockClear();
     mockRbacApiRef.mockClear();
     mockedSidebarItem.mockClear();
   });
 
   it('renders Administration sidebar item if user is authorized', async () => {
-    (useAsync as jest.Mock).mockReturnValueOnce({
-      loading: false,
-      value: { status: 'Authorized' },
-    });
-
-    (useAsync as jest.Mock).mockImplementation(() => ({
-      ...mockUseApi(),
-      getUserAuthorization: mockGetUserAuthorization,
-    }));
-
     render(<Administration />);
     expect(mockedSidebarItem).toHaveBeenCalled();
     expect(screen.queryByText('Administration')).toBeInTheDocument();
+    expect(mockGetUserAuthorization).toHaveBeenCalledTimes(1);
   });
 
   it('does not render Administration sidebar item if user is not authorized', async () => {
-    (useAsync as jest.Mock).mockReturnValueOnce({
+    useAsyncMockResult = {
       loading: false,
       value: { status: 'Unauthorized' },
-    });
-
-    (useAsync as jest.Mock).mockImplementation(() => ({
-      ...mockUseApi(),
-      getUserAuthorization: mockGetUserAuthorization,
-    }));
+    };
 
     render(<Administration />);
     expect(mockedSidebarItem).not.toHaveBeenCalled();
+    expect(mockGetUserAuthorization).toHaveBeenCalledTimes(1);
     expect(screen.queryByText('Administration')).toBeNull();
   });
 
   it('does not render Administration sidebar item if user loading state is true', async () => {
-    (useAsync as jest.Mock).mockReturnValueOnce({
+    useAsyncMockResult = {
       loading: true,
-      value: null,
-    });
+      value: undefined,
+    };
 
-    (useAsync as jest.Mock).mockImplementation(() => ({
-      ...mockUseApi(),
-      getUserAuthorization: mockGetUserAuthorization,
-    }));
+    render(<Administration />);
+    expect(mockedSidebarItem).not.toHaveBeenCalled();
+    expect(screen.queryByText('Administration')).toBeNull();
+  });
+
+  it('does not render Administration sidebar item if plugin is disabled in the configuration', async () => {
+    useAsyncMockResult = {
+      loading: false,
+      value: { status: 'Authorized' },
+    };
+    configMock.getOptionalBoolean.mockReturnValueOnce(false);
 
     render(<Administration />);
     expect(mockedSidebarItem).not.toHaveBeenCalled();
+    expect(mockGetUserAuthorization).toHaveBeenCalledTimes(1);
     expect(screen.queryByText('Administration')).toBeNull();
   });
 });

plugins/rbac/src/components/Administration.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { useAsync } from 'react-use';
 
 import { SidebarItem } from '@backstage/core-components';
-import { IconComponent, useApi } from '@backstage/core-plugin-api';
+import {
+  configApiRef,
+  IconComponent,
+  useApi,
+} from '@backstage/core-plugin-api';
 
 import AdminPanelSettingsOutlinedIcon from '@mui/icons-material/AdminPanelSettingsOutlined';
 
@@ -15,7 +19,10 @@ export const Administration = () => {
     [],
   );
 
-  if (!isUserLoading) {
+  const config = useApi(configApiRef);
+  const isRBACPluginEnabled = config.getOptionalBoolean('permission.enabled');
+
+  if (!isUserLoading && isRBACPluginEnabled) {
     return result?.status === 'Authorized' ? (
       <SidebarItem
         text="Administration"

plugins/rbac/src/components/Router.test.tsx

@@ -7,6 +7,15 @@ import { render, screen } from '@testing-library/react';
 
 import { Router } from './Router';
 
+const configMock = {
+  getOptionalBoolean: jest.fn(() => true),
+};
+
+jest.mock('@backstage/core-plugin-api', () => ({
+  ...jest.requireActual('@backstage/core-plugin-api'),
+  useApi: jest.fn(() => configMock),
+}));
+
 jest.mock('./RbacPage', () => ({
   RbacPage: () => <div>RBAC</div>,
 }));
@@ -48,6 +57,16 @@ describe('Router component', () => {
     expect(screen.queryByText('RBAC')).toBeInTheDocument();
   });
 
+  it(`should not render RbacPage when path is "/", when plugin is disabled`, () => {
+    configMock.getOptionalBoolean.mockReturnValueOnce(false);
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Router />
+      </MemoryRouter>,
+    );
+    expect(screen.queryByText('RBAC')).not.toBeInTheDocument();
+  });
+
   it('renders RoleOverviewPage when path matches roleRouteRef', () => {
     render(
       <MemoryRouter initialEntries={['/roles/user/testns/testname']}>
@@ -58,6 +77,17 @@ describe('Router component', () => {
     expect(screen.queryByText('Role')).toBeInTheDocument();
   });
 
+  it('should not render RoleOverviewPage when path matches roleRouteRef, when plugin is disabled', () => {
+    configMock.getOptionalBoolean.mockReturnValueOnce(false);
+    render(
+      <MemoryRouter initialEntries={['/roles/user/testns/testname']}>
+        <Router />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByText('Role')).not.toBeInTheDocument();
+  });
+
   it('renders CreateRolePage with the right permissions when path matches createRoleRouteRef', () => {
     render(
       <MemoryRouter initialEntries={['/role/new']}>
@@ -74,6 +104,17 @@ describe('Router component', () => {
     expect(screen.queryByText('CreateRole')).toBeInTheDocument();
   });
 
+  it('should not render CreateRolePage with the right permissions when path matches createRoleRouteRef, when plugin is disabled', () => {
+    configMock.getOptionalBoolean.mockReturnValueOnce(false);
+    render(
+      <MemoryRouter initialEntries={['/role/new']}>
+        <Router />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByText('CreateRole')).not.toBeInTheDocument();
+  });
+
   it('renders EditRolePage with the right permissions when path matches editRoleRouteRef', () => {
     render(
       <MemoryRouter initialEntries={['/role/user/testns/testname']}>
@@ -90,4 +131,15 @@ describe('Router component', () => {
     );
     expect(screen.queryByText('EditRole')).toBeInTheDocument();
   });
+
+  it('should not render EditRolePage with the right permissions when path matches editRoleRouteRef, when plugin is disabled', () => {
+    configMock.getOptionalBoolean.mockReturnValueOnce(false);
+    render(
+      <MemoryRouter initialEntries={['/role/user/testns/testname']}>
+        <Router />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByText('EditRole')).not.toBeInTheDocument();
+  });
 });

plugins/rbac/src/components/Router.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 
 import {
@@ -19,33 +20,42 @@ import { ToastContextProvider } from './ToastContext';
  *
  * @public
  */
-export const Router = ({ useHeader = true }: { useHeader?: boolean }) => (
-  <ToastContextProvider>
-    <Routes>
-      <Route path="/" element={<RbacPage useHeader={useHeader} />} />
-      <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />
-      <Route
-        path={createRoleRouteRef.path}
-        element={
-          <RequirePermission
-            permission={policyEntityCreatePermission}
-            resourceRef={policyEntityCreatePermission.resourceType}
-          >
-            <CreateRolePage />
-          </RequirePermission>
-        }
-      />
-      <Route
-        path={editRoleRouteRef.path}
-        element={
-          <RequirePermission
-            permission={policyEntityUpdatePermission}
-            resourceRef={policyEntityUpdatePermission.resourceType}
-          >
-            <EditRolePage />
-          </RequirePermission>
-        }
-      />
-    </Routes>
-  </ToastContextProvider>
-);
+export const Router = ({ useHeader = true }: { useHeader?: boolean }) => {
+  const config = useApi(configApiRef);
+  const isRBACPluginEnabled = config.getOptionalBoolean('permission.enabled');
+
+  if (!isRBACPluginEnabled) {
+    return null;
+  }
+
+  return (
+    <ToastContextProvider>
+      <Routes>
+        <Route path="/" element={<RbacPage useHeader={useHeader} />} />
+        <Route path={roleRouteRef.path} element={<RoleOverviewPage />} />
+        <Route
+          path={createRoleRouteRef.path}
+          element={
+            <RequirePermission
+              permission={policyEntityCreatePermission}
+              resourceRef={policyEntityCreatePermission.resourceType}
+            >
+              <CreateRolePage />
+            </RequirePermission>
+          }
+        />
+        <Route
+          path={editRoleRouteRef.path}
+          element={
+            <RequirePermission
+              permission={policyEntityUpdatePermission}
+              resourceRef={policyEntityUpdatePermission.resourceType}
+            >
+              <EditRolePage />
+            </RequirePermission>
+          }
+        />
+      </Routes>
+    </ToastContextProvider>
+  );
+};