Implementation:ArroyoSystems Arroyo Pipeline Editor Tabs

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, React, Pipelines, CodeEditor
Last Updated	2026-02-08 08:00 GMT

Overview

A tabbed editor interface combining a SQL query editor with UDF editor tabs and action buttons for checking, previewing, stopping, and launching pipelines.

Description

PipelineEditorTabs manages the code editing area of the pipeline creation page. It renders a Chakra UI Tabs component in a column layout with:

Tab bar -- A scrollable horizontal list containing a fixed "Query" tab (with SQL file icon) followed by dynamically opened UDF tabs (rendered by UdfEditTab). The tab bar also includes an action button strip with:

Check -- Validates the SQL query without running
Preview -- Starts a preview pipeline (with hover popover for preview options like "Enable sinks"); shows a Stop button when previewing
Launch -- Opens the start pipeline modal
Example Queries -- Icon button that opens an ExampleQueries drawer

Tab panels -- The Query tab renders a CodeEditor (Monaco-based SQL editor). Each UDF tab renders a UdfEditor with an optional "Global UDFs cannot be edited" banner for global UDFs.

The component integrates with the TourContext for guided onboarding (ExampleQueriesButton, Preview tour steps) and the LocalUdfsContext for managing open UDF tabs.

Usage

Used exclusively within the CreatePipeline page as the top panel of the resizable layout.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/pipelines/PipelineEditorTabs.tsx

Signature

export interface PipelineEditorTabsProps {
  queryInput: string;
  previewing: boolean | undefined;
  startingPreview: boolean;
  preview: () => void;
  stopPreview: () => void;
  run: () => void;
  pipelineIsValid: (tab: number) => void;
  updateQuery: (s: string) => void;
  previewOptions: PreviewOptions;
  setPreviewOptions: Dispatch<PreviewOptions>;
  job?: Job;
}

const PipelineEditorTabs: React.FC<PipelineEditorTabsProps>;
export default PipelineEditorTabs;

Import

import PipelineEditorTabs from './PipelineEditorTabs';

I/O Contract

Inputs

Name	Type	Required	Description
queryInput	string	Yes	Current SQL query text
previewing	boolean or undefined	Yes	Whether a preview pipeline is currently running
startingPreview	boolean	Yes	Whether a preview is being started (loading state)
preview	() => void	Yes	Callback to start a preview
stopPreview	() => void	Yes	Callback to stop the current preview
run	() => void	Yes	Callback to open the launch pipeline modal
pipelineIsValid	(tab: number) => void	Yes	Callback to validate the pipeline and switch to result tab
updateQuery	(s: string) => void	Yes	Callback to update the SQL query text
previewOptions	PreviewOptions	Yes	Preview configuration (enableSinks)
setPreviewOptions	Dispatch<PreviewOptions>	Yes	Callback to update preview options
job	Job	No	Current preview job state

Outputs

Name	Type	Description
Editor UI	React element	Tabbed code editor with SQL and UDF tabs plus action buttons

Usage Examples

<PipelineEditorTabs
  queryInput={queryInput}
  previewing={previewing}
  startingPreview={startingPreview}
  preview={preview}
  stopPreview={stopPreview}
  run={run}
  pipelineIsValid={pipelineIsValid}
  updateQuery={updateQuery}
  previewOptions={previewOptions}
  setPreviewOptions={setPreviewOptions}
  job={job}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment