2022-05-02 15:52:41 +02:00
|
|
|
import { Button, ButtonProps } from '@mui/material';
|
|
|
|
import { Lock } from '@mui/icons-material';
|
2022-02-24 09:23:07 +01:00
|
|
|
import AccessContext from 'contexts/AccessContext';
|
2022-02-25 10:55:39 +01:00
|
|
|
import React, { useContext } from 'react';
|
2022-05-02 12:52:33 +02:00
|
|
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
2022-05-09 15:17:20 +02:00
|
|
|
import {
|
|
|
|
TooltipResolver,
|
|
|
|
ITooltipResolverProps,
|
|
|
|
} from 'component/common/TooltipResolver/TooltipResolver';
|
2022-04-21 08:26:49 +02:00
|
|
|
import { formatAccessText } from 'utils/formatAccessText';
|
|
|
|
import { useId } from 'hooks/useId';
|
2021-10-08 11:23:29 +02:00
|
|
|
|
2022-04-21 08:26:49 +02:00
|
|
|
export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
|
2022-01-14 15:50:02 +01:00
|
|
|
permission: string | string[];
|
2021-10-08 11:23:29 +02:00
|
|
|
onClick?: (e: any) => void;
|
|
|
|
disabled?: boolean;
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId?: string;
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId?: string;
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
|
2021-10-08 11:23:29 +02:00
|
|
|
}
|
|
|
|
|
2022-11-11 11:04:59 +01:00
|
|
|
const PermissionButton: React.FC<IPermissionButtonProps> = React.forwardRef(
|
|
|
|
(
|
|
|
|
{
|
|
|
|
permission,
|
|
|
|
variant = 'contained',
|
|
|
|
color = 'primary',
|
|
|
|
onClick,
|
|
|
|
children,
|
|
|
|
disabled,
|
|
|
|
projectId,
|
|
|
|
environmentId,
|
|
|
|
tooltipProps,
|
|
|
|
...rest
|
|
|
|
},
|
|
|
|
ref
|
|
|
|
) => {
|
|
|
|
const { hasAccess } = useContext(AccessContext);
|
|
|
|
const id = useId();
|
2022-01-14 15:50:02 +01:00
|
|
|
let access;
|
2022-11-11 11:04:59 +01:00
|
|
|
|
|
|
|
const handleAccess = () => {
|
|
|
|
let access;
|
|
|
|
if (Array.isArray(permission)) {
|
|
|
|
access = permission.some(permission => {
|
|
|
|
if (projectId && environmentId) {
|
|
|
|
return hasAccess(permission, projectId, environmentId);
|
|
|
|
} else if (projectId) {
|
|
|
|
return hasAccess(permission, projectId);
|
|
|
|
} else {
|
|
|
|
return hasAccess(permission);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
2022-01-14 15:50:02 +01:00
|
|
|
if (projectId && environmentId) {
|
2022-11-11 11:04:59 +01:00
|
|
|
access = hasAccess(permission, projectId, environmentId);
|
2022-01-14 15:50:02 +01:00
|
|
|
} else if (projectId) {
|
2022-11-11 11:04:59 +01:00
|
|
|
access = hasAccess(permission, projectId);
|
2022-01-14 15:50:02 +01:00
|
|
|
} else {
|
2022-11-11 11:04:59 +01:00
|
|
|
access = hasAccess(permission);
|
2022-01-14 15:50:02 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-11 11:04:59 +01:00
|
|
|
return access;
|
|
|
|
};
|
2022-01-14 15:50:02 +01:00
|
|
|
|
2022-11-11 11:04:59 +01:00
|
|
|
access = handleAccess();
|
2021-10-20 12:05:44 +02:00
|
|
|
|
2022-11-11 11:04:59 +01:00
|
|
|
return (
|
|
|
|
<TooltipResolver
|
|
|
|
{...tooltipProps}
|
|
|
|
title={formatAccessText(access, tooltipProps?.title)}
|
|
|
|
arrow
|
|
|
|
>
|
|
|
|
<span id={id}>
|
|
|
|
<Button
|
|
|
|
ref={ref}
|
|
|
|
onClick={onClick}
|
|
|
|
disabled={disabled || !access}
|
|
|
|
aria-labelledby={id}
|
|
|
|
variant={variant}
|
|
|
|
color={color}
|
|
|
|
{...rest}
|
|
|
|
endIcon={
|
|
|
|
<>
|
|
|
|
<ConditionallyRender
|
|
|
|
condition={!access}
|
|
|
|
show={<Lock titleAccess="Locked" />}
|
|
|
|
elseShow={
|
|
|
|
Boolean(rest.endIcon) && rest.endIcon
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Button>
|
|
|
|
</span>
|
|
|
|
</TooltipResolver>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
);
|
2021-10-08 11:23:29 +02:00
|
|
|
|
|
|
|
export default PermissionButton;
|