Skip to content

Commit

Permalink
UI/UX improvements (#218)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ykeremy
ykeremy authored Apr 23, 2024
1 parent 9b540b9 commit 550ad65
Show file tree
Hide file tree
Showing 6 changed files with 220 additions and 173 deletions.
6 changes: 3 additions & 3 deletions skyvern-frontend/src/components/ui/card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
className={cn("flex flex-col space-y-1.5 p-4", className)}
{...props}
/>
));
Expand Down Expand Up @@ -57,7 +57,7 @@ const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
<div ref={ref} className={cn("p-4", className)} {...props} />
));
CardContent.displayName = "CardContent";

Expand All @@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
className={cn("flex items-center p-4 pt-0", className)}
{...props}
/>
));
Expand Down
71 changes: 42 additions & 29 deletions skyvern-frontend/src/routes/settings/Settings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Label } from "@/components/ui/label";
import { useId } from "react";
import {
Select,
SelectContent,
Expand All @@ -8,40 +7,54 @@ import {
SelectValue,
} from "@/components/ui/select";
import { useSettingsStore } from "@/store/SettingsStore";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";

function Settings() {
const { environment, organization, setEnvironment, setOrganization } =
useSettingsStore();
const environmentInputId = useId();
const organizationInputId = useId();

return (
<div className="flex flex-col gap-6">
<h1>Settings</h1>
<div className="flex flex-col gap-4">
<Label htmlFor={environmentInputId}>Environment</Label>
<div>
<Select value={environment} onValueChange={setEnvironment}>
<SelectTrigger>
<SelectValue placeholder="Environment" />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">local</SelectItem>
</SelectContent>
</Select>
</div>
<Label htmlFor={organizationInputId}>Organization</Label>
<div>
<Select value={organization} onValueChange={setOrganization}>
<SelectTrigger>
<SelectValue placeholder="Organization" />
</SelectTrigger>
<SelectContent>
<SelectItem value="skyvern">Skyvern</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="flex flex-col gap-8 max-w-5xl mx-auto">
<Card>
<CardHeader className="border-b-2">
<CardTitle className="text-lg">Settings</CardTitle>
<CardDescription>
You can select environment and organization here
</CardDescription>
</CardHeader>
<CardContent className="p-8">
<div className="flex flex-col gap-4">
<div className="flex gap-4 items-center">
<Label className="whitespace-nowrap w-36">Environment</Label>
<Select value={environment} onValueChange={setEnvironment}>
<SelectTrigger>
<SelectValue placeholder="Environment" />
</SelectTrigger>
<SelectContent>
<SelectItem value="local">local</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex gap-4 items-center">
<Label className="whitespace-nowrap w-36">Organization</Label>
<Select value={organization} onValueChange={setOrganization}>
<SelectTrigger>
<SelectValue placeholder="Organization" />
</SelectTrigger>
<SelectContent>
<SelectItem value="skyvern">Skyvern</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
</div>
);
}
Expand Down
112 changes: 57 additions & 55 deletions skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { StepArtifactsLayout } from "./StepArtifactsLayout";
import Zoom from "react-medium-image-zoom";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { getRecordingURL, getScreenshotURL } from "./artifactUtils";
import { Skeleton } from "@/components/ui/skeleton";

function TaskDetails() {
const { taskId } = useParams();
Expand All @@ -39,14 +40,6 @@ function TaskDetails() {
return <div>Error: {taskError?.message}</div>;
}

if (isTaskFetching) {
return <div>Loading...</div>; // TODO: skeleton
}

if (!task) {
return <div>Task not found</div>;
}

return (
<div>
<div className="flex flex-col gap-4 relative">
Expand All @@ -58,19 +51,23 @@ function TaskDetails() {
refetch();
}}
>
<ReloadIcon />
<ReloadIcon className="w-4 h-4" />
</Button>
{task.recording_url ? (
{task?.recording_url ? (
<div className="flex">
<Label className="w-32">Recording</Label>
<video src={getRecordingURL(task)} controls />
</div>
) : null}
<div className="flex items-center">
<Label className="w-32">Status</Label>
<StatusBadge status={task.status} />
{isTaskFetching ? (
<Skeleton className="w-32 h-8" />
) : task ? (
<StatusBadge status={task?.status} />
) : null}
</div>
{task.status === Status.Completed ? (
{task?.status === Status.Completed ? (
<div className="flex items-center">
<Label className="w-32 shrink-0">Extracted Information</Label>
<Textarea
Expand All @@ -80,7 +77,8 @@ function TaskDetails() {
/>
</div>
) : null}
{task.status === Status.Failed || task.status === Status.Terminated ? (
{task?.status === Status.Failed ||
task?.status === Status.Terminated ? (
<div className="flex items-center">
<Label className="w-32 shrink-0">Failure Reason</Label>
<Textarea
Expand All @@ -97,55 +95,59 @@ function TaskDetails() {
<h1>Task Parameters</h1>
</AccordionTrigger>
<AccordionContent>
<div>
<p className="py-2">Task ID: {taskId}</p>
<p className="py-2">URL: {task.request.url}</p>
<p className="py-2">
Created: {basicTimeFormat(task.created_at)}
</p>
<div className="py-2">
<Label>Navigation Goal</Label>
<Textarea
rows={5}
value={task.request.navigation_goal}
readOnly
/>
{task ? (
<div>
<p className="py-2">Task ID: {taskId}</p>
<p className="py-2">URL: {task.request.url}</p>
<p className="py-2">
Created: {basicTimeFormat(task.created_at)}
</p>
<div className="py-2">
<Label>Navigation Goal</Label>
<Textarea
rows={5}
value={task.request.navigation_goal}
readOnly
/>
</div>
<div className="py-2">
<Label>Navigation Payload</Label>
<Textarea
rows={5}
value={task.request.navigation_payload}
readOnly
/>
</div>
<div className="py-2">
<Label>Data Extraction Goal</Label>
<Textarea
rows={5}
value={task.request.data_extraction_goal}
readOnly
/>
</div>
</div>
<div className="py-2">
<Label>Navigation Payload</Label>
<Textarea
rows={5}
value={task.request.navigation_payload}
readOnly
/>
</div>
<div className="py-2">
<Label>Data Extraction Goal</Label>
<Textarea
rows={5}
value={task.request.data_extraction_goal}
readOnly
/>
</div>
</div>
) : null}
</AccordionContent>
</AccordionItem>
<AccordionItem value="task-artifacts">
<AccordionTrigger>
<h1>Screenshot</h1>
<h1>Final Screenshot</h1>
</AccordionTrigger>
<AccordionContent>
<div className="max-w-sm mx-auto">
{task.screenshot_url ? (
<Zoom zoomMargin={16}>
<AspectRatio ratio={16 / 9}>
<img src={getScreenshotURL(task)} alt="screenshot" />
</AspectRatio>
</Zoom>
) : (
<p>No screenshot</p>
)}
</div>
{task ? (
<div className="max-w-sm mx-auto">
{task.screenshot_url ? (
<Zoom zoomMargin={16}>
<AspectRatio ratio={16 / 9}>
<img src={getScreenshotURL(task)} alt="screenshot" />
</AspectRatio>
</Zoom>
) : (
<p>No screenshot</p>
)}
</div>
) : null}
</AccordionContent>
</AccordionItem>
<AccordionItem value="task-steps">
Expand Down
Loading

0 comments on commit 550ad65

Please sign in to comment.