Function TaskAppIFrame

site/src/pages/TaskPage/TaskAppIframe.tsx:29–144

({
	workspace,
	app,
	active,
})

};

export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
	workspace,
	app,
	active,
}) => {
	const link = useAppLink(app, {
		agent: app.agent,
		workspace,
	});
	const proxy = useProxy();
	const frameRef = useRef<HTMLIFrameElement>(null);
	const shouldDisplayWildcardWarning =
		app.subdomain && !proxy.proxy?.preferredWildcardHostname;

	if (shouldDisplayWildcardWarning) {
		return (
			<div className="h-full flex items-center justify-center pb-4">
				<TaskWildcardWarning />
			</div>
		);
	}

	return (
		<div className={cn([active ? "flex" : "hidden", "w-full h-full flex-col"])}>
			{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 = link.href;
							}
						}}
					>
						<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>

					<DropdownMenu>
						<DropdownMenuTrigger asChild>
							<Button size="icon" variant="subtle" aria-label="More options">
								<EllipsisVerticalIcon aria-hidden="true" />
								<span className="sr-only">More options</span>
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<DropdownMenuItem asChild>
								<RouterLink to={link.href} target="_blank">
									<ExternalLinkIcon />
									Open app in new tab
								</RouterLink>
							</DropdownMenuItem>