konnosDashboard
RegionLimitation.tsx77 lines · main
1import { VectorBucket } from 'icons'
2import { AWS_REGIONS } from 'shared-data'
3import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
4import {
5 EmptyStatePresentational,
6 PageContainer,
7 PageSection,
8 PageSectionContent,
9} from 'ui-patterns'
10
11import { AVAILABLE_REPLICA_REGIONS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
12import { AlphaNotice } from '@/components/ui/AlphaNotice'
13import { InlineLinkClassName } from '@/components/ui/InlineLink'
14import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
15
16export const VECTOR_BUCKETS_AVAILABLE_REGIONS = [
17 'us-east-1',
18 'us-east-2',
19 'us-west-2',
20 'eu-central-1',
21 'ap-southeast-2',
22]
23
24const getRegionNameFromCode = (code: string) =>
25 Object.values(AWS_REGIONS).find((x) => x.code === code)?.displayName
26
27export const RegionLimitation = () => {
28 const { data: project } = useSelectedProjectQuery()
29
30 const regionLabel = AVAILABLE_REPLICA_REGIONS.find((region) =>
31 project?.region?.includes(region.region)
32 )
33
34 return (
35 <PageContainer>
36 <PageSection>
37 <PageSectionContent className="flex flex-col gap-y-8">
38 <AlphaNotice
39 entity="Vector buckets"
40 feedbackUrl="https://github.com/orgs/briven/discussions/40815"
41 />
42 <EmptyStatePresentational
43 icon={VectorBucket}
44 className="[&>div>div>h3]:flex [&>div>div>h3]:items-center [&>div>div>h3]:gap-x-2"
45 title="Coming soon to your project's region"
46 description={
47 <>
48 Your project is in{' '}
49 <Tooltip>
50 <TooltipTrigger className={InlineLinkClassName}>
51 {regionLabel?.name}
52 </TooltipTrigger>
53 <TooltipContent side="bottom">{regionLabel?.region}</TooltipContent>
54 </Tooltip>
55 , but Vector buckets are only available for{' '}
56 <Tooltip>
57 <TooltipTrigger className={InlineLinkClassName}>certain regions</TooltipTrigger>
58 <TooltipContent side="bottom">
59 <ul>
60 {VECTOR_BUCKETS_AVAILABLE_REGIONS.map((x) => (
61 <li key={x}>
62 <span>{getRegionNameFromCode(x)}</span>
63 <span className="text-foreground-light ml-2">{x}</span>
64 </li>
65 ))}
66 </ul>
67 </TooltipContent>
68 </Tooltip>
69 . We're actively looking to expand that soon.
70 </>
71 }
72 />
73 </PageSectionContent>
74 </PageSection>
75 </PageContainer>
76 )
77}