feat: use new environment limit in Unleash UI (#7500)

This PR updates the Unleash UI to use the new environment limit.

As it turns out, we already had an environment limit in the UI, but it
was hardcoded (luckily, its value is the same as the new default value
🥳).

In addition to the existing places this limit was used, it also disables
the "new environment" button if you've reached the limit. Because this
limit already exists, I don't think we need a flag for it. The only
change is that you can't click a button (that should be a link!) that
takes you to a page you can't do anything on.

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx

@@ -16,14 +16,14 @@ import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { GO_BACK } from 'constants/navigate';
-import { ENV_LIMIT } from 'constants/values';
 
 const CreateEnvironment = () => {
     const { setToastApiError, setToastData } = useToast();
     const { uiConfig } = useUiConfig();
+    const environmentLimit = uiConfig.resourceLimits.environments;
     const navigate = useNavigate();
     const { environments } = useEnvironments();
-    const canCreateMoreEnvs = environments.length < ENV_LIMIT;
+    const canCreateMoreEnvs = environments.length < environmentLimit;
     const { createEnvironment, loading } = useEnvironmentApi();
     const { refetch } = usePermissions();
     const {
@@ -114,8 +114,8 @@ const CreateEnvironment = () => {
                         <Alert severity='error'>
                             <p>
                                 Currently Unleash does not support more than{' '}
-                                {ENV_LIMIT} environments. If you need more
-                                please reach out.
+                                {environmentLimit} environments. If you need
+                                more please reach out.
                             </p>
                         </Alert>
                         <br />

frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.test.tsx

@@ -0,0 +1,55 @@
+import { screen, waitFor } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { CreateEnvironmentButton } from './CreateEnvironmentButton';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+
+const server = testServerSetup();
+
+const setupApi = ({
+    environmentCount,
+    environmentLimit,
+}: { environmentCount: number; environmentLimit: number }) => {
+    testServerRoute(server, '/api/admin/ui-config', {
+        flags: {
+            resourceLimits: true,
+            EEA: true,
+        },
+        resourceLimits: {
+            environments: environmentLimit,
+        },
+    });
+
+    testServerRoute(server, '/api/admin/environments', {
+        environments: Array.from({ length: environmentCount }).map((_, i) => ({
+            name: `environment-${i}`,
+            type: 'production',
+            enabled: i % 2 === 0,
+        })),
+    });
+};
+
+test('should allow you to create environments when there are fewer environments than the limit', async () => {
+    setupApi({ environmentLimit: 5, environmentCount: 2 });
+
+    render(<CreateEnvironmentButton />, {
+        permissions: [{ permission: ADMIN }],
+    });
+
+    await waitFor(async () => {
+        const button = await screen.findByRole('button');
+        expect(button).not.toBeDisabled();
+    });
+});
+
+test('should not allow you to create environments when you have reached the limit', async () => {
+    setupApi({ environmentLimit: 5, environmentCount: 5 });
+    render(<CreateEnvironmentButton />, {
+        permissions: [{ permission: ADMIN }],
+    });
+
+    await waitFor(async () => {
+        const button = await screen.findByRole('button');
+        expect(button).toBeDisabled();
+    });
+});

frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx

@@ -3,18 +3,29 @@ 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 { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 
 export const CreateEnvironmentButton = () => {
     const { uiConfig } = useUiConfig();
+    const { environments } = useEnvironments();
+    const environmentLimit = uiConfig.resourceLimits.environments;
     const navigate = useNavigate();
 
+    const limitReached = environments.length >= environmentLimit;
+
     return (
         <ResponsiveButton
+            tooltipProps={{
+                arrow: true,
+                title: limitReached
+                    ? `You have reached the limit of environments you can create (${environmentLimit}).`
+                    : undefined,
+            }}
             onClick={() => navigate('/environments/create')}
             maxWidth='700px'
             Icon={Add}
             permission={ADMIN}
-            disabled={!uiConfig.flags.EEA}
+            disabled={limitReached || !uiConfig.flags.EEA}
         >
             New environment
         </ResponsiveButton>

frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCell.tsx

@@ -11,9 +11,9 @@ import { EnvironmentActionCellPopover } from './EnvironmentActionCellPopover/Env
 import { EnvironmentCloneModal } from './EnvironmentCloneModal/EnvironmentCloneModal';
 import type { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
 import { EnvironmentTokenDialog } from './EnvironmentTokenDialog/EnvironmentTokenDialog';
-import { ENV_LIMIT } from 'constants/values';
 import { EnvironmentDeprecateToggleDialog } from './EnvironmentDeprecateToggleDialog/EnvironmentDeprecateToggleDialog';
 import { EnvironmentDeleteDialog } from './EnvironmentDeleteDialog/EnvironmentDeleteDialog';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IEnvironmentTableActionsProps {
     environment: IEnvironment;
@@ -23,6 +23,8 @@ export const EnvironmentActionCell = ({
     environment,
 }: IEnvironmentTableActionsProps) => {
     const navigate = useNavigate();
+    const { uiConfig } = useUiConfig();
+    const environmentLimit = uiConfig.resourceLimits.environments;
     const { setToastApiError, setToastData } = useToast();
     const { environments, refetchEnvironments } = useEnvironments();
     const { refetch: refetchPermissions } = usePermissions();
@@ -82,13 +84,13 @@ export const EnvironmentActionCell = ({
                 onEdit={() => navigate(`/environments/${environment.name}`)}
                 onDeprecateToggle={() => setDeprecateToggleDialog(true)}
                 onClone={() => {
-                    if (environments.length < ENV_LIMIT) {
+                    if (environments.length < environmentLimit) {
                         setCloneModal(true);
                     } else {
                         setToastData({
                             type: 'error',
                             title: 'Environment limit reached',
-                            text: `You have reached the maximum number of environments (${ENV_LIMIT}). Please reach out if you need more.`,
+                            text: `You have reached the maximum number of environments (${environmentLimit}). Please reach out if you need more.`,
                         });
                     }
                 }}

frontend/src/constants/values.ts

@@ -1 +0,0 @@
-export const ENV_LIMIT = 50;

frontend/src/hooks/api/getters/useUiConfig/defaultValue.tsx

@@ -38,6 +38,7 @@ export const defaultValue: IUiConfig = {
         actionSetFilterValues: 25,
         signalTokensPerEndpoint: 5,
         featureEnvironmentStrategies: 30,
+        environments: 50,
         constraintValues: 250,
     },
 };

frontend/src/openapi/models/resourceLimitsSchema.ts

@@ -26,6 +26,8 @@ export interface ResourceLimitsSchema {
     strategySegments: number;
     /** The maximum number of feature environment strategies allowed. */
     featureEnvironmentStrategies: number;
+    /** The maximum number of environments allowed. */
+    environments: number;
     /** The maximum number of values for a single constraint. */
     constraintValues: number;
 }

src/lib/openapi/spec/resource-limits-schema.ts

@@ -80,7 +80,7 @@ export const resourceLimitsSchema = {
             type: 'integer',
             minimum: 1,
             example: 50,
-            description: 'The maximum number active environments allowed.',
+            description: 'The maximum number of environments allowed.',
         },
     },
     components: {},