diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
index 9707532d82ded..1b1770f586768 100644
--- a/site/src/pages/TasksPage/TasksPage.stories.tsx
+++ b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
import { expect, spyOn, userEvent, waitFor, within } from "@storybook/test";
import { API } from "api/api";
import { MockUsers } from "pages/UsersPage/storybookData/users";
+import { reactRouterParameters } from "storybook-addon-remix-react-router";
import {
MockTemplate,
MockTemplateVersionExternalAuthGithub,
@@ -132,6 +133,23 @@ const newTaskData = {
export const CreateTaskSuccessfully: Story = {
decorators: [withProxyProvider()],
+ parameters: {
+ reactRouter: reactRouterParameters({
+ location: {
+ path: "/tasks",
+ },
+ routing: [
+ {
+ path: "/tasks",
+ useStoryElement: true,
+ },
+ {
+ path: "/tasks/:ownerName/:workspaceName",
+ element:
Task page
,
+ },
+ ],
+ }),
+ },
beforeEach: () => {
spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
spyOn(data, "fetchTasks")
@@ -150,10 +168,8 @@ export const CreateTaskSuccessfully: Story = {
await userEvent.click(submitButton);
});
- await step("Verify task in the table", async () => {
- await canvas.findByRole("row", {
- name: new RegExp(newTaskData.prompt, "i"),
- });
+ await step("Redirects to the task page", async () => {
+ await canvas.findByText(/task page/i);
});
},
};
@@ -187,7 +203,7 @@ export const CreateTaskError: Story = {
},
};
-export const WithExternalAuth: Story = {
+export const WithAuthenticatedExternalAuth: Story = {
decorators: [withProxyProvider()],
beforeEach: () => {
spyOn(data, "fetchTasks")
@@ -201,26 +217,17 @@ export const WithExternalAuth: Story = {
play: async ({ canvasElement, step }) => {
const canvas = within(canvasElement);
- await step("Run task", async () => {
- const prompt = await canvas.findByLabelText(/prompt/i);
- await userEvent.type(prompt, newTaskData.prompt);
- const submitButton = canvas.getByRole("button", { name: /run task/i });
- await waitFor(() => expect(submitButton).toBeEnabled());
- await userEvent.click(submitButton);
- });
-
- await step("Verify task in the table", async () => {
- await canvas.findByRole("row", {
- name: new RegExp(newTaskData.prompt, "i"),
- });
- });
-
await step("Does not render external auth", async () => {
expect(
canvas.queryByText(/external authentication/),
).not.toBeInTheDocument();
});
},
+ parameters: {
+ chromatic: {
+ disableSnapshot: true,
+ },
+ },
};
export const MissingExternalAuth: Story = {
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
index 10781434e5358..e9a1015607a33 100644
--- a/site/src/pages/TasksPage/TasksPage.tsx
+++ b/site/src/pages/TasksPage/TasksPage.tsx
@@ -52,7 +52,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";
@@ -163,6 +163,7 @@ const TaskFormSection: FC<{
filter: TasksFilter;
onFilterChange: (filter: TasksFilter) => void;
}> = ({ showFilter, filter, onFilterChange }) => {
+ const navigate = useNavigate();
const {
data: templates,
error,
@@ -190,7 +191,14 @@ const TaskFormSection: FC<{
}
return (
<>
-
+ {
+ navigate(
+ `/tasks/${task.workspace.owner_name}/${task.workspace.name}`,
+ );
+ }}
+ />
{showFilter && (
)}
@@ -202,9 +210,10 @@ type CreateTaskMutationFnProps = { prompt: string; templateId: string };
type TaskFormProps = {
templates: Template[];
+ onSuccess: (task: Task) => void;
};
-const TaskForm: FC = ({ templates }) => {
+const TaskForm: FC = ({ templates, onSuccess }) => {
const { user } = useAuthenticated();
const queryClient = useQueryClient();
const [selectedTemplateId, setSelectedTemplateId] = useState(
@@ -229,10 +238,11 @@ const TaskForm: FC = ({ 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);
},
});
@@ -249,7 +259,6 @@ const TaskForm: FC = ({ templates }) => {
prompt,
templateId: templateID,
});
- form.reset();
} catch (error) {
const message = getErrorMessage(error, "Error creating task");
const detail = getErrorDetail(error) ?? "Please try again";