hide messages and configuration if not authorized w/ burnettk
This commit is contained in:
parent
c744dd8867
commit
6607bb6a8d
|
@ -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) => (
|
||||
|
|
|
@ -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 };
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in New Issue