@burdenoff/fluidgrids-fe-sdk 2026.1111.16 → 2026.1111.17

package/dist/VariablesPage-67WR_lVE.js

@@ -0,0 +1,949 @@
+"use client";
+import { t as __exportAll } from "./rolldown-runtime-hDbaFkMy.js";
+import { r as useTr } from "./TranslationBridge-Da-TPgQm.js";
+import { i as SdkPermissionButton, t as FLUIDGRIDS_PERMISSIONS } from "./constants-B2lhWNoN.js";
+import { _ as throwIfResultError, n as getFluidGridsClient } from "./client-C9XSzSXr.js";
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { gql } from "@apollo/client";
+import { Badge, Card, CardHeader, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger } from "@burdenoff/fe-libs/ui";
+import { Button as Button$1 } from "@burdenoff/fe-libs/button";
+
+// src/modules/variables/hooks/useVariables.ts
+/**
+* Custom hooks for workflow Variables + external secrets provider config
+* (BOFF-7517). Queries/mutates wspace-workflow-svc via the federated
+* GraphQL gateway — mirrors the connections module's hook pattern
+* (`modules/connections/hooks/useConnections.ts`).
+*/
+const VARIABLE_FIELDS = gql`
+  fragment WorkflowVariableFields on WorkflowVariable {
+    id
+    scope
+    workspaceId
+    projectId
+    key
+    description
+    isSecret
+    externalProvider
+    externalRef
+    value
+    createdAt
+    updatedAt
+    createdBy
+    updatedBy
+  }
+`;
+const GET_WORKFLOW_VARIABLES = gql`
+  ${VARIABLE_FIELDS}
+  query GetWorkflowVariables($scope: VariableScope, $projectId: ID) {
+    workflowVariables(scope: $scope, projectId: $projectId) {
+      variables {
+        ...WorkflowVariableFields
+      }
+      total
+    }
+  }
+`;
+const CREATE_WORKFLOW_VARIABLE = gql`
+  ${VARIABLE_FIELDS}
+  mutation CreateWorkflowVariable($input: CreateWorkflowVariableInput!) {
+    createWorkflowVariable(input: $input) {
+      success
+      message
+      variable {
+        ...WorkflowVariableFields
+      }
+    }
+  }
+`;
+const UPDATE_WORKFLOW_VARIABLE = gql`
+  ${VARIABLE_FIELDS}
+  mutation UpdateWorkflowVariable(
+    $id: ID!
+    $input: UpdateWorkflowVariableInput!
+  ) {
+    updateWorkflowVariable(id: $id, input: $input) {
+      success
+      message
+      variable {
+        ...WorkflowVariableFields
+      }
+    }
+  }
+`;
+const DELETE_WORKFLOW_VARIABLE = gql`
+  mutation DeleteWorkflowVariable($id: ID!) {
+    deleteWorkflowVariable(id: $id) {
+      success
+      message
+    }
+  }
+`;
+const REVEAL_WORKFLOW_VARIABLE_VALUE = gql`
+  mutation RevealWorkflowVariableValue($id: ID!) {
+    revealWorkflowVariableValue(id: $id) {
+      success
+      message
+      value
+    }
+  }
+`;
+const GET_SECRETS_PROVIDER_CONFIGS = gql`
+  query GetSecretsProviderConfigs {
+    secretsProviderConfigs {
+      id
+      workspaceId
+      provider
+      awsSecretsManagerPrefix
+      awsRegion
+      vaultAddress
+      vaultMountPath
+      azureKeyVaultUri
+      gcpProjectId
+      isEnabled
+      lastTestedAt
+      lastTestStatus
+      lastTestMessage
+      createdAt
+      updatedAt
+    }
+  }
+`;
+const SAVE_SECRETS_PROVIDER_CONFIG = gql`
+  mutation SaveSecretsProviderConfig($input: SaveSecretsProviderConfigInput!) {
+    saveSecretsProviderConfig(input: $input) {
+      success
+      message
+      config {
+        id
+        provider
+        awsSecretsManagerPrefix
+        awsRegion
+        isEnabled
+        lastTestedAt
+        lastTestStatus
+        lastTestMessage
+      }
+    }
+  }
+`;
+const TEST_SECRETS_PROVIDER_CONNECTION = gql`
+  mutation TestSecretsProviderConnection($provider: SecretProviderType!) {
+    testSecretsProviderConnection(provider: $provider) {
+      success
+      message
+    }
+  }
+`;
+function useVariables(filter) {
+	const [variables, setVariables] = useState([]);
+	const [total, setTotal] = useState(0);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const scope = filter?.scope;
+	const projectId = filter?.projectId;
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const result = await getFluidGridsClient().query({
+				query: GET_WORKFLOW_VARIABLES,
+				variables: {
+					scope,
+					projectId
+				},
+				fetchPolicy: "network-only"
+			});
+			setVariables(result.data?.workflowVariables?.variables ?? []);
+			setTotal(result.data?.workflowVariables?.total ?? 0);
+		} catch (err) {
+			setError(err);
+		} finally {
+			setLoading(false);
+		}
+	}, [scope, projectId]);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		variables,
+		total,
+		loading,
+		error,
+		refetch: fetchData
+	};
+}
+function useCreateVariable() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		createVariable: useCallback(async (input) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				const response = throwIfResultError(await client.mutate({
+					mutation: CREATE_WORKFLOW_VARIABLE,
+					variables: { input }
+				})).data?.createWorkflowVariable;
+				if (!response?.success) throw new Error(response?.message ?? "Failed to create variable");
+				return response.variable;
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+function useUpdateVariable() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		updateVariable: useCallback(async (id, input) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				const response = throwIfResultError(await client.mutate({
+					mutation: UPDATE_WORKFLOW_VARIABLE,
+					variables: {
+						id,
+						input
+					}
+				})).data?.updateWorkflowVariable;
+				if (!response?.success) throw new Error(response?.message ?? "Failed to update variable");
+				return response.variable;
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+function useDeleteVariable() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		deleteVariable: useCallback(async (id) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				const response = throwIfResultError(await client.mutate({
+					mutation: DELETE_WORKFLOW_VARIABLE,
+					variables: { id }
+				})).data?.deleteWorkflowVariable;
+				if (!response?.success) throw new Error(response?.message ?? "Failed to delete variable");
+				return true;
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+function useRevealVariableValue() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		revealValue: useCallback(async (id) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				const response = throwIfResultError(await client.mutate({
+					mutation: REVEAL_WORKFLOW_VARIABLE_VALUE,
+					variables: { id }
+				})).data?.revealWorkflowVariableValue;
+				if (!response?.success) throw new Error(response?.message ?? "Failed to reveal value");
+				return response.value ?? "";
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+function useSecretsProviderConfigs() {
+	const [configs, setConfigs] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const fetchData = useCallback(async () => {
+		setLoading(true);
+		setError(null);
+		try {
+			const result = await getFluidGridsClient().query({
+				query: GET_SECRETS_PROVIDER_CONFIGS,
+				fetchPolicy: "network-only"
+			});
+			setConfigs(result.data?.secretsProviderConfigs ?? []);
+		} catch (err) {
+			setError(err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+	useEffect(() => {
+		fetchData();
+	}, [fetchData]);
+	return {
+		configs,
+		loading,
+		error,
+		refetch: fetchData
+	};
+}
+function useSaveSecretsProviderConfig() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		saveConfig: useCallback(async (input) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				const response = throwIfResultError(await client.mutate({
+					mutation: SAVE_SECRETS_PROVIDER_CONFIG,
+					variables: { input }
+				})).data?.saveSecretsProviderConfig;
+				if (!response?.success) throw new Error(response?.message ?? "Failed to save provider configuration");
+				return response.config;
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+function useTestSecretsProviderConnection() {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	return {
+		testConnection: useCallback(async (provider) => {
+			setLoading(true);
+			setError(null);
+			try {
+				const client = getFluidGridsClient();
+				return throwIfResultError(await client.mutate({
+					mutation: TEST_SECRETS_PROVIDER_CONNECTION,
+					variables: { provider }
+				})).data?.testSecretsProviderConnection ?? {
+					success: false,
+					message: "Unknown error"
+				};
+			} catch (err) {
+				setError(err);
+				throw err;
+			} finally {
+				setLoading(false);
+			}
+		}, []),
+		loading,
+		error
+	};
+}
+
+// src/modules/variables/pages/VariablesPage.tsx
+/**
+* Variables Page (BOFF-7517)
+*
+* Workspace/project-scoped `$vars` key-value store management: list/create/
+* edit/delete variables, mask secret values (dots + explicit "Reveal"
+* action), and configure/test the external secrets provider (AWS Secrets
+* Manager first).
+*/
+var VariablesPage_exports = /* @__PURE__ */ __exportAll({ VariablesPage: () => VariablesPage });
+function VariableValueCell({ variable }) {
+	const tr = useTr();
+	const { revealValue, loading } = useRevealVariableValue();
+	const [revealed, setRevealed] = useState(null);
+	const isMasked = variable.isSecret || variable.externalProvider !== "NONE";
+	const handleReveal = useCallback(async () => {
+		try {
+			const value = await revealValue(variable.id);
+			setRevealed(value);
+			setTimeout(() => setRevealed(null), 15e3);
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.variables.revealFailed", "Failed to reveal value"));
+		}
+	}, [
+		revealValue,
+		variable.id,
+		tr
+	]);
+	if (variable.externalProvider !== "NONE" && revealed === null) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				className: "font-mono text-xs",
+				children: variable.externalProvider
+			}),
+			variable.externalRef && /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-text-secondary truncate max-w-[160px]",
+				title: variable.externalRef,
+				children: variable.externalRef
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: handleReveal,
+				disabled: loading,
+				className: "text-xs text-text-secondary hover:text-text-primary underline",
+				children: tr("fluidgrids.variables.reveal", "Reveal")
+			})
+		]
+	});
+	if (!isMasked) return /* @__PURE__ */ jsx("code", {
+		className: "text-sm text-text-primary",
+		children: variable.value ?? ""
+	});
+	if (revealed !== null) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("code", {
+			className: "text-sm text-text-primary break-all",
+			children: revealed
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: () => setRevealed(null),
+			className: "text-xs text-text-secondary hover:text-text-primary underline shrink-0",
+			children: tr("fluidgrids.variables.hide", "Hide")
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "tracking-widest text-text-secondary select-none",
+			children: "••••••••"
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: handleReveal,
+			disabled: loading,
+			className: "text-xs text-text-secondary hover:text-text-primary underline",
+			children: loading ? tr("fluidgrids.variables.revealing", "Revealing…") : tr("fluidgrids.variables.reveal", "Reveal")
+		})]
+	});
+}
+function VariableFormDialog({ open, onOpenChange, variable, onSaved }) {
+	const tr = useTr();
+	const { createVariable, loading: creating } = useCreateVariable();
+	const { updateVariable, loading: updating } = useUpdateVariable();
+	const isEdit = !!variable;
+	const [key, setKey] = useState(variable?.key ?? "");
+	const [description, setDescription] = useState(variable?.description ?? "");
+	const [isSecret, setIsSecret] = useState(variable?.isSecret ?? false);
+	const [value, setValue] = useState("");
+	const [scope, setScope] = useState(variable?.scope ?? "WORKSPACE");
+	const resetForm = useCallback(() => {
+		setKey(variable?.key ?? "");
+		setDescription(variable?.description ?? "");
+		setIsSecret(variable?.isSecret ?? false);
+		setValue("");
+		setScope(variable?.scope ?? "WORKSPACE");
+	}, [variable]);
+	const handleSubmit = useCallback(async () => {
+		try {
+			if (isEdit && variable) {
+				await updateVariable(variable.id, {
+					description: description || void 0,
+					isSecret,
+					...value ? { value } : {}
+				});
+				toast.success(tr("fluidgrids.variables.updated", "Variable updated"));
+			} else {
+				if (!key.trim()) {
+					toast.error(tr("fluidgrids.variables.keyRequired", "Key is required"));
+					return;
+				}
+				await createVariable({
+					key: key.trim(),
+					description: description || void 0,
+					isSecret,
+					value,
+					scope
+				});
+				toast.success(tr("fluidgrids.variables.created", "Variable created"));
+			}
+			onSaved();
+			onOpenChange(false);
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.variables.saveFailed", "Failed to save variable"));
+		}
+	}, [
+		isEdit,
+		variable,
+		key,
+		description,
+		isSecret,
+		value,
+		scope,
+		createVariable,
+		updateVariable,
+		onSaved,
+		onOpenChange,
+		tr
+	]);
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (next) resetForm();
+			onOpenChange(next);
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-w-md",
+			children: [
+				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: isEdit ? tr("fluidgrids.variables.editTitle", "Edit variable") : tr("fluidgrids.variables.createTitle", "New variable") }) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-4 py-2",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [
+								/* @__PURE__ */ jsx(Label, {
+									htmlFor: "variable-key",
+									children: tr("fluidgrids.variables.keyLabel", "Key")
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									id: "variable-key",
+									value: key,
+									onChange: (e) => setKey(e.target.value),
+									disabled: isEdit,
+									placeholder: "API_URL"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-xs text-text-secondary",
+									children: tr("fluidgrids.variables.keyHint", "Use it in expressions as {{ $vars.KEY }} or ${vars.KEY}")
+								})
+							]
+						}),
+						!isEdit && /* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "variable-scope",
+								children: tr("fluidgrids.variables.scopeLabel", "Scope")
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: scope,
+								onValueChange: (v) => setScope(v),
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									id: "variable-scope",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+									value: "WORKSPACE",
+									children: tr("fluidgrids.variables.scopeWorkspace", "Workspace")
+								}), /* @__PURE__ */ jsx(SelectItem, {
+									value: "PROJECT",
+									children: tr("fluidgrids.variables.scopeProject", "Project")
+								})] })]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "variable-description",
+								children: tr("fluidgrids.variables.descriptionLabel", "Description")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "variable-description",
+								value: description,
+								onChange: (e) => setDescription(e.target.value),
+								placeholder: tr("fluidgrids.variables.descriptionPlaceholder", "Optional")
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between py-1",
+							children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "variable-secret",
+								children: tr("fluidgrids.variables.secretLabel", "Secret value")
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-xs text-text-secondary",
+								children: tr("fluidgrids.variables.secretHint", "Masked in the UI and never printed to run logs")
+							})] }), /* @__PURE__ */ jsx(Switch, {
+								id: "variable-secret",
+								checked: isSecret,
+								onCheckedChange: setIsSecret
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ jsx(Label, {
+								htmlFor: "variable-value",
+								children: tr("fluidgrids.variables.valueLabel", "Value")
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "variable-value",
+								type: isSecret ? "password" : "text",
+								value,
+								onChange: (e) => setValue(e.target.value),
+								placeholder: isEdit ? tr("fluidgrids.variables.valueLeaveBlank", "Leave blank to keep the current value") : ""
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					onClick: () => onOpenChange(false),
+					children: tr("fluidgrids.variables.cancel", "Cancel")
+				}), /* @__PURE__ */ jsx(Button$1, {
+					"data-agent": "confirm",
+					onClick: handleSubmit,
+					disabled: creating || updating,
+					children: creating || updating ? tr("fluidgrids.variables.saving", "Saving…") : tr("fluidgrids.variables.save", "Save")
+				})] })
+			]
+		})
+	});
+}
+function VariablesTab() {
+	const tr = useTr();
+	const { variables, loading, refetch } = useVariables();
+	const { deleteVariable } = useDeleteVariable();
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const [editing, setEditing] = useState(null);
+	const handleCreate = useCallback(() => {
+		setEditing(null);
+		setDialogOpen(true);
+	}, []);
+	const handleEdit = useCallback((variable) => {
+		setEditing(variable);
+		setDialogOpen(true);
+	}, []);
+	const handleDelete = useCallback(async (variable) => {
+		if (!window.confirm(tr("fluidgrids.variables.confirmDelete", `Delete variable "${variable.key}"?`))) return;
+		try {
+			await deleteVariable(variable.id);
+			toast.success(tr("fluidgrids.variables.deleted", "Variable deleted"));
+			refetch();
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.variables.deleteFailed", "Failed to delete variable"));
+		}
+	}, [
+		deleteVariable,
+		refetch,
+		tr
+	]);
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between mb-4",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-text-secondary",
+				children: tr("fluidgrids.variables.tabDescription", "Reference these in any node parameter as {{ $vars.KEY }} (new expressions) or ${vars.KEY} (legacy).")
+			}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+				permission: FLUIDGRIDS_PERMISSIONS.VARIABLE_CREATE,
+				deniedTooltip: tr("fluidgrids.variables.createDeniedTooltip", "You don't have permission to create variables"),
+				children: /* @__PURE__ */ jsxs(Button$1, {
+					onClick: handleCreate,
+					size: "sm",
+					"data-tour": "fluidgrids-variables-create",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "mdi:plus",
+						className: "mr-1.5",
+						width: 16
+					}), tr("fluidgrids.variables.newVariable", "New Variable")]
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsx(Card, {
+			className: "border border-border-secondary bg-background-secondary",
+			"data-tour": "fluidgrids-variables-table",
+			children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+				/* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.variables.colKey", "Key") }),
+				/* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.variables.colScope", "Scope") }),
+				/* @__PURE__ */ jsx(TableHead, { children: tr("fluidgrids.variables.colValue", "Value") }),
+				/* @__PURE__ */ jsx(TableHead, {
+					className: "text-right",
+					children: tr("fluidgrids.variables.colActions", "Actions")
+				})
+			] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [
+				loading && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: 4,
+					className: "text-center text-text-secondary py-8",
+					children: tr("fluidgrids.variables.loading", "Loading…")
+				}) }),
+				!loading && variables.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: 4,
+					className: "text-center text-text-secondary py-8",
+					children: tr("fluidgrids.variables.empty", "No variables yet")
+				}) }),
+				variables.map((variable) => /* @__PURE__ */ jsxs(TableRow, { children: [
+					/* @__PURE__ */ jsxs(TableCell, { children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx("code", {
+							className: "text-sm font-medium text-text-primary",
+							children: variable.key
+						}), variable.isSecret && /* @__PURE__ */ jsx(Badge, {
+							variant: "outline",
+							className: "text-[10px]",
+							children: tr("fluidgrids.variables.secretBadge", "SECRET")
+						})]
+					}), variable.description && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-text-secondary mt-0.5",
+						children: variable.description
+					})] }),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "text-text-secondary text-sm",
+						children: variable.scope
+					}),
+					/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(VariableValueCell, { variable }) }),
+					/* @__PURE__ */ jsx(TableCell, {
+						className: "text-right",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-end gap-1",
+							children: [/* @__PURE__ */ jsx(SdkPermissionButton, {
+								permission: FLUIDGRIDS_PERMISSIONS.VARIABLE_UPDATE,
+								deniedTooltip: tr("fluidgrids.variables.editDeniedTooltip", "You don't have permission to edit variables"),
+								children: /* @__PURE__ */ jsx("button", {
+									onClick: () => handleEdit(variable),
+									className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary hover:text-text-primary",
+									title: tr("fluidgrids.variables.edit", "Edit"),
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: "mdi:pencil-outline",
+										width: 16
+									})
+								})
+							}), /* @__PURE__ */ jsx(SdkPermissionButton, {
+								permission: FLUIDGRIDS_PERMISSIONS.VARIABLE_DELETE,
+								deniedTooltip: tr("fluidgrids.variables.deleteDeniedTooltip", "You don't have permission to delete variables"),
+								children: /* @__PURE__ */ jsx("button", {
+									onClick: () => handleDelete(variable),
+									className: "p-1.5 rounded hover:bg-background-tertiary text-text-secondary hover:text-status-error-text",
+									title: tr("fluidgrids.variables.delete", "Delete"),
+									children: /* @__PURE__ */ jsx(Icon, {
+										icon: "mdi:trash-can-outline",
+										width: 16
+									})
+								})
+							})]
+						})
+					})
+				] }, variable.id))
+			] })] })
+		}),
+		/* @__PURE__ */ jsx(VariableFormDialog, {
+			open: dialogOpen,
+			onOpenChange: setDialogOpen,
+			variable: editing,
+			onSaved: refetch
+		})
+	] });
+}
+function ExternalProvidersTab() {
+	const tr = useTr();
+	const { configs, loading, refetch } = useSecretsProviderConfigs();
+	const { saveConfig, loading: saving } = useSaveSecretsProviderConfig();
+	const { testConnection, loading: testing } = useTestSecretsProviderConnection();
+	const awsConfig = configs.find((c) => c.provider === "AWS_SECRETS_MANAGER");
+	const [prefix, setPrefix] = useState("");
+	const [region, setRegion] = useState("ap-south-1");
+	const [enabled, setEnabled] = useState(false);
+	const [lastTest, setLastTest] = useState(null);
+	const [hydratedConfigId, setHydratedConfigId] = useState(null);
+	useEffect(() => {
+		if (!awsConfig || awsConfig.id === hydratedConfigId) return;
+		setPrefix(awsConfig.awsSecretsManagerPrefix ?? "");
+		setRegion(awsConfig.awsRegion ?? "ap-south-1");
+		setEnabled(awsConfig.isEnabled);
+		setLastTest(awsConfig.lastTestStatus ? {
+			success: awsConfig.lastTestStatus === "SUCCESS",
+			message: awsConfig.lastTestMessage ?? ""
+		} : null);
+		setHydratedConfigId(awsConfig.id);
+	}, [awsConfig, hydratedConfigId]);
+	const handleSave = useCallback(async () => {
+		try {
+			await saveConfig({
+				provider: "AWS_SECRETS_MANAGER",
+				awsSecretsManagerPrefix: prefix || void 0,
+				awsRegion: region || void 0,
+				isEnabled: enabled
+			});
+			toast.success(tr("fluidgrids.variables.providerSaved", "Provider configuration saved"));
+			refetch();
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.variables.providerSaveFailed", "Failed to save"));
+		}
+	}, [
+		saveConfig,
+		prefix,
+		region,
+		enabled,
+		refetch,
+		tr
+	]);
+	const handleTest = useCallback(async () => {
+		try {
+			const result = await testConnection("AWS_SECRETS_MANAGER");
+			setLastTest(result);
+			if (result.success) toast.success(result.message);
+			else toast.error(result.message);
+		} catch (err) {
+			toast.error(err instanceof Error ? err.message : tr("fluidgrids.variables.testFailed", "Connection test failed"));
+		}
+	}, [testConnection, tr]);
+	if (loading) return /* @__PURE__ */ jsx("p", {
+		className: "text-text-secondary text-sm",
+		children: tr("fluidgrids.variables.loading", "Loading…")
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4 max-w-xl",
+		children: [/* @__PURE__ */ jsx(Card, {
+			className: "border border-border-secondary bg-background-secondary",
+			children: /* @__PURE__ */ jsxs(CardHeader, {
+				className: "pb-3 space-y-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:aws",
+							width: 20,
+							className: "text-text-secondary"
+						}), /* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-semibold text-text-primary",
+							children: tr("fluidgrids.variables.awsProviderTitle", "AWS Secrets Manager")
+						})]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs text-text-secondary",
+						children: tr("fluidgrids.variables.awsProviderDescription", "A variable can reference a secret stored in AWS Secrets Manager instead of storing its own value. Only secrets under the prefix below are reachable.")
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "aws-prefix",
+							children: tr("fluidgrids.variables.awsPrefixLabel", "Secrets Manager prefix")
+						}), /* @__PURE__ */ jsx(Input, {
+							id: "aws-prefix",
+							value: prefix,
+							onChange: (e) => setPrefix(e.target.value),
+							placeholder: "boff/prod/wspace/workflow/vars/"
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "aws-region",
+							children: tr("fluidgrids.variables.awsRegionLabel", "Region")
+						}), /* @__PURE__ */ jsx(Input, {
+							id: "aws-region",
+							value: region,
+							onChange: (e) => setRegion(e.target.value)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: "aws-enabled",
+							children: tr("fluidgrids.variables.awsEnabledLabel", "Enabled")
+						}), /* @__PURE__ */ jsx(Switch, {
+							id: "aws-enabled",
+							checked: enabled,
+							onCheckedChange: setEnabled
+						})]
+					}),
+					lastTest && /* @__PURE__ */ jsx("div", {
+						className: `text-xs rounded-md px-3 py-2 border ${lastTest.success ? "border-status-success-border bg-status-success-bg-subtle text-status-success-text" : "border-status-error-border bg-status-error-bg-subtle text-status-error-text"}`,
+						children: lastTest.message
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 pt-1",
+						children: [/* @__PURE__ */ jsx(Button$1, {
+							"data-agent": "confirm",
+							onClick: handleSave,
+							disabled: saving,
+							size: "sm",
+							children: saving ? tr("fluidgrids.variables.saving", "Saving…") : tr("fluidgrids.variables.save", "Save")
+						}), /* @__PURE__ */ jsx(Button$1, {
+							onClick: handleTest,
+							disabled: testing,
+							variant: "outline",
+							size: "sm",
+							children: testing ? tr("fluidgrids.variables.testing", "Testing…") : tr("fluidgrids.variables.testConnection", "Test connection")
+						})]
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-xs text-text-secondary",
+			children: tr("fluidgrids.variables.otherProvidersNote", "HashiCorp Vault, Azure Key Vault, and GCP Secret Manager are not available yet.")
+		})]
+	});
+}
+function VariablesPage() {
+	const tr = useTr();
+	const navigate = useNavigate();
+	const [activeTab, setActiveTab] = useState("variables");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "p-4 sm:p-6 bg-background-primary min-h-screen",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6",
+			"data-tour": "fluidgrids-variables-header",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-2xl sm:text-3xl font-bold text-text-primary",
+				children: tr("fluidgrids.variables.pageTitle", "Variables")
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-text-secondary mt-1",
+				children: tr("fluidgrids.variables.pageSubtitle", "Reusable values workflows can reference as $vars")
+			})] }), /* @__PURE__ */ jsxs(Button$1, {
+				variant: "outline",
+				onClick: () => navigate("../list"),
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "mdi:arrow-left",
+					className: "mr-2",
+					width: 16
+				}), tr("fluidgrids.variables.backToWorkflows", "Back to Workflows")]
+			})]
+		}), /* @__PURE__ */ jsxs(Tabs, {
+			value: activeTab,
+			onValueChange: setActiveTab,
+			className: "w-full",
+			children: [
+				/* @__PURE__ */ jsxs(TabsList, {
+					className: "bg-background-secondary border border-border-secondary mb-6",
+					"data-tour": "fluidgrids-variables-tabs",
+					children: [/* @__PURE__ */ jsxs(TabsTrigger, {
+						value: "variables",
+						className: "gap-1.5",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:variable",
+							width: 16
+						}), tr("fluidgrids.variables.variablesTab", "Variables")]
+					}), /* @__PURE__ */ jsxs(TabsTrigger, {
+						value: "providers",
+						className: "gap-1.5",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "mdi:key-chain-variant",
+							width: 16
+						}), tr("fluidgrids.variables.providersTab", "External Providers")]
+					})]
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "variables",
+					children: /* @__PURE__ */ jsx(VariablesTab, {})
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "providers",
+					children: /* @__PURE__ */ jsx(ExternalProvidersTab, {})
+				})
+			]
+		})]
+	});
+}
+
+export { useRevealVariableValue as a, useTestSecretsProviderConnection as c, useDeleteVariable as i, useUpdateVariable as l, VariablesPage_exports as n, useSaveSecretsProviderConfig as o, useCreateVariable as r, useSecretsProviderConfigs as s, VariablesPage as t, useVariables as u };