Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7dd90f3

Browse files
code-ashercode-asher
authored
chore: show iframe controls on preview slug only (#18480)
1 parent 4699393 commit 7dd90f3

File tree

2 files changed

+106
-81
lines changed

2 files changed

+106
-81
lines changed

‎site/src/pages/TaskPage/TaskAppIframe.tsx

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -58,42 +58,44 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
5858

5959
return (
6060
<div className={cn([active ? "flex" : "hidden", "w-full h-full flex-col"])}>
61-
<div className="bg-surface-tertiary flex items-center p-2 py-1 gap-1">
62-
<Button
63-
size="icon"
64-
variant="subtle"
65-
onClick={(e) => {
66-
e.preventDefault();
67-
if (frameRef.current?.contentWindow) {
68-
frameRef.current.contentWindow.location.href = appHref();
69-
}
70-
}}
71-
>
72-
<HouseIcon />
73-
<span className="sr-only">Home</span>
74-
</Button>
61+
{app.slug === "preview" && (
62+
<div className="bg-surface-tertiary flex items-center p-2 py-1 gap-1">
63+
<Button
64+
size="icon"
65+
variant="subtle"
66+
onClick={(e) => {
67+
e.preventDefault();
68+
if (frameRef.current?.contentWindow) {
69+
frameRef.current.contentWindow.location.href = appHref();
70+
}
71+
}}
72+
>
73+
<HouseIcon />
74+
<span className="sr-only">Home</span>
75+
</Button>
7576

76-
{/* Possibly we will put a URL bar here, but for now we cannot due to
77-
* cross-origin restrictions in iframes. */}
78-
<div className="w-full"></div>
77+
{/* Possibly we will put a URL bar here, but for now we cannot due to
78+
* cross-origin restrictions in iframes. */}
79+
<div className="w-full"></div>
7980

80-
<DropdownMenu>
81-
<DropdownMenuTrigger asChild>
82-
<Button size="icon" variant="subtle" aria-label="More options">
83-
<EllipsisVertical aria-hidden="true" />
84-
<span className="sr-only">More options</span>
85-
</Button>
86-
</DropdownMenuTrigger>
87-
<DropdownMenuContent align="end">
88-
<DropdownMenuItem asChild>
89-
<RouterLink to={frameSrc} target="_blank">
90-
<ExternalLinkIcon />
91-
Open app in new tab
92-
</RouterLink>
93-
</DropdownMenuItem>
94-
</DropdownMenuContent>
95-
</DropdownMenu>
96-
</div>
81+
<DropdownMenu>
82+
<DropdownMenuTrigger asChild>
83+
<Button size="icon" variant="subtle" aria-label="More options">
84+
<EllipsisVertical aria-hidden="true" />
85+
<span className="sr-only">More options</span>
86+
</Button>
87+
</DropdownMenuTrigger>
88+
<DropdownMenuContent align="end">
89+
<DropdownMenuItem asChild>
90+
<RouterLink to={frameSrc} target="_blank">
91+
<ExternalLinkIcon />
92+
Open app in new tab
93+
</RouterLink>
94+
</DropdownMenuItem>
95+
</DropdownMenuContent>
96+
</DropdownMenu>
97+
</div>
98+
)}
9799

98100
<iframe
99101
ref={frameRef}

‎site/src/pages/TaskPage/TaskPage.stories.tsx

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { expect, spyOn, within } from "@storybook/test";
3+
import type { Workspace, WorkspaceApp } from "api/typesGenerated";
34
import {
45
MockFailedWorkspace,
56
MockStartingWorkspace,
@@ -95,63 +96,68 @@ export const TerminatedBuildWithStatus: Story = {
9596
},
9697
};
9798

98-
export const Active: Story = {
99-
decorators: [withProxyProvider()],
100-
beforeEach: () => {
101-
spyOn(data, "fetchTask").mockResolvedValue({
102-
prompt: "Create competitors page",
103-
workspace: {
104-
...MockWorkspace,
105-
latest_build: {
106-
...MockWorkspace.latest_build,
107-
resources: [
99+
function activeWorkspace(apps: WorkspaceApp[]): Workspace {
100+
return {
101+
...MockWorkspace,
102+
latest_build: {
103+
...MockWorkspace.latest_build,
104+
resources: [
105+
{
106+
...MockWorkspaceResource,
107+
agents: [
108108
{
109-
...MockWorkspaceResource,
110-
agents: [
109+
...MockWorkspaceAgent,
110+
apps: [
111+
...apps,
111112
{
112-
...MockWorkspaceAgent,
113-
apps: [
114-
{
115-
...MockWorkspaceApp,
116-
id: "claude-code",
117-
display_name: "Claude Code",
118-
slug: "claude-code",
119-
icon: "/icon/claude.svg",
120-
statuses: [
121-
MockWorkspaceAppStatus,
122-
{
123-
...MockWorkspaceAppStatus,
124-
id: "2",
125-
message: "Planning changes",
126-
state: "working",
127-
},
128-
],
129-
},
130-
{
131-
...MockWorkspaceApp,
132-
id: "vscode",
133-
slug: "vscode",
134-
display_name: "VS Code Web",
135-
icon: "/icon/code.svg",
136-
},
113+
...MockWorkspaceApp,
114+
id: "claude-code",
115+
display_name: "Claude Code",
116+
slug: "claude-code",
117+
icon: "/icon/claude.svg",
118+
statuses: [
119+
MockWorkspaceAppStatus,
137120
{
138-
...MockWorkspaceApp,
139-
slug: "zed",
140-
id: "zed",
141-
display_name: "Zed",
142-
icon: "/icon/zed.svg",
121+
...MockWorkspaceAppStatus,
122+
id: "2",
123+
message: "Planning changes",
124+
state: "working",
143125
},
144126
],
145127
},
128+
{
129+
...MockWorkspaceApp,
130+
id: "vscode",
131+
slug: "vscode",
132+
display_name: "VS Code Web",
133+
icon: "/icon/code.svg",
134+
},
135+
{
136+
...MockWorkspaceApp,
137+
slug: "zed",
138+
id: "zed",
139+
display_name: "Zed",
140+
icon: "/icon/zed.svg",
141+
},
146142
],
147143
},
148144
],
149145
},
150-
latest_app_status: {
151-
...MockWorkspaceAppStatus,
152-
app_id: "claude-code",
153-
},
154-
},
146+
],
147+
},
148+
latest_app_status: {
149+
...MockWorkspaceAppStatus,
150+
app_id: "claude-code",
151+
},
152+
};
153+
}
154+
155+
export const Active: Story = {
156+
decorators: [withProxyProvider()],
157+
beforeEach: () => {
158+
spyOn(data, "fetchTask").mockResolvedValue({
159+
prompt: "Create competitors page",
160+
workspace: activeWorkspace([]),
155161
});
156162
},
157163
play: async ({ canvasElement }) => {
@@ -166,3 +172,20 @@ export const Active: Story = {
166172
expect(claudeIframe).toBeVisible();
167173
},
168174
};
175+
176+
export const ActivePreview: Story = {
177+
decorators: [withProxyProvider()],
178+
beforeEach: () => {
179+
spyOn(data, "fetchTask").mockResolvedValue({
180+
prompt: "Create competitors page",
181+
workspace: activeWorkspace([
182+
{
183+
...MockWorkspaceApp,
184+
slug: "preview",
185+
id: "preview",
186+
display_name: "Preview",
187+
},
188+
]),
189+
});
190+
},
191+
};

0 commit comments

Comments
 (0)