feat: redirect to the task page after creation

BrunoQuaresma · BrunoQuaresma · commit 978e21823759 · 2025-06-26T20:53:31.000Z
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -2,7 +2,7 @@ import Skeleton from "@mui/material/Skeleton";
 import { API } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import { disabledRefetchOptions } from "api/queries/util";
-import type { Template } from "api/typesGenerated";
+import type { Template, Workspace } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/Avatar/AvatarData";
@@ -46,7 +46,7 @@ import { generateWorkspaceName } from "modules/workspaces/generateWorkspaceName"
 import { type FC, type ReactNode, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useNavigate } from "react-router-dom";
 import TextareaAutosize from "react-textarea-autosize";
 import { pageTitle } from "utils/page";
 import { relativeTime } from "utils/time";
@@ -157,6 +157,7 @@ const TaskFormSection: FC<{
 	filter: TasksFilter;
 	onFilterChange: (filter: TasksFilter) => void;
 }> = ({ showFilter, filter, onFilterChange }) => {
+	const navigate = useNavigate();
 	const {
 		data: templates,
 		error,
@@ -184,7 +185,14 @@ const TaskFormSection: FC<{
 	}
 	return (
 		<>
-			<TaskForm templates={templates} />
+			<TaskForm
+				templates={templates}
+				onSuccess={(task) => {
+					navigate(
+						`/tasks/${task.workspace.owner_name}/${task.workspace.name}`,
+					);
+				}}
+			/>
 			{showFilter && (
 				<TasksFilter filter={filter} onFilterChange={onFilterChange} />
 			)}
@@ -196,9 +204,10 @@ type CreateTaskMutationFnProps = { prompt: string; templateId: string };
 
 type TaskFormProps = {
 	templates: Template[];
+	onSuccess: (task: Task) => void;
 };
 
-const TaskForm: FC<TaskFormProps> = ({ templates }) => {
+const TaskForm: FC<TaskFormProps> = ({ templates, onSuccess }) => {
 	const { user } = useAuthenticated();
 	const queryClient = useQueryClient();
 
@@ -220,10 +229,11 @@ const TaskForm: FC<TaskFormProps> = ({ templates }) => {
 	const createTaskMutation = useMutation({
 		mutationFn: async ({ prompt, templateId }: CreateTaskMutationFnProps) =>
 			data.createTask(prompt, user.id, templateId),
-		onSuccess: async () => {
+		onSuccess: async (task) => {
 			await queryClient.invalidateQueries({
 				queryKey: ["tasks"],
 			});
+			onSuccess(task);
 		},
 	});
 
@@ -244,7 +254,6 @@ const TaskForm: FC<TaskFormProps> = ({ templates }) => {
 				prompt,
 				templateId: templateID,
 			});
-			form.reset();
 		} catch (error) {
 			const message = getErrorMessage(error, "Error creating task");
 			const detail = getErrorDetail(error) ?? "Please try again";
