From 2b92aef7a56ba2d0670c21751f8fae9db13f3a83 Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <46546486+ryanhopperlowe@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:38:07 -0600
Subject: [PATCH] enhance: move environment variable section to the bottom of
 agent/workflow form (#1253)

---
 ui/admin/app/components/agent/Agent.tsx       |  27 ++---
 .../shared/EnvironmentVariableSection.tsx     | 100 ++++++++++--------
 ui/admin/app/components/workflow/Workflow.tsx |  22 ++--
 3 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/ui/admin/app/components/agent/Agent.tsx b/ui/admin/app/components/agent/Agent.tsx
index 6c42b8d7c..8664b7e8f 100644
--- a/ui/admin/app/components/agent/Agent.tsx
+++ b/ui/admin/app/components/agent/Agent.tsx
@@ -1,4 +1,4 @@
-import { LibraryIcon, PlusIcon, VariableIcon, WrenchIcon } from "lucide-react";
+import { LibraryIcon, PlusIcon, WrenchIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import useSWR from "swr";
 
@@ -99,11 +99,11 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
 			<ScrollArea className={cn("h-full", className)}>
 				<AgentAlias agent={agentUpdates} onChange={partialSetAgent} />
 
-				<div className="m-4 p-4 lg:mx-6 xl:mx-8">
+				<div className="m-4 p-4">
 					<AgentForm agent={agentUpdates} onChange={debouncedSetAgentInfo} />
 				</div>
 
-				<div className="m-4 space-y-4 p-4 lg:mx-6 xl:mx-8">
+				<div className="m-4 space-y-4 p-4">
 					<h4 className="flex items-center gap-2 border-b pb-2">
 						<WrenchIcon className="h-5 w-5" />
 						Tools
@@ -121,20 +121,7 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
 					/>
 				</div>
 
-				<div className="m-4 space-y-4 p-4 lg:mx-6 xl:mx-8">
-					<h4 className="flex items-center gap-2 border-b pb-2">
-						<VariableIcon className="h-5 w-5" />
-						Environment Variables
-					</h4>
-
-					<EnvironmentVariableSection
-						entity={agent}
-						onUpdate={partialSetAgent}
-						entityType="agent"
-					/>
-				</div>
-
-				<div className="m-4 space-y-4 p-4 lg:mx-6 xl:mx-8">
+				<div className="m-4 space-y-4 p-4">
 					<h4 className="flex items-center gap-2 border-b pb-2">
 						<LibraryIcon className="h-6 w-6" />
 						Knowledge
@@ -156,6 +143,12 @@ export function Agent({ className, currentThreadId, onRefresh }: AgentProps) {
 						}}
 					/>
 				</div>
+
+				<EnvironmentVariableSection
+					entity={agent}
+					onUpdate={partialSetAgent}
+					entityType="agent"
+				/>
 			</ScrollArea>
 
 			<footer className="flex items-center justify-between gap-4 px-8 py-4 shadow-inner">
diff --git a/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx b/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
index 9ee6e762a..3e206fcb9 100644
--- a/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
+++ b/ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
@@ -1,4 +1,4 @@
-import { PenIcon } from "lucide-react";
+import { PenIcon, VariableIcon } from "lucide-react";
 import { toast } from "sonner";
 
 import { Agent } from "~/lib/model/agents";
@@ -9,7 +9,7 @@ import { EnvironmentApiService } from "~/lib/service/api/EnvironmentApiService";
 import { EnvForm } from "~/components/agent/shared/AgentEnvironmentVariableForm";
 import { SelectList } from "~/components/composed/SelectModule";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { Card, CardDescription } from "~/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -60,49 +60,61 @@ export function EnvironmentVariableSection({
 	const items = entity.env ?? [];
 
 	return (
-		<div className="flex flex-col gap-2">
-			{!!items.length && (
-				<Card className="px-4 py-2">
-					<SelectList
-						getItemKey={(item) => item.name}
-						items={items}
-						renderItem={renderItem}
-						selected={items.map((item) => item.name)}
-					/>
-				</Card>
-			)}
-
-			<Dialog open={open} onOpenChange={onOpenChange}>
-				<DialogTrigger asChild>
-					<Button
-						variant="ghost"
-						loading={revealEnv.isLoading}
-						className="self-end"
-						startContent={<PenIcon />}
-					>
-						Environment Variables
-					</Button>
-				</DialogTrigger>
-
-				<DialogContent className="max-w-3xl">
-					<DialogHeader>
-						<DialogTitle>Environment Variables</DialogTitle>
-					</DialogHeader>
-
-					<DialogDescription>
-						Environment variables are used to store values that can be used in
-						your {entityType}.
-					</DialogDescription>
-
-					{revealEnv.data && (
-						<EnvForm
-							defaultValues={revealEnv.data}
-							isLoading={updateEnv.isLoading}
-							onSubmit={(values) => updateEnv.execute(entity.id, values)}
+		<div className="m-4 space-y-4 p-4">
+			<h4 className="flex items-center gap-2 pb-2">
+				<VariableIcon className="h-5 w-5" />
+				Environment Variables
+			</h4>
+
+			<CardDescription>
+				Add environment variables that will be available to all tools as key
+				value pairs.
+			</CardDescription>
+
+			<div className="flex flex-col gap-2">
+				{!!items.length && (
+					<Card className="px-4 py-2">
+						<SelectList
+							getItemKey={(item) => item.name}
+							items={items}
+							renderItem={renderItem}
+							selected={items.map((item) => item.name)}
 						/>
-					)}
-				</DialogContent>
-			</Dialog>
+					</Card>
+				)}
+
+				<Dialog open={open} onOpenChange={onOpenChange}>
+					<DialogTrigger asChild>
+						<Button
+							variant="ghost"
+							loading={revealEnv.isLoading}
+							className="self-end"
+							startContent={<PenIcon />}
+						>
+							Environment Variables
+						</Button>
+					</DialogTrigger>
+
+					<DialogContent className="max-w-3xl">
+						<DialogHeader>
+							<DialogTitle>Environment Variables</DialogTitle>
+						</DialogHeader>
+
+						<DialogDescription>
+							Environment variables are used to store values that can be used in
+							your {entityType}.
+						</DialogDescription>
+
+						{revealEnv.data && (
+							<EnvForm
+								defaultValues={revealEnv.data}
+								isLoading={updateEnv.isLoading}
+								onSubmit={(values) => updateEnv.execute(entity.id, values)}
+							/>
+						)}
+					</DialogContent>
+				</Dialog>
+			</div>
 		</div>
 	);
 
diff --git a/ui/admin/app/components/workflow/Workflow.tsx b/ui/admin/app/components/workflow/Workflow.tsx
index 231b946cd..bef1607e4 100644
--- a/ui/admin/app/components/workflow/Workflow.tsx
+++ b/ui/admin/app/components/workflow/Workflow.tsx
@@ -1,4 +1,4 @@
-import { Library, List, PuzzleIcon, Variable, WrenchIcon } from "lucide-react";
+import { Library, List, PuzzleIcon, WrenchIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 
 import { AssistantNamespace } from "~/lib/model/assistants";
@@ -94,19 +94,6 @@ function WorkflowContent({ className }: WorkflowProps) {
 					/>
 				</div>
 
-				<div className="m-4 flex flex-col gap-4 p-4">
-					<h4 className="flex items-center gap-2">
-						<Variable className="h-4 w-4" />
-						Environment Variables
-					</h4>
-
-					<EnvironmentVariableSection
-						entity={workflow}
-						entityType="workflow"
-						onUpdate={partialSetWorkflow}
-					/>
-				</div>
-
 				<div className="m-4 flex flex-col gap-4 p-4">
 					<h4 className="flex items-center gap-2">
 						<List className="h-4 w-4" />
@@ -163,6 +150,13 @@ function WorkflowContent({ className }: WorkflowProps) {
 				</div>
 
 				<WorkflowTriggerPanel workflowId={workflow.id} />
+
+				<EnvironmentVariableSection
+					entity={workflow}
+					entityType="workflow"
+					onUpdate={partialSetWorkflow}
+				/>
+
 				<div className="h-8" /* spacer */ />
 			</ScrollArea>