From 1176f0eb9296883be90d16eecbb01d2e11d19431 Mon Sep 17 00:00:00 2001 From: Shuchang Zheng Date: Thu, 5 Dec 2024 19:50:45 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=84=20synced=20local=20'skyvern-fronte?= =?UTF-8?q?nd/src/'=20with=20remote=20'skyvern-frontend/src/'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit > [!IMPORTANT] > Adds new UI components for form management, updates routing, and refactors task management in Skyvern. > > - **New Features**: > - Adds `FormsPage`, `FormsPageLayout`, and `FormsRunHistory` for form management. > - Introduces `ComingSoonPage` for future features like Jobs, Invoices, Purchasing, and Government. > - **Routing**: > - Updates `router.tsx` and `cloud/router.tsx` to include new routes for forms and upcoming features. > - Changes default navigation to `/tasks` instead of `/create`. > - **UI Components**: > - Adds `NavLinkGroup` and `StatusFilterDropdown` for navigation and filtering. > - Introduces new icons: `BagIcon`, `GovernmentIcon`, `ReceiptIcon`, `ToolIcon`. > - **Task Management**: > - Refactors `CreateNewTaskForm`, `RetryTask`, and `TaskDetails` to support new form features. > - Updates `TaskHistory` and `TasksPage` for new filtering and navigation options. > - **Miscellaneous**: > - Updates `Header` and `SideNav` for improved navigation and external links. > - Modifies `CreateTaskRequest` type to include optional fields. > > This description was created by [Ellipsis](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral) for 2568009fcb837a52e35c3b84a3db91b8b5ce3862. It will automatically update as commits are pushed. --- skyvern-frontend/src/api/types.ts | 21 +-- .../src/components/NavLinkGroup.tsx | 87 ++++++++++ .../src/components/StatusFilterDropdown.tsx | 57 +++++++ .../src/components/icons/BagIcon.tsx | 26 +++ .../src/components/icons/GovernmentIcon.tsx | 26 +++ .../src/components/icons/ReceiptIcon.tsx | 26 +++ .../src/components/icons/ToolIcon.tsx | 26 +++ skyvern-frontend/src/router.tsx | 40 ++--- skyvern-frontend/src/routes/root/SideNav.tsx | 104 ++++-------- .../src/routes/root/SidebarContent.tsx | 2 +- .../routes/tasks/create/CreateNewTaskForm.tsx | 3 +- .../src/routes/tasks/create/PromptBox.tsx | 20 ++- .../routes/tasks/create/retry/RetryTask.tsx | 12 +- .../src/routes/tasks/detail/TaskDetails.tsx | 2 +- .../routes/tasks/detail/TaskParameters.tsx | 4 +- .../src/routes/tasks/list/TaskHistory.tsx | 155 ++++++++++++------ .../src/routes/tasks/list/TaskList.tsx | 59 ------- .../src/routes/tasks/list/TasksPage.tsx | 43 +++++ 18 files changed, 479 insertions(+), 234 deletions(-) create mode 100644 skyvern-frontend/src/components/NavLinkGroup.tsx create mode 100644 skyvern-frontend/src/components/StatusFilterDropdown.tsx create mode 100644 skyvern-frontend/src/components/icons/BagIcon.tsx create mode 100644 skyvern-frontend/src/components/icons/GovernmentIcon.tsx create mode 100644 skyvern-frontend/src/components/icons/ReceiptIcon.tsx create mode 100644 skyvern-frontend/src/components/icons/ToolIcon.tsx delete mode 100644 skyvern-frontend/src/routes/tasks/list/TaskList.tsx create mode 100644 skyvern-frontend/src/routes/tasks/list/TasksPage.tsx diff --git a/skyvern-frontend/src/api/types.ts b/skyvern-frontend/src/api/types.ts index 526995b32..c6ecedf1f 100644 --- a/skyvern-frontend/src/api/types.ts +++ b/skyvern-frontend/src/api/types.ts @@ -93,17 +93,18 @@ export type TaskApiResponse = { }; export type CreateTaskRequest = { - title: string | null; + title?: string | null; url: string; - webhook_callback_url: string | null; - navigation_goal: string | null; - data_extraction_goal: string | null; - navigation_payload: Record | string | null; - extracted_information_schema: Record | string | null; - error_code_mapping: Record | null; - proxy_location: ProxyLocation | null; - totp_verification_url: string | null; - totp_identifier: string | null; + webhook_callback_url?: string | null; + navigation_goal?: string | null; + data_extraction_goal?: string | null; + navigation_payload?: Record | string | null; + extracted_information_schema?: Record | string | null; + error_code_mapping?: Record | null; + proxy_location?: ProxyLocation | null; + totp_verification_url?: string | null; + totp_identifier?: string | null; + application?: string | null; }; export type User = { diff --git a/skyvern-frontend/src/components/NavLinkGroup.tsx b/skyvern-frontend/src/components/NavLinkGroup.tsx new file mode 100644 index 000000000..f65401b63 --- /dev/null +++ b/skyvern-frontend/src/components/NavLinkGroup.tsx @@ -0,0 +1,87 @@ +import { useSidebarStore } from "@/store/SidebarStore"; +import { cn } from "@/util/utils"; +import { NavLink, useMatches } from "react-router-dom"; +import { Badge } from "./ui/badge"; + +type Props = { + title: string; + links: Array<{ + label: string; + to: string; + disabled?: boolean; + icon?: React.ReactNode; + }>; +}; + +function NavLinkGroup({ title, links }: Props) { + const { collapsed } = useSidebarStore(); + const matches = useMatches(); + const groupIsActive = matches.some((match) => { + const inputs = links.map((link) => link.to); + return inputs.includes(match.pathname); + }); + + return ( +
+
+
+ {title} +
+
+
+ {links.map((link) => { + return ( + { + return cn( + "block rounded-lg py-2 pl-3 text-slate-400 hover:bg-muted hover:text-primary", + { + "bg-muted": isActive, + }, + { + "text-primary": groupIsActive, + "px-3": collapsed, + }, + ); + }} + > +
+
+ {link.icon} + {!collapsed && link.label} +
+ {!collapsed && link.disabled && ( + + Training + + )} +
+ + ); + })} +
+
+ ); +} + +export { NavLinkGroup }; diff --git a/skyvern-frontend/src/components/StatusFilterDropdown.tsx b/skyvern-frontend/src/components/StatusFilterDropdown.tsx new file mode 100644 index 000000000..86a1649e7 --- /dev/null +++ b/skyvern-frontend/src/components/StatusFilterDropdown.tsx @@ -0,0 +1,57 @@ +import { ChevronDownIcon } from "@radix-ui/react-icons"; +import { Button } from "./ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuTrigger, +} from "./ui/dropdown-menu"; +import { Checkbox } from "./ui/checkbox"; +import { Status } from "@/api/types"; + +type Item = { + label: string; + value: Status; +}; + +type Props = { + options: Array; + values: Array; + onChange: (values: Array) => void; +}; + +function StatusFilterDropdown({ options, values, onChange }: Props) { + return ( + + + + + + {options.map((item) => { + return ( +
+ { + if (checked) { + onChange([...values, item.value]); + } else { + onChange(values.filter((value) => value !== item.value)); + } + }} + /> + +
+ ); + })} + + + ); +} + +export { StatusFilterDropdown }; diff --git a/skyvern-frontend/src/components/icons/BagIcon.tsx b/skyvern-frontend/src/components/icons/BagIcon.tsx new file mode 100644 index 000000000..a519dcb6e --- /dev/null +++ b/skyvern-frontend/src/components/icons/BagIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function BagIcon({ className }: Props) { + return ( + + + + ); +} + +export { BagIcon }; diff --git a/skyvern-frontend/src/components/icons/GovernmentIcon.tsx b/skyvern-frontend/src/components/icons/GovernmentIcon.tsx new file mode 100644 index 000000000..9cf0517fd --- /dev/null +++ b/skyvern-frontend/src/components/icons/GovernmentIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function GovernmentIcon({ className }: Props) { + return ( + + + + ); +} + +export { GovernmentIcon }; diff --git a/skyvern-frontend/src/components/icons/ReceiptIcon.tsx b/skyvern-frontend/src/components/icons/ReceiptIcon.tsx new file mode 100644 index 000000000..ba08d1c71 --- /dev/null +++ b/skyvern-frontend/src/components/icons/ReceiptIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function ReceiptIcon({ className }: Props) { + return ( + + + + ); +} + +export { ReceiptIcon }; diff --git a/skyvern-frontend/src/components/icons/ToolIcon.tsx b/skyvern-frontend/src/components/icons/ToolIcon.tsx new file mode 100644 index 000000000..5f6b5a016 --- /dev/null +++ b/skyvern-frontend/src/components/icons/ToolIcon.tsx @@ -0,0 +1,26 @@ +type Props = { + className?: string; +}; + +function ToolIcon({ className }: Props) { + return ( + + + + ); +} + +export { ToolIcon }; diff --git a/skyvern-frontend/src/router.tsx b/skyvern-frontend/src/router.tsx index 7e03ce3b1..b426edbfd 100644 --- a/skyvern-frontend/src/router.tsx +++ b/skyvern-frontend/src/router.tsx @@ -4,15 +4,13 @@ import { Settings } from "./routes/settings/Settings"; import { SettingsPageLayout } from "./routes/settings/SettingsPageLayout"; import { TasksPageLayout } from "./routes/tasks/TasksPageLayout"; import { CreateNewTaskFormPage } from "./routes/tasks/create/CreateNewTaskFormPage"; -import { CreateNewTaskLayout } from "./routes/tasks/create/CreateNewTaskLayout"; -import { TaskTemplates } from "./routes/tasks/create/TaskTemplates"; import { RetryTask } from "./routes/tasks/create/retry/RetryTask"; import { StepArtifactsLayout } from "./routes/tasks/detail/StepArtifactsLayout"; import { TaskActions } from "./routes/tasks/detail/TaskActions"; import { TaskDetails } from "./routes/tasks/detail/TaskDetails"; import { TaskParameters } from "./routes/tasks/detail/TaskParameters"; import { TaskRecording } from "./routes/tasks/detail/TaskRecording"; -import { TaskList } from "./routes/tasks/list/TaskList"; +import { TasksPage } from "./routes/tasks/list/TasksPage"; import { WorkflowPage } from "./routes/workflows/WorkflowPage"; import { WorkflowRun } from "./routes/workflows/WorkflowRun"; import { WorkflowRunParameters } from "./routes/workflows/WorkflowRunParameters"; @@ -27,7 +25,7 @@ const router = createBrowserRouter([ children: [ { index: true, - element: , + element: , }, { path: "tasks", @@ -35,7 +33,21 @@ const router = createBrowserRouter([ children: [ { index: true, - element: , + element: , + }, + { + path: "create", + element: , + children: [ + { + path: ":template", + element: , + }, + { + path: "retry/:taskId", + element: , + }, + ], }, { path: ":taskId", @@ -65,24 +77,6 @@ const router = createBrowserRouter([ }, ], }, - { - path: "create", - element: , - children: [ - { - index: true, - element: , - }, - { - path: ":template", - element: , - }, - { - path: "retry/:taskId", - element: , - }, - ], - }, { path: "workflows", element: , diff --git a/skyvern-frontend/src/routes/root/SideNav.tsx b/skyvern-frontend/src/routes/root/SideNav.tsx index 97f8d0f51..9a6be3482 100644 --- a/skyvern-frontend/src/routes/root/SideNav.tsx +++ b/skyvern-frontend/src/routes/root/SideNav.tsx @@ -1,75 +1,43 @@ +import { RobotIcon } from "@/components/icons/RobotIcon"; +import { NavLinkGroup } from "@/components/NavLinkGroup"; +import { useSidebarStore } from "@/store/SidebarStore"; import { cn } from "@/util/utils"; -import { - GearIcon, - LightningBoltIcon, - ListBulletIcon, - PlusCircledIcon, -} from "@radix-ui/react-icons"; -import { NavLink } from "react-router-dom"; +import { GearIcon, LightningBoltIcon } from "@radix-ui/react-icons"; -type Props = { - collapsed: boolean; -}; +function SideNav() { + const { collapsed } = useSidebarStore(); -function SideNav({ collapsed }: Props) { return ( -