8000 chore: fix idle state icon when disabled by code-asher · Pull Request #18554 · coder/coder · GitHub
[go: up one dir, main page]
Skip to content

chore: fix idle state icon when disabled #18554

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 25, 2025
Merged

chore: fix idle state icon when disabled #18554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
8000
Diff view
Diff view
11 changes: 9 additions & 2 deletions site/src/modules/apps/AppStatusStateIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
latest,
className: customClassName,
}) => {
const className = cn(["size-4 shrink-0", customClassName]);
const className = cn([
"size-4 shrink-0",
customClassName,
disabled && "text-content-disabled",
]);

switch (state) {
case "idle":
// The pause icon is outlined; add a fill since it is hard to see and
// remove the stroke so it is not overly thick.
return (
<PauseIcon
css={{ strokeWidth: 0 }}
className={cn([
"text-content-secondary",
"fill-content-secondary",
className,
disabled ? "fill-content-disabled" : "fill-content-secondary",
])}
/>
);
Expand Down
36 changes: 35 additions & 1 deletion site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,43 @@ export const LongMessage: Story = {
},
};

export const Disabled: Story = {
export const DisabledComplete: Story = {
args: {
status: MockWorkspaceAppStatus,
disabled: true,
},
};

export const DisabledFailure: Story = {
args: {
status: {
...MockWorkspaceAppStatus,
state: "failure",
message: "Couldn't figure out how to start the dev server",
},
disabled: true,
},
};

export const DisabledWorking: Story = {
args: {
status: {
...MockWorkspaceAppStatus,
state: "working",
message: "Starting dev server...",
uri: "",
},
disabled: true,
},
};

export const DisabledIdle: Story = {
args: {
status: {
...MockWorkspaceAppStatus,
state: "idle",
message: "Done for now",
},
disabled: true,
},
};
4 changes: 0 additions & 4 deletions site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
} from "components/Tooltip/Tooltip";
import capitalize from "lodash/capitalize";
import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
import { cn } from "utils/cn";

type WorkspaceAppStatusProps = {
status: APIWorkspaceAppStatus | null;
Expand Down Expand Up @@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({
latest
disabled={disabled}
state={status.state}
className={cn({
"text-content-disabled": disabled,
})}
/>
<span className="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
{message}
Expand Down
Loading
0