8000 refactor: minor task page design adjustments (#18187) · coder/coder@45d46c8 · GitHub
[go: up one dir, main page]
Skip to content

Commit 45d46c8

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: minor task page design adjustments (#18187)
**Before:** <img width="1624" alt="Screenshot 2025-06-02 at 13 38 45" src="https://github.com/user-attachments/assets/545400e9-18d6-44a3-9f21-a51ceceedc8e" /> **After:** <img width="1624" alt="Screenshot 2025-06-02 at 13 40 18" src="https://github.com/user-attachments/assets/1b0b89f0-8cd6-4afd-8800-786e43ae4b52" /> - Show output links - Move workspace app bar to top of screen - Remove redundant task status indicators - Update "building your task" to "Building your workspace" to be more transparent - Change “Open IDE” language to “Open Locally” Closes: - #18181 - #18162
1 parent 87c4948 commit 45d46c8

File tree

6 files changed

+256
-152
lines changed

6 files changed

+256
-152
lines changed

‎site/src/modules/apps/AppStatusIcon.tsx renamed to ‎site/src/modules/apps/AppStatusStateIcon.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import type { WorkspaceAppStatus } from "api/typesGenerated";
1+
import type { WorkspaceAppStatusState } from "api/typesGenerated";
22
import { Spinner } from "components/Spinner/Spinner";
33
import {
4+
BanIcon,
45
CircleAlertIcon,
56
CircleCheckIcon,
67
HourglassIcon,
@@ -9,20 +10,22 @@ import {
910
import type { FC } from "react";
1011
import { cn } from "utils/cn";
1112

12-
type AppStatusIconProps = {
13-
status: WorkspaceAppStatus;
13+
type AppStatusStateIconProps = {
14+
state: WorkspaceAppStatusState;
1415
latest: boolean;
16+
disabled?: boolean;
1517
className?: string;
1618
};
1719

18-
export const AppStatusIcon: FC<AppStatusIconProps> = ({
19-
status,
20+
export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
21+
state,
22+
disabled,
2023
latest,
2124
className: customClassName,
2225
}) => {
2326
const className = cn(["size-4 shrink-0", customClassName]);
2427

25-
switch (status.state) {
28+
switch (state) {
2629
case "complete":
2730
return (
2831
<CircleCheckIcon className={cn(["text-content-success", className])} />
@@ -32,10 +35,12 @@ export const AppStatusIcon: FC<AppStatusIconProps> = ({
3235
<CircleAlertIcon className={cn(["text-content-warning", className])} />
3336
);
3437
case "working":
35-
return latest ? (
38+
return disabled ? (
39+
<BanIcon className={cn(["text-content-disabled", className])} />
40+
) : latest ? (
3641
<Spinner size="sm" className="shrink-0" loading />
3742
) : (
38-
<HourglassIcon className={cn(["text-highlight-sky", className])} />
43+
<HourglassIcon className={cn(["text-content-secondary", className])} />
3944
);
4045
default:
4146
return (

‎site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
TooltipProvider,
66
TooltipTrigger,
77
} from "components/Tooltip/Tooltip";
8-
import { AppStatusIcon } from "modules/apps/AppStatusIcon";
8+
import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
99
import { cn } from "utils/cn";
1010

1111
type WorkspaceAppStatusProps = {
@@ -31,9 +31,10 @@ export const WorkspaceAppStatus = ({
3131
<Tooltip>
3232
<TooltipTrigger asChild>
3333
<div className="flex items-center gap-2">
34-
<AppStatusIcon
35-
status={status}
34+
<AppStatusStateIcon
3635
latest
36+
disabled={disabled}
 4D7B
37+
state={status.state}
3738
className={cn({
3839
"text-content-disabled": disabled,
3940
})}

0 commit comments

Comments
 (0)
0