Implementation:TobikoData Sqlmesh Plan Context

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

Overview

Concrete tool for managing plan-related state across the SQLMesh web client.

Description

PlanProvider is a React context provider that manages centralized state for the plan workflow. It uses useReducer with a comprehensive reducer function to handle plan options (skip_tests, no_gaps, skip_backfill, forward_only, auto_apply, etc.), backfill date ranges, change categorization (Breaking, Non-Breaking, Forward-Only), test report data, and initial plan run detection. The context exposes category definitions with descriptions and values, change categorization mapping for tracking user-selected categories per model, and dispatch actions for updating plan state. It provides reset actions for clearing options, dates, and categories between plan runs.

Usage

Wrap the plan view components with PlanProvider to enable shared plan state management. Access the context using usePlan and usePlanDispatch hooks in child components.

Code Reference

Source Location

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

Signature

export default function PlanProvider({
  children,
}: {
  children: ReactNode
}): JSX.Element

export function usePlan(): PlanDetails

export function usePlanDispatch(): Dispatch<PlanAction | PlanAction[]>

// Action types
export const EnumPlanActions = {
  ResetPlanOptions: 'reset-plan-options',
  ResetPlanDates: 'reset-plan-dates',
  ResetCategories: 'reset-categories',
  PlanOptions: 'plan-options',
  Dates: 'dates',
  DateStart: 'date-start',
  DateEnd: 'date-end',
  Category: 'category',
  External: 'external',
  ResetTestsReport: 'reset-tests-report',
  TestsReportErrors: 'tests-report-errors',
  TestsReportMessages: 'tests-report-messages',
} as const

Import

import PlanProvider, { usePlan, usePlanDispatch, EnumPlanActions } from '@components/plan/context'

I/O Contract

Inputs

Name	Type	Required	Description
children	ReactNode	Yes	Child components that consume plan context

Outputs

Name	Type	Description
JSX.Element	React component	Provider wrapping children with plan context
PlanDetails	Context value	Plan state accessed via usePlan hook
Dispatch	Dispatcher	Action dispatcher via usePlanDispatch hook

Usage Examples

// Provider setup
<PlanProvider>
  <PlanOptions />
  <PlanApplyStageTracker />
  <PlanActions />
</PlanProvider>

// Consuming context in child component
function PlanConfigComponent() {
  const dispatch = usePlanDispatch()
  const {
    skip_tests,
    no_gaps,
    forward_only,
    categories,
    change_categorization,
  } = usePlan()

  // Update plan options
  dispatch({
    type: EnumPlanActions.PlanOptions,
    skip_tests: true,
    no_gaps: false,
    forward_only: true,
  })

  // Set date range
  dispatch({
    type: EnumPlanActions.Dates,
    start: '2024-01-01',
    end: '2024-12-31',
  })

  // Categorize a change
  dispatch({
    type: EnumPlanActions.Category,
    category: categories.find(c => c.id === 'non-breaking'),
    change: modifiedModel,
  })

  // Reset for new plan
  dispatch([
    { type: EnumPlanActions.ResetPlanOptions },
    { type: EnumPlanActions.ResetPlanDates },
    { type: EnumPlanActions.ResetCategories },
  ])

  return <div>Plan Config</div>
}

// Available categories:
// - Breaking Change (rebuilds all models)
// - Non-Breaking Change (excludes indirect models)
// - Forward-Only Change (no rebuilding required)

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment