From f2f4ed12e9aefa14751434242a158333ff04a5ed Mon Sep 17 00:00:00 2001 From: Bruno Quaresma Date: Mon, 29 Sep 2025 11:30:05 -0300 Subject: [PATCH] chore: revert redesign tasks page to match AI tools (#20013) Reverts coder/coder#19962 --- offlinedocs/pages/[[...slug]].tsx | 6 +- site/src/api/api.ts | 2 +- site/src/components/Select/Select.tsx | 2 +- .../modules/tasks/TasksLayout/TasksLayout.tsx | 16 -- .../tasks/TasksSidebar/TasksSidebar.tsx | 5 +- site/src/pages/TaskPage/TaskPage.tsx | 31 ++- site/src/pages/TasksPage/TaskPrompt.tsx | 111 ++++----- .../src/pages/TasksPage/TasksPage.stories.tsx | 216 ++++++++++++++++-- site/src/pages/TasksPage/TasksPage.tsx | 132 ++++++++++- site/src/pages/TasksPage/TasksTable.tsx | 179 +++++++++++++++ site/src/pages/TasksPage/UsersCombobox.tsx | 161 +++++++++++++ site/src/router.tsx | 11 +- site/src/testHelpers/entities.ts | 28 +++ 13 files changed, 784 insertions(+), 116 deletions(-) delete mode 100644 site/src/modules/tasks/TasksLayout/TasksLayout.tsx create mode 100644 site/src/pages/TasksPage/TasksTable.tsx create mode 100644 site/src/pages/TasksPage/UsersCombobox.tsx diff --git a/offlinedocs/pages/[[...slug]].tsx b/offlinedocs/pages/[[...slug]].tsx index 0f23059930..9444c98dca 100644 --- a/offlinedocs/pages/[[...slug]].tsx +++ b/offlinedocs/pages/[[...slug]].tsx @@ -9,7 +9,7 @@ import { DrawerOverlay, Flex, Grid, - type GridProps, + GridProps, Heading, Icon, Img, @@ -28,12 +28,12 @@ import { import fm from "front-matter"; import { readFileSync } from "fs"; import _ from "lodash"; -import type { GetStaticPaths, GetStaticProps, NextPage } from "next"; +import { GetStaticPaths, GetStaticProps, NextPage } from "next"; import Head from "next/head"; import NextLink from "next/link"; import { useRouter } from "next/router"; import path from "path"; -import type { ReactNode } from "react"; +import { ReactNode } from "react"; import { MdMenu } from "react-icons/md"; import ReactMarkdown from "react-markdown"; import rehypeRaw from "rehype-raw"; diff --git a/site/src/api/api.ts b/site/src/api/api.ts index 1e5d4d080f..a6c9aeb479 100644 --- a/site/src/api/api.ts +++ b/site/src/api/api.ts @@ -426,7 +426,7 @@ export type GetProvisionerDaemonsParams = { offline?: boolean; }; -type TasksFilter = { +export type TasksFilter = { username?: string; }; diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx index 1e288ee5a1..3d2f8ffc3b 100644 --- a/site/src/components/Select/Select.tsx +++ b/site/src/components/Select/Select.tsx @@ -23,7 +23,7 @@ export const SelectTrigger = React.forwardRef< ref={ref} id={id} className={cn( - `gap-2 flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md + `flex h-10 w-full font-medium items-center justify-between whitespace-nowrap rounded-md border border-border border-solid bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background text-content-secondary placeholder:text-content-secondary focus:outline-none, focus:ring-2 focus:ring-content-link disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 diff --git a/site/src/modules/tasks/TasksLayout/TasksLayout.tsx b/site/src/modules/tasks/TasksLayout/TasksLayout.tsx deleted file mode 100644 index 5386d394e0..0000000000 --- a/site/src/modules/tasks/TasksLayout/TasksLayout.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { FC, PropsWithChildren } from "react"; -import { Outlet } from "react-router"; -import { TasksSidebar } from "../TasksSidebar/TasksSidebar"; - -const TasksLayout: FC = () => { - return ( -
- -
- -
-
- ); -}; - -export default TasksLayout; diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx index 3f2db5fbaf..8b56fe6828 100644 --- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx +++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx @@ -41,14 +41,11 @@ export const TasksSidebar: FC = () => {
{!isCollapsed && ( )} diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx index 1931724913..771cd172a6 100644 --- a/site/src/pages/TaskPage/TaskPage.tsx +++ b/site/src/pages/TaskPage/TaskPage.tsx @@ -17,6 +17,7 @@ import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs"; import { ArrowLeftIcon, RotateCcwIcon } from "lucide-react"; import { AgentLogs } from "modules/resources/AgentLogs/AgentLogs"; import { useAgentLogs } from "modules/resources/useAgentLogs"; +import { TasksSidebar } from "modules/tasks/TasksSidebar/TasksSidebar"; import { AI_PROMPT_PARAMETER_NAME, getTaskApps, @@ -24,7 +25,13 @@ import { } from "modules/tasks/tasks"; import { WorkspaceErrorDialog } from "modules/workspaces/ErrorDialog/WorkspaceErrorDialog"; import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs"; -import { type FC, type ReactNode, useLayoutEffect, useRef } from "react"; +import { + type FC, + type PropsWithChildren, + type ReactNode, + useLayoutEffect, + useRef, +} from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import { Link as RouterLink, useParams } from "react-router"; @@ -38,6 +45,15 @@ import { TaskAppIFrame } from "./TaskAppIframe"; import { TaskApps } from "./TaskApps"; import { TaskTopbar } from "./TaskTopbar"; +const TaskPageLayout: FC = ({ children }) => { + return ( +
+ +
{children}
+
+ ); +}; + const TaskPage = () => { const { workspace: workspaceName, username } = useParams() as { workspace: string; @@ -57,7 +73,7 @@ const TaskPage = () => { if (error) { return ( - <> + {pageTitle("Error loading task")}
@@ -82,16 +98,16 @@ const TaskPage = () => {
- + ); } if (!task) { return ( - <> + {pageTitle("Loading task")} - + ); } @@ -158,11 +174,12 @@ const TaskPage = () => { } return ( - <> + {pageTitle(task.workspace.name)} + {content} - + ); }; diff --git a/site/src/pages/TasksPage/TaskPrompt.tsx b/site/src/pages/TasksPage/TaskPrompt.tsx index b47a29867e..2de93005ae 100644 --- a/site/src/pages/TasksPage/TaskPrompt.tsx +++ b/site/src/pages/TasksPage/TaskPrompt.tsx @@ -29,7 +29,7 @@ import { } from "components/Tooltip/Tooltip"; import { useAuthenticated } from "hooks/useAuthenticated"; import { useExternalAuth } from "hooks/useExternalAuth"; -import { ArrowUpIcon, RedoIcon, RotateCcwIcon } from "lucide-react"; +import { RedoIcon, RotateCcwIcon, SendIcon } from "lucide-react"; import { AI_PROMPT_PARAMETER_NAME } from "modules/tasks/tasks"; import { type FC, useEffect, useState } from "react"; import { useMutation, useQuery, useQueryClient } from "react-query"; @@ -106,8 +106,8 @@ const TaskPromptSkeleton: FC = () => { {/* Bottom controls skeleton */}
- - + +
@@ -160,17 +160,15 @@ const CreateTaskForm: FC = ({ templates, onSuccess }) => { } = useExternalAuth(selectedTemplate.active_version_id); // Fetch presets when template changes - const { data: presets } = useQuery( + const { data: presets, isLoading: isLoadingPresets } = useQuery( templateVersionPresets(selectedTemplate.active_version_id), ); + const defaultPreset = presets?.find((p) => p.Default); // Handle preset selection when data changes useEffect(() => { - if (presets && presets.length > 0) { - const defaultPreset = presets.find((p) => p.Default) || presets[0]; - setSelectedPresetId(defaultPreset.ID); - } - }, [presets]); + setSelectedPresetId(defaultPreset?.ID); + }, [defaultPreset?.ID]); // Extract AI prompt from selected preset const selectedPreset = presets?.find((p) => p.ID === selectedPresetId); @@ -227,7 +225,7 @@ const CreateTaskForm: FC = ({ templates, onSuccess }) => { {externalAuthError && }