From 6607bb6a8ddf86dc06e5a6293e0f1bfde40fa48a Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Thu, 17 Nov 2022 17:30:51 -0500
Subject: [PATCH] hide messages and configuration if not authorized w/ burnettk

---
 .../src/components/NavigationBar.tsx          | 71 +++++++++++++++----
 .../src/hooks/UriListForPermissions.tsx       |  2 +
 .../src/routes/Configuration.tsx              | 29 ++++++--
 3 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx
index 6ef62ac83..0cc49158a 100644
--- a/spiffworkflow-frontend/src/components/NavigationBar.tsx
+++ b/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>
-        <HeaderMenuItem
-          href="/admin/messages"
-          isCurrentPage={isActivePage('/admin/messages')}
-        >
-          Messages
-        </HeaderMenuItem>
-        <HeaderMenuItem
-          href="/admin/configuration"
-          isCurrentPage={isActivePage('/admin/configuration')}
-        >
-          Configuration
-        </HeaderMenuItem>
+        <Can I="GET" a={targetUris.messageInstanceListPath} ability={ability}>
+          <HeaderMenuItem
+            href="/admin/messages"
+            isCurrentPage={isActivePage('/admin/messages')}
+          >
+            Messages
+          </HeaderMenuItem>
+        </Can>
+        {configurationElement()}
         <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) => (
diff --git a/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx b/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx
index c00cb286e..9c61234b2 100644
--- a/spiffworkflow-frontend/src/hooks/UriListForPermissions.tsx
+++ b/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 };
diff --git a/spiffworkflow-frontend/src/routes/Configuration.tsx b/spiffworkflow-frontend/src/routes/Configuration.tsx
index 723a33ff0..b2e30416d 100644
--- a/spiffworkflow-frontend/src/routes/Configuration.tsx
+++ b/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">
-          <Tab onClick={() => navigate('/admin/configuration/secrets')}>
-            Secrets
-          </Tab>
-          <Tab onClick={() => navigate('/admin/configuration/authentications')}>
-            Authentications
-          </Tab>
+          <Can I="GET" a={targetUris.secretListPath} ability={ability}>
+            <Tab onClick={() => navigate('/admin/configuration/secrets')}>
+              Secrets
+            </Tab>
+          </Can>
+          <Can I="GET" a={targetUris.authenticationListPath} ability={ability}>
+            <Tab
+              onClick={() => navigate('/admin/configuration/authentications')}
+            >
+              Authentications
+            </Tab>
+          </Can>
         </TabList>
       </Tabs>
       <br />