hide messages and configuration if not authorized w/ burnettk

spiffworkflow-frontend/src/components/NavigationBar.tsx

@@ -17,9 +17,13 @@ import {
 import { Logout, Login } from '@carbon/icons-react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Can } from '@casl/react';
 // @ts-expect-error TS(2307) FIXME: Cannot find module '../logo.svg' or its correspond... Remove this comment to see the full error message
 import logo from '../logo.svg';
 import UserService from '../services/UserService';
+import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import { PermissionsToCheck } from '../interfaces';
+import { usePermissionFetcher } from '../hooks/PermissionService';
 
 // for ref: https://react-bootstrap.github.io/components/navbar/
 export default function NavigationBar() {
@@ -34,6 +38,14 @@ export default function NavigationBar() {
   const location = useLocation();
   const [activeKey, setActiveKey] = useState<string>('');
 
+  const { targetUris } = useUriListForPermissions();
+  const permissionRequestData: PermissionsToCheck = {
+    [targetUris.authenticationListPath]: ['GET'],
+    [targetUris.messageInstanceListPath]: ['GET'],
+    [targetUris.secretListPath]: ['GET'],
+  };
+  const { ability } = usePermissionFetcher(permissionRequestData);
+
   useEffect(() => {
     let newActiveKey = '/admin/process-groups';
     if (location.pathname.match(/^\/admin\/messages\b/)) {
@@ -84,6 +96,42 @@ export default function NavigationBar() {
     );
   };
 
+  const configurationElement = () => {
+    return (
+      <Can
+        I="GET"
+        a={targetUris.authenticationListPath}
+        ability={ability}
+        passThrough
+      >
+        {(authenticationAllowed: boolean) => {
+          return (
+            <Can
+              I="GET"
+              a={targetUris.secretListPath}
+              ability={ability}
+              passThrough
+            >
+              {(secretAllowed: boolean) => {
+                if (secretAllowed || authenticationAllowed) {
+                  return (
+                    <HeaderMenuItem
+                      href="/admin/configuration"
+                      isCurrentPage={isActivePage('/admin/configuration')}
+                    >
+                      Configuration
+                    </HeaderMenuItem>
+                  );
+                }
+                return null;
+              }}
+            </Can>
+          );
+        }}
+      </Can>
+    );
+  };
+
   const headerMenuItems = () => {
     return (
       <>
@@ -103,18 +151,15 @@ export default function NavigationBar() {
         >
           Process Instances
         </HeaderMenuItem>
+        <Can I="GET" a={targetUris.messageInstanceListPath} ability={ability}>
           <HeaderMenuItem
             href="/admin/messages"
             isCurrentPage={isActivePage('/admin/messages')}
           >
             Messages
           </HeaderMenuItem>
-        <HeaderMenuItem
+        </Can>
-          href="/admin/configuration"
+        {configurationElement()}
-          isCurrentPage={isActivePage('/admin/configuration')}
-        >
-          Configuration
-        </HeaderMenuItem>
         <HeaderMenuItem
           href="/admin/process-instances/reports"
           isCurrentPage={isActivePage('/admin/process-instances/reports')}
@@ -125,7 +170,7 @@ export default function NavigationBar() {
     );
   };
 
-  if (activeKey) {
+  if (activeKey && ability) {
     return (
       <HeaderContainer
         render={({ isSideNavExpanded, onClickSideNavExpand }: any) => (

spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom';
 export const useUriListForPermissions = () => {
   const params = useParams();
   const targetUris = {
+    authenticationListPath: `/v1.0/authentications`,
     messageInstanceListPath: '/v1.0/messages',
     processGroupListPath: '/v1.0/process-groups',
     processGroupShowPath: `/v1.0/process-groups/${params.process_group_id}`,
@@ -12,6 +13,7 @@ export const useUriListForPermissions = () => {
     processModelFileCreatePath: `/v1.0/process-models/${params.process_model_id}/files`,
     processModelFileShowPath: `/v1.0/process-models/${params.process_model_id}/files/${params.file_name}`,
     processModelShowPath: `/v1.0/process-models/${params.process_model_id}`,
+    secretListPath: `/v1.0/secrets`,
   };
 
   return { targetUris };

spiffworkflow-frontend/src/routes/Configuration.tsx

@@ -2,11 +2,15 @@ import { useContext, useEffect, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 // @ts-ignore
 import { Tabs, TabList, Tab } from '@carbon/react';
+import { Can } from '@casl/react';
 import ErrorContext from '../contexts/ErrorContext';
 import SecretList from './SecretList';
 import SecretNew from './SecretNew';
 import SecretShow from './SecretShow';
 import AuthenticationList from './AuthenticationList';
+import { useUriListForPermissions } from '../hooks/UriListForPermissions';
+import { PermissionsToCheck } from '../interfaces';
+import { usePermissionFetcher } from '../hooks/PermissionService';
 
 export default function Configuration() {
   const location = useLocation();
@@ -14,6 +18,13 @@ export default function Configuration() {
   const [selectedTabIndex, setSelectedTabIndex] = useState<number>(0);
   const navigate = useNavigate();
 
+  const { targetUris } = useUriListForPermissions();
+  const permissionRequestData: PermissionsToCheck = {
+    [targetUris.authenticationListPath]: ['GET'],
+    [targetUris.secretListPath]: ['GET'],
+  };
+  const { ability } = usePermissionFetcher(permissionRequestData);
+
   useEffect(() => {
     setErrorMessage(null);
     let newSelectedTabIndex = 0;
@@ -27,12 +38,18 @@ export default function Configuration() {
     <>
       <Tabs selectedIndex={selectedTabIndex}>
         <TabList aria-label="List of tabs">
+          <Can I="GET" a={targetUris.secretListPath} ability={ability}>
             <Tab onClick={() => navigate('/admin/configuration/secrets')}>
               Secrets
             </Tab>
-          <Tab onClick={() => navigate('/admin/configuration/authentications')}>
+          </Can>
+          <Can I="GET" a={targetUris.authenticationListPath} ability={ability}>
+            <Tab
+              onClick={() => navigate('/admin/configuration/authentications')}
+            >
               Authentications
             </Tab>
+          </Can>
         </TabList>
       </Tabs>
       <br />