Implementation:Microsoft Autogen Studio Environment Settings

Sources	https://github.com/microsoft/autogen/blob/main/python/packages/autogen-studio/frontend/src/components/views/settings/view/environment.tsx
Domains	React Component, Settings Management, Editable Tables, Environment Variables
Last Updated	2026-02-11

Overview

The EnvironmentVariablesPanel component provides an editable table interface for managing environment variables in AutoGen Studio with inline editing, add/delete operations, and validation.

Description

The EnvironmentVariablesPanel is a sophisticated React component that implements a fully editable table for managing environment variables. It uses Ant Design's Table component with custom editable cells to provide a spreadsheet-like experience.

Key architectural features:

Editable table pattern: Uses React Context (EditableContext) to coordinate form state between rows and cells
Inline editing: Click-to-edit cells with automatic focus and save-on-blur behavior
Type support: Environment variables can be typed as string, number, boolean, or secret
Password masking: Secret/value fields display as "••••••••" when not editing
Dirty state tracking: Visual indicator (red dot) shows when unsaved changes exist
Auto-validation: Required field validation on the "name" column
Optimistic UI updates: Local state changes before server persistence

The component follows the editable table pattern from Ant Design with three custom components:

EditableRow: Wraps table rows with a Form instance
EditableCell: Individual cells that switch between view and edit modes
EnvironmentVariablesPanel: Main container coordinating state and API calls

Data flow: Server settings → Local table state → User edits → Dirty flag → Manual save → API call → Server refresh → Local state update

Usage

The component is typically rendered within a settings page tab. It requires:

serverSettings: The current Settings object from the server
userId: The authenticated user's ID for API calls
initializeSettings: Callback to refresh settings from server after save

Users can click any name/value cell to edit inline, add new variables with the "Add" button, delete variables, and save all changes with the "Save" button.

Code Reference

Source Location: python/packages/autogen-studio/frontend/src/components/views/settings/view/environment.tsx

Signature:

interface EnvironmentVariablesPanelProps {
  serverSettings: SettingsType | null;
  loading: boolean;
  userId: string;
  initializeSettings: (userId: string) => Promise<void>;
}

export const EnvironmentVariablesPanel: React.FC<EnvironmentVariablesPanelProps> = ({
  serverSettings,
  loading,
  userId,
  initializeSettings,
}) => {
  const [dataSource, setDataSource] = useState<EnvVariableItem[]>([]);
  const [isDirty, setIsDirty] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();

  // ... implementation

  return (
    <Card className="shadow-sm">
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-lg font-medium">Environment Variables</h3>
        <div className="space-x-2 inline-flex">
          <Button icon={<Plus />} onClick={handleAdd}>Add</Button>
          <Button
            type="primary"
            icon={<Save />}
            onClick={handleSave}
            disabled={!isDirty}
          >
            Save
          </Button>
        </div>
      </div>
      <Table
        components={components}
        dataSource={dataSource}
        columns={mergedColumns}
        pagination={false}
        loading={loading}
      />
    </Card>
  );
};

Import:

import { EnvironmentVariablesPanel } from "./components/views/settings/view/environment";

I/O Contract

Props

Name	Type	Required	Description
serverSettings	null	Yes	Current settings object from server containing environment variables
loading	boolean	Yes	Loading state passed to table component
userId	string	Yes	Authenticated user ID for API operations
initializeSettings	(userId: string) => Promise<void>	Yes	Callback to refresh settings from server after save

Outputs

Type	Description
JSX.Element	Renders an Ant Design Card containing the editable environment variables table with action buttons

Internal Types

interface EnvVariableItem {
  key: string;           // Unique identifier for React list rendering
  name: string;          // Variable name (e.g., "OPENAI_API_KEY")
  value: string;         // Variable value (masked if type is secret)
  type: EnvironmentVariableType; // "string" | "number" | "boolean" | "secret"
}

interface EditableRowProps {
  index: number;
}

interface EditableCellProps {
  title: React.ReactNode;
  editable: boolean;
  children: React.ReactNode;
  dataIndex: keyof EnvVariableItem;
  record: EnvVariableItem;
  handleSave: (record: EnvVariableItem) => void;
  inputType: "text" | "password" | "select";
  options?: { value: string; label: string }[];
}

State Management

State Variable	Type	Description
dataSource	EnvVariableItem[]	Local copy of environment variables for table rendering
isDirty	boolean	Tracks whether unsaved changes exist
messageApi	MessageInstance	Ant Design message API for toast notifications

API Interactions

Method	When Called	Description
settingsAPI.updateSettings(settings, userId)	handleSave()	Persists all environment variables to server

Usage Examples

Example 1: Basic Integration

import { EnvironmentVariablesPanel } from "./components/views/settings/view/environment";
import { useSettingsStore } from "./store";

function SettingsPage() {
  const { serverSettings, loading, initializeSettings } = useSettingsStore();
  const user = useContext(appContext);

  return (
    <EnvironmentVariablesPanel
      serverSettings={serverSettings}
      loading={loading}
      userId={user.id}
      initializeSettings={initializeSettings}
    />
  );
}

Example 2: Adding a New Environment Variable

// User clicks "Add" button
// Triggers: handleAdd()

const newVariable: EnvVariableItem = {
  key: `${dataSource.length + 1}`,
  name: "",                    // Empty - user must fill
  value: "",                   // Empty - user must fill
  type: "string",              // Default type
};

setDataSource([...dataSource, newVariable]);
setIsDirty(true);

// New row appears in table
// User clicks name cell to edit
// User enters "OPENAI_API_KEY"
// User clicks value cell to edit
// User enters API key
// User clicks "Save" button

Example 3: Inline Editing Flow

// EditableCell component handles the edit workflow:

// 1. User clicks cell
toggleEdit();  // Sets editing=true, focuses input

// 2. Cell switches to Form.Item with Input
<Form.Item name={dataIndex} rules={[{required: true}]}>
  <Input ref={inputRef} onPressEnter={save} onBlur={save} />
</Form.Item>

// 3. User types and presses Enter or clicks away
save();
const values = await form.validateFields();  // Validates required fields
toggleEdit();  // Exits edit mode
handleSave({ ...record, ...values });  // Updates parent state

// 4. Parent component updates dataSource
setDataSource(newData);
setIsDirty(true);  // Marks as having unsaved changes

Example 4: Password Field Masking

// For cells with inputType="password":

// View mode shows masked value:
{inputType === "password" ? "••••••••" : children}

// Edit mode shows password input with visibility toggle:
<Input.Password
  ref={inputRef}
  onPressEnter={save}
  onBlur={save}
  visibilityToggle  // User can click eye icon to show/hide
/>

Example 5: Saving to Server

// User clicks "Save" button with isDirty=true
// Triggers: handleSave()

// Transform table data to API format:
const environment: EnvironmentVariable[] = dataSource.map(item => ({
  name: item.name,
  value: item.value,
  type: item.type,
  required: false,  // All variables set as optional
}));

// Merge with existing settings:
const updatedSettings: SettingsType = {
  ...serverSettings,
  config: {
    ...serverSettings.config,
    environment,
  },
};

// Send to API:
await settingsAPI.updateSettings(sanitizedSettings, userId);

// Refresh from server to ensure sync:
await initializeSettings(userId);

// Reset dirty flag:
setIsDirty(false);
messageApi.success("Environment variables saved successfully");

Example 6: Deleting a Variable

// User clicks delete (trash) icon in Actions column
// Triggers: handleDelete(key)

const newDataSource = dataSource.filter(item => item.key !== key);
setDataSource(newDataSource);
setIsDirty(true);  // Marks for save

// Variable removed from table immediately
// User must click "Save" to persist deletion to server

Example 7: Type Support

// Environment variable types (currently hidden in UI but supported):
const ENVIRONMENT_VARIABLE_TYPES: EnvironmentVariableType[] = [
  "string",   // Plain text values
  "number",   // Numeric values
  "boolean",  // true/false values
  "secret",   // Sensitive data (masked in UI)
];

// Type column can be added to table:
{
  title: "Type",
  dataIndex: "type",
  editable: true,
  inputType: "select",
  options: typeOptions,
}

Related Pages

Studio_Settings_API - API client for persisting settings
Studio_Settings_Store - Zustand store for settings state management
Studio_UI_Settings - Companion settings panel for UI preferences
Types_Datamodel - TypeScript definitions for Settings and EnvironmentVariable types
Studio_Settings_View - Parent settings page that renders this panel

Page Connections

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

Principle

Implementation

Heuristic

Environment