supabase/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx

import { useParams } from 'common'
import {
  ArrowUpCircleIcon,
  CircleStopIcon,
  EditIcon,
  EyeIcon,
  MoreVerticalIcon,
  PlayIcon,
  RotateCcwIcon,
  TrashIcon,
} from 'lucide-react'
import Link from 'next/link'
import { parseAsInteger, useQueryState } from 'nuqs'
import { toast } from 'sonner'
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  WarningIcon,
} from 'ui'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'

import { getStatusName } from './Pipeline.utils'
import { PipelineStatusName } from './Replication.constants'
import { ReplicationPipelineStatusData } from '@/data/replication/pipeline-status-query'
import { Pipeline } from '@/data/replication/pipelines-query'
import { useRestartPipelineMutation } from '@/data/replication/restart-pipeline-mutation'
import { useStartPipelineMutation } from '@/data/replication/start-pipeline-mutation'
import { useStopPipelineMutation } from '@/data/replication/stop-pipeline-mutation'
import {
  PipelineStatusRequestStatus,
  usePipelineRequestStatus,
} from '@/state/replication-pipeline-request-status'
import type { ResponseError } from '@/types'

interface RowMenuProps {
  destinationId: number
  pipeline: Pipeline | undefined
  pipelineStatus?: ReplicationPipelineStatusData['status']
  error: ResponseError | null
  isLoading: boolean
  isError: boolean
  hasUpdate?: boolean
  onDeleteClick: () => void
  onUpdateClick?: () => void
}

export const RowMenu = ({
  destinationId,
  pipeline,
  pipelineStatus,
  error,
  isLoading,
  isError,
  hasUpdate = false,
  onDeleteClick,
  onUpdateClick,
}: RowMenuProps) => {
  const { ref: projectRef } = useParams()
  const statusName = getStatusName(pipelineStatus)

  const [, setEdit] = useQueryState(
    'edit',
    parseAsInteger.withOptions({ history: 'push', clearOnDefault: true })
  )

  const { mutateAsync: startPipeline } = useStartPipelineMutation({ onError: () => {} })
  const { mutateAsync: stopPipeline } = useStopPipelineMutation({ onError: () => {} })
  const { mutateAsync: restartPipeline } = useRestartPipelineMutation()
  const { getRequestStatus, isRequestPending, runWithRequestStatus } = usePipelineRequestStatus()
  const requestStatus = pipeline?.id
    ? getRequestStatus(pipeline.id)
    : PipelineStatusRequestStatus.None

  const isPipelineRequestPending = !!pipeline && isRequestPending(pipeline.id)

  // Show actions when not in a transitional state
  const canPerformActions =
    !isError &&
    !!pipeline &&
    !isPipelineRequestPending &&
    requestStatus === PipelineStatusRequestStatus.None &&
    statusName !== PipelineStatusName.STARTING &&
    [PipelineStatusName.STOPPED, PipelineStatusName.STARTED, PipelineStatusName.FAILED].includes(
      statusName as PipelineStatusName
    )

  // Show both stop and restart for started/failed states
  const showStopAndRestart =
    canPerformActions &&
    (statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED)

  // Show only start for stopped state
  const showStart = canPerformActions && statusName === PipelineStatusName.STOPPED

  const onEnablePipeline = async () => {
    if (!projectRef) return console.error('Project ref is required')
    if (!pipeline) return toast.error('No pipeline found')

    try {
      await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StartRequested, () =>
        startPipeline({ projectRef, pipelineId: pipeline.id })
      )
    } catch (error) {
      toast.error(`Failed to start pipeline: ${(error as ResponseError).message}`)
    }
  }

  const onDisablePipeline = async () => {
    if (!projectRef) return console.error('Project ref is required')
    if (!pipeline) return toast.error('No pipeline found')

    try {
      await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, () =>
        stopPipeline({ projectRef, pipelineId: pipeline.id })
      )
    } catch (error) {
      toast.error(`Failed to stop pipeline: ${(error as ResponseError).message}`)
    }
  }

  const onRestartPipeline = async () => {
    if (!projectRef) return console.error('Project ref is required')
    if (!pipeline) return toast.error('No pipeline found')

    try {
      await runWithRequestStatus(pipeline.id, PipelineStatusRequestStatus.StopRequested, () =>
        restartPipeline({ projectRef, pipelineId: pipeline.id })
      )
    } catch (error) {
      toast.error(`Failed to restart pipeline: ${(error as ResponseError).message}`)
    }
  }

  return (
    <div className="flex justify-end items-center space-x-2">
      {isLoading && <ShimmeringLoader />}

      {isError && (
        <Tooltip>
          <TooltipTrigger asChild>
            <span className="flex items-center" tabIndex={0}>
              <WarningIcon />
            </span>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="max-w-xs">
            Couldn't load status{error?.message ? `: ${error.message}` : '.'}
          </TooltipContent>
        </Tooltip>
      )}

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <div className="relative">
            <Button
              variant="default"
              className="w-6.5 hit-area-1"
              aria-label={hasUpdate ? 'Pipeline options, update available' : 'Pipeline options'}
              icon={<MoreVerticalIcon />}
            />
            {hasUpdate && (
              <span
                className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-primary-bright"
                aria-hidden
              />
            )}
          </div>
        </DropdownMenuTrigger>

        <DropdownMenuContent side="bottom" align="end" className="w-44">
          <DropdownMenuItem className="space-x-2" asChild disabled={!pipeline}>
            <Link href={`/project/${projectRef}/database/pipelines/${pipeline?.id}`}>
              <EyeIcon size={14} />
              <p>View details</p>
            </Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          {hasUpdate && (
            <>
              <DropdownMenuItem
                className="gap-x-2"
                onClick={() => onUpdateClick?.()}
                disabled={isPipelineRequestPending}
              >
                <ArrowUpCircleIcon size={14} />
                <p>Update available</p>
                <span
                  className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary-bright"
                  aria-hidden
                />
              </DropdownMenuItem>
              <DropdownMenuSeparator />
            </>
          )}
          {showStart && (
            <>
              <DropdownMenuItem className="space-x-2" onClick={onEnablePipeline}>
                <PlayIcon size={14} />
                <p>Start pipeline</p>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
            </>
          )}
          {showStopAndRestart && (
            <>
              <DropdownMenuItem className="space-x-2" onClick={onRestartPipeline}>
                <RotateCcwIcon size={14} />
                <p>Restart pipeline</p>
              </DropdownMenuItem>
              <DropdownMenuItem className="space-x-2" onClick={onDisablePipeline}>
                <CircleStopIcon size={14} />
                <p>Stop pipeline</p>
              </DropdownMenuItem>
              <DropdownMenuSeparator />
            </>
          )}

          <DropdownMenuItem
            className="space-x-2"
            onClick={() => setEdit(destinationId)}
            disabled={isPipelineRequestPending}
          >
            <EditIcon size={14} />
            <p>Edit pipeline</p>
          </DropdownMenuItem>
          <DropdownMenuItem
            className="space-x-2"
            onClick={onDeleteClick}
            disabled={isPipelineRequestPending}
          >
            <TrashIcon size={14} />
            <p>Delete pipeline</p>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}