diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx index a59d97bc87..9062f694a6 100644 --- a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx +++ b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx @@ -128,6 +128,11 @@ const PremiumFeatures = { url: '', label: 'Automatic clean-up of inactive users', }, + environments: { + plan: FeaturePlan.ENTERPRISE, + url: 'https://docs.getunleash.io/reference/environments', + label: 'Environments management', + }, }; type PremiumFeatureType = keyof typeof PremiumFeatures; @@ -173,7 +178,7 @@ export const PremiumFeature = ({ <> {featureLabel} is a feature available for the{' '} {plan}{' '} - {plan === FeaturePlan.PRO ? 'plans' : 'plan'}. + {plan === FeaturePlan.PRO ? 'plans' : 'plan'} ); diff --git a/frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx b/frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx index 186f568f46..d4abf16d11 100644 --- a/frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx +++ b/frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx @@ -1,12 +1,31 @@ import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton'; import Add from '@mui/icons-material/Add'; import { ADMIN } from 'component/providers/AccessProvider/permissions'; -import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { useNavigate } from 'react-router-dom'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; +import { ReactComponent as ProPlanIcon } from 'assets/icons/pro-enterprise-feature-badge.svg'; +import { ReactComponent as ProPlanIconLight } from 'assets/icons/pro-enterprise-feature-badge-light.svg'; +import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; +import { useUiFlag } from 'hooks/useUiFlag'; export const CreateEnvironmentButton = () => { - const { uiConfig } = useUiConfig(); const navigate = useNavigate(); + const disabled = useUiFlag('EEA'); + + const endIcon = disabled ? ( + } + lightmode={} + /> + ) : undefined; + + const tooltipProps = disabled + ? { + titleComponent: , + sx: { maxWidth: '320px' }, + variant: 'custom' as const, + } + : undefined; return ( { maxWidth='700px' Icon={Add} permission={ADMIN} - disabled={!uiConfig.flags.EEA} + disabled={disabled} + endIcon={endIcon} + tooltipProps={tooltipProps} > New environment diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx index b38b55eb2a..e2cb880a9a 100644 --- a/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx +++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentTable.tsx @@ -26,6 +26,8 @@ import { Search } from 'component/common/Search/Search'; import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import type { IEnvironment } from 'interfaces/environments'; +import { useUiFlag } from 'hooks/useUiFlag'; +import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; const StyledAlert = styled(Alert)(({ theme }) => ({ marginBottom: theme.spacing(4), @@ -35,6 +37,7 @@ export const EnvironmentTable = () => { const { changeSortOrder } = useEnvironmentApi(); const { setToastApiError } = useToast(); const { environments, mutateEnvironments } = useEnvironments(); + const isFeatureEnabled = useUiFlag('EEA'); const moveListItem: MoveListItem = useCallback( async (dragIndex: number, dropIndex: number, save = false) => { @@ -88,6 +91,14 @@ export const EnvironmentTable = () => { ); + if (!isFeatureEnabled) { + return ( + + + + ); + } + return (