From bb06c4c68994ed798dd90afe842e2408fb732930 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 22 Apr 2026 22:56:31 +0200
Subject: [PATCH] ui(deploy): extract VariablesTab component

Pure presentational tab receiving VariablesFormState via value/onChange.
Rows use the new .envVarsList / .envVarRow CSS grid (1fr 2fr auto).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../ConfigTabs/VariablesTab.tsx               | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/VariablesTab.tsx

diff --git a/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/VariablesTab.tsx b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/VariablesTab.tsx
new file mode 100644
index 00000000..b29884ad
--- /dev/null
+++ b/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/VariablesTab.tsx
@@ -0,0 +1,60 @@
+import { Button, Input } from '@cameleer/design-system';
+import type { VariablesFormState } from '../hooks/useDeploymentPageState';
+import styles from '../AppDeploymentPage.module.css';
+
+interface Props {
+  value: VariablesFormState;
+  onChange: (next: VariablesFormState) => void;
+  disabled?: boolean;
+}
+
+export function VariablesTab({ value, onChange, disabled }: Props) {
+  function updateRow(index: number, field: 'key' | 'value', v: string) {
+    const next = value.envVars.map((row, i) => (i === index ? { ...row, [field]: v } : row));
+    onChange({ envVars: next });
+  }
+
+  function removeRow(index: number) {
+    onChange({ envVars: value.envVars.filter((_, i) => i !== index) });
+  }
+
+  function addRow() {
+    onChange({ envVars: [...value.envVars, { key: '', value: '' }] });
+  }
+
+  return (
+    <div>
+      <div className={styles.envVarsList}>
+        {value.envVars.map((row, i) => (
+          <div key={i} className={styles.envVarRow}>
+            <Input
+              disabled={disabled}
+              value={row.key}
+              onChange={(e) => updateRow(i, 'key', e.target.value)}
+              placeholder="KEY"
+            />
+            <Input
+              disabled={disabled}
+              value={row.value}
+              onChange={(e) => updateRow(i, 'value', e.target.value)}
+              placeholder="value"
+            />
+            <Button
+              size="sm"
+              variant="ghost"
+              disabled={disabled}
+              onClick={() => removeRow(i)}
+            >
+              &times;
+            </Button>
+          </div>
+        ))}
+      </div>
+      <div style={{ marginTop: 10 }}>
+        <Button size="sm" variant="secondary" disabled={disabled} onClick={addRow}>
+          + Add Variable
+        </Button>
+      </div>
+    </div>
+  );
+}