fix: check for limits and usage from organisation.planDetail (#353)

* fix: check for limits and usage from organisation.planDetail * fix: plan label alignment in sidebar menu
phasehq · Aug 28, 2024 · 6c67b9a · 6c67b9a
1 parent 24252a6
commit 6c67b9a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 27 deletions.
diff --git a/frontend/components/apps/NewAppDialog.tsx b/frontend/components/apps/NewAppDialog.tsx
@@ -9,7 +9,6 @@ import { BulkProcessSecrets } from '@/graphql/mutations/environments/bulkProcess
 import { GetOrganisationAdminsAndSelf } from '@/graphql/queries/organisation/getOrganisationAdminsAndSelf.gql'
 import { InitAppEnvironments } from '@/graphql/mutations/environments/initAppEnvironments.gql'
 import { GetAppEnvironments } from '@/graphql/queries/secrets/getAppEnvironments.gql'
-import { GetOrganisationPlan } from '@/graphql/queries/organisation/getOrganisationPlan.gql'
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client'
 import {
   ApiEnvironmentEnvTypeChoices,
@@ -67,13 +66,6 @@ const NewAppDialog = forwardRef(
       skip: !organisation,
     })
 
-    const { data: orgPlanData } = useQuery(GetOrganisationPlan, {
-      variables: {
-        organisationId: organisation?.id,
-      },
-      skip: !organisation,
-    })
-
     const [createSuccess, setCreateSuccess] = useState(false)
 
     const { keyring } = useContext(KeyringContext)
@@ -397,28 +389,22 @@ const NewAppDialog = forwardRef(
     }
 
     const allowNewApp = () => {
-      if (
-        organisation.plan === ApiOrganisationPlanChoices.Fr ||
-        organisation.plan === ApiOrganisationPlanChoices.Pr
-      ) {
-        return appCount < orgPlanData?.organisationPlan.maxApps
-      } else if (organisation.plan === ApiOrganisationPlanChoices.En) {
-        return true
-      }
+      if (!organisation.planDetail?.maxApps) return true
+      return appCount < organisation.planDetail?.maxApps
     }
 
     const planDisplay = () => {
       if (organisation.plan === ApiOrganisationPlanChoices.Fr)
         return {
           planName: 'Free',
           dialogTitle: 'Upgrade to Pro',
-          description: `The Free plan is limited to ${orgPlanData?.organisationPlan.maxApps} Apps. To create more Apps, please upgrade to Pro.`,
+          description: `The Free plan is limited to ${organisation.planDetail?.maxApps} Apps. To create more Apps, please upgrade to Pro.`,
         }
       else if (organisation.plan === ApiOrganisationPlanChoices.Pr)
         return {
           planName: 'Pro',
           dialogTitle: 'Upgrade to Enterprise',
-          description: `The Pro plan is limited to ${orgPlanData?.organisationPlan.maxApps} Apps. To create more Apps, please upgrade to Enterprise.`,
+          description: `The Pro plan is limited to ${organisation.planDetail?.maxApps} Apps. To create more Apps, please upgrade to Enterprise.`,
         }
     }
 

diff --git a/frontend/components/environments/CreateEnvironmentDialog.tsx b/frontend/components/environments/CreateEnvironmentDialog.tsx
@@ -11,9 +11,7 @@ import { Button } from '../common/Button'
 import { Input } from '../common/Input'
 import { GetAppEnvironments } from '@/graphql/queries/secrets/getAppEnvironments.gql'
 import { toast } from 'react-toastify'
-import { UpgradeRequestForm } from '../forms/UpgradeRequestForm'
 import Spinner from '../common/Spinner'
-import { isCloudHosted } from '@/utils/appConfig'
 import { Alert } from '../common/Alert'
 import { UpsellDialog } from '../settings/organisation/UpsellDialog'
 
@@ -36,10 +34,10 @@ export const CreateEnvironmentDialog = (props: { appId: string }) => {
 
   const isLoading = orgAdminsDataLoading || appDataLoading
 
-  const allowNewEnv = organisation
-    ? !organisation.planDetail!.maxEnvsPerApp ||
-      organisation.planDetail!.maxEnvsPerApp! > appData?.appEnvironments.length
-    : false
+  const allowNewEnv = () => {
+    if (!organisation?.planDetail?.maxEnvsPerApp) return true
+    return appData?.appEnvironments.length < organisation.planDetail?.maxEnvsPerApp
+  }
 
   const planDisplay = () => {
     if (organisation?.plan === ApiOrganisationPlanChoices.Fr)
@@ -103,7 +101,7 @@ export const CreateEnvironmentDialog = (props: { appId: string }) => {
       </div>
     )
 
-  if (!allowNewEnv)
+  if (!allowNewEnv())
     return (
       <UpsellDialog
         title="Upgrade to Pro to create custom environments"
@@ -118,7 +116,7 @@ export const CreateEnvironmentDialog = (props: { appId: string }) => {
 
   return (
     <GenericDialog
-      title={allowNewEnv ? 'Create a new Environment' : planDisplay()?.dialogTitle || ''}
+      title={allowNewEnv() ? 'Create a new Environment' : planDisplay()?.dialogTitle || ''}
       ref={dialogRef}
       onClose={() => {}}
       buttonVariant={'outline'}

diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx
@@ -60,7 +60,7 @@ const Sidebar = () => {
   const OrgsMenu = () => {
     const OrgLabel = () => (
       <div className="p-2 text-neutral-500 flex items-center justify-between w-full bg-neutral-500/10 ring-1 ring-inset ring-neutral-400/10 rounded-lg">
-        <div className="flex flex-col gap-0.5 min-w-0">
+        <div className="flex flex-col gap-0.5 min-w-0 items-start">
           <div>
             <PlanLabel plan={activeOrganisation?.plan!} />
           </div>