Address comments

studio/components/interfaces/BillingV2/Usage/Usage.tsx

@@ -17,7 +17,7 @@ import SizeAndCounts from './SizeAndCounts'
 import { USAGE_CATEGORIES, USAGE_STATUS } from './Usage.constants'
 import { getUsageStatus } from './Usage.utils'
 
-export type usageSectionIds = 'infra' | 'bandwidth' | 'sizeCount' | 'activity'
+type UsageSectionIds = 'infra' | 'bandwidth' | 'sizeCount' | 'activity'
 
 const Usage = () => {
   const { ref } = useParams()
@@ -27,7 +27,7 @@ const Usage = () => {
   // [Joshen] Using a state here for now as in the future, we'd have this usage page support showing
   // stats for different projects. So we'll pass the selected ref as a prop into the individual components
   const [selectedProjectRef] = useState<string>(ref as string)
-  const [activeTab, setActiveTab] = useState<usageSectionIds>('infra')
+  const [activeTab, setActiveTab] = useState<UsageSectionIds>('infra')
   const [dateRange, setDateRange] = useState<any>()
 
   const infrastructureRef = useRef<HTMLDivElement>(null)
@@ -91,7 +91,7 @@ const Usage = () => {
     ] ?? 100
   )
 
-  const scrollTo = (id: usageSectionIds) => {
+  const scrollTo = (id: UsageSectionIds) => {
     switch (id) {
       case 'infra':
         if (infrastructureRef.current) {

studio/components/interfaces/Organization/BillingSettingsV2/Subscription/DowngradeModal.tsx

@@ -1,5 +1,5 @@
 import InformationBox from 'components/ui/InformationBox'
-import { OrgSubscription } from 'data/subscriptions/org-subscription-query'
+import { OrgSubscription, ProjectAddon } from 'data/subscriptions/org-subscription-query'
 import { PricingInformation } from 'shared-data'
 import { Alert, IconAlertOctagon, IconMinusCircle, IconPauseCircle, Modal } from 'ui'
 
@@ -11,6 +11,29 @@ export interface DowngradeModalProps {
   onConfirm: () => void
 }
 
+const ProjectDowngradeListItem = ({ projectAddon }: { projectAddon: ProjectAddon }) => {
+  const needsRestart = projectAddon.addons.find((addon) => addon.type === 'compute_instance')
+  const addons = projectAddon.addons.map((addon) => {
+    if (addon.type === 'compute_instance') return `${addon.variant.name} Compute Instance`
+    return addon.variant.name
+  })
+
+  return (
+    <li className="list-disc ml-6">
+      {projectAddon.name}: {addons.join(', ')} will be removed.
+      {needsRestart ? (
+        <>
+          {' '}
+          Project will also <span className="text-amber-900">need to be restarted</span> due to
+          change in compute instance
+        </>
+      ) : (
+        ''
+      )}
+    </li>
+  )
+}
+
 const DowngradeModal = ({
   visible,
   selectedPlan,
@@ -60,31 +83,9 @@ const DowngradeModal = ({
                   title={`Warning: A total of ${subscription?.project_addons.length} project(s) will be affected from the downgrade`}
                   description={
                     <ul className="space-y-1 max-h-[100px] overflow-y-auto">
-                      {subscription?.project_addons.map((project) => {
-                        const needsRestart = project.addons.find(
-                          (addon) => addon.type === 'compute_instance'
-                        )
-                        const addons = project.addons.map((addon) => {
-                          if (addon.type === 'compute_instance')
-                            return `${addon.variant.name} Compute Instance`
-                          return addon.variant.name
-                        })
-                        return (
-                          <li key={project.ref} className="list-disc ml-6">
-                            {project.name}: {addons.join(', ')} will be removed.
-                            {needsRestart ? (
-                              <>
-                                {' '}
-                                Project will also{' '}
-                                <span className="text-amber-900">need to be restarted</span> due to
-                                change in compute instance
-                              </>
-                            ) : (
-                              ''
-                            )}
-                          </li>
-                        )
-                      })}
+                      {subscription?.project_addons.map((project) => (
+                        <ProjectDowngradeListItem key={project.ref} projectAddon={project} />
+                      ))}
                     </ul>
                   }
                 />

studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx

@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import Link from 'next/link'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
@@ -20,8 +20,6 @@ import ProjectUpgradeAlert from '../General/Infrastructure/ProjectUpgradeAlert'
 const InfrastructureInfo = () => {
   const { ref } = useParams()
   const { project } = useProjectContext()
-  // const { data: subscription } = useProjectSubscriptionV2Query({ projectRef: ref })
-  // const isFreeProject = subscription?.plan?.id === 'free'
 
   const {
     data,

studio/data/__templates/README.md

@@ -74,7 +74,7 @@ const { data, error, isLoading, isError, isSuccess } = useQuery()
 
 ### Mutations
 
-The parameter `onError` should be passed when intializing the mutation, where the appropriate UI behaviour should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself.
+The parameter `onError` should be passed when intializing the mutation, where the appropriate UI behavior should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself.
 
 ```jsx
 const { mutateAsync } = useMutation({

studio/data/subscriptions/org-subscription-query.ts

@@ -11,6 +11,22 @@ export type OrgSubscriptionVariables = {
 
 export type PlanId = 'free' | 'pro' | 'team' | 'enterprise'
 
+export type ProjectAddon = {
+  addons: {
+    type: 'custom_domain' | 'compute_instance' | 'pitr'
+    variant: {
+      identifier: string
+      name: string
+      price: number
+      price_description: string
+      price_interval: string
+      price_type: string
+    }
+  }[]
+  name: string
+  ref: string
+}
+
 export type OrgSubscription = {
   billing_cycle_anchor: number
   current_period_start: number
@@ -45,21 +61,7 @@ export type OrgSubscription = {
     expiry_month: number
     expiry_year: number
   }
-  project_addons: {
-    addons: {
-      type: 'custom_domain' | 'compute_instance' | 'pitr'
-      variant: {
-        identifier: string
-        name: string
-        price: number
-        price_description: string
-        price_interval: string
-        price_type: string
-      }
-    }[]
-    name: string
-    ref: string
-  }[]
+  project_addons: ProjectAddon[]
 }
 
 export async function getOrgSubscription(