getDisabledStateConfig() — supabase Function Reference

Architecture documentation for the getDisabledStateConfig() function in ReplicationPipelineStatus.utils.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1 called by 1

Entity Profile

ContentManagement→ Migrations→ getDisabledStateConfig() — supabase Function Reference

Dependency Diagram

graph TD
  1994ee79_4fde_f99c_13f5_73d3bcef8add["getDisabledStateConfig()"]
  048ba42d_590b_bb7a_97bd_9cd20e6efb0c["ReplicationPipelineStatus()"]
  048ba42d_590b_bb7a_97bd_9cd20e6efb0c -->|calls| 1994ee79_4fde_f99c_13f5_73d3bcef8add
  bcac0d34_eb3c_b34c_27f7_f9c664bd87a5["getPipelineStateMessages()"]
  1994ee79_4fde_f99c_13f5_73d3bcef8add -->|calls| bcac0d34_eb3c_b34c_27f7_f9c664bd87a5
  style 1994ee79_4fde_f99c_13f5_73d3bcef8add fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx lines 60–121

export const getDisabledStateConfig = ({
  requestStatus,
  statusName,
}: {
  requestStatus: PipelineStatusRequestStatus
  statusName?: ReplicationPipelineStatusData['status']['name']
}) => {
  const { title, message, badge } = getPipelineStateMessages(requestStatus, statusName)

  // Get icon and colors based on current state
  const isEnabling = requestStatus === PipelineStatusRequestStatus.StartRequested
  const isDisabling = requestStatus === PipelineStatusRequestStatus.StopRequested
  const isRestarting = requestStatus === PipelineStatusRequestStatus.RestartRequested
  const isTransitioning = isEnabling || isDisabling || isRestarting

  const icon = isTransitioning ? (
    <Loader2 className="w-6 h-6 animate-spin" />
  ) : statusName === 'failed' ? (
    <XCircle className="w-6 h-6" />
  ) : statusName === 'starting' ? (
    <Clock className="w-6 h-6" />
  ) : statusName === 'unknown' ? (
    <HelpCircle className="w-6 h-6" />
  ) : (
    <Activity className="w-6 h-6" />
  )

  const colors =
    isEnabling || isRestarting
      ? {
          bg: 'bg-brand-50',
          text: 'text-brand-900',
          subtext: 'text-brand-700',
          iconBg: 'bg-brand-600',
          icon: 'text-white dark:text-black',
        }
      : isDisabling || statusName === 'starting' || statusName === 'unknown'
        ? {
            bg: 'bg-warning-50',
            text: 'text-warning-900',
            subtext: 'text-warning-700',
            iconBg: 'bg-warning-600',
            icon: 'text-white dark:text-black',
          }
        : statusName === 'failed'
          ? {
              bg: 'bg-destructive-50',
              text: 'text-destructive-900',
              subtext: 'text-destructive-700',
              iconBg: 'bg-destructive-600',
              icon: 'text-white dark:text-black',
            }
          : {
              bg: 'bg-surface-100',
              text: 'text-foreground',
              subtext: 'text-foreground-light',
              iconBg: 'bg-foreground-lighter',
              icon: 'text-white dark:text-black',
            }

  return { title, message, badge, icon, colors }
}