🔄 synced local 'skyvern-frontend/src/' with remote 'skyvern-frontend/…

…src/'

<!-- ELLIPSIS_HIDDEN -->

> [!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.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=Skyvern-AI%2Fskyvern-cloud&utm_source=github&utm_medium=referral)<sup> for 2568009fcb837a52e35c3b84a3db91b8b5ce3862. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

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, unknown> | string | null;
-  extracted_information_schema: Record<string, unknown> | string | null;
-  error_code_mapping: Record<string, string> | 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, unknown> | string | null;
+  extracted_information_schema?: Record<string, unknown> | string | null;
+  error_code_mapping?: Record<string, string> | null;
+  proxy_location?: ProxyLocation | null;
+  totp_verification_url?: string | null;
+  totp_identifier?: string | null;
+  application?: string | null;
 };
 
 export type User = {

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 (
+    <div
+      className={cn("flex flex-col gap-[0.625rem]", {
+        "items-center": collapsed,
+      })}
+    >
+      <div
+        className={cn("py-2 text-slate-400", {
+          "text-primary": groupIsActive,
+        })}
+      >
+        <div
+          className={cn({
+            "text-center": collapsed,
+          })}
+        >
+          {title}
+        </div>
+      </div>
+      <div className="space-y-2">
+        {links.map((link) => {
+          return (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              className={({ isActive }) => {
+                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,
+                  },
+                );
+              }}
+            >
+              <div className="flex justify-between">
+                <div className="flex items-center gap-2">
+                  {link.icon}
+                  {!collapsed && link.label}
+                </div>
+                {!collapsed && link.disabled && (
+                  <Badge
+                    className="rounded-[40px] px-2 py-1"
+                    style={{
+                      backgroundColor: groupIsActive ? "#301615" : "#1E1016",
+                      color: groupIsActive ? "#EA580C" : "#8D3710",
+                    }}
+                  >
+                    Training
+                  </Badge>
+                )}
+              </div>
+            </NavLink>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { NavLinkGroup };

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<Item>;
+  values: Array<Status>;
+  onChange: (values: Array<Status>) => void;
+};
+
+function StatusFilterDropdown({ options, values, onChange }: Props) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">
+          Filter by Status <ChevronDownIcon className="ml-2" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {options.map((item) => {
+          return (
+            <div
+              key={item.value}
+              className="flex items-center gap-2 p-2 text-sm"
+            >
+              <Checkbox
+                id={item.value}
+                checked={values.includes(item.value)}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    onChange([...values, item.value]);
+                  } else {
+                    onChange(values.filter((value) => value !== item.value));
+                  }
+                }}
+              />
+              <label htmlFor={item.value}>{item.label}</label>
+            </div>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export { StatusFilterDropdown };

skyvern-frontend/src/components/icons/BagIcon.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  className?: string;
+};
+
+function BagIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M16.0004 9V6C16.0004 3.79086 14.2095 2 12.0004 2C9.79123 2 8.00037 3.79086 8.00037 6V9M3.59237 10.352L2.99237 16.752C2.82178 18.5717 2.73648 19.4815 3.03842 20.1843C3.30367 20.8016 3.76849 21.3121 4.35839 21.6338C5.0299 22 5.94374 22 7.77142 22H16.2293C18.057 22 18.9708 22 19.6423 21.6338C20.2322 21.3121 20.6971 20.8016 20.9623 20.1843C21.2643 19.4815 21.179 18.5717 21.0084 16.752L20.4084 10.352C20.2643 8.81535 20.1923 8.04704 19.8467 7.46616C19.5424 6.95458 19.0927 6.54511 18.555 6.28984C17.9444 6 17.1727 6 15.6293 6L8.37142 6C6.82806 6 6.05638 6 5.44579 6.28984C4.90803 6.54511 4.45838 6.95458 4.15403 7.46616C3.80846 8.04704 3.73643 8.81534 3.59237 10.352Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { BagIcon };

skyvern-frontend/src/components/icons/GovernmentIcon.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  className?: string;
+};
+
+function GovernmentIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M5 9.00002V17M9.5 9.00002V17M14.5 9.00002V17M19 9.00002V17M3 18.6L3 19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7952 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7952 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V18.6C21 18.04 21 17.7599 20.891 17.546C20.7951 17.3579 20.6422 17.2049 20.454 17.109C20.2401 17 19.9601 17 19.4 17H4.6C4.03995 17 3.75992 17 3.54601 17.109C3.35785 17.2049 3.20487 17.3579 3.10899 17.546C3 17.7599 3 18.04 3 18.6ZM11.6529 3.07715L4.25291 4.7216C3.80585 4.82094 3.58232 4.87062 3.41546 4.99082C3.26829 5.09685 3.15273 5.24092 3.08115 5.40759C3 5.59654 3 5.82553 3 6.28349L3 7.40002C3 7.96007 3 8.2401 3.10899 8.45401C3.20487 8.64217 3.35785 8.79515 3.54601 8.89103C3.75992 9.00002 4.03995 9.00002 4.6 9.00002H19.4C19.9601 9.00002 20.2401 9.00002 20.454 8.89103C20.6422 8.79515 20.7951 8.64217 20.891 8.45401C21 8.2401 21 7.96007 21 7.40002V6.2835C21 5.82553 21 5.59655 20.9188 5.40759C20.8473 5.24092 20.7317 5.09685 20.5845 4.99082C20.4177 4.87062 20.1942 4.82094 19.7471 4.7216L12.3471 3.07715C12.2176 3.04837 12.1528 3.03398 12.0874 3.02824C12.0292 3.02314 11.9708 3.02314 11.9126 3.02824C11.8472 3.03398 11.7824 3.04837 11.6529 3.07715Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { GovernmentIcon };

skyvern-frontend/src/components/icons/ReceiptIcon.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  className?: string;
+};
+
+function ReceiptIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M4 7.8C4 6.11984 4 5.27976 4.32698 4.63803C4.6146 4.07354 5.07354 3.6146 5.63803 3.32698C6.27976 3 7.11984 3 8.8 3H15.2C16.8802 3 17.7202 3 18.362 3.32698C18.9265 3.6146 19.3854 4.07354 19.673 4.63803C20 5.27976 20 6.11984 20 7.8V21L17.25 19L14.75 21L12 19L9.25 21L6.75 19L4 21V7.8Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ReceiptIcon };

skyvern-frontend/src/components/icons/ToolIcon.tsx

@@ -0,0 +1,26 @@
+type Props = {
+  className?: string;
+};
+
+function ToolIcon({ className }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M15.6316 7.63137C15.2356 7.23535 15.0376 7.03735 14.9634 6.80902C14.8981 6.60817 14.8981 6.39183 14.9634 6.19098C15.0376 5.96265 15.2356 5.76465 15.6316 5.36863L18.47 2.53026C17.7168 2.18962 16.8806 2 16.0002 2C12.6865 2 10.0002 4.68629 10.0002 8C10.0002 8.49104 10.0592 8.9683 10.1705 9.42509C10.2896 9.91424 10.3492 10.1588 10.3387 10.3133C10.3276 10.4751 10.3035 10.5612 10.2289 10.7051C10.1576 10.8426 10.0211 10.9791 9.74804 11.2522L3.50023 17.5C2.6718 18.3284 2.6718 19.6716 3.50023 20.5C4.32865 21.3284 5.6718 21.3284 6.50023 20.5L12.748 14.2522C13.0211 13.9791 13.1576 13.8426 13.2951 13.7714C13.4391 13.6968 13.5251 13.6727 13.6869 13.6616C13.8414 13.651 14.086 13.7106 14.5751 13.8297C15.0319 13.941 15.5092 14 16.0002 14C19.3139 14 22.0002 11.3137 22.0002 8C22.0002 7.11959 21.8106 6.28347 21.47 5.53026L18.6316 8.36863C18.2356 8.76465 18.0376 8.96265 17.8092 9.03684C17.6084 9.1021 17.3921 9.1021 17.1912 9.03684C16.9629 8.96265 16.7649 8.76465 16.3689 8.36863L15.6316 7.63137Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { ToolIcon };

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,15 +25,29 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: <Navigate to="/create" />,
+        element: <Navigate to="/tasks" />,
       },
       {
         path: "tasks",
         element: <TasksPageLayout />,
         children: [
           {
             index: true,
-            element: <TaskList />,
+            element: <TasksPage />,
+          },
+          {
+            path: "create",
+            element: <Outlet />,
+            children: [
+              {
+                path: ":template",
+                element: <CreateNewTaskFormPage />,
+              },
+              {
+                path: "retry/:taskId",
+                element: <RetryTask />,
+              },
+            ],
           },
           {
             path: ":taskId",
@@ -65,24 +77,6 @@ const router = createBrowserRouter([
           },
         ],
       },
-      {
-        path: "create",
-        element: <CreateNewTaskLayout />,
-        children: [
-          {
-            index: true,
-            element: <TaskTemplates />,
-          },
-          {
-            path: ":template",
-            element: <CreateNewTaskFormPage />,
-          },
-          {
-            path: "retry/:taskId",
-            element: <RetryTask />,
-          },
-        ],
-      },
       {
         path: "workflows",
         element: <WorkflowsPageLayout />,