diff --git a/web/src/components/AllowButton/AllowButton.styled.ts b/web/src/components/AllowButton/AllowButton.styled.ts new file mode 100644 index 0000000000..4667802776 --- /dev/null +++ b/web/src/components/AllowButton/AllowButton.styled.ts @@ -0,0 +1,8 @@ +import {InfoCircleFilled} from '@ant-design/icons'; +import styled from 'styled-components'; + +export const Warning = styled(InfoCircleFilled)` + && { + color: ${({theme}) => theme.color.warningYellow}; + } +`; diff --git a/web/src/components/AllowButton/AllowButton.tsx b/web/src/components/AllowButton/AllowButton.tsx index c7b0f41225..09982089bc 100644 --- a/web/src/components/AllowButton/AllowButton.tsx +++ b/web/src/components/AllowButton/AllowButton.tsx @@ -1,5 +1,7 @@ -import {Button, ButtonProps, Tooltip} from 'antd'; +import {Button, ButtonProps, Tooltip, Typography} from 'antd'; +import {capitalize} from 'lodash'; import {Operation, useCustomization} from 'providers/Customization/Customization.provider'; +import * as S from './AllowButton.styled'; interface IProps extends ButtonProps { operation: Operation; @@ -7,15 +9,30 @@ interface IProps extends ButtonProps { } const AllowButton = ({operation, ButtonComponent, ...props}: IProps) => { - const {getIsAllowed} = useCustomization(); + const {getIsAllowed, getRole} = useCustomization(); const isAllowed = getIsAllowed(operation); const BtnComponent = ButtonComponent || Button; + const role = getRole(); // the tooltip unmounts and remounts the children, detaching it from the DOM return isAllowed ? ( ) : ( - + + + Limited Access + + + Your current role group ({capitalize(role)}) has limited access to this environment. please contact + the environment administrator for assistance. + + + } + overlayStyle={{minWidth: '420px'}} + >