Feb 25, 2025 · Feb 24, 2025 · Feb 25, 2025 · Feb 25, 2025 · Feb 25, 2025
diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
 const preferredPathBase = proxy.preferredPathAppURL;
 const appsHost = proxy.preferredWildcardHostname;
 const [fetchingSessionToken, setFetchingSessionToken] = useState(false);
 const [iconError, setIconError] = useState(false);

 const theme = useTheme();
 const username = workspace.owner_name;
 // To avoid bugs in the healthcheck code locking users out of apps, we no
 // longer block access to apps if they are unhealthy/initializing.
 let canClick = true;
 let icon = <BaseIcon app={app} />;
 let icon = !iconError && (
 <BaseIcon app={app} onIconPathError={() => setIconError(true)} />
 );

 let primaryTooltip = "";
 if (app.health === "initializing") {
diff --git a/site/src/modules/resources/AppLink/BaseIcon.tsx b/site/src/modules/resources/AppLink/BaseIcon.tsx

 interface BaseIconProps {
 app: WorkspaceApp;
 onIconPathError?: () => void;
 }

 export const BaseIcon: FC<BaseIconProps> = ({ app }) => {
 export const BaseIcon: FC<BaseIconProps> = ({ app, onIconPathError }) => {
 return app.icon ? (
 <img
 alt={`${app.display_name} Icon`}
 src={app.icon}
 style={{ pointerEvents: "none" }}
 onError={() => {
 console.warn(
 `Application icon for "${app.id}" has invalid source "${app.icon}".`,
 );
 onIconPathError?.();
 }}
 />
 ) : (
 <ComputerIcon />
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
 },
 };

 export const AppIcons: Story = {
 args: {
 ...Running.args,
 workspace: {
 ...Mocks.MockWorkspace,
 latest_build: {
 ...Mocks.MockWorkspace.latest_build,
 resources: [
 {
 ...Mocks.MockWorkspaceResource,
 agents: [
 {
 ...Mocks.MockWorkspaceAgent,
 apps: [
 {
 ...Mocks.MockWorkspaceApp,
 id: "test-app-1",
 slug: "test-app-1",
 display_name: "Default Icon",
 },
 {
 ...Mocks.MockWorkspaceApp,
 id: "test-app-2",
 slug: "test-app-2",
 display_name: "Broken Icon",
 icon: "/foobar/broken.png",
 },
 ],
 },
 ],
 },
 ],
 },
 },
 },
 };

 export const Favorite: Story = {
 args: {
 ...Running.args,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -37,6 +37,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
		const preferredPathBase = proxy.preferredPathAppURL;
		const appsHost = proxy.preferredWildcardHostname;
		const [fetchingSessionToken, setFetchingSessionToken] = useState(false);
		const [iconError, setIconError] = useState(false);

		const theme = useTheme();
		const username = workspace.owner_name;
Expand DownExpand Up		@@ -67,7 +68,9 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
		// To avoid bugs in the healthcheck code locking users out of apps, we no
		// longer block access to apps if they are unhealthy/initializing.
		let canClick = true;
		let icon = <BaseIcon app={app} />;
		let icon = !iconError && (
		<BaseIcon app={app} onIconPathError={() => setIconError(true)} />
		);

		let primaryTooltip = "";
		if (app.health === "initializing") {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,14 +4,21 @@ import type { FC } from "react";

		interface BaseIconProps {
		app: WorkspaceApp;
		onIconPathError?: () => void;
		}

		export const BaseIcon: FC<BaseIconProps> = ({ app }) => {
		export const BaseIcon: FC<BaseIconProps> = ({ app, onIconPathError }) => {
		return app.icon ? (
		<img
		alt={`${app.display_name} Icon`}
		src={app.icon}
		style={{ pointerEvents: "none" }}
		onError={() => {
		console.warn(
		`Application icon for "${app.id}" has invalid source "${app.icon}".`,
		);
		onIconPathError?.();
		}}
		/>
		) : (
		<ComputerIcon />
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -80,6 +80,43 @@ export const Running: Story = {
		},
		};

		export const AppIcons: Story = {
		args: {
		...Running.args,
		workspace: {
		...Mocks.MockWorkspace,
		latest_build: {
		...Mocks.MockWorkspace.latest_build,
		resources: [
		{
		...Mocks.MockWorkspaceResource,
		agents: [
		{
		...Mocks.MockWorkspaceAgent,
		apps: [
		{
		...Mocks.MockWorkspaceApp,
		id: "test-app-1",
		slug: "test-app-1",
		display_name: "Default Icon",
		},
		{
		...Mocks.MockWorkspaceApp,
		id: "test-app-2",
		slug: "test-app-2",
		display_name: "Broken Icon",
		icon: "/foobar/broken.png",
		},
		],
		},
		],
		},
		],
		},
		},
		},
		};

		export const Favorite: Story = {
		args: {
		...Running.args,
Expand Down