2022-04-21 08:26:49 +02:00
|
|
|
import { IconButton, IconButtonProps } from '@material-ui/core';
|
2022-04-06 12:22:24 +02:00
|
|
|
import React, { useContext, ReactNode } from 'react';
|
2022-03-28 10:49:59 +02:00
|
|
|
import AccessContext from 'contexts/AccessContext';
|
2022-04-06 12:22:24 +02:00
|
|
|
import { Link } from 'react-router-dom';
|
2022-04-21 08:26:49 +02:00
|
|
|
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
|
|
|
|
import { formatAccessText } from 'utils/formatAccessText';
|
|
|
|
import { useId } from 'hooks/useId';
|
2021-10-08 11:23:29 +02:00
|
|
|
|
2022-04-06 12:22:24 +02:00
|
|
|
interface IPermissionIconButtonProps {
|
2021-10-08 11:23:29 +02:00
|
|
|
permission: string;
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId?: string;
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId?: string;
|
2022-02-09 12:25:02 +01:00
|
|
|
className?: string;
|
2022-04-21 08:26:49 +02:00
|
|
|
tooltip?: string;
|
2022-04-06 12:22:24 +02:00
|
|
|
children?: ReactNode;
|
|
|
|
disabled?: boolean;
|
|
|
|
hidden?: boolean;
|
|
|
|
type?: 'button';
|
|
|
|
edge?: IconButtonProps['edge'];
|
2021-10-08 11:23:29 +02:00
|
|
|
}
|
|
|
|
|
2022-04-06 12:22:24 +02:00
|
|
|
interface IButtonProps extends IPermissionIconButtonProps {
|
|
|
|
onClick: (event: React.SyntheticEvent) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface ILinkProps extends IPermissionIconButtonProps {
|
|
|
|
component: typeof Link;
|
|
|
|
to: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
const PermissionIconButton = ({
|
2021-10-08 11:23:29 +02:00
|
|
|
permission,
|
2021-10-20 12:05:44 +02:00
|
|
|
projectId,
|
2021-10-08 11:23:29 +02:00
|
|
|
children,
|
2022-01-14 15:50:02 +01:00
|
|
|
environmentId,
|
2022-04-21 08:26:49 +02:00
|
|
|
tooltip,
|
2021-10-08 11:23:29 +02:00
|
|
|
...rest
|
2022-04-06 12:22:24 +02:00
|
|
|
}: IButtonProps | ILinkProps) => {
|
2021-10-08 11:23:29 +02:00
|
|
|
const { hasAccess } = useContext(AccessContext);
|
2022-04-21 08:26:49 +02:00
|
|
|
const id = useId();
|
2022-01-14 15:50:02 +01:00
|
|
|
let access;
|
2021-10-08 11:23:29 +02:00
|
|
|
|
2022-01-14 15:50:02 +01:00
|
|
|
if (projectId && environmentId) {
|
|
|
|
access = hasAccess(permission, projectId, environmentId);
|
|
|
|
} else if (projectId) {
|
|
|
|
access = hasAccess(permission, projectId);
|
|
|
|
} else {
|
|
|
|
access = hasAccess(permission);
|
|
|
|
}
|
2021-10-20 12:05:44 +02:00
|
|
|
|
2021-10-08 11:23:29 +02:00
|
|
|
return (
|
2022-04-21 08:26:49 +02:00
|
|
|
<TooltipResolver title={formatAccessText(access, tooltip)}>
|
|
|
|
<span id={id}>
|
|
|
|
<IconButton {...rest} disabled={!access} aria-labelledby={id}>
|
2021-10-08 11:23:29 +02:00
|
|
|
{children}
|
|
|
|
</IconButton>
|
|
|
|
</span>
|
2022-04-21 08:26:49 +02:00
|
|
|
</TooltipResolver>
|
2021-10-08 11:23:29 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PermissionIconButton;
|