TableReplicationRow() — supabase Function Reference

Architecture documentation for the TableReplicationRow() function in TableReplicationRow.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ TableReplicationRow() — supabase Function Reference

Dependency Diagram

graph TD
  3b82b542_e027_33d2_7500_1e4cb33bedc2["TableReplicationRow()"]
  35392bf7_535e_dcb0_56ee_9ec66e698b86["getStatusConfig()"]
  3b82b542_e027_33d2_7500_1e4cb33bedc2 -->|calls| 35392bf7_535e_dcb0_56ee_9ec66e698b86
  style 3b82b542_e027_33d2_7500_1e4cb33bedc2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx lines 22–113

export const TableReplicationRow = ({
  table,
  config,
  isRestarting,
  showDisabledState,
  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 className={cn(isRestarting && 'text-foreground-light')}>{table.table_name}</p>

          <ButtonTooltip
            asChild
            type="text"
            className="px-1.5"
            icon={<ExternalLink />}
            tooltip={{
              content: { side: 'bottom', text: 'Open in Table Editor' },
            }}
          >
            <Link
              target="_blank"
              rel="noopener noreferrer"
              href={`/project/${ref}/editor/${table.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">
            Status unavailable while pipeline is {config.badge.toLowerCase()}
          </p>
        ) : (
          <div className="flex flex-col gap-y-3">
            <div className="text-sm text-foreground">
              {statusConfig.description}{' '}
              {isErrorState && 'reason' in table.state && (
                <button 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
                type="default"
                className="w-7"
                icon={<RotateCcw />}
                disabled={showDisabledState || isRestarting}
                aria-label={`Restart replication for ${table.table_name}`}
                onClick={onSelectRestart}
              />
            </TooltipTrigger>
            <TooltipContent side="bottom" align="center">
              Restart table replication
            </TooltipContent>
          </Tooltip>
        </div>
      </TableCell>
    </TableRow>
  )
}