-
-
-
- {open ? 'Hide' : 'Show'} Controls
-
-
-
-
- Toggle controls with{' '}
-
- ⌘
- B
-
-
-
-
-
+
+
+ {open ? 'Hide' : 'Show'} Controls
+
+
+
+
+ Toggle controls with{' '}
+
+ ⌘
+ B
+
+
+
+
diff --git a/apps/studio/data/replication/keys.ts b/apps/studio/data/replication/keys.ts
index ce20ee79d4a7b..30ae4cd85b7de 100644
--- a/apps/studio/data/replication/keys.ts
+++ b/apps/studio/data/replication/keys.ts
@@ -13,4 +13,6 @@ export const replicationKeys = {
['projects', projectRef, 'pipelines', pipelineId] as const,
pipelinesStatus: (projectRef: string | undefined, pipelineId: number | undefined) =>
['projects', projectRef, 'pipelines', pipelineId, 'status'] as const,
+ pipelinesReplicationStatus: (projectRef: string | undefined, pipelineId: number | undefined) =>
+ ['projects', projectRef, 'pipelines', pipelineId, 'replication-status'] as const,
}
diff --git a/apps/studio/data/replication/pipeline-replication-status-query.ts b/apps/studio/data/replication/pipeline-replication-status-query.ts
new file mode 100644
index 0000000000000..952fa97fa4412
--- /dev/null
+++ b/apps/studio/data/replication/pipeline-replication-status-query.ts
@@ -0,0 +1,50 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+
+import { get, handleError } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { replicationKeys } from './keys'
+
+type ReplicationPipelineReplicationStatusParams = { projectRef?: string; pipelineId?: number }
+
+async function fetchReplicationPipelineReplicationStatus(
+ { projectRef, pipelineId }: ReplicationPipelineReplicationStatusParams,
+ signal?: AbortSignal
+) {
+ if (!projectRef) throw new Error('projectRef is required')
+ if (!pipelineId) throw new Error('pipelineId is required')
+
+ const { data, error } = await get(
+ '/platform/replication/{ref}/pipelines/{pipeline_id}/replication-status',
+ {
+ params: { path: { ref: projectRef, pipeline_id: pipelineId } },
+ signal,
+ }
+ )
+ if (error) {
+ handleError(error)
+ }
+
+ return data
+}
+
+export type ReplicationPipelineReplicationStatusData = Awaited<
+ ReturnType
+>
+
+export const useReplicationPipelineReplicationStatusQuery = <
+ TData = ReplicationPipelineReplicationStatusData,
+>(
+ { projectRef, pipelineId }: ReplicationPipelineReplicationStatusParams,
+ {
+ enabled = true,
+ ...options
+ }: UseQueryOptions = {}
+) =>
+ useQuery(
+ replicationKeys.pipelinesReplicationStatus(projectRef, pipelineId),
+ ({ signal }) => fetchReplicationPipelineReplicationStatus({ projectRef, pipelineId }, signal),
+ {
+ enabled: enabled && typeof projectRef !== 'undefined' && typeof pipelineId !== 'undefined',
+ ...options,
+ }
+ )
diff --git a/apps/studio/pages/project/[ref]/database/replication.tsx b/apps/studio/pages/project/[ref]/database/replication.tsx
deleted file mode 100644
index 20242cbeb779a..0000000000000
--- a/apps/studio/pages/project/[ref]/database/replication.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import ReplicationComingSoon from 'components/interfaces/Database/Replication/ComingSoon'
-import Destinations from 'components/interfaces/Database/Replication/Destinations'
-import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from 'components/layouts/DefaultLayout'
-import {
- ScaffoldContainer,
- ScaffoldDescription,
- ScaffoldHeader,
- ScaffoldTitle,
-} from 'components/layouts/Scaffold'
-import { useFlag } from 'hooks/ui/useFlag'
-import type { NextPageWithLayout } from 'types'
-
-const DatabaseReplicationPage: NextPageWithLayout = () => {
- const enablePgReplicate = useFlag('enablePgReplicate')
-
- return (
- <>
- {enablePgReplicate ? (
- <>
-
-
- Replication
-
-
-
- ) : (
- <>
-
-
- Replication
- Send data to other destinations
-
-
-
- {page}
-
-)
-
-export default DatabaseReplicationPage
diff --git a/apps/studio/pages/project/[ref]/database/replication/index.tsx b/apps/studio/pages/project/[ref]/database/replication/index.tsx
new file mode 100644
index 0000000000000..bc1a2a5445ac4
--- /dev/null
+++ b/apps/studio/pages/project/[ref]/database/replication/index.tsx
@@ -0,0 +1,76 @@
+import { useState } from 'react'
+
+import { ReplicationComingSoon } from 'components/interfaces/Database/Replication/ComingSoon'
+import { Destinations } from 'components/interfaces/Database/Replication/Destinations'
+import { ReplicationPipelineStatus } from 'components/interfaces/Database/Replication/ReplicationPipelineStatus'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import { FormHeader } from 'components/ui/Forms/FormHeader'
+import { useFlag } from 'hooks/ui/useFlag'
+import { PipelineRequestStatusProvider } from 'state/replication-pipeline-request-status'
+import type { NextPageWithLayout } from 'types'
+
+const DatabaseReplicationPage: NextPageWithLayout = () => {
+ const enablePgReplicate = useFlag('enablePgReplicate')
+ const [selectedPipelineId, setSelectedPipelineId] = useState()
+ const [selectedDestinationName, setSelectedDestinationName] = useState()
+
+ // [Joshen] Ideally selecting a pipeline should be a route on its own with pipelineId as the param
+ // e.g /project/ref/database/replication/[pipelineId]
+ // Can destinationName be derived from pipeline ID or something?
+
+ const handleSelectPipeline = (pipelineId: number, destinationName: string) => {
+ setSelectedPipelineId(pipelineId)
+ setSelectedDestinationName(destinationName)
+ }
+
+ const handleSelectBack = () => {
+ setSelectedPipelineId(undefined)
+ setSelectedDestinationName(undefined)
+ }
+
+ return (
+ <>
+ {enablePgReplicate ? (
+
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+ {page}
+
+)
+
+export default DatabaseReplicationPage
diff --git a/apps/studio/state/replication-pipeline-request-status.tsx b/apps/studio/state/replication-pipeline-request-status.tsx
new file mode 100644
index 0000000000000..722c4de9120b5
--- /dev/null
+++ b/apps/studio/state/replication-pipeline-request-status.tsx
@@ -0,0 +1,76 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react'
+
+export enum PipelineStatusRequestStatus {
+ None = 'None',
+ EnableRequested = 'EnableRequested',
+ DisableRequested = 'DisableRequested',
+}
+
+interface PipelineRequestStatusContextType {
+ requestStatus: Record
+ setRequestStatus: (pipelineId: number, status: PipelineStatusRequestStatus) => void
+ getRequestStatus: (pipelineId: number) => PipelineStatusRequestStatus
+ updatePipelineStatus: (pipelineId: number, backendStatus: string | undefined) => void
+}
+
+interface PipelineRequestStatusProviderProps {
+ children: ReactNode
+}
+
+const PipelineRequestStatusContext = createContext(
+ undefined
+)
+
+export const PipelineRequestStatusProvider = ({ children }: PipelineRequestStatusProviderProps) => {
+ const [requestStatus, setRequestStatusState] = useState<
+ Record
+ >({})
+
+ const setRequestStatus = (pipelineId: number, status: PipelineStatusRequestStatus) => {
+ setRequestStatusState((prev) => ({
+ ...prev,
+ [pipelineId]: status,
+ }))
+ }
+
+ const getRequestStatus = (pipelineId: number): PipelineStatusRequestStatus => {
+ return requestStatus[pipelineId] || PipelineStatusRequestStatus.None
+ }
+
+ const updatePipelineStatus = useCallback(
+ (pipelineId: number, backendStatus: string | undefined) => {
+ const currentRequestStatus = requestStatus[pipelineId] || PipelineStatusRequestStatus.None
+
+ if (
+ (currentRequestStatus === PipelineStatusRequestStatus.EnableRequested &&
+ (backendStatus === 'started' || backendStatus === 'failed')) ||
+ (currentRequestStatus === PipelineStatusRequestStatus.DisableRequested &&
+ (backendStatus === 'stopped' || backendStatus === 'failed'))
+ ) {
+ setRequestStatus(pipelineId, PipelineStatusRequestStatus.None)
+ }
+ },
+ [requestStatus, setRequestStatus]
+ )
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const usePipelineRequestStatus = () => {
+ const context = useContext(PipelineRequestStatusContext)
+ if (context === undefined) {
+ throw new Error('usePipelineRequestStatus must be used within a PipelineRequestStatusProvider')
+ }
+ return context
+}
diff --git a/apps/studio/styles/ui.scss b/apps/studio/styles/ui.scss
index 886f96393d435..f0f37298fec5f 100644
--- a/apps/studio/styles/ui.scss
+++ b/apps/studio/styles/ui.scss
@@ -119,7 +119,7 @@
}
.table-container thead th:first-child {
- @apply pl-6 rounded rounded-r-none rounded-b-none;
+ @apply rounded rounded-r-none rounded-b-none;
@apply border-l;
}
diff --git a/packages/api-types/types/platform.d.ts b/packages/api-types/types/platform.d.ts
index b34c046fe0963..23e0737d942da 100644
--- a/packages/api-types/types/platform.d.ts
+++ b/packages/api-types/types/platform.d.ts
@@ -3391,6 +3391,23 @@ export interface paths {
patch?: never
trace?: never
}
+ '/platform/replication/{ref}/pipelines/{pipeline_id}/replication-status': {
+ parameters: {
+ query?: never
+ header?: never
+ path?: never
+ cookie?: never
+ }
+ /** Get the status of a replication pipeline. */
+ get: operations['ReplicationPipelinesController_getPipelineReplicationStatus']
+ put?: never
+ post?: never
+ delete?: never
+ options?: never
+ head?: never
+ patch?: never
+ trace?: never
+ }
'/platform/replication/{ref}/pipelines/{pipeline_id}/start': {
parameters: {
query?: never
@@ -7353,6 +7370,41 @@ export interface components {
tenant_id: string
}[]
}
+ ReplicationPipelineReplicationStatusResponse: {
+ /** @description Pipeline id */
+ pipeline_id: number
+ /** @description Table statuses */
+ table_statuses: {
+ /** @description Table replication state */
+ state:
+ | {
+ /** @enum {string} */
+ name: 'queued'
+ }
+ | {
+ /** @enum {string} */
+ name: 'copying_table'
+ }
+ | {
+ /** @enum {string} */
+ name: 'copied_table'
+ }
+ | {
+ lag: number
+ /** @enum {string} */
+ name: 'following_wal'
+ }
+ | {
+ message: string
+ /** @enum {string} */
+ name: 'error'
+ }
+ /** @description Table id (internal Postgres OID) */
+ table_id: number
+ /** @description Table name */
+ table_name: string
+ }[]
+ }
ReplicationPipelineResponse: {
/** @description Pipeline config */
config: {
@@ -16607,6 +16659,12 @@ export interface operations {
'application/json': components['schemas']['GetUserContentResponse']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to retrieve project's content */
500: {
headers: {
@@ -16638,6 +16696,12 @@ export interface operations {
}
content?: never
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to update project's content */
500: {
headers: {
@@ -16671,6 +16735,12 @@ export interface operations {
'application/json': components['schemas']['UserContentObject']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to create project's content */
500: {
headers: {
@@ -16702,6 +16772,12 @@ export interface operations {
'application/json': components['schemas']['BulkDeleteUserContentResponse'][]
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to delete project's contents */
500: {
headers: {
@@ -16734,6 +16810,12 @@ export interface operations {
'application/json': components['schemas']['GetContentCountV2Response']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to retrieve user's content counts */
500: {
headers: {
@@ -16771,6 +16853,12 @@ export interface operations {
'application/json': components['schemas']['GetUserContentFolderResponse']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to retrieve project's content root folder */
500: {
headers: {
@@ -16804,6 +16892,12 @@ export interface operations {
'application/json': components['schemas']['CreateUserContentFolderResponse']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to create project's content folder */
500: {
headers: {
@@ -16830,6 +16924,12 @@ export interface operations {
}
content?: never
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to delete project's content folders */
500: {
headers: {
@@ -16867,6 +16967,12 @@ export interface operations {
'application/json': components['schemas']['GetUserContentFolderResponse']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to retrieve project's content folder */
500: {
headers: {
@@ -16900,6 +17006,12 @@ export interface operations {
}
content?: never
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to update project's content folder */
500: {
headers: {
@@ -16930,6 +17042,12 @@ export interface operations {
'application/json': components['schemas']['GetUserContentByIdResponse']
}
}
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
/** @description Failed to retrieve project's content by the given id */
500: {
headers: {
@@ -18639,6 +18757,44 @@ export interface operations {
}
}
}
+ ReplicationPipelinesController_getPipelineReplicationStatus: {
+ parameters: {
+ query?: never
+ header?: never
+ path: {
+ /** @description Pipeline id */
+ pipeline_id: number
+ /** @description Project ref */
+ ref: string
+ }
+ cookie?: never
+ }
+ requestBody?: never
+ responses: {
+ /** @description Returns the pipeline replication status. */
+ 200: {
+ headers: {
+ [name: string]: unknown
+ }
+ content: {
+ 'application/json': components['schemas']['ReplicationPipelineReplicationStatusResponse']
+ }
+ }
+ 403: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
+ /** @description Failed to get pipeline replication status. */
+ 500: {
+ headers: {
+ [name: string]: unknown
+ }
+ content?: never
+ }
+ }
+ }
ReplicationPipelinesController_startPipeline: {
parameters: {
query?: never