Skip to content

Commit

Permalink
Adjust task placeholders (#933)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ykeremy
ykeremy authored Oct 8, 2024
1 parent 78c0a91 commit e2bff34
Show file tree
Hide file tree
Showing 11 changed files with 140 additions and 62 deletions.
4 changes: 2 additions & 2 deletions skyvern-frontend/src/components/ui/multi-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ export const MultiSelect = React.forwardRef<
{...props}
onClick={handleTogglePopover}
className={cn(
"flex h-auto min-h-10 w-full items-center justify-between rounded-md border bg-inherit p-1 hover:bg-inherit",
"flex h-auto min-h-8 w-full items-center justify-between rounded-md border bg-inherit p-1 hover:bg-inherit",
className,
)}
>
Expand Down Expand Up @@ -238,7 +238,7 @@ export const MultiSelect = React.forwardRef<
</div>
) : (
<div className="mx-auto flex w-full items-center justify-between">
<span className="mx-3 text-sm font-normal text-muted-foreground">
<span className="mx-2 text-xs font-normal text-muted-foreground">
{placeholder}
</span>
<ChevronDownIcon className="mx-2 h-4 cursor-pointer text-muted-foreground" />
Expand Down
41 changes: 29 additions & 12 deletions skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { getClient } from "@/api/AxiosClient";
import { CreateTaskRequest } from "@/api/types";
import { CreateTaskRequest, OrganizationApiResponse } from "@/api/types";
import { AutoResizingTextarea } from "@/components/AutoResizingTextarea/AutoResizingTextarea";
import { Button } from "@/components/ui/button";
import {
Expand All @@ -21,7 +21,7 @@ import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod";
import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
Expand Down Expand Up @@ -91,12 +91,24 @@ function CreateNewTaskForm({ initialValues }: Props) {
]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);

const { data: organizations } = useQuery<Array<OrganizationApiResponse>>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});

const organization = organizations?.[0];

const form = useForm<CreateNewTaskFormValues>({
resolver: zodResolver(createNewTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxStepsOverride: MAX_STEPS_DEFAULT,
maxStepsOverride: null,
},
});
const { errors } = useFormState({ control: form.control });
Expand All @@ -106,15 +118,15 @@ function CreateNewTaskForm({ initialValues }: Props) {
const taskRequest = createTaskRequestObject(formValues);
const client = await getClient(credentialGetter);
const includeOverrideHeader =
formValues.maxStepsOverride !== null &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
{ data: { task_id: string } }
>("/tasks", taskRequest, {
...(includeOverrideHeader && {
headers: {
"x-max-steps-override":
formValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
"x-max-steps-override": formValues.maxStepsOverride,
},
}),
});
Expand Down Expand Up @@ -237,8 +249,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
placeholder="Tell Skyvern what to do."
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -345,8 +357,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
placeholder="What data do you need to extract?"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -428,9 +440,14 @@ function CreateNewTaskForm({ initialValues }: Props) {
{...field}
type="number"
min={1}
value={field.value}
value={field.value ?? ""}
placeholder={`Default: ${organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT}`}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
const value =
event.target.value === ""
? null
: Number(event.target.value);
field.onChange(value);
}}
/>
</FormControl>
Expand Down Expand Up @@ -458,8 +475,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="https://"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -517,8 +534,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="Provide your 2FA endpoint"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand All @@ -543,8 +560,8 @@ function CreateNewTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
placeholder="Add an ID that links your TOTP to the task"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down
37 changes: 28 additions & 9 deletions skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { apiBaseUrl } from "@/util/env";
import { zodResolver } from "@hookform/resolvers/zod";
import { ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
Expand All @@ -31,6 +31,7 @@ import { stringify as convertToYAML } from "yaml";
import { MAX_STEPS_DEFAULT } from "../constants";
import { TaskFormSection } from "./TaskFormSection";
import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
import { OrganizationApiResponse } from "@/api/types";

type Props = {
initialValues: SavedTaskFormValues;
Expand Down Expand Up @@ -142,12 +143,24 @@ function SavedTaskForm({ initialValues }: Props) {
]);
const [showAdvancedBaseContent, setShowAdvancedBaseContent] = useState(false);

const { data: organizations } = useQuery<Array<OrganizationApiResponse>>({
queryKey: ["organizations"],
queryFn: async () => {
const client = await getClient(credentialGetter);
return await client
.get("/organizations")
.then((response) => response.data.organizations);
},
});

const organization = organizations?.[0];

const form = useForm<SavedTaskFormValues>({
resolver: zodResolver(savedTaskFormSchema),
defaultValues: initialValues,
values: {
...initialValues,
maxStepsOverride: initialValues.maxStepsOverride ?? MAX_STEPS_DEFAULT,
maxStepsOverride: initialValues.maxStepsOverride ?? null,
},
});

Expand All @@ -168,6 +181,7 @@ function SavedTaskForm({ initialValues }: Props) {
.then(() => {
const taskRequest = createTaskRequestObject(formValues);
const includeOverrideHeader =
formValues.maxStepsOverride !== null &&
formValues.maxStepsOverride !== MAX_STEPS_DEFAULT;
return client.post<
ReturnType<typeof createTaskRequestObject>,
Expand Down Expand Up @@ -404,8 +418,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="Use terms like complete or terminate to give completion directions"
{...field}
placeholder="Tell Skyvern what to do."
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -512,8 +526,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<AutoResizingTextarea
placeholder="e.g. Extract the product price..."
{...field}
placeholder="What data do you need to extract?"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -600,9 +614,14 @@ function SavedTaskForm({ initialValues }: Props) {
{...field}
type="number"
min={1}
value={field.value}
value={field.value ?? ""}
placeholder={`Default: ${organization?.max_steps_per_run ?? MAX_STEPS_DEFAULT}`}
onChange={(event) => {
field.onChange(parseInt(event.target.value));
const value =
event.target.value === ""
? null
: Number(event.target.value);
field.onChange(value);
}}
/>
</FormControl>
Expand Down Expand Up @@ -630,8 +649,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="https://"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down Expand Up @@ -689,8 +708,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="https://"
{...field}
placeholder="Provide your 2FA endpoint"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand All @@ -715,8 +734,8 @@ function SavedTaskForm({ initialValues }: Props) {
<div className="w-full">
<FormControl>
<Input
placeholder="Idenfitifer"
{...field}
placeholder="Add an ID that links your TOTP to the task"
value={field.value === null ? "" : field.value}
/>
</FormControl>
Expand Down
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/tasks/create/taskFormTypes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const createNewTaskFormSchemaBase = z.object({
dataExtractionGoal: z.string().or(z.null()),
navigationPayload: z.string().or(z.null()),
extractedInformationSchema: z.string().or(z.null()),
maxStepsOverride: z.number().optional(),
maxStepsOverride: z.number().or(z.null()).optional(),
totpVerificationUrl: z.string().or(z.null()),
totpIdentifier: z.string().or(z.null()),
errorCodeMapping: z.string().or(z.null()),
Expand Down
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/workflows/editor/nodes/DownloadNode/DownloadNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function DownloadNode({ id, data }: NodeProps<DownloadNode>) {
<div className="space-y-4">
<div className="space-y-1">
<Label className="text-sm text-slate-400">File URL</Label>
<Input value={data.url} disabled className="nopan" />
<Input value={data.url} disabled className="nopan text-xs" />
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion skyvern-frontend/src/routes/workflows/editor/nodes/FileParserNode/FileParserNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function FileParserNode({ id, data }: NodeProps<FileParserNode>) {
setInputs({ ...inputs, fileUrl: event.target.value });
updateNodeData(id, { fileUrl: event.target.value });
}}
className="nopan"
className="nopan text-xs"
/>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions skyvern-frontend/src/routes/workflows/editor/nodes/SendEmailNode/SendEmailNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
}}
value={inputs.recipients}
placeholder="example@gmail.com, example2@gmail.com..."
className="nopan"
className="nopan text-xs"
/>
</div>
<Separator />
Expand All @@ -95,7 +95,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
}}
value={inputs.subject}
placeholder="What is the gist?"
className="nopan"
className="nopan text-xs"
/>
</div>
<div className="space-y-1">
Expand All @@ -109,7 +109,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
}}
value={inputs.body}
placeholder="What would you like to say?"
className="nopan"
className="nopan text-xs"
/>
</div>
<Separator />
Expand All @@ -124,7 +124,7 @@ function SendEmailNode({ id, data }: NodeProps<SendEmailNode>) {
handleChange("fileAttachments", event.target.value);
}}
disabled
className="nopan"
className="nopan text-xs"
/>
</div>
</div>
Expand Down
Loading

0 comments on commit e2bff34

Please sign in to comment.