Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit63b5f0b

Browse files
feat: add app iframe controls (#18421)
Add a home and "open in new tab" button. Other controls are not possible due to cross-origin restrictions.Closes#18178---------Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
1 parentb49e62f commit63b5f0b

File tree

2 files changed

+93
-38
lines changed

2 files changed

+93
-38
lines changed

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

Lines changed: 71 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
importtype{WorkspaceApp}from"api/typesGenerated";
2+
import{Button}from"components/Button/Button";
3+
import{
4+
DropdownMenu,
5+
DropdownMenuContent,
6+
DropdownMenuItem,
7+
DropdownMenuTrigger,
8+
}from"components/DropdownMenu/DropdownMenu";
9+
import{EllipsisVertical,ExternalLinkIcon,HouseIcon}from"lucide-react";
210
import{useAppLink}from"modules/apps/useAppLink";
311
importtype{Task}from"modules/tasks/tasks";
4-
importtype{FC}from"react";
12+
import{typeFC,useRef}from"react";
13+
import{LinkasRouterLink}from"react-router-dom";
514
import{cn}from"utils/cn";
615

716
typeTaskAppIFrameProps={
@@ -31,24 +40,69 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
3140
workspace:task.workspace,
3241
});
3342

34-
lethref=link.href;
35-
try{
36-
consturl=newURL(link.href);
37-
if(pathname){
38-
url.pathname=pathname;
43+
constappHref=():string=>{
44+
try{
45+
consturl=newURL(link.href,location.href);
46+
if(pathname){
47+
url.pathname=pathname;
48+
}
49+
returnurl.toString();
50+
}catch(err){
51+
console.warn(`Failed to parse URL${link.href} for app${app.id}`,err);
52+
returnlink.href;
3953
}
40-
href=url.toString();
41-
}catch(err){
42-
console.warn(`Failed to parse URL${link.href} for app${app.id}`,err);
43-
}
54+
};
55+
56+
constframeRef=useRef<HTMLIFrameElement>(null);
57+
constframeSrc=appHref();
4458

4559
return(
46-
<iframe
47-
src={href}
48-
title={link.label}
49-
loading="eager"
50-
className={cn([active ?"block" :"hidden","w-full h-full border-0"])}
51-
allow="clipboard-read; clipboard-write"
52-
/>
60+
<divclassName={cn([active ?"flex" :"hidden","w-full h-full flex-col"])}>
61+
<divclassName="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+
<spanclassName="sr-only">Home</span>
74+
</Button>
75+
76+
{/* Possibly we will put a URL bar here, but for now we cannot due to
77+
* cross-origin restrictions in iframes. */}
78+
<divclassName="w-full"></div>
79+
80+
<DropdownMenu>
81+
<DropdownMenuTriggerasChild>
82+
<Buttonsize="icon"variant="subtle"aria-label="More options">
83+
<EllipsisVerticalaria-hidden="true"/>
84+
<spanclassName="sr-only">More options</span>
85+
</Button>
86+
</DropdownMenuTrigger>
87+
<DropdownMenuContentalign="end">
88+
<DropdownMenuItemasChild>
89+
<RouterLinkto={frameSrc}target="_blank">
90+
<ExternalLinkIcon/>
91+
Open app in new tab
92+
</RouterLink>
93+
</DropdownMenuItem>
94+
</DropdownMenuContent>
95+
</DropdownMenu>
96+
</div>
97+
98+
<iframe
99+
ref={frameRef}
100+
src={frameSrc}
101+
title={link.label}
102+
loading="eager"
103+
className={"w-full h-full border-0"}
104+
allow="clipboard-read; clipboard-write"
105+
/>
106+
</div>
53107
);
54108
};

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,19 +57,21 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
5757

5858
return(
5959
<mainclassName="flex-1 flex flex-col">
60-
<divclassName="border-0 border-b border-border border-solid w-full p-1 flex gap-2">
61-
{embeddedApps.map((app)=>(
62-
<TaskAppButton
63-
key={app.id}
64-
task={task}
65-
app={app}
66-
active={app.id===activeAppId}
67-
onClick={(e)=>{
68-
e.preventDefault();
69-
setActiveAppId(app.id);
70-
}}
71-
/>
72-
))}
60+
<divclassName="w-full flex items-center border-0 border-b border-border border-solid">
61+
<divclassName="p-2 pb-0 flex gap-2 items-center">
62+
{embeddedApps.map((app)=>(
63+
<TaskAppTab
64+
key={app.id}
65+
task={task}
66+
app={app}
67+
active={app.id===activeAppId}
68+
onClick={(e)=>{
69+
e.preventDefault();
70+
setActiveAppId(app.id);
71+
}}
72+
/>
73+
))}
74+
</div>
7375

7476
{externalApps.length>0&&(
7577
<divclassName="ml-auto">
@@ -122,19 +124,14 @@ export const TaskApps: FC<TaskAppsProps> = ({ task }) => {
122124
);
123125
};
124126

125-
typeTaskAppButtonProps={
127+
typeTaskAppTabProps={
126128
task:Task;
127129
app:WorkspaceApp;
128130
active:boolean;
129131
onClick:(e:React.MouseEvent<HTMLAnchorElement>)=>void;
130132
};
131133

132-
constTaskAppButton:FC<TaskAppButtonProps>=({
133-
task,
134-
app,
135-
active,
136-
onClick,
137-
})=>{
134+
constTaskAppTab:FC<TaskAppTabProps>=({ task, app, active, onClick})=>{
138135
constagent=task.workspace.latest_build.resources
139136
.flatMap((r)=>r.agents)
140137
.filter((a)=>!!a)
@@ -156,7 +153,11 @@ const TaskAppButton: FC<TaskAppButtonProps> = ({
156153
key={app.id}
157154
asChild
158155
className={cn([
159-
{"text-content-primary":active},
156+
"px-3",
157+
{
158+
"text-content-primary bg-surface-tertiary rounded-sm rounded-b-none":
159+
active,
160+
},
160161
{"opacity-75 hover:opacity-100":!active},
161162
])}
162163
>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp