Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2df9c5b

Browse files
feat: add sidebar to task page (#19944)
**Demo:**https://github.com/user-attachments/assets/83363666-ed0e-488a-84b8-bb46517a2bb8- Integrate sidebar into the task page- Minor cosmetic changes- Fix scrolling issues in tasks list
1 parent669984c commit2df9c5b

File tree

4 files changed

+72
-46
lines changed

4 files changed

+72
-46
lines changed

‎site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { getErrorMessage } from "api/errors";
33
import{cva}from"class-variance-authority";
44
import{Button}from"components/Button/Button";
55
import{CoderIcon}from"components/Icons/CoderIcon";
6+
import{ScrollArea}from"components/ScrollArea/ScrollArea";
7+
import{Skeleton}from"components/Skeleton/Skeleton";
68
import{
79
Tooltip,
810
TooltipContent,
@@ -33,18 +35,15 @@ export const TasksSidebar: FC = () => {
3335
className={cn(
3436
"h-full flex flex-col flex-1 min-h-0 gap-6 bg-surface-secondary max-w-80",
3537
"border-solid border-0 border-r transition-all p-3",
36-
{"max-w-16 items-center":isCollapsed},
38+
{"max-w-14":isCollapsed},
3739
)}
3840
>
3941
<divclassName="flex items-center place-content-between">
4042
{!isCollapsed&&(
4143
<Button
4244
size="icon"
4345
variant="subtle"
44-
className={cn([
45-
"size-8 p-0 transition-[margin,opacity]",
46-
"group-data-[collapsible=icon]:-ml-10 group-data-[collapsible=icon]:opacity-0",
47-
])}
46+
className={cn(["size-8 p-0 transition-[margin,opacity]"])}
4847
>
4948
<CoderIconclassName="fill-content-primary !size-6 !p-0"/>
5049
</Button>
@@ -129,36 +128,34 @@ const TasksSidebarGroup: FC<TasksSidebarGroupProps> = ({ username }) => {
129128
});
130129

131130
return(
132-
<divclassName="flex flex-col flex-1 gap-2 min-h-0 transition-[opacity] group-data-[collapsible=icon]:opacity-0">
133-
<divclassName="text-content-secondary text-xs">Tasks</div>
134-
<divclassName="flex flex-col flex-1 gap-1 min-h-0 overflow-y-auto">
135-
{tasksQuery.data ?(
136-
tasksQuery.data.length>0 ?(
137-
tasksQuery.data.map((t)=>(
138-
<TaskSidebarMenuItemkey={t.workspace.id}task={t}/>
139-
))
140-
) :(
131+
<ScrollArea>
132+
<divclassName="flex flex-col gap-2">
133+
<divclassName="text-content-secondary text-xs">Tasks</div>
134+
<divclassName="flex flex-col flex-1 gap-1">
135+
{tasksQuery.data ?(
136+
tasksQuery.data.length>0 ?(
137+
tasksQuery.data.map((t)=>(
138+
<TaskSidebarMenuItemkey={t.workspace.id}task={t}/>
139+
))
140+
) :(
141+
<divclassName="text-content-secondary text-xs p-4 border-border border-solid rounded text-center">
142+
No tasks found
143+
</div>
144+
)
145+
) :tasksQuery.error ?(
141146
<divclassName="text-content-secondary text-xs p-4 border-border border-solid rounded text-center">
142-
No tasks found
147+
{getErrorMessage(tasksQuery.error,"Failed to load tasks")}
143148
</div>
144-
)
145-
) :tasksQuery.error ?(
146-
<divclassName="text-content-secondary text-xs p-4 border-border border-solid rounded text-center">
147-
{getErrorMessage(tasksQuery.error,"Failed to load tasks")}
148-
</div>
149-
) :(
150-
<divclassName="flex flex-col gap-1">
151-
{Array.from({length:5}).map((_,index)=>(
152-
<div
153-
key={index}
154-
aria-hidden={true}
155-
className="h-8 w-full rounded-lg bg-surface-tertiary animate-pulse"
156-
/>
157-
))}
158-
</div>
159-
)}
149+
) :(
150+
<divclassName="flex flex-col gap-1">
151+
{Array.from({length:5}).map((_,index)=>(
152+
<SkeletonclassName="h-8 w-full"key={index}/>
153+
))}
154+
</div>
155+
)}
156+
</div>
160157
</div>
161-
</div>
158+
</ScrollArea>
162159
);
163160
};
164161

‎site/src/pages/TaskPage/TaskPage.stories.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import {
22
MockFailedWorkspace,
33
MockStartingWorkspace,
44
MockStoppedWorkspace,
5+
MockTasks,
6+
MockUserOwner,
57
MockWorkspace,
68
MockWorkspaceAgentLogSource,
79
MockWorkspaceAgentReady,
@@ -12,6 +14,7 @@ import {
1214
mockApiError,
1315
}from"testHelpers/entities";
1416
import{
17+
withAuthProvider,
1518
withGlobalSnackbar,
1619
withProxyProvider,
1720
withWebSocket,
@@ -30,9 +33,21 @@ import TaskPage, { data, WorkspaceDoesNotHaveAITaskError } from "./TaskPage";
3033
constmeta:Meta<typeofTaskPage>={
3134
title:"pages/TaskPage",
3235
component:TaskPage,
33-
decorators:[withProxyProvider()],
36+
decorators:[withProxyProvider(),withAuthProvider],
37+
beforeEach:()=>{
38+
spyOn(API.experimental,"getTasks").mockResolvedValue(MockTasks);
39+
},
3440
parameters:{
3541
layout:"fullscreen",
42+
user:MockUserOwner,
43+
reactRouter:reactRouterParameters({
44+
location:{
45+
pathParams:{
46+
workspace:MockTasks[0].workspace.name,
47+
},
48+
},
49+
routing:{path:"/tasks/:workspace"},
50+
}),
3651
},
3752
};
3853

‎site/src/pages/TaskPage/TaskPage.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,17 @@ import { useWorkspaceBuildLogs } from "hooks/useWorkspaceBuildLogs";
1717
import{ArrowLeftIcon,RotateCcwIcon}from"lucide-react";
1818
import{AgentLogs}from"modules/resources/AgentLogs/AgentLogs";
1919
import{useAgentLogs}from"modules/resources/useAgentLogs";
20+
import{TasksSidebar}from"modules/tasks/TasksSidebar/TasksSidebar";
2021
import{AI_PROMPT_PARAMETER_NAME,typeTask}from"modules/tasks/tasks";
2122
import{WorkspaceErrorDialog}from"modules/workspaces/ErrorDialog/WorkspaceErrorDialog";
2223
import{WorkspaceBuildLogs}from"modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
23-
import{typeFC,typeReactNode,useLayoutEffect,useRef}from"react";
24+
import{
25+
typeFC,
26+
typePropsWithChildren,
27+
typeReactNode,
28+
useLayoutEffect,
29+
useRef,
30+
}from"react";
2431
import{Helmet}from"react-helmet-async";
2532
import{useMutation,useQuery,useQueryClient}from"react-query";
2633
import{Panel,PanelGroup,PanelResizeHandle}from"react-resizable-panels";
@@ -35,6 +42,15 @@ import { TaskApps } from "./TaskApps";
3542
import{TaskSidebar}from"./TaskSidebar";
3643
import{TaskTopbar}from"./TaskTopbar";
3744

45+
constTaskPageLayout:FC<PropsWithChildren>=({ children})=>{
46+
return(
47+
<divclassName="flex items-stretch h-full">
48+
<TasksSidebar/>
49+
<divclassName="flex flex-col h-full flex-1">{children}</div>
50+
</div>
51+
);
52+
};
53+
3854
constTaskPage=()=>{
3955
const{workspace:workspaceName, username}=useParams()as{
4056
workspace:string;
@@ -54,7 +70,7 @@ const TaskPage = () => {
5470

5571
if(error){
5672
return(
57-
<>
73+
<TaskPageLayout>
5874
<Helmet>
5975
<title>{pageTitle("Error loading task")}</title>
6076
</Helmet>
@@ -81,18 +97,18 @@ const TaskPage = () => {
8197
</div>
8298
</div>
8399
</div>
84-
</>
100+
</TaskPageLayout>
85101
);
86102
}
87103

88104
if(!task){
89105
return(
90-
<>
106+
<TaskPageLayout>
91107
<Helmet>
92108
<title>{pageTitle("Loading task")}</title>
93109
</Helmet>
94-
<Loaderfullscreen/>
95-
</>
110+
<LoaderclassName="w-full h-full"/>
111+
</TaskPageLayout>
96112
);
97113
}
98114

@@ -142,16 +158,14 @@ const TaskPage = () => {
142158
}
143159

144160
return(
145-
<>
161+
<TaskPageLayout>
146162
<Helmet>
147163
<title>{pageTitle(task.workspace.name)}</title>
148164
</Helmet>
149165

150-
<divclassName="flex flex-col h-full">
151-
<TaskTopbartask={task}/>
152-
{content}
153-
</div>
154-
</>
166+
<TaskTopbartask={task}/>
167+
{content}
168+
</TaskPageLayout>
155169
);
156170
};
157171

‎site/src/pages/TaskPage/TaskTopbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ type TaskTopbarProps = { task: Task };
2222

2323
exportconstTaskTopbar:FC<TaskTopbarProps>=({ task})=>{
2424
return(
25-
<headerclassName="flex flex-shrink-0 items-centerpx-3 py-4 border-solid border-border border-0 border-b">
25+
<headerclassName="flex flex-shrink-0 items-centerp-3 border-solid border-border border-0 border-b">
2626
<TooltipProvider>
2727
<Tooltip>
2828
<TooltipTriggerasChild>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp