supabase/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx

import { useParams } from 'common'
import { ExternalLink, RotateCcw } from 'lucide-react'
import Link from 'next/link'
import { Badge, Button, TableCell, TableRow, Tooltip, TooltipContent, TooltipTrigger } from 'ui'

import { ErroredTableDetails } from '../ErroredTableDetails'
import { TableState } from './ReplicationPipelineStatus.types'
import { getStatusConfig } from './ReplicationPipelineStatus.utils'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { InlineLinkClassName } from '@/components/ui/InlineLink'
import { ReplicationPipelineTableStatus } from '@/data/replication/pipeline-replication-status-query'

interface TableReplicationRowProps {
  table: ReplicationPipelineTableStatus
  isRestarting: boolean
  showDisabledState: boolean
  disabledStateMessage: string
  isAnyRestartInProgress: boolean
  isPipelineStopped: boolean
  onSelectRestart: () => void
  onSelectShowError: () => void
}

export const TableReplicationRow = ({
  table,
  isRestarting,
  showDisabledState,
  disabledStateMessage,
  isAnyRestartInProgress,
  isPipelineStopped,
  onSelectRestart,
  onSelectShowError,
}: TableReplicationRowProps) => {
  const { ref } = useParams()
  const isErrorState = table.state.name === 'error'
  const statusConfig = getStatusConfig(table.state as TableState['state'])

  return (
    <TableRow>
      <TableCell className="align-top">
        <div className="flex items-center gap-x-2">
          <p>
            {table.schema}.{table.name}
          </p>

          <ButtonTooltip
            asChild
            variant="text"
            className="px-1.5"
            icon={<ExternalLink />}
            tooltip={{
              content: { side: 'bottom', text: 'Table Editor' },
            }}
          >
            <Link
              target="_blank"
              rel="noopener noreferrer"
              href={`/project/${ref}/editor/${table.id}`}
            />
          </ButtonTooltip>
        </div>
      </TableCell>

      <TableCell className="align-top">
        {isRestarting ? (
          <Badge variant="default">Restarting</Badge>
        ) : showDisabledState ? (
          <Badge variant="default">Not Available</Badge>
        ) : (
          statusConfig.badge
        )}
      </TableCell>

      <TableCell className="align-top">
        {isRestarting ? (
          <p className="text-sm text-foreground-lighter">
            Replication is being restarted for this table. The pipeline will restart automatically.
          </p>
        ) : showDisabledState ? (
          <p className="text-sm text-foreground-lighter">{disabledStateMessage}</p>
        ) : (
          <div className="flex flex-col gap-y-3">
            <div className="text-sm text-foreground">
              {statusConfig.description}{' '}
              {isErrorState && 'reason' in table.state && (
                <button
                  tabIndex={0}
                  className={InlineLinkClassName}
                  onClick={() => onSelectShowError()}
                >
                  View error.
                </button>
              )}
            </div>
            {table.state.name === 'error' && <ErroredTableDetails table={table} />}
          </div>
        )}
      </TableCell>

      <TableCell className="align-top">
        <div className="flex items-center justify-end">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                className="w-7"
                icon={<RotateCcw />}
                disabled={showDisabledState || isRestarting || isAnyRestartInProgress}
                aria-label={`Restart replication for ${table.schema}.${table.name}`}
                onClick={onSelectRestart}
              />
            </TooltipTrigger>
            <TooltipContent side="bottom" align="center">
              {isPipelineStopped ? 'Reset table and start pipeline' : 'Reset and restart pipeline'}
            </TooltipContent>
          </Tooltip>
        </div>
      </TableCell>
    </TableRow>
  )
}