-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chore/admin/update-environment-variables (#954)
* enhance: move workflow env variable form to dialog Signed-off-by: Ryan Hopper-Lowe <[email protected]> * feat: implement UI apis for agent/workflow environment variable updates * feat: add environment variables section to agents * chore: remove authenticate button from workflows page * feat: enhance AgentEnvSection to support updates and improve UI for environment variables - Added `onUpdate` prop to `AgentEnvSection` for handling updates to environment variables for both agents and workflows. - Updated the `AgentEnvSection` component to include a new UI for displaying and managing environment variables. - Refactored the `SelectList` component to allow optional removal of items and added customizable class names. - Introduced `EnvVariable` type to better structure environment variable data. - Modified API service to filter out empty environment variable entries during updates. This update improves the user experience when managing environment variables in both agents and workflows. * refactor: clean up SelectList component - Replaced static asterisks with a dynamic bullet point representation in the AgentEnvSection for better visual clarity. - Removed unnecessary padding from the SelectList component to streamline the layout. --------- Signed-off-by: Ryan Hopper-Lowe <[email protected]>
- Loading branch information
1 parent
4deac11
commit b811d48
Showing
12 changed files
with
271 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
54 changes: 54 additions & 0 deletions
54
ui/admin/app/components/agent/shared/AgentEnvironmentVariableForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| import { RevealedEnv } from "~/lib/model/environmentVariables"; | ||
|
|
||
| import { NameDescriptionForm } from "~/components/composed/NameDescriptionForm"; | ||
| import { Button } from "~/components/ui/button"; | ||
|
|
||
| type EnvFormProps = { | ||
| defaultValues: RevealedEnv; | ||
| onSubmit: (values: RevealedEnv) => void; | ||
| isLoading: boolean; | ||
| }; | ||
|
|
||
| export function EnvForm({ | ||
| defaultValues, | ||
| onSubmit: updateEnv, | ||
| isLoading, | ||
| }: EnvFormProps) { | ||
| const [state, setState] = useState(() => | ||
| Object.entries(defaultValues).map(([name, description]) => ({ | ||
| name, | ||
| description, | ||
| })) | ||
| ); | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (defaultValues) { | ||
| const updates = Object.fromEntries( | ||
| state.map(({ name, description }) => [name, description]) | ||
| ); | ||
|
|
||
| updateEnv(updates); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit} className="flex flex-col gap-4"> | ||
| <NameDescriptionForm | ||
| defaultValues={state} | ||
| onChange={setState} | ||
| descriptionFieldProps={{ | ||
| type: "password", | ||
| placeholder: "Value", | ||
| }} | ||
| /> | ||
|
|
||
| <Button className="w-full" type="submit" loading={isLoading}> | ||
| Save | ||
| </Button> | ||
| </form> | ||
| ); | ||
| } |
118 changes: 118 additions & 0 deletions
118
ui/admin/app/components/agent/shared/EnvironmentVariableSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { PenIcon } from "lucide-react"; | ||
| import { toast } from "sonner"; | ||
|
|
||
| import { Agent } from "~/lib/model/agents"; | ||
| import { EnvVariable } from "~/lib/model/environmentVariables"; | ||
| import { Workflow } from "~/lib/model/workflows"; | ||
| import { EnvironmentApiService } from "~/lib/service/api/EnvironmentApiService"; | ||
|
|
||
| import { TypographyP } from "~/components/Typography"; | ||
| 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 { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "~/components/ui/dialog"; | ||
| import { useAsync } from "~/hooks/useAsync"; | ||
|
|
||
| type EnvironmentVariableSectionProps = { | ||
| entity: Agent | Workflow; | ||
| entityType: "agent" | "workflow"; | ||
| onUpdate: (env: Partial<Agent | Workflow>) => void; | ||
| }; | ||
|
|
||
| export function EnvironmentVariableSection({ | ||
| entity, | ||
| entityType, | ||
| onUpdate, | ||
| }: EnvironmentVariableSectionProps) { | ||
| const revealEnv = useAsync(EnvironmentApiService.getEnvVariables); | ||
|
|
||
| const onOpenChange = (open: boolean) => { | ||
| if (open) { | ||
| revealEnv.execute(entity.id); | ||
| } else { | ||
| revealEnv.clear(); | ||
| } | ||
| }; | ||
|
|
||
| const updateEnv = useAsync(EnvironmentApiService.updateEnvVariables, { | ||
| onSuccess: (_, params) => { | ||
| toast.success("Environment variables updated"); | ||
| revealEnv.clear(); | ||
|
|
||
| onUpdate({ | ||
| env: Object.keys(params[1]).map((name) => ({ | ||
| name, | ||
| value: "", | ||
| })), | ||
| }); | ||
| }, | ||
| }); | ||
|
|
||
| const open = !!revealEnv.data; | ||
|
|
||
| const items = entity.env ?? []; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <Card className="py-2 px-4"> | ||
| <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) | ||
| } | ||
| /> | ||
| )} | ||
| </DialogContent> | ||
| </Dialog> | ||
| </div> | ||
| ); | ||
|
|
||
| function renderItem(item: EnvVariable) { | ||
| return ( | ||
| <div className="flex items-center justify-between gap-2 w-full"> | ||
| <TypographyP className="flex-1">{item.name}</TypographyP> | ||
| <TypographyP>{"•".repeat(15)}</TypographyP> | ||
| </div> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.