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

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

@@ -14,16 +14,48 @@
 //
 // 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]
+    );
+
+    const hasDisallowedRoles = invalidRolesForThisUser.length > 0;
+
+    if (hasDisallowedRoles) {
+        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}
+            />
+        );
+    }
+
     // If user is not authenticated, redirect to login screen
     if (authState.sessionToken === null || authState.user === null) {
         return <Navigate to={ROUTE_LOGIN} state={{ from: location }} />;

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';