Skip to content

chore: show iframe controls on preview slug only #18480

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 23, 2025
+106 −81
Merged

chore: show iframe controls on preview slug only #18480

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
Diff view
Diff view
chore: show iframe controls on preview slug only
  • Loading branch information
@code-asher
code-asher committed Jun 20, 2025
commit e591d5044e7ec1c7abd32e184f5b68f60d9cb0e2
70 changes: 36 additions & 34 deletions site/src/pages/TaskPage/TaskAppIframe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
117 changes: 70 additions & 47 deletions site/src/pages/TaskPage/TaskPage.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 }) => {
Expand All @@ -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",
},
]),
});
},
};
Loading