hide messages and configuration if not authorized w/ burnettk

This commit is contained in:
jasquat 2022-11-17 17:30:51 -05:00
parent c744dd8867
commit 6607bb6a8d
3 changed files with 83 additions and 19 deletions

View File

@ -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) => (

View File

@ -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 };

View File

@ -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 />