2022-05-02 15:52:41 +02:00
|
|
|
import { IconButton, IconButtonProps } from '@mui/material';
|
2022-12-14 10:00:14 +01:00
|
|
|
import React, { ReactNode } from 'react';
|
2022-04-06 12:22:24 +02:00
|
|
|
import { Link } from 'react-router-dom';
|
2022-05-09 15:17:20 +02:00
|
|
|
import {
|
|
|
|
ITooltipResolverProps,
|
2022-11-28 16:13:45 +01:00
|
|
|
TooltipResolver,
|
2022-05-09 15:17:20 +02:00
|
|
|
} from 'component/common/TooltipResolver/TooltipResolver';
|
2022-04-21 08:26:49 +02:00
|
|
|
import { formatAccessText } from 'utils/formatAccessText';
|
2022-05-27 13:12:03 +02:00
|
|
|
import { useId } from 'hooks/useId';
|
2022-12-14 10:00:14 +01:00
|
|
|
import {
|
|
|
|
useHasProjectEnvironmentAccess,
|
|
|
|
useHasRootAccess,
|
|
|
|
} from 'hooks/useHasAccess';
|
2021-10-08 11:23:29 +02:00
|
|
|
|
2022-04-06 12:22:24 +02:00
|
|
|
interface IPermissionIconButtonProps {
|
2023-03-17 18:43:48 +01:00
|
|
|
permission: string | 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-06 12:22:24 +02:00
|
|
|
children?: ReactNode;
|
|
|
|
disabled?: boolean;
|
|
|
|
hidden?: boolean;
|
|
|
|
type?: 'button';
|
|
|
|
edge?: IconButtonProps['edge'];
|
2022-05-09 15:17:20 +02:00
|
|
|
tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
|
2022-06-10 16:09:50 +02:00
|
|
|
sx?: IconButtonProps['sx'];
|
2022-05-24 10:58:06 +02:00
|
|
|
size?: string;
|
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;
|
2023-01-05 09:45:17 +01:00
|
|
|
style?: React.CSSProperties;
|
2022-04-06 12:22:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
interface ILinkProps extends IPermissionIconButtonProps {
|
|
|
|
component: typeof Link;
|
|
|
|
to: string;
|
|
|
|
}
|
|
|
|
|
2022-12-14 10:00:14 +01:00
|
|
|
const RootPermissionIconButton = (props: IButtonProps | ILinkProps) => {
|
|
|
|
const access = useHasRootAccess(
|
|
|
|
props.permission,
|
2022-12-14 13:00:51 +01:00
|
|
|
props.projectId,
|
|
|
|
props.environmentId
|
2022-12-14 10:00:14 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
return <BasePermissionIconButton {...props} access={access} />;
|
|
|
|
};
|
|
|
|
|
|
|
|
const ProjectEnvironmentPermissionIconButton = (
|
|
|
|
props: (IButtonProps | ILinkProps) & {
|
|
|
|
environmentId: string;
|
|
|
|
projectId: string;
|
|
|
|
}
|
|
|
|
) => {
|
|
|
|
const access = useHasProjectEnvironmentAccess(
|
|
|
|
props.permission,
|
2022-12-14 13:00:51 +01:00
|
|
|
props.projectId,
|
|
|
|
props.environmentId
|
2022-12-14 10:00:14 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
return <BasePermissionIconButton {...props} access={access} />;
|
|
|
|
};
|
|
|
|
|
|
|
|
const BasePermissionIconButton = ({
|
|
|
|
access,
|
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-05-09 15:17:20 +02:00
|
|
|
tooltipProps,
|
2022-05-26 10:37:33 +02:00
|
|
|
disabled,
|
2021-10-08 11:23:29 +02:00
|
|
|
...rest
|
2022-12-14 10:00:14 +01:00
|
|
|
}: (IButtonProps | ILinkProps) & { access: boolean }) => {
|
2022-05-27 13:12:03 +02:00
|
|
|
const id = useId();
|
2021-10-20 12:05:44 +02:00
|
|
|
|
2021-10-08 11:23:29 +02:00
|
|
|
return (
|
2022-05-09 15:17:20 +02:00
|
|
|
<TooltipResolver
|
|
|
|
{...tooltipProps}
|
|
|
|
title={formatAccessText(access, tooltipProps?.title)}
|
|
|
|
arrow
|
2022-06-02 09:21:51 +02:00
|
|
|
onClick={e => e.preventDefault()}
|
2022-05-09 15:17:20 +02:00
|
|
|
>
|
2022-06-17 11:27:54 +02:00
|
|
|
<div id={id}>
|
2022-05-26 10:37:33 +02:00
|
|
|
<IconButton
|
|
|
|
{...rest}
|
|
|
|
disabled={!access || disabled}
|
2022-05-27 13:12:03 +02:00
|
|
|
aria-labelledby={id}
|
2022-05-26 10:37:33 +02:00
|
|
|
size="large"
|
|
|
|
>
|
2022-05-20 10:29:23 +02:00
|
|
|
{children}
|
|
|
|
</IconButton>
|
|
|
|
</div>
|
2022-04-21 08:26:49 +02:00
|
|
|
</TooltipResolver>
|
2021-10-08 11:23:29 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2022-12-14 10:00:14 +01:00
|
|
|
const PermissionIconButton = (props: IButtonProps | ILinkProps) => {
|
|
|
|
if (
|
|
|
|
typeof props.projectId !== 'undefined' &&
|
|
|
|
typeof props.environmentId !== 'undefined'
|
|
|
|
) {
|
|
|
|
return (
|
|
|
|
<ProjectEnvironmentPermissionIconButton
|
|
|
|
{...props}
|
|
|
|
projectId={props.projectId}
|
|
|
|
environmentId={props.environmentId}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2023-01-05 09:45:17 +01:00
|
|
|
|
2022-12-14 10:00:14 +01:00
|
|
|
return <RootPermissionIconButton {...props} />;
|
|
|
|
};
|
|
|
|
|
2021-10-08 11:23:29 +02:00
|
|
|
export default PermissionIconButton;
|