Skip to content

Commit 0ecddf1

Browse files
iambriccardoiambriccardo
authored
feat(replication): Implement UI to render pipeline replication status (supabase#37376)
1 parent cfb2204 commit 0ecddf1

File tree

20 files changed

+1400
-573
lines changed

20 files changed

+1400
-573
lines changed

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

Lines changed: 75 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import Table from 'components/to-be-cleaned/Table'
21
import { motion } from 'framer-motion'
3-
import { BASE_PATH } from 'lib/constants'
42
import { ArrowUpRight, Circle, Database, MoreVertical, Plus, Search } from 'lucide-react'
53
import { useTheme } from 'next-themes'
64
import Link from 'next/link'
75
import { useMemo } from 'react'
86
import ReactFlow, { Background, Handle, Position, ReactFlowProvider } from 'reactflow'
97
import 'reactflow/dist/style.css'
10-
import { Button, Input } from 'ui'
8+
9+
import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
10+
import Table from 'components/to-be-cleaned/Table'
11+
import { BASE_PATH } from 'lib/constants'
12+
import { Button, Input_Shadcn_ } from 'ui'
1113
import { NODE_WIDTH } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
1214

1315
const STATIC_NODES = [
@@ -62,6 +64,14 @@ const STATIC_EDGES = [
6264
{ id: 'e1-4', source: '1', target: '4', type: 'smoothstep', animated: true },
6365
]
6466

67+
export const ReplicationComingSoon = () => {
68+
return (
69+
<ReactFlowProvider>
70+
<ReplicationStaticMockup />
71+
</ReactFlowProvider>
72+
)
73+
}
74+
6575
const ReplicationStaticMockup = () => {
6676
const nodes = useMemo(() => STATIC_NODES, [])
6777
const edges = useMemo(() => STATIC_EDGES, [])
@@ -108,16 +118,6 @@ const ReplicationStaticMockup = () => {
108118
)
109119
}
110120

111-
const ReplicationComingSoon = () => {
112-
return (
113-
<ReactFlowProvider>
114-
<ReplicationStaticMockup />
115-
</ReactFlowProvider>
116-
)
117-
}
118-
119-
export default ReplicationComingSoon
120-
121121
const PrimaryNode = ({
122122
data,
123123
}: {
@@ -251,58 +251,68 @@ const StaticDestinations = () => {
251251

252252
return (
253253
<>
254-
<div className="flex flex-col bg-surface-100 px-6 pt-6 border-t relative h-full">
255-
<div className="bg-surface-300 w-full h-full absolute top-0 left-0 opacity-30"></div>
256-
<div className="flex items-center justify-between">
257-
<Input
258-
size="small"
259-
className="w-52 bg-transparent"
260-
iconContainerClassName="pl-2"
261-
icon={<Search size={14} className="text-foreground-lighter" />}
262-
placeholder="Search..."
263-
/>
264-
<Button
265-
icon={<Plus size={16} />}
266-
type="primary"
267-
className="flex items-center"
268-
onClick={() => {}}
269-
>
270-
New destination
271-
</Button>
272-
</div>
273-
<Table
274-
head={[
275-
<Table.th key="name">Name</Table.th>,
276-
<Table.th key="publication">Publication</Table.th>,
277-
<Table.th key="lag">Lag</Table.th>,
278-
<Table.th key="status">Status</Table.th>,
279-
<Table.th key="actions"></Table.th>,
280-
]}
281-
className="mt-4"
282-
body={mockRows.map((row, i) => (
283-
<Table.tr key={i}>
284-
<Table.td>{row.name}</Table.td>
285-
<Table.td>
286-
<span className="flex items-center gap-2">
287-
<span className="font-bold">All</span>
288-
<span className="text-sm text-foreground-lighter">{row.tables} tables</span>
289-
</span>
290-
</Table.td>
291-
<Table.td>{row.lag}</Table.td>
292-
<Table.td>
293-
<span className="flex items-center gap-3">
294-
<Circle size={10} className="bg-brand-500 stroke-none rounded-full" />
295-
{row.status}
296-
</span>
297-
</Table.td>
298-
<Table.td className="text-right">
299-
<button className="p-1">
300-
<MoreVertical size={18} />
301-
</button>
302-
</Table.td>
303-
</Table.tr>
304-
))}
305-
/>
254+
<div className="flex flex-col bg-surface-100 px-6 py-6 border-t relative ">
255+
<div className="z-10 bg-surface-300 w-full h-full absolute top-0 left-0 opacity-30" />
256+
257+
<ScaffoldContainer>
258+
<ScaffoldSection className="!py-0">
259+
<div className="col-span-12">
260+
<div className="flex items-center justify-between">
261+
<div className="relative w-52">
262+
<Search
263+
size={14}
264+
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-foreground-lighter"
265+
/>
266+
<Input_Shadcn_
267+
className="pl-9 bg-transparent h-8 pointer-events-none"
268+
placeholder="Search..."
269+
/>
270+
</div>
271+
<Button
272+
disabled
273+
type="primary"
274+
icon={<Plus size={16} />}
275+
className="flex items-center pointer-events-none"
276+
>
277+
New destination
278+
</Button>
279+
</div>
280+
<Table
281+
head={[
282+
<Table.th key="name">Name</Table.th>,
283+
<Table.th key="publication">Publication</Table.th>,
284+
<Table.th key="lag">Lag</Table.th>,
285+
<Table.th key="status">Status</Table.th>,
286+
<Table.th key="actions"></Table.th>,
287+
]}
288+
className="mt-4"
289+
body={mockRows.map((row, i) => (
290+
<Table.tr key={i}>
291+
<Table.td>{row.name}</Table.td>
292+
<Table.td>
293+
<span className="flex items-center gap-2">
294+
<span className="font-bold">All</span>
295+
<span className="text-sm text-foreground-lighter">{row.tables} tables</span>
296+
</span>
297+
</Table.td>
298+
<Table.td>{row.lag}</Table.td>
299+
<Table.td>
300+
<span className="flex items-center gap-3">
301+
<Circle size={10} className="bg-brand-500 stroke-none rounded-full" />
302+
{row.status}
303+
</span>
304+
</Table.td>
305+
<Table.td className="text-right">
306+
<button className="p-1">
307+
<MoreVertical size={18} />
308+
</button>
309+
</Table.td>
310+
</Table.tr>
311+
))}
312+
/>
313+
</div>
314+
</ScaffoldSection>
315+
</ScaffoldContainer>
306316
</div>
307317
</>
308318
)

0 commit comments

Comments
 (0)