-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add credential inputs to workflow form in admin ui (#716)
- Loading branch information
1 parent
5772b0a
commit e149f0c
Showing
5 changed files
with
100 additions
and
85 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,116 +1,108 @@ | ||
| import { zodResolver } from "@hookform/resolvers/zod"; | ||
| import { Plus, TrashIcon } from "lucide-react"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useForm } from "react-hook-form"; | ||
| import { PlusIcon, TrashIcon } from "lucide-react"; | ||
| import { useEffect, useMemo } from "react"; | ||
| import { useFieldArray, useForm } from "react-hook-form"; | ||
| import { z } from "zod"; | ||
|
|
||
| import { noop } from "~/lib/utils"; | ||
|
|
||
| import { ControlledInput } from "~/components/form/controlledInputs"; | ||
| import { Button } from "~/components/ui/button"; | ||
| import { Form, FormField, FormItem, FormMessage } from "~/components/ui/form"; | ||
| import { Input } from "~/components/ui/input"; | ||
| import { Form } from "~/components/ui/form"; | ||
|
|
||
| const formSchema = z.object({ | ||
| items: z.array(z.string()), | ||
| items: z.array(z.object({ value: z.string() })), | ||
| }); | ||
|
|
||
| export type StringArrayFormValues = z.infer<typeof formSchema>; | ||
|
|
||
| export function StringArrayForm({ | ||
| initialItems = [], | ||
| initialItems, | ||
| onSubmit, | ||
| onChange, | ||
| itemName, | ||
| placeholder, | ||
| }: { | ||
| initialItems?: string[]; | ||
| onSubmit?: (values: StringArrayFormValues) => void; | ||
| onChange?: (values: StringArrayFormValues) => void; | ||
| onSubmit?: (values: string[]) => void; | ||
| onChange?: (values: string[]) => void; | ||
| itemName: string; | ||
| placeholder: string; | ||
| }) { | ||
| const defaultValues = useMemo( | ||
| () => convertToFormValues(initialItems ?? []), | ||
| [initialItems] | ||
| ); | ||
|
|
||
| const form = useForm<StringArrayFormValues>({ | ||
| resolver: zodResolver(formSchema), | ||
| defaultValues: { items: initialItems }, | ||
| defaultValues, | ||
| }); | ||
|
|
||
| const handleSubmit = form.handleSubmit(onSubmit || noop); | ||
|
|
||
| const [newItem, setNewItem] = useState(""); | ||
| const handleSubmit = form.handleSubmit((values) => { | ||
| if (!onSubmit) return; | ||
|
|
||
| const itemValues = form.watch("items"); | ||
| onSubmit(convertFromFormValues(values)); | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!onChange) return; | ||
|
|
||
| return form.watch((values) => { | ||
| const { data, success } = formSchema.safeParse(values); | ||
| if (!success) return; | ||
| onChange?.(data); | ||
| onChange(convertFromFormValues(data)); | ||
| }).unsubscribe; | ||
| }, [itemValues, form.formState, onChange, form]); | ||
| }, [form.formState, onChange, form]); | ||
|
|
||
| const items = useFieldArray({ | ||
| control: form.control, | ||
| name: "items", | ||
| }); | ||
|
|
||
| return ( | ||
| <Form {...form}> | ||
| <form onSubmit={handleSubmit}> | ||
| <FormField | ||
| control={form.control} | ||
| name="items" | ||
| render={({ field }) => ( | ||
| <FormItem> | ||
| <div className="flex space-x-2"> | ||
| <Input | ||
| placeholder={placeholder} | ||
| value={newItem} | ||
| onChange={(e) => setNewItem(e.target.value)} | ||
| className="flex-grow" | ||
| /> | ||
| <Button | ||
| type="button" | ||
| variant="secondary" | ||
| size="icon" | ||
| onClick={() => { | ||
| if (newItem.trim()) { | ||
| field.onChange([ | ||
| ...(field.value || []), | ||
| newItem.trim(), | ||
| ]); | ||
| setNewItem(""); | ||
| } | ||
| }} | ||
| > | ||
| <Plus className="w-4 h-4" /> | ||
| </Button> | ||
| </div> | ||
| <form onSubmit={handleSubmit} className="flex flex-col gap-2"> | ||
| {items.fields.map((field, index) => ( | ||
| <div | ||
| key={field.id} | ||
| className="flex gap-2 p-2 rounded-md bg-muted" | ||
| > | ||
| <ControlledInput | ||
| classNames={{ | ||
| wrapper: "flex-grow", | ||
| input: "bg-background", | ||
| }} | ||
| control={form.control} | ||
| name={`items.${index}.value`} | ||
| placeholder={placeholder} | ||
| /> | ||
|
|
||
| <Button | ||
| size="icon" | ||
| variant="ghost" | ||
| onClick={() => items.remove(index)} | ||
| startContent={<TrashIcon />} | ||
| /> | ||
| </div> | ||
| ))} | ||
|
|
||
| <div className="mt-2 w-full"> | ||
| {field.value?.map((item, index) => ( | ||
| <div | ||
| key={index} | ||
| className="flex items-center space-x-2 justify-between mt-2" | ||
| > | ||
| <div className="border text-sm px-3 shadow-sm rounded-md p-2 w-full truncate"> | ||
| {item} | ||
| </div> | ||
| <Button | ||
| type="button" | ||
| variant="destructive" | ||
| size="icon" | ||
| onClick={() => { | ||
| const newItems = | ||
| field.value?.filter( | ||
| (_, i) => i !== index | ||
| ); | ||
| field.onChange(newItems); | ||
| }} | ||
| > | ||
| <TrashIcon className="w-4 h-4" /> | ||
| </Button> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <FormMessage /> | ||
| </FormItem> | ||
| )} | ||
| /> | ||
| <Button | ||
| type="button" | ||
| className="self-end" | ||
| variant="ghost" | ||
| onClick={() => items.append({ value: "" })} | ||
| startContent={<PlusIcon />} | ||
| > | ||
| Add {itemName} | ||
| </Button> | ||
| </form> | ||
| </Form> | ||
| ); | ||
| } | ||
|
|
||
| function convertToFormValues(items: string[]) { | ||
| return { items: items.map((item) => ({ value: item })) }; | ||
| } | ||
|
|
||
| function convertFromFormValues(values: StringArrayFormValues) { | ||
| return values.items.map((item) => item.value); | ||
| } |
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