fix: show environments page as enterprise feature (#7796)

Not available with menu, URL only, and actions are not working with OSS
and Pro.

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{' '}
             <strong>{plan}</strong>{' '}
-            {plan === FeaturePlan.PRO ? 'plans' : 'plan'}.
+            {plan === FeaturePlan.PRO ? 'plans' : 'plan'}
         </>
     );
 

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 ? (
+        <ThemeMode
+            darkmode={<ProPlanIconLight />}
+            lightmode={<ProPlanIcon />}
+        />
+    ) : undefined;
+
+    const tooltipProps = disabled
+        ? {
+              titleComponent: <PremiumFeature feature='environments' tooltip />,
+              sx: { maxWidth: '320px' },
+              variant: 'custom' as const,
+          }
+        : undefined;
 
     return (
         <ResponsiveButton
@@ -14,7 +33,9 @@ export const CreateEnvironmentButton = () => {
             maxWidth='700px'
             Icon={Add}
             permission={ADMIN}
-            disabled={!uiConfig.flags.EEA}
+            disabled={disabled}
+            endIcon={endIcon}
+            tooltipProps={tooltipProps}
         >
             New environment
         </ResponsiveButton>

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 = () => {
         <PageHeader title={`Environments (${count})`} actions={headerActions} />
     );
 
+    if (!isFeatureEnabled) {
+        return (
+            <PageContent header={header}>
+                <PremiumFeature feature='environments' />
+            </PageContent>
+        );
+    }
+
     return (
         <PageContent header={header}>
             <StyledAlert severity='info'>