From 27f64de4a5d5f48ad65d39a1c992a95490b12a4f Mon Sep 17 00:00:00 2001 From: Asher Date: Tue, 24 Jun 2025 13:55:32 -0800 Subject: [PATCH] chore: fix idle state icon when disabled When the workspace is off, we set a disabled color, but for the idle icon that also needs a fill, this only changed the border making it look weird. Instead, move the disabled logic into the component so we can apply a matching fill when necessary. --- site/src/modules/apps/AppStatusStateIcon.tsx | 11 ++++-- .../WorkspaceAppStatus.stories.tsx | 36 ++++++++++++++++++- .../WorkspaceAppStatus/WorkspaceAppStatus.tsx | 4 --- 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx index 3497773952373..1800c81958c4e 100644 --- a/site/src/modules/apps/AppStatusStateIcon.tsx +++ b/site/src/modules/apps/AppStatusStateIcon.tsx @@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC = ({ 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 ( ); diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx index 0e229467b994b..9327ff6b46e98 100644 --- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx @@ -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, + }, +}; diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx index 587ae9f5b062f..633a9fcbc1ad8 100644 --- a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx +++ b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx @@ -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; @@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({ latest disabled={disabled} state={status.state} - className={cn({ - "text-content-disabled": disabled, - })} /> {message} 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