Skip to content

Commit 2d44add

Browse files
feat: add task link in the workspace page when it is running a task (#18591)
![image](https://github.com/user-attachments/assets/4db64031-17a9-405c-a233-df2b758ddef5)
1 parent f0251df commit 2d44add

File tree

1 file changed

+39
-26
lines changed

1 file changed

+39
-26
lines changed

site/src/pages/WorkspacePage/AppStatuses.tsx

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,19 @@ import {
1515
import capitalize from "lodash/capitalize";
1616
import { timeFrom } from "utils/time";
1717

18+
import { ScrollArea } from "components/ScrollArea/ScrollArea";
1819
import {
1920
ChevronDownIcon,
2021
ChevronUpIcon,
2122
ExternalLinkIcon,
2223
FileIcon,
2324
LayoutGridIcon,
25+
SquareCheckBigIcon,
2426
} from "lucide-react";
2527
import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
2628
import { useAppLink } from "modules/apps/useAppLink";
2729
import { type FC, useState } from "react";
30+
import { Link as RouterLink } from "react-router-dom";
2831
import { truncateURI } from "utils/uri";
2932

3033
interface AppStatusesProps {
@@ -81,9 +84,9 @@ export const AppStatuses: FC<AppStatusesProps> = ({
8184
{latestStatus.message || capitalize(latestStatus.state)}
8285
</span>
8386
</div>
84-
<span className="text-xs text-content-secondary first-letter:uppercase block pl-[26px]">
87+
<time className="text-xs text-content-secondary first-letter:uppercase block pl-[26px]">
8588
{timeFrom(new Date(latestStatus.created_at), comparisonDate)}
86-
</span>
89+
</time>
8790
</div>
8891

8992
<div className="flex items-center gap-2">
@@ -119,6 +122,13 @@ export const AppStatuses: FC<AppStatusesProps> = ({
119122
</Button>
120123
))}
121124

125+
<Button asChild size="sm" variant="outline">
126+
<RouterLink to={`/tasks/${workspace.owner_name}/${workspace.name}`}>
127+
<SquareCheckBigIcon />
128+
View task
129+
</RouterLink>
130+
</Button>
131+
122132
<TooltipProvider>
123133
<Tooltip>
124134
<TooltipTrigger asChild>
@@ -141,35 +151,38 @@ export const AppStatuses: FC<AppStatusesProps> = ({
141151
</div>
142152
</div>
143153

144-
{displayStatuses &&
145-
otherStatuses.map((status) => {
146-
const statusTime = new Date(status.created_at);
147-
const formattedTimestamp = timeFrom(statusTime, comparisonDate);
154+
{displayStatuses && (
155+
<ScrollArea className="h-[200px]">
156+
{otherStatuses.map((status) => {
157+
const statusTime = new Date(status.created_at);
158+
const formattedTimestamp = timeFrom(statusTime, comparisonDate);
148159

149-
return (
150-
<div
151-
key={status.id}
152-
className={`
160+
return (
161+
<div
162+
key={status.id}
163+
className={`
153164
flex items-center justify-between px-4 py-3
154165
border-0 [&:not(:last-child)]:border-b border-solid border-border
155166
`}
156-
>
157-
<div className="flex items-center justify-between w-full text-content-secondary">
158-
<span className="text-xs flex items-center gap-2">
159-
<AppStatusStateIcon
160-
state={status.state}
161-
latest={false}
162-
className="size-icon-xs w-[18px]"
163-
/>
164-
{status.message || capitalize(status.state)}
165-
</span>
166-
<span className="text-2xs text-content-secondary first-letter:uppercase block pl-[26px]">
167-
{formattedTimestamp}
168-
</span>
167+
>
168+
<div className="flex items-center justify-between w-full text-content-secondary">
169+
<span className="text-xs flex items-center gap-2">
170+
<AppStatusStateIcon
171+
state={status.state}
172+
latest={false}
173+
className="size-icon-xs w-[18px]"
174+
/>
175+
{status.message || capitalize(status.state)}
176+
</span>
177+
<span className="text-2xs text-content-secondary first-letter:uppercase block pl-[26px]">
178+
{formattedTimestamp}
179+
</span>
180+
</div>
169181
</div>
170-
</div>
171-
);
172-
})}
182+
);
183+
})}
184+
</ScrollArea>
185+
)}
173186
</div>
174187
);
175188
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy