From e591d5044e7ec1c7abd32e184f5b68f60d9cb0e2 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Fri, 20 Jun 2025 10:56:54 -0800
Subject: [PATCH] chore: show iframe controls on preview slug only

---
 site/src/pages/TaskPage/TaskAppIframe.tsx    |  70 +++++------
 site/src/pages/TaskPage/TaskPage.stories.tsx | 117 +++++++++++--------
 2 files changed, 106 insertions(+), 81 deletions(-)

diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
index 860fc64cbbcec..b995dfec771b6 100644
--- a/site/src/pages/TaskPage/TaskAppIframe.tsx
+++ b/site/src/pages/TaskPage/TaskAppIframe.tsx
@@ -58,42 +58,44 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 
 	return (
 		<div className={cn([active ? "flex" : "hidden", "w-full h-full flex-col"])}>
-			<div className="bg-surface-tertiary flex items-center p-2 py-1 gap-1">
-				<Button
-					size="icon"
-					variant="subtle"
-					onClick={(e) => {
-						e.preventDefault();
-						if (frameRef.current?.contentWindow) {
-							frameRef.current.contentWindow.location.href = appHref();
-						}
-					}}
-				>
-					<HouseIcon />
-					<span className="sr-only">Home</span>
-				</Button>
+			{app.slug === "preview" && (
+				<div className="bg-surface-tertiary flex items-center p-2 py-1 gap-1">
+					<Button
+						size="icon"
+						variant="subtle"
+						onClick={(e) => {
+							e.preventDefault();
+							if (frameRef.current?.contentWindow) {
+								frameRef.current.contentWindow.location.href = appHref();
+							}
+						}}
+					>
+						<HouseIcon />
+						<span className="sr-only">Home</span>
+					</Button>
 
-				{/* Possibly we will put a URL bar here, but for now we cannot due to
-				 * cross-origin restrictions in iframes. */}
-				<div className="w-full"></div>
+					{/* Possibly we will put a URL bar here, but for now we cannot due to
+					 * cross-origin restrictions in iframes. */}
+					<div className="w-full"></div>
 
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Button size="icon" variant="subtle" aria-label="More options">
-							<EllipsisVertical aria-hidden="true" />
-							<span className="sr-only">More options</span>
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end">
-						<DropdownMenuItem asChild>
-							<RouterLink to={frameSrc} target="_blank">
-								<ExternalLinkIcon />
-								Open app in new tab
-							</RouterLink>
-						</DropdownMenuItem>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button size="icon" variant="subtle" aria-label="More options">
+								<EllipsisVertical aria-hidden="true" />
+								<span className="sr-only">More options</span>
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuItem asChild>
+								<RouterLink to={frameSrc} target="_blank">
+									<ExternalLinkIcon />
+									Open app in new tab
+								</RouterLink>
+							</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+			)}
 
 			<iframe
 				ref={frameRef}
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
index e5d68ef6c8493..cc2ab25ce2767 100644
--- a/site/src/pages/TaskPage/TaskPage.stories.tsx
+++ b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, spyOn, within } from "@storybook/test";
+import type { Workspace, WorkspaceApp } from "api/typesGenerated";
 import {
 	MockFailedWorkspace,
 	MockStartingWorkspace,
@@ -95,63 +96,68 @@ export const TerminatedBuildWithStatus: Story = {
 	},
 };
 
-export const Active: Story = {
-	decorators: [withProxyProvider()],
-	beforeEach: () => {
-		spyOn(data, "fetchTask").mockResolvedValue({
-			prompt: "Create competitors page",
-			workspace: {
-				...MockWorkspace,
-				latest_build: {
-					...MockWorkspace.latest_build,
-					resources: [
+function activeWorkspace(apps: WorkspaceApp[]): Workspace {
+	return {
+		...MockWorkspace,
+		latest_build: {
+			...MockWorkspace.latest_build,
+			resources: [
+				{
+					...MockWorkspaceResource,
+					agents: [
 						{
-							...MockWorkspaceResource,
-							agents: [
+							...MockWorkspaceAgent,
+							apps: [
+								...apps,
 								{
-									...MockWorkspaceAgent,
-									apps: [
-										{
-											...MockWorkspaceApp,
-											id: "claude-code",
-											display_name: "Claude Code",
-											slug: "claude-code",
-											icon: "/icon/claude.svg",
-											statuses: [
-												MockWorkspaceAppStatus,
-												{
-													...MockWorkspaceAppStatus,
-													id: "2",
-													message: "Planning changes",
-													state: "working",
-												},
-											],
-										},
-										{
-											...MockWorkspaceApp,
-											id: "vscode",
-											slug: "vscode",
-											display_name: "VS Code Web",
-											icon: "/icon/code.svg",
-										},
+									...MockWorkspaceApp,
+									id: "claude-code",
+									display_name: "Claude Code",
+									slug: "claude-code",
+									icon: "/icon/claude.svg",
+									statuses: [
+										MockWorkspaceAppStatus,
 										{
-											...MockWorkspaceApp,
-											slug: "zed",
-											id: "zed",
-											display_name: "Zed",
-											icon: "/icon/zed.svg",
+											...MockWorkspaceAppStatus,
+											id: "2",
+											message: "Planning changes",
+											state: "working",
 										},
 									],
 								},
+								{
+									...MockWorkspaceApp,
+									id: "vscode",
+									slug: "vscode",
+									display_name: "VS Code Web",
+									icon: "/icon/code.svg",
+								},
+								{
+									...MockWorkspaceApp,
+									slug: "zed",
+									id: "zed",
+									display_name: "Zed",
+									icon: "/icon/zed.svg",
+								},
 							],
 						},
 					],
 				},
-				latest_app_status: {
-					...MockWorkspaceAppStatus,
-					app_id: "claude-code",
-				},
-			},
+			],
+		},
+		latest_app_status: {
+			...MockWorkspaceAppStatus,
+			app_id: "claude-code",
+		},
+	};
+}
+
+export const Active: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: activeWorkspace([]),
 		});
 	},
 	play: async ({ canvasElement }) => {
@@ -166,3 +172,20 @@ export const Active: Story = {
 		expect(claudeIframe).toBeVisible();
 	},
 };
+
+export const ActivePreview: Story = {
+	decorators: [withProxyProvider()],
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: activeWorkspace([
+				{
+					...MockWorkspaceApp,
+					slug: "preview",
+					id: "preview",
+					display_name: "Preview",
+				},
+			]),
+		});
+	},
+};