Merge pull request #4374 from Infisical/ENG-3518

Disable environments edit when a project has more environment than the allowed by the org plan

backend/src/services/project-env/project-env-service.ts

@@ -177,6 +177,18 @@ export const projectEnvServiceFactory = ({
         }
       }
 
+      const envs = await projectEnvDAL.find({ projectId });
+      const project = await projectDAL.findById(projectId);
+      const plan = await licenseService.getPlan(project.orgId);
+      if (plan.environmentLimit !== null && envs.length > plan.environmentLimit) {
+        // case: limit imposed on number of environments allowed
+        // case: number of environments used exceeds the number of environments allowed
+        throw new BadRequestError({
+          message:
+            "Failed to update environment due to environment limit exceeded. To update an environment, please upgrade your plan or remove unused environments."
+        });
+      }
+
       const env = await projectEnvDAL.transaction(async (tx) => {
         if (position) {
           const existingEnvWithPosition = await projectEnvDAL.findOne({ projectId, position }, tx);

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -12,9 +12,15 @@ import {
   Td,
   Th,
   THead,
+  Tooltip,
   Tr
 } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useSubscription,
+  useWorkspace
+} from "@app/context";
 import { useUpdateWsEnvironment } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -35,6 +41,7 @@ type Props = {
 
 export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
   const { currentWorkspace } = useWorkspace();
+  const { subscription } = useSubscription();
 
   const updateEnvironment = useUpdateWsEnvironment();
 
@@ -61,6 +68,16 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
     }
   };
 
+  const isMoreEnvironmentsAllowed =
+    subscription?.environmentLimit && currentWorkspace?.environments
+      ? currentWorkspace.environments.length <= subscription.environmentLimit
+      : true;
+
+  const environmentsOverPlanLimit =
+    subscription?.environmentLimit && currentWorkspace?.environments
+      ? Math.max(0, currentWorkspace.environments.length - subscription.environmentLimit)
+      : 0;
+
   return (
     <TableContainer>
       <Table>
@@ -122,18 +139,26 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
                   a={ProjectPermissionSub.Environments}
                 >
                   {(isAllowed) => (
-                    <IconButton
+                    <Tooltip
-                      className="mr-3 py-2"
+                      content={
-                      onClick={() => {
+                        isMoreEnvironmentsAllowed
-                        handlePopUpOpen("updateEnv", { name, slug, id });
+                          ? ""
-                      }}
+                          : `You have exceeded the number of environments allowed by your plan. To edit an existing environment, either upgrade your plan or remove at least ${environmentsOverPlanLimit} environment${environmentsOverPlanLimit === 1 ? "" : "s"}.`
-                      isDisabled={!isAllowed}
+                      }
-                      colorSchema="primary"
-                      variant="plain"
-                      ariaLabel="update"
                     >
-                      <FontAwesomeIcon icon={faPencil} />
+                      <IconButton
-                    </IconButton>
+                        className="mr-3 py-2"
+                        onClick={() => {
+                          handlePopUpOpen("updateEnv", { name, slug, id });
+                        }}
+                        isDisabled={!isAllowed || !isMoreEnvironmentsAllowed}
+                        colorSchema="primary"
+                        variant="plain"
+                        ariaLabel="update"
+                      >
+                        <FontAwesomeIcon icon={faPencil} />
+                      </IconButton>
+                    </Tooltip>
                   )}
                 </ProjectPermissionCan>
                 <ProjectPermissionCan