Skip to content

Commit 09cda34

Browse files
iambriccardojoshenlim
iambriccardo
and
joshenlim
authored
ref(etl): Add better badges (supabase#40828)
* ref(etl): Add better badges * Fix * Update apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx Co-authored-by: Joshen Lim <[email protected]> * UI nudges --------- Co-authored-by: Joshen Lim <[email protected]>
1 parent 3ee1ad6 commit 09cda34

File tree

9 files changed

+62
-36
lines changed

9 files changed

+62
-36
lines changed

‎apps/studio/components/interfaces/Database/Replication/ComingSoon.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import ReactFlow, { Background, Handle, Position, ReactFlowProvider } from 'reac
66
import 'reactflow/dist/style.css'
77

88
import { BASE_PATH } from 'lib/constants'
9-
import { Badge, Button, Card, CardContent } from 'ui'
9+
import { Button, Card, CardContent } from 'ui'
1010
import { NODE_WIDTH } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
1111

1212
const STATIC_NODES = [
@@ -157,7 +157,7 @@ const ReplicaNode = ({
157157
<div className="flex items-start justify-between p-3" style={{ width: NODE_WIDTH / 2 - 10 }}>
158158
<div className="flex gap-x-3">
159159
<div className="flex flex-col gap-y-0.5">
160-
<p className="">{data.label}</p>
160+
<p>{data.label}</p>
161161
<p className="flex items-center gap-x-1">
162162
<span className="text-sm text-foreground-light">{data.details}</span>
163163
</p>
@@ -196,20 +196,22 @@ const BlankNode = () => {
196196

197197
const CTANode = ({ projectRef }: { projectRef: string }) => {
198198
return (
199-
<Card className="w-[500px] p-6">
199+
<Card className="w-[570px] p-6">
200200
<CardContent>
201-
<div className="flex items-center gap-x-2 justify-between mb-2">
202-
<h2 className="text-lg">Replicate data to destinations in real-time</h2>
203-
<Badge variant="warning">Early Access</Badge>
204-
</div>
201+
<h2 className="text-lg mb-2">Stream database changes to external destinations</h2>
202+
<p className="text-foreground-light mb-2">
203+
Automatically replicate your data to external data warehouses and analytics platforms in
204+
real-time. No manual exports, no lag.
205+
</p>
205206
<p className="text-foreground-light">
206-
Replicate database changes to multiple destinations - no manual exports, no lag. Limited
207-
rollout for external destinations has begun, read replicas available now.
207+
We are currently in <span className="text-foreground">private alpha</span> and slowly
208+
onboarding new customers to ensure stable data pipelines. Request access below to join the
209+
waitlist. Read replicas are available now.
208210
</p>
209211
<div className="flex items-center gap-x-2 mt-6">
210212
<Button asChild type="secondary" iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}>
211213
<Link href="https://forms.supabase.com/pg_replicate" target="_blank" rel="noreferrer">
212-
Request early access
214+
Request alpha access
213215
</Link>
214216
</Button>
215217
<Button asChild type="default" iconRight={<ArrowRight size={16} strokeWidth={1.5} />}>

‎apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useState } from 'react'
55
import { useParams } from 'common'
66
import { ScaffoldHeader, ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
77
import AlertError from 'components/ui/AlertError'
8+
import { AlphaNotice } from 'components/ui/AlphaNotice'
89
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
910
import { useAnalyticsBucketsQuery } from 'data/storage/analytics-buckets-query'
1011
import { AnalyticsBucket as AnalyticsBucketIcon } from 'icons'
@@ -23,7 +24,6 @@ import {
2324
} from 'ui'
2425
import { TimestampInfo } from 'ui-patterns'
2526
import { Input } from 'ui-patterns/DataInputs/Input'
26-
import { AlphaNotice } from '../AlphaNotice'
2727
import { EmptyBucketState } from '../EmptyBucketState'
2828
import { CreateAnalyticsBucketModal } from './CreateAnalyticsBucketModal'
2929

@@ -64,7 +64,10 @@ export const AnalyticsBuckets = () => {
6464

6565
return (
6666
<ScaffoldSection isFullWidth>
67-
<AlphaNotice type="analytics" />
67+
<AlphaNotice
68+
entity="Analytics buckets"
69+
feedbackUrl="https://github.com/orgs/supabase/discussions/40116"
70+
/>
6871

6972
{isLoadingBuckets && <GenericSkeletonLoader />}
7073

‎apps/studio/components/interfaces/Storage/BucketsUpgradePlan.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { ScaffoldSection } from 'components/layouts/Scaffold'
2+
import { AlphaNotice } from 'components/ui/AlphaNotice'
23
import { UpgradePlanButton } from 'components/ui/UpgradePlanButton'
34
import { AnalyticsBucket as AnalyticsBucketIcon, VectorBucket as VectorBucketIcon } from 'icons'
4-
import { AlphaNotice } from './AlphaNotice'
55
import { BUCKET_TYPES } from './Storage.constants'
66

77
export const BucketsUpgradePlan = ({ type }: { type: 'analytics' | 'vector' }) => {
88
return (
99
<ScaffoldSection isFullWidth>
10-
<AlphaNotice type={type} />
10+
<AlphaNotice
11+
entity={type === 'analytics' ? 'Analytics buckets' : 'Vector buckets'}
12+
feedbackUrl={
13+
type === 'analytics'
14+
? 'https://github.com/orgs/supabase/discussions/40116'
15+
: 'https://github.com/orgs/supabase/discussions/40815'
16+
}
17+
/>
1118
<aside className="border border-dashed w-full bg-surface-100 rounded-lg px-4 py-10 flex flex-col gap-y-4 items-center text-center gap-1 text-balance">
1219
{type === 'analytics' ? (
1320
<AnalyticsBucketIcon size={24} strokeWidth={1.5} className="text-foreground-muted" />

‎apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { useState, type KeyboardEvent, type MouseEvent } from 'react'
55
import { useParams } from 'common'
66
import { ScaffoldHeader, ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
77
import AlertError from 'components/ui/AlertError'
8+
import { AlphaNotice } from 'components/ui/AlphaNotice'
89
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
910
import { useVectorBucketsQuery } from 'data/storage/vector-buckets-query'
1011
import { VectorBucket as VectorBucketIcon } from 'icons'
1112
import { BASE_PATH } from 'lib/constants'
1213
import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
1314
import { Input } from 'ui-patterns/DataInputs/Input'
1415
import { TimestampInfo } from 'ui-patterns/TimestampInfo'
15-
import { AlphaNotice } from '../AlphaNotice'
1616
import { EmptyBucketState } from '../EmptyBucketState'
1717
import { CreateVectorBucketDialog } from './CreateVectorBucketDialog'
1818

@@ -54,7 +54,10 @@ export const VectorsBuckets = () => {
5454

5555
return (
5656
<ScaffoldSection isFullWidth>
57-
<AlphaNotice type="vector" />
57+
<AlphaNotice
58+
entity="Vector buckets"
59+
feedbackUrl="https://github.com/orgs/supabase/discussions/40815"
60+
/>
5861

5962
{isLoadingBuckets && <GenericSkeletonLoader />}
6063

‎apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
22
import { PropsWithChildren } from 'react'
33

44
import { useIsColumnLevelPrivilegesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
5+
import { useIsETLPrivateAlpha } from 'components/interfaces/Database/Replication/useIsETLPrivateAlpha'
56
import { ProductMenu } from 'components/ui/ProductMenu'
67
import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
78
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
@@ -30,6 +31,7 @@ const DatabaseProductMenu = () => {
3031
const pgNetExtensionExists = (data ?? []).find((ext) => ext.name === 'pg_net') !== undefined
3132
const pitrEnabled = addons?.selected_addons.find((addon) => addon.type === 'pitr') !== undefined
3233
const columnLevelPrivileges = useIsColumnLevelPrivilegesEnabled()
34+
const enablePgReplicate = useIsETLPrivateAlpha()
3335

3436
const {
3537
databaseReplication: showPgReplicate,
@@ -46,6 +48,7 @@ const DatabaseProductMenu = () => {
4648
pitrEnabled,
4749
columnLevelPrivileges,
4850
showPgReplicate,
51+
enablePgReplicate,
4952
showRoles,
5053
showWrappers,
5154
})}

‎apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const generateDatabaseMenu = (
1111
pitrEnabled: boolean
1212
columnLevelPrivileges: boolean
1313
showPgReplicate: boolean
14+
enablePgReplicate: boolean
1415
showRoles: boolean
1516
showWrappers: boolean
1617
}
@@ -21,6 +22,7 @@ export const generateDatabaseMenu = (
2122
pitrEnabled,
2223
columnLevelPrivileges,
2324
showPgReplicate,
25+
enablePgReplicate,
2426
showRoles,
2527
showWrappers,
2628
} = flags || {}
@@ -110,6 +112,7 @@ export const generateDatabaseMenu = (
110112
name: 'Replication',
111113
key: 'replication',
112114
url: `/project/${ref}/database/replication`,
115+
label: enablePgReplicate ? 'New' : undefined,
113116
items: [],
114117
},
115118
]

apps/studio/components/interfaces/Storage/AlphaNotice.tsx renamed to apps/studio/components/ui/AlphaNotice.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import { BASE_PATH } from 'lib/constants'
55
import { Badge, Button } from 'ui'
66
import { Admonition } from 'ui-patterns'
77

8-
export const AlphaNotice = ({ type }: { type: 'analytics' | 'vector' }) => {
8+
interface AlphaNoticeProps {
9+
entity: string
10+
feedbackUrl: string
11+
}
12+
13+
export const AlphaNotice = ({ entity, feedbackUrl }: AlphaNoticeProps) => {
914
return (
1015
<Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
1116
<div className="absolute -inset-16 z-0 opacity-50">
@@ -28,25 +33,16 @@ export const AlphaNotice = ({ type }: { type: 'analytics' | 'vector' }) => {
2833
<Badge variant="success" className="-ml-0.5 uppercase">
2934
New
3035
</Badge>
31-
<p className="text-sm font-medium">Introducing {type} buckets</p>
36+
<p className="text-sm font-medium">Introducing {entity.toLocaleLowerCase()}</p>
3237
</div>
3338
<p className="text-sm text-foreground-lighter text-balance">
34-
<span className="capitalize">{type}</span> buckets are now in private alpha. Expect
35-
rapid changes, limited features, and possible breaking updates. Please share feedback as
36-
we refine the experience and expand access.
39+
{entity} {entity.endsWith('s') ? 'are' : 'is'} now in private alpha. Expect rapid
40+
changes, limited features, and possible breaking updates. Please share feedback as we
41+
refine the experience and expand access.
3742
</p>
3843
</div>
3944
<Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
40-
<Link
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
href={
44-
type === 'analytics'
45-
? 'https://github.com/orgs/supabase/discussions/40116'
46-
: // [Joshen] To update with Vector specific GH discussion
47-
'https://github.com/orgs/supabase/discussions/40815'
48-
}
49-
>
45+
<Link target="_blank" rel="noopener noreferrer" href={feedbackUrl}>
5046
Share feedback
5147
</Link>
5248
</Button>

‎apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const ProductMenuItem = ({
3838
>
3939
<span className="truncate flex-1">{name}</span>
4040
{label !== undefined && (
41-
<Badge variant="warning" size="tiny">
41+
<Badge variant={label.toLowerCase() === 'new' ? 'default' : 'warning'} size="small">
4242
{label}
4343
</Badge>
4444
)}

‎apps/studio/pages/project/[ref]/database/replication/index.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useIsETLPrivateAlpha } from 'components/interfaces/Database/Replication
55
import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
66
import DefaultLayout from 'components/layouts/DefaultLayout'
77
import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
8+
import { AlphaNotice } from 'components/ui/AlphaNotice'
89
import { FormHeader } from 'components/ui/Forms/FormHeader'
910
import { UnknownInterface } from 'components/ui/UnknownInterface'
1011
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -27,10 +28,18 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
2728
<ScaffoldContainer>
2829
<ScaffoldSection>
2930
<div className="col-span-12">
30-
<FormHeader
31-
className="[&>div>p]:max-w-full"
32-
title="Replication"
33-
description="Automatically replicate your database changes to external data warehouses and analytics platforms in real-time"
31+
<div className="w-full mb-6">
32+
<div className="flex items-center gap-x-2 mb-1">
33+
<h3 className="text-foreground text-xl prose">Replication</h3>
34+
</div>
35+
<p className="prose text-sm max-w-full">
36+
Automatically replicate your database changes to external data warehouses and
37+
analytics platforms in real-time
38+
</p>
39+
</div>
40+
<AlphaNotice
41+
entity="Replication"
42+
feedbackUrl="https://github.com/orgs/supabase/discussions/39416"
3443
/>
3544
<Destinations />
3645
</div>

0 commit comments

Comments
 (0)