Implementation:ArroyoSystems Arroyo Globalize Modal

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

Overview

A modal dialog for promoting a local UDF to global scope, with optional folder prefix and description fields, validation error checking, and path normalization.

Description

GlobalizeModal allows users to share a local UDF globally across all pipelines. It provides:

Validation check -- If the UDF has validation errors, the modal shows an error alert instructing the user to fix errors first and only displays an "Ok" button.
Description input -- Optional textarea for adding a description to the global UDF.
Folder prefix input -- Optional path input with a leading / addon. The prefix is normalized: duplicate slashes are removed, and leading/trailing slashes are ensured (e.g., input folder1/folder2 becomes /folder1/folder2/).
Full path preview -- Shows the computed full path as {cleanPrefix}{udf.name}.
Share action -- Calls createGlobalUdf from useGlobalUdfs, then deleteLocalUdf to remove the local version on success.
Escape handling -- Stops key event propagation to prevent the editor tabs behind the modal from receiving keystrokes.

Usage

Opened from the UdfEditTab popover when clicking the "Globalize" button on a local UDF.

Code Reference

Source Location

Repository: ArroyoSystems_Arroyo
File: webui/src/routes/udfs/GlobalizeModal.tsx

Signature

export interface GlobalizeModalProps {
  isOpen: boolean;
  onClose: () => void;
  udf: LocalUdf;
}

const GlobalizeModal: React.FC<GlobalizeModalProps>;
export default GlobalizeModal;

Import

import GlobalizeModal from './GlobalizeModal';

I/O Contract

Inputs

Name	Type	Required	Description
isOpen	boolean	Yes	Controls modal visibility
onClose	() => void	Yes	Callback to close the modal
udf	LocalUdf	Yes	The local UDF to be globalized

Outputs

Name	Type	Description
API call	Side effect	Creates global UDF and deletes local copy

Usage Examples

<GlobalizeModal isOpen={isOpen} onClose={onClose} udf={localUdf} />

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment