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";