diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index fd837c2966a..f9fc5be5888 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -126,7 +126,6 @@ export const ProjectCard = ({
projectRef={project.ref}
cloudProvider={project.cloud_provider}
computeSize={getComputeSize(project)}
- resourceWarnings={resourceWarnings}
badgeClassName="text-[10px] leading-none tracking-[0.07em]"
/>
)}
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
index cee3ee1885a..5721177a6e0 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -137,7 +137,6 @@ export const ProjectTableRow = ({
projectRef={project.ref}
cloudProvider={project.cloud_provider}
computeSize={getComputeSize(project)}
- resourceWarnings={resourceWarnings}
/>
) : (
–
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index 73f3e2b38d1..44502550926 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -39,7 +39,7 @@ import { UpgradingState } from './UpgradingState'
import { CreateBranchModal } from '@/components/interfaces/BranchManagement/CreateBranchModal'
import { ProjectAPIDocs } from '@/components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
import { BannerFreeMicroUpgrade } from '@/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade'
-import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
+import { BANNER_ID, useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
import { ResourceExhaustionWarningBanner } from '@/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
@@ -169,17 +169,24 @@ export const ProjectLayout = forwardRef {
+ if (!selectedProject?.ref) return
if (isEligibleForFreeUpgrade && !isFreeMicroUpgradeBannerDismissed) {
addBanner({
- id: 'free-micro-upgrade-banner',
+ id: BANNER_ID.FREE_MICRO_UPGRADE,
isDismissed: false,
content: ,
priority: 2,
})
} else {
- dismissBanner('free-micro-upgrade-banner')
+ dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
}
- }, [isEligibleForFreeUpgrade, isFreeMicroUpgradeBannerDismissed, addBanner, dismissBanner])
+ }, [
+ selectedProject?.ref,
+ isEligibleForFreeUpgrade,
+ isFreeMicroUpgradeBannerDismissed,
+ addBanner,
+ dismissBanner,
+ ])
useLayoutEffect(() => {
const unregister = registerOpenMenu(() => {
diff --git a/apps/studio/components/ui/BannerStack/BannerStackProvider.tsx b/apps/studio/components/ui/BannerStack/BannerStackProvider.tsx
index 8ec5aaf054b..59be47502c9 100644
--- a/apps/studio/components/ui/BannerStack/BannerStackProvider.tsx
+++ b/apps/studio/components/ui/BannerStack/BannerStackProvider.tsx
@@ -1,6 +1,6 @@
import { createContext, useCallback, useContext, useState } from 'react'
-const BANNER_ID = {
+export const BANNER_ID = {
METRICS_API: 'metrics-api-banner',
INDEX_ADVISOR: 'index-advisor-banner',
TABLE_EDITOR_QUEUE_OPERATIONS: 'table-editor-queue-operations-banner',
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
index 5930c4bf4b1..4a413126394 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx
@@ -1,5 +1,6 @@
import { LOCAL_STORAGE_KEYS } from 'common'
import { useParams } from 'common/hooks'
+import { ChevronsUpAnimated } from 'components/ui/ComputeBadgeWrapper'
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
import { useTrack } from 'lib/telemetry/track'
import Link from 'next/link'
@@ -7,31 +8,7 @@ import { Button } from 'ui'
import { ComputeBadge } from 'ui-patterns/ComputeBadge'
import { BannerCard } from '../BannerCard'
-import { useBannerStack } from '../BannerStackProvider'
-
-const ChevronsUpAnimated = () => (
-
-)
+import { BANNER_ID, useBannerStack } from '../BannerStackProvider'
export const BannerFreeMicroUpgrade = () => {
const { ref } = useParams()
@@ -46,7 +23,7 @@ export const BannerFreeMicroUpgrade = () => {
{
setIsDismissed(true)
- dismissBanner('free-micro-upgrade-banner')
+ dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
track('free_micro_upgrade_banner_dismissed')
}}
>
@@ -77,7 +54,7 @@ export const BannerFreeMicroUpgrade = () => {
asChild
onClick={() => {
setIsDismissed(true)
- dismissBanner('free-micro-upgrade-banner')
+ dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
track('free_micro_upgrade_banner_cta_clicked')
}}
>
diff --git a/apps/studio/components/ui/ComputeBadgeWrapper.tsx b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
index 72381e36698..f9749e616e2 100644
--- a/apps/studio/components/ui/ComputeBadgeWrapper.tsx
+++ b/apps/studio/components/ui/ComputeBadgeWrapper.tsx
@@ -15,7 +15,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { UpgradePlanButton } from './UpgradePlanButton'
-const ChevronsUpAnimated = () => (
+export const ChevronsUpAnimated = () => (
{hasUpgradeAvailable && (
-
+
)}