Implementation:TobikoData Sqlmesh PlanActions

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Plan_Management, User_Interaction
Last Updated	2026-02-07 20:00 GMT

Overview

PlanActions renders the action button bar for SQLMesh plan operations, providing contextual controls for running, applying, cancelling, and resetting plans with production environment safeguards.

Description

The PlanActions component implements the primary action interface for plan/apply workflows with sophisticated state-aware button visibility and confirmation dialogs. When applying to production environments, it displays warning confirmations with options to select existing environments or create new ones instead, implementing a safety-first approach to production deployments. The component shows contextual warnings when changes lack categorization, prompting users to confirm before applying breaking changes. Buttons dynamically appear/disappear with smooth transitions based on plan state (running, applying, cancelling, completed, failed). The component uses ModelPlanAction utilities to display appropriate button labels that reflect current operation status and integrates with navigation history to provide a "Go Back" option when enabled.

Usage

Use PlanActions as the footer action bar in plan workflow interfaces. It provides the primary interaction points for executing plan operations with appropriate safety checks and user confirmations.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/plan/PlanActions.tsx

Signature

export default function PlanActions({
  run,
  apply,
  cancel,
  reset,
}: {
  apply: () => void
  run: () => void
  cancel: () => void
  reset: () => void
}): JSX.Element

Import

import PlanActions from '@library/components/plan/PlanActions'

I/O Contract

Inputs

Name	Type	Required	Description
run	Function	Yes	Callback to execute plan run (preview changes)
apply	Function	Yes	Callback to execute plan apply (commit changes)
cancel	Function	Yes	Callback to cancel in-progress operation
reset	Function	Yes	Callback to reset plan to initial state

Outputs

Name	Type	Description
JSX.Element	React component	Action button bar with contextual controls and transitions

Usage Examples

import PlanActions from '@library/components/plan/PlanActions'

function PlanWorkflow() {
  const handleRun = () => {
    console.log('Running plan...')
  }

  const handleApply = () => {
    console.log('Applying plan...')
  }

  const handleCancel = () => {
    console.log('Cancelling...')
  }

  const handleReset = () => {
    console.log('Resetting plan...')
  }

  return (
    <div className="plan-container">
      {/* Plan content */}
      <PlanActions
        run={handleRun}
        apply={handleApply}
        cancel={handleCancel}
        reset={handleReset}
      />
    </div>
  )
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment