konnosDashboard
BucketsUpgradePlan.tsx75 lines · main
1import { useParams } from 'common'
2import { AnalyticsBucket as AnalyticsBucketIcon, VectorBucket as VectorBucketIcon } from 'icons'
3import { EmptyStatePresentational } from 'ui-patterns'
4import { PageContainer } from 'ui-patterns/PageContainer'
5import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
6import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
7
8import { BUCKET_TYPES } from './Storage.constants'
9import { AlphaNotice } from '@/components/ui/AlphaNotice'
10import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
11import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
12import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
13import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
14
15export const BucketsUpgradePlan = ({ type }: { type: 'analytics' | 'vector' }) => {
16 const { ref: projectRef } = useParams()
17 const { isLoading: isLoadingStorageConfig } = useProjectStorageConfigQuery({ projectRef })
18 const { data: organization, isLoading: isLoadingOrganization } = useSelectedOrganizationQuery()
19 const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery()
20
21 const isLoading =
22 isLoadingStorageConfig || isLoadingOrganization || isLoadingProject || !organization || !project
23
24 if (isLoading) {
25 return (
26 <PageContainer>
27 <PageSection>
28 <PageSectionContent className="flex flex-col gap-y-8">
29 <GenericSkeletonLoader />
30 </PageSectionContent>
31 </PageSection>
32 </PageContainer>
33 )
34 }
35
36 const isFreePlan = organization.plan?.id === 'free'
37 const isNanoCompute = project.infra_compute_size === 'nano'
38 const requiresComputeUpgrade = !isFreePlan && isNanoCompute
39
40 return (
41 <PageContainer>
42 <PageSection>
43 <PageSectionContent className="flex flex-col gap-y-8">
44 <AlphaNotice
45 entity={type === 'analytics' ? 'Analytics buckets' : 'Vector buckets'}
46 feedbackUrl={
47 type === 'analytics'
48 ? 'https://github.com/orgs/briven/discussions/40116'
49 : 'https://github.com/orgs/briven/discussions/40815'
50 }
51 />
52 <EmptyStatePresentational
53 icon={type === 'analytics' ? AnalyticsBucketIcon : VectorBucketIcon}
54 title={
55 type === 'analytics'
56 ? BUCKET_TYPES.analytics.valueProp
57 : BUCKET_TYPES.vectors.valueProp
58 }
59 description={
60 requiresComputeUpgrade
61 ? `Upgrade your project's compute size to Micro or larger to use ${type} buckets`
62 : `Upgrade to Pro to use ${type} buckets for your project`
63 }
64 >
65 <UpgradePlanButton
66 source={`${type}Buckets`}
67 featureProposition={`use ${type} buckets`}
68 addon={requiresComputeUpgrade ? 'computeSize' : undefined}
69 />
70 </EmptyStatePresentational>
71 </PageSectionContent>
72 </PageSection>
73 </PageContainer>
74 )
75}