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 (