feat: disallow UPLOAD_ONLY role from some views (BED-7937)

cmd/ui/src/components/AuthenticatedRoute/AuthenticatedRoute.test.tsx

@@ -15,13 +15,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Route, Routes } from 'react-router-dom';
-import { ROUTE_EXPIRED_PASSWORD, ROUTE_HOME, ROUTE_LOGIN } from 'src/routes/constants';
-import { render, screen } from 'src/test-utils';
+import { ROUTE_ADMINISTRATION, ROUTE_EXPIRED_PASSWORD, ROUTE_HOME, ROUTE_LOGIN } from 'src/routes/constants';
+import { act, render, screen } from 'src/test-utils';
 import AuthenticatedRoute from './AuthenticatedRoute';
 
 const AUTHENTICATED_COPY = 'authenticated';
 const LOGIN_PAGE_COPY = 'login page';
 const EXPIRED_PASSWORD_PAGE_COPY = 'expired password page';
+const DISALLOWED_ROLE_NAME = 'DISALLOWED_ROLE_NAME';
+const TEST_NOTIFICATION = '__USER ROLE DISALLOWED FOR THIS ROUTE!';
 
 const TestRoutes = () => (
     <Routes>
@@ -33,6 +35,20 @@ const TestRoutes = () => (
                 </AuthenticatedRoute>
             }
         />
+        <Route
+            path={ROUTE_ADMINISTRATION}
+            element={
+                <AuthenticatedRoute
+                    disallowedRoles={[
+                        {
+                            name: DISALLOWED_ROLE_NAME,
+                            notification: TEST_NOTIFICATION,
+                        },
+                    ]}>
+                    <div>{AUTHENTICATED_COPY}</div>
+                </AuthenticatedRoute>
+            }
+        />
         <Route path={ROUTE_LOGIN} element={<div>{LOGIN_PAGE_COPY}</div>} />
         <Route path={ROUTE_EXPIRED_PASSWORD} element={<div>{EXPIRED_PASSWORD_PAGE_COPY}</div>} />
     </Routes>
@@ -114,4 +130,55 @@ describe('AuthenticatedRoute', () => {
         expect(screen.queryByText(AUTHENTICATED_COPY)).toBeInTheDocument();
         expect(window.location.pathname).toBe(ROUTE_HOME);
     });
+
+    it('when user has a disallowed role for a route with disallowed roles, they see the disallowed notification.', async () => {
+        await act(async () => {
+            render(<TestRoutes />, {
+                initialState: {
+                    auth: {
+                        sessionToken: 'validToken',
+                        user: {
+                            id: 'validUserId',
+                            AuthSecret: {
+                                expires_at: '9999-01-01T00:00:00Z', // not expired
+                            },
+                            roles: [
+                                {
+                                    name: DISALLOWED_ROLE_NAME,
+                                },
+                            ],
+                        },
+                    },
+                },
+                route: ROUTE_ADMINISTRATION,
+            });
+        });
+
+        expect(screen.queryByText(AUTHENTICATED_COPY)).not.toBeInTheDocument();
+        expect(screen.queryByText(TEST_NOTIFICATION)).toBeInTheDocument();
+        expect(window.location.pathname).toBe(ROUTE_ADMINISTRATION);
+    });
+
+    it('when user does not have a disallowed role for a route with disallowed roles, they see the normal page', async () => {
+        await act(async () => {
+            render(<TestRoutes />, {
+                initialState: {
+                    auth: {
+                        sessionToken: 'validToken',
+                        user: {
+                            id: 'validUserId',
+                            AuthSecret: {
+                                expires_at: '9999-01-01T00:00:00Z', // not expired
+                            },
+                        },
+                    },
+                },
+                route: ROUTE_ADMINISTRATION,
+            });
+        });
+
+        expect(screen.queryByText(AUTHENTICATED_COPY)).toBeInTheDocument();
+        expect(screen.queryByText(TEST_NOTIFICATION)).not.toBeInTheDocument();
+        expect(window.location.pathname).toBe(ROUTE_ADMINISTRATION);
+    });
 });

cmd/ui/src/components/AuthenticatedRoute/AuthenticatedRoute.tsx

@@ -14,16 +14,32 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
+import { Routable } from 'bh-shared-ui';
+import { Badge } from 'doodle-ui';
+import { useMemo } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 import { authExpiredSelector } from 'src/ducks/auth/authSlice';
 import { ROUTE_EXPIRED_PASSWORD, ROUTE_LOGIN } from 'src/routes/constants';
 import { useAppSelector } from 'src/store';
 
-const AuthenticatedRoute: React.FC<{ children: React.ReactElement }> = ({ children }): React.ReactElement => {
+type AuthenticatedRouteProps = {
+    children: React.ReactElement;
+    disallowedRoles?: Routable['disallowedRoles'];
+};
+
+const AuthenticatedRoute: React.FC<AuthenticatedRouteProps> = ({ children, disallowedRoles = [] }) => {
     const authState = useAppSelector((state) => state.auth);
     const isAuthExpired = useAppSelector(authExpiredSelector);
     const location = useLocation();
 
+    const invalidRolesForThisUser = useMemo(
+        () =>
+            disallowedRoles?.filter((disallowedRole) =>
+                authState.user?.roles?.find((role: any) => role.name === disallowedRole.name)
+            ),
+        [authState?.user, disallowedRoles]
+    );
+
     // If user is not authenticated, redirect to login screen
     if (authState.sessionToken === null || authState.user === null) {
         return <Navigate to={ROUTE_LOGIN} state={{ from: location }} />;
@@ -38,6 +54,24 @@ const AuthenticatedRoute: React.FC<{ children: React.ReactElement }> = ({ childr
         }
     }
 
+    const hasDisallowedRoles = invalidRolesForThisUser.length > 0;
+
+    if (hasDisallowedRoles) {
+        // We could display all notifications if a user is disallowed from a route for more than one reason
+        // For now, we'll just assume the first 'disallowed reason' is the one we want to convey to the user
+        const label = invalidRolesForThisUser?.[0].notification;
+
+        return (
+            <Badge
+                data-testid='attack-paths_etac-filtering-badge'
+                variant='fill'
+                className='px-2 py-1 ml-auto absolute right-4 top-4'
+                color='red'
+                label={label}
+            />
+        );
+    }
+
     return children;
 };
 

cmd/ui/src/views/Content.tsx

@@ -101,7 +101,7 @@ const Content: React.FC = () => {
                                 <Route
                                     path={route.path}
                                     element={
-                                        <AuthenticatedRoute>
+                                        <AuthenticatedRoute disallowedRoles={route.disallowedRoles}>
                                             <route.component />
                                         </AuthenticatedRoute>
                                     }

packages/javascript/bh-shared-ui/src/routes/index.tsx

@@ -67,4 +67,5 @@ export type Routable = {
     authenticationRequired: boolean;
     navigation: boolean;
     exact?: boolean;
+    disallowedRoles?: { name: string; notification: string }[];
 };

packages/javascript/bh-shared-ui/src/utils/index.ts

@@ -38,6 +38,7 @@ export * from './passwd';
 export * from './permissions';
 export * from './queries';
 export * from './quickUpload';
+export * from './roles';
 export * from './searchParams';
 export * from './strings';
 export * from './testHelpers';