feat: add stopping pipeline status in ui (#40294)

apps/studio/components/interfaces/Database/ETL/Pipeline.utils.ts

@@ -1,4 +1,7 @@
-import { ReplicationPipelineStatusData } from 'data/etl/pipeline-status-query'
+import {
+  ReplicationPipelineStatus,
+  ReplicationPipelineStatusData,
+} from 'data/etl/pipeline-status-query'
 import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
 import { PipelineStatusName } from './Replication.constants'
 
@@ -58,6 +61,11 @@ const PIPELINE_STATE_MESSAGES = {
     message: 'Initializing replication. Table status will be available once running.',
     badge: 'Starting',
   },
+  stopping: {
+    title: 'Pipeline stopping',
+    message: 'Stopping replication. Table replication will be paused once stopped',
+    badge: 'Stopping',
+  },
   running: {
     title: 'Pipeline running',
     message: 'Replication is active and processing data',
@@ -76,8 +84,8 @@ const PIPELINE_STATE_MESSAGES = {
 } as const
 
 export const getPipelineStateMessages = (
-  requestStatus: PipelineStatusRequestStatus | undefined,
-  statusName: string | undefined
+  requestStatus?: PipelineStatusRequestStatus,
+  statusName?: ReplicationPipelineStatus
 ) => {
   // Reflect optimistic request intent immediately after click
   if (requestStatus === PipelineStatusRequestStatus.RestartRequested) {
@@ -100,6 +108,8 @@ export const getPipelineStateMessages = (
       return PIPELINE_STATE_MESSAGES.stopped
     case 'started':
       return PIPELINE_STATE_MESSAGES.running
+    case 'stopping':
+      return PIPELINE_STATE_MESSAGES.stopping
     case 'unknown':
       return PIPELINE_STATE_MESSAGES.unknown
     default:

apps/studio/components/interfaces/Database/ETL/PipelineStatus.tsx

@@ -97,6 +97,13 @@ export const PipelineStatus = ({
             color: 'text-foreground-light',
             tooltip: stateMessages.message,
           }
+        case PipelineStatusName.STOPPING:
+          return {
+            label: 'Stopping',
+            dot: <Loader2 className="animate-spin w-3 h-3 text-warning" />,
+            color: 'text-warning',
+            tooltip: stateMessages.message,
+          }
         case PipelineStatusName.UNKNOWN:
           return {
             label: 'Unknown',

apps/studio/components/interfaces/Database/ETL/Replication.constants.ts

@@ -5,5 +5,6 @@ export enum PipelineStatusName {
   STARTING = 'starting',
   STARTED = 'started',
   STOPPED = 'stopped',
+  STOPPING = 'stopping',
   UNKNOWN = 'unknown',
 }

apps/studio/data/etl/pipeline-status-query.ts

@@ -1,10 +1,13 @@
 import { useQuery } from '@tanstack/react-query'
 
+import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelinesStatusParams = { projectRef?: string; pipelineId?: number }
+type ReplicationPipelineStatusResponse = components['schemas']['ReplicationPipelineStatusResponse']
+export type ReplicationPipelineStatus = ReplicationPipelineStatusResponse['status']['name']
 
 async function fetchReplicationPipelineStatus(
   { projectRef, pipelineId }: ReplicationPipelinesStatusParams,

apps/studio/state/replication-pipeline-request-status.tsx

@@ -1,11 +1,11 @@
 import {
   createContext,
-  useContext,
-  useState,
   ReactNode,
   useCallback,
-  useRef,
+  useContext,
   useEffect,
+  useRef,
+  useState,
 } from 'react'
 
 export enum PipelineStatusRequestStatus {
@@ -35,6 +35,9 @@ const PipelineRequestStatusContext = createContext<PipelineRequestStatusContextT
   undefined
 )
 
+// [Joshen] Leaving a comment for future investigation
+// Do we need this? Afaict the status is getting returned from the API so we might not need
+// to track the pipeline status on the client side
 export const PipelineRequestStatusProvider = ({ children }: PipelineRequestStatusProviderProps) => {
   const [requestStatus, setRequestStatusState] = useState<
     Record<number, PipelineStatusRequestStatus>