Implementation:ArroyoSystems Arroyo Udf Edit Tab
| Knowledge Sources | |
|---|---|
| Domains | WebUI, React, UDFs |
| Last Updated | 2026-02-08 08:00 GMT |
Overview
A tab header component for UDF editor tabs that shows the UDF label with a close button and a hover popover with Globalize and Delete actions.
Description
UdfEditTab renders a Chakra UI Tab element for a UDF within the pipeline editor tab bar. The tab displays a UdfLabel (showing the UDF name with a language icon) and a close button that calls closeUdf.
On hover, a Popover appears showing:
- The UDF type title ("Local UDF" or "Global UDF").
- A Globalize button (only for local UDFs) that first validates the UDF via
POST /v1/udfs/validate, updates the UDF's error state, then opens the GlobalizeModal. - A Delete button that opens the DeleteUdfModal.
Usage
Rendered in the tab bar of PipelineEditorTabs for each opened UDF.
Code Reference
Source Location
- Repository: ArroyoSystems_Arroyo
- File: webui/src/routes/udfs/UdfEditTab.tsx
Signature
export interface UdfEditTabProps {
udf: LocalUdf | GlobalUdf;
}
const UdfEditTab: React.FC<UdfEditTabProps>;
export default UdfEditTab;
Import
import UdfEditTab from './UdfEditTab';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| udf | LocalUdf or GlobalUdf | Yes | The UDF to display in the tab |
Outputs
| Name | Type | Description |
|---|---|---|
| Tab element | React element | Tab with label, close button, and hover popover with actions |
Usage Examples
<UdfEditTab udf={openedUdf} />
Related Pages
Page Connections
Double-click a node to navigate. Hold to expand connections.
Principle
Implementation
Heuristic
Environment