Variable Set Settings

The Variable Set Settings panel configures a "Set Variable" node.

This node allows users to define or modify variables within different scopes: the temporary flowContext (for the current execution) or persistently in the selectedEnvironment.

This node is fundamental for managing state, passing data between non-adjacent nodes, or storing configuration values that can be used throughout the flow or across multiple flow runs if saved to an environment.

Features

  • Node Label Configuration: Allows users to set a custom label for the Set Variable node.
  • / Variable Target Selection: Users can choose where to save the variable:
    • Flow Context (Temporary): Variable exists only for the duration of the current flow execution. Represented with a icon.
    • Selected Environment (Persistent): Variable is saved in the currently active environment and persists across flow runs. Represented with a icon.
  • Variable Name Input: Field to specify the name of the variable.
  • Variable Value Input: A textarea to set the value of the variable. This can be a static value or include references (e.g., {{env.API_KEY}}, {{context.anotherVar}}) that will be resolved before setting.
  • Mark as Secret: If the target is selectedEnvironment, an option (checkbox) appears to store the variable value as a secret (encrypted).
  • Theming: Adapts its appearance based on the current theme (dark/light).
  • Helper Texts: Provides contextual help for variable naming and target implications (e.g., "Access using {{context.variableName}}.").

Component Structure

The component relies on the following key parts:

  1. VariableSetNodeData Interface: Defines the data object for the node:
    • label?: string
    • variableName?: string
    • variableValue?: string
    • target?: 'flowContext' | 'selectedEnvironment'
    • markAsSecret?: boolean
  2. State and Hooks:
    • useFlowStore: To get updateNodeData.
    • useTheme: For theme-based styling.
    • useState for label, variableName, variableValue, target, and markAsSecret.
    • useEffect: To synchronize local state with node.data when it changes or on mount.

Configuration Sections

The panel is organized into the following sections for user interaction:

  • Node Label: Text input for the node label. Saves on blur.
  • Save Variable To (Target): A Select component to choose between "Flow Context" and "Selected Environment".
    • Changing the target to flowContext automatically unchecks and disables markAsSecret.
  • Variable Name: Text input for the variable's name. Saves on blur.
  • Value to Set: A Textarea for the variable's value. Saves on blur.
  • Mark as Secret: A Checkbox that is only visible if target is selectedEnvironment. Allows marking the environment variable as encrypted.

Styling

  • Uses cn utility for conditional class names.
  • Inputs, Textarea, Select, and Checkbox components are styled for dark/light themes using cartoonBorder, cartoonSection, cartoonLabel, cartoonHelp which apply theme-specific background, border, and text colors.
  • shadow-cartoon is used for a consistent shadow style.
  • Select items use icons ( ) for visual distinction.

Key Functionalities and Logic

  • State Synchronization: useEffect keeps the panel's local state in sync with the node.data from the store.
  • Data Persistence: Input field changes are typically saved on onBlur events by calling updateNodeData if the value has actually changed.
    • handleLabelBlur, handleNameBlur, handleValueBlur.
  • Target Change Logic (handleTargetChange): When the target is changed:
    • Updates the target in the node data.
    • If the new target is flowContext, it automatically sets markAsSecret to false and updates this in the node data, as secrets are only applicable to environment variables.
  • Mark as Secret Logic (handleMarkAsSecretChange): Updates the markAsSecret boolean in the node data.
  • Input Interaction: onMouseDown=e => e.stopPropagation() on inputs/textarea prevents node dragging.

Props

Prop NameTypeDescription
nodeNode<VariableSetNodeData>The React Flow node object (required).
Variable Usage
  • Flow Context Variables: Useful for temporary data storage within a single execution. Accessed like {{context.yourVariableName}} in other nodes.
  • Environment Variables: Ideal for storing API keys, configuration settings, or any data that needs to persist and be available across different flows or flow runs within that environment. Accessed like {{env.yourVariableName}}.
Security for Secrets

When markAsSecret is checked for an environment variable, the value should be encrypted at rest by the backend. The UI itself only flags it; actual encryption is a backend responsibility.

This panel provides a comprehensive interface for managing variables, which are essential for creating dynamic and configurable data flows.

Loading search features...