feat(replication): Implement new error UI when the pipeline fails (supabase#37105)

Author: iambriccardo

apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx

@@ -4,9 +4,12 @@ import { ReplicationPipelinesData } from 'data/replication/pipelines-query'
 import { ResponseError } from 'types'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import RowMenu from './RowMenu'
-import PipelineStatus, { PipelineStatusRequestStatus } from './PipelineStatus'
+import PipelineStatus, { PipelineStatusRequestStatus, PipelineStatusName } from './PipelineStatus'
 import { useParams } from 'common'
-import { useReplicationPipelineStatusQuery } from 'data/replication/pipeline-status-query'
+import {
+  ReplicationPipelineStatusData,
+  useReplicationPipelineStatusQuery,
+} from 'data/replication/pipeline-status-query'
 import { useState } from 'react'
 import { toast } from 'sonner'
 import { useStartPipelineMutation } from 'data/replication/start-pipeline-mutation'
@@ -65,10 +68,22 @@ const DestinationRow = ({
   const { mutateAsync: startPipeline } = useStartPipelineMutation()
   const { mutateAsync: stopPipeline } = useStopPipelineMutation()
   const pipelineStatus = pipelineStatusData?.status
+  const getStatusName = (
+    status: ReplicationPipelineStatusData['status'] | undefined
+  ): string | undefined => {
+    if (status && typeof status === 'object' && 'name' in status) {
+      return status.name
+    }
+
+    return undefined
+  }
+
+  const statusName = getStatusName(pipelineStatus)
   if (
     (requestStatus === PipelineStatusRequestStatus.EnableRequested &&
-      pipelineStatus === 'Started') ||
-    (requestStatus === PipelineStatusRequestStatus.DisableRequested && pipelineStatus === 'Stopped')
+      (statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED)) ||
+    (requestStatus === PipelineStatusRequestStatus.DisableRequested &&
+      (statusName === PipelineStatusName.STOPPED || statusName === PipelineStatusName.FAILED))
   ) {
     setRequestStatus(PipelineStatusRequestStatus.None)
   }
@@ -190,7 +205,7 @@ const DestinationRow = ({
           sourceId,
           destinationId: destinationId,
           pipelineId: pipeline?.id,
-          enabled: pipelineStatusData?.status === 'Started',
+          enabled: statusName === PipelineStatusName.STARTED,
         }}
       />
     </>