diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.tsx index 2ce4742b162..68db6068849 100644 --- a/studio/components/interfaces/BillingV2/Usage/Usage.tsx +++ b/studio/components/interfaces/BillingV2/Usage/Usage.tsx @@ -17,6 +17,9 @@ import dayjs from 'dayjs' const Usage = () => { const { ref } = useParams() + + // [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, setSelectedProjectRef] = useState(ref as string) const infrastructureRef = useRef(null) @@ -24,7 +27,6 @@ const Usage = () => { const sizeAndCountsRef = useRef(null) const activityRef = useRef(null) - const { data: projects, isLoading } = useProjectsQuery() const { data: usage } = useProjectUsageQuery({ projectRef: ref }) const { data: subscription, isLoading: isLoadingSubscription } = useProjectSubscriptionQuery({ projectRef: selectedProjectRef, @@ -75,30 +77,6 @@ const Usage = () => { Previous billing cycle - {isLoading ? ( - - ) : ( - - {(projects ?? []).map((project) => ( - - {project.name} - - ))} - - )} {isLoadingSubscription ? ( ) : subscription !== undefined ? ( @@ -106,7 +84,7 @@ const Usage = () => {

Project is on {subscription.tier.name}

-

+

{billingCycleStart.format('DD MMM YY')} - {billingCycleEnd.format('DD MMM YY')}