diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx index 26d8562d1e..7921a493e0 100644 --- a/site/src/pages/TaskPage/TaskApps.tsx +++ b/site/src/pages/TaskPage/TaskApps.tsx @@ -9,6 +9,7 @@ import { import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Link } from "components/Link/Link"; +import { useProxy } from "contexts/ProxyContext"; import { ChevronDownIcon, LayoutGridIcon } from "lucide-react"; import { useAppLink } from "modules/apps/useAppLink"; import type { Task } from "modules/tasks/tasks"; @@ -18,6 +19,7 @@ import { Link as RouterLink } from "react-router"; import { cn } from "utils/cn"; import { docs } from "utils/docs"; import { TaskAppIFrame } from "./TaskAppIframe"; +import { TaskWildcardWarning } from "./TaskWildcardWarning"; type TaskAppsProps = { task: Task; @@ -29,6 +31,8 @@ type AppWithAgent = { }; export const TaskApps: FC = ({ task }) => { + const { proxy } = useProxy(); + const agents = task.workspace.latest_build.resources .flatMap((r) => r.agents) .filter((a) => !!a); @@ -54,6 +58,10 @@ export const TaskApps: FC = ({ task }) => { embeddedApps[0]?.app.id, ); + const activeApp = embeddedApps.find(({ app }) => app.id === activeAppId)?.app; + const shouldDisplayWildcardWarning = + activeApp?.subdomain && !proxy.proxy?.wildcard_hostname; + return (
@@ -83,18 +91,22 @@ export const TaskApps: FC = ({ task }) => {
{embeddedApps.length > 0 ? ( -
- {embeddedApps.map(({ app }) => { - return ( + shouldDisplayWildcardWarning ? ( +
+ +
+ ) : ( +
+ {embeddedApps.map(({ app }) => ( - ); - })} -
+ ))} +
+ ) ) : (

diff --git a/site/src/pages/TaskPage/TaskSidebar.tsx b/site/src/pages/TaskPage/TaskSidebar.tsx index eb1aeb6d59..5e863e375b 100644 --- a/site/src/pages/TaskPage/TaskSidebar.tsx +++ b/site/src/pages/TaskPage/TaskSidebar.tsx @@ -1,8 +1,10 @@ import type { WorkspaceApp } from "api/typesGenerated"; import { Spinner } from "components/Spinner/Spinner"; +import { useProxy } from "contexts/ProxyContext"; import type { Task } from "modules/tasks/tasks"; import type { FC } from "react"; import { TaskAppIFrame } from "./TaskAppIframe"; +import { TaskWildcardWarning } from "./TaskWildcardWarning"; type TaskSidebarProps = { task: Task; @@ -64,21 +66,29 @@ const getSidebarApp = (task: Task): [WorkspaceApp | null, SidebarAppStatus] => { }; export const TaskSidebar: FC = ({ task }) => { + const proxy = useProxy(); + const [sidebarApp, sidebarAppStatus] = getSidebarApp(task); + const shouldDisplayWildcardWarning = + sidebarApp?.subdomain && proxy.proxy?.preferredWildcardHostname === ""; return (