From ba7dcfa5039ca0970ffc4c05a66a27d52ca27353 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 6 Sep 2022 01:33:00 +0800
Subject: [PATCH] Ignore usage exceed messages for enterprise

---
 .../ProjectUsageBars/ProjectUsageBars.tsx     | 74 +++++++++++--------
 .../ProjectUsageBars/ProjectUsageMinimal.tsx  |  5 +-
 .../LayoutHeader/LayoutHeader.tsx             |  6 +-
 3 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
index 1fb4f041166..17fb5d9df74 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
@@ -3,7 +3,7 @@ import { Badge, IconAlertCircle, Loading } from '@supabase/ui'
 
 import { useStore, useProjectUsage } from 'hooks'
 import { formatBytes } from 'lib/helpers'
-import { USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
+import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import SparkBar from 'components/ui/SparkBar'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { usageBasedItems } from './ProjectUsageBars.constants'
@@ -17,6 +17,8 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
   const { ui } = useStore()
   const { usage, error, isLoading } = useProjectUsage(projectRef)
 
+  const isEnterprise = ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
+
   useEffect(() => {
     if (error) {
       ui.setNotification({
@@ -27,12 +29,14 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
   }, [error])
 
   if (!isLoading && error) {
-    ;<InformationBox
-      hideCollapse
-      defaultVisibility
-      icon={<IconAlertCircle strokeWidth={2} />}
-      title="There was an issue loading the usage details of your project"
-    />
+    return (
+      <InformationBox
+        hideCollapse
+        defaultVisibility
+        icon={<IconAlertCircle strokeWidth={2} />}
+        title="There was an issue loading the usage details of your project"
+      />
+    )
   }
 
   return (
@@ -40,12 +44,14 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
       {usage && (
         <div>
           {usageBasedItems.map((product) => {
-            const isExceededUsage = product.features
-              .map((feature) => {
-                const featureUsage = usage[feature.key]
-                return featureUsage.usage / featureUsage.limit > 1
-              })
-              .some((x) => x === true)
+            const isExceededUsage =
+              !isEnterprise &&
+              product.features
+                .map((feature) => {
+                  const featureUsage = usage[feature.key]
+                  return featureUsage.usage / featureUsage.limit > 1
+                })
+                .some((x) => x === true)
             return (
               <div
                 key={product.title}
@@ -91,7 +97,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                         const featureUsage = usage[feature.key]
                         const usageRatio = featureUsage.usage / featureUsage.limit
                         const isApproaching = usageRatio >= USAGE_APPROACHING_THRESHOLD
-                        const isExceeded = usageRatio >= 1
+                        const isExceeded = !isEnterprise && usageRatio >= 1
 
                         return (
                           <tr
@@ -101,24 +107,30 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                             <td className="whitespace-nowrap px-6 py-3 text-sm text-scale-1200">
                               {feature.title}
                             </td>
-                            <td className="w-1/5 whitespace-nowrap p-3 text-sm lg:table-cell hidden text-scale-1200">
-                              {(usageRatio * 100).toFixed(2)} %
-                            </td>
+                            {!isEnterprise && (
+                              <td className="w-1/5 whitespace-nowrap p-3 text-sm lg:table-cell hidden text-scale-1200">
+                                {(usageRatio * 100).toFixed(2)} %
+                              </td>
+                            )}
                             <td className="px-6 py-3 text-sm text-scale-1200">
-                              <SparkBar
-                                type="horizontal"
-                                barClass={`${
-                                  isExceeded
-                                    ? 'bg-red-900'
-                                    : isApproaching
-                                    ? 'bg-yellow-900'
-                                    : 'bg-brand-900'
-                                }`}
-                                value={featureUsage.usage}
-                                max={featureUsage.limit}
-                                labelBottom={formatBytes(featureUsage.usage)}
-                                labelTop={formatBytes(featureUsage.limit)}
-                              />
+                              {!isEnterprise ? (
+                                <SparkBar
+                                  type="horizontal"
+                                  barClass={`${
+                                    isExceeded
+                                      ? 'bg-red-900'
+                                      : isApproaching
+                                      ? 'bg-yellow-900'
+                                      : 'bg-brand-900'
+                                  }`}
+                                  value={featureUsage.usage}
+                                  max={featureUsage.limit}
+                                  labelBottom={formatBytes(featureUsage.usage)}
+                                  labelTop={formatBytes(featureUsage.limit)}
+                                />
+                              ) : (
+                                <span>{formatBytes(featureUsage.usage)}</span>
+                              )}
                             </td>
                           </tr>
                         )
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
index 14eff53cfcf..1bc4a7afa03 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
@@ -16,7 +16,10 @@ const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, filter
   const { usage, error: usageError, isLoading } = useProjectUsage(projectRef)
   const { subscription, error: subscriptionError } = useProjectSubscription(projectRef)
 
-  if (subscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PAYG) {
+  if (
+    subscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PAYG ||
+    subscription?.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
+  ) {
     return <></>
   }
 
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 90059b70cbb..d871012a1be 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 
-import { IS_PLATFORM } from 'lib/constants'
+import { IS_PLATFORM, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import { useStore, useProjectUsage } from 'hooks'
 import BreadcrumbsView from './BreadcrumbsView'
 import OrgDropdown from './OrgDropdown'
@@ -22,7 +22,9 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
 
   const { usage } = useProjectUsage(ref as string)
   const resourcesExceededLimits = getResourcesExceededLimits(usage)
-  const isOverUsageLimits = resourcesExceededLimits.length > 0
+  const isOverUsageLimits =
+    selectedProject?.subscription_tier !== PRICING_TIER_PRODUCT_IDS.ENTERPRISE &&
+    resourcesExceededLimits.length > 0
 
   return (
     <div