Skip to content

Commit 8ce0aec

Browse files
committed
dont show content (due to margin) when there are no apps
1 parent 79e1844 commit 8ce0aec

File tree

1 file changed

+91
-88
lines changed

1 file changed

+91
-88
lines changed

site/src/modules/resources/AgentDevcontainerCard.tsx

Lines changed: 91 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -220,99 +220,102 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
220220
</div>
221221
</header>
222222

223-
<div css={styles.content}>
224-
{subAgent && workspace.latest_app_status?.agent_id === subAgent.id && (
225-
<section>
226-
<h3 className="sr-only">App statuses</h3>
227-
<AppStatuses workspace={workspace} agent={subAgent} />
228-
</section>
229-
)}
230-
231-
{showSubAgentApps && (
232-
<section css={styles.apps}>
233-
<>
234-
{showVSCode && (
235-
<VSCodeDevContainerButton
236-
userName={workspace.owner_name}
223+
{(showSubAgentApps || showSubAgentAppsPlaceholders) && (
224+
<div css={styles.content}>
225+
{subAgent &&
226+
workspace.latest_app_status?.agent_id === subAgent.id && (
227+
<section>
228+
<h3 className="sr-only">App statuses</h3>
229+
<AppStatuses workspace={workspace} agent={subAgent} />
230+
</section>
231+
)}
232+
233+
{showSubAgentApps && (
234+
<section css={styles.apps}>
235+
<>
236+
{showVSCode && (
237+
<VSCodeDevContainerButton
238+
userName={workspace.owner_name}
239+
workspaceName={workspace.name}
240+
devContainerName={devcontainer.container.name}
241+
devContainerFolder={subAgent?.directory ?? ""}
242+
displayApps={displayApps} // TODO(mafredri): We could use subAgent display apps here but we currently set none.
243+
agentName={parentAgent.name}
244+
/>
245+
)}
246+
{appSections.map((section, i) => (
247+
<Apps
248+
key={section.group ?? i}
249+
section={section}
250+
agent={subAgent}
251+
workspace={workspace}
252+
/>
253+
))}
254+
</>
255+
256+
{displayApps.includes("web_terminal") && (
257+
<TerminalLink
237258
workspaceName={workspace.name}
238-
devContainerName={devcontainer.container.name}
239-
devContainerFolder={subAgent?.directory ?? ""}
240-
displayApps={displayApps} // TODO(mafredri): We could use subAgent display apps here but we currently set none.
241-
agentName={parentAgent.name}
259+
agentName={subAgent.name}
260+
userName={workspace.owner_name}
242261
/>
243262
)}
244-
{appSections.map((section, i) => (
245-
<Apps
246-
key={section.group ?? i}
247-
section={section}
248-
agent={subAgent}
249-
workspace={workspace}
250-
/>
251-
))}
252-
</>
253263

254-
{displayApps.includes("web_terminal") && (
255-
<TerminalLink
256-
workspaceName={workspace.name}
257-
agentName={subAgent.name}
258-
userName={workspace.owner_name}
259-
/>
260-
)}
264+
{wildcardHostname !== "" &&
265+
devcontainer.container?.ports.map((port) => {
266+
const portLabel = `${port.port}/${port.network.toUpperCase()}`;
267+
const hasHostBind =
268+
port.host_port !== undefined && port.host_ip !== undefined;
269+
const helperText = hasHostBind
270+
? `${port.host_ip}:${port.host_port}`
271+
: "Not bound to host";
272+
const linkDest = hasHostBind
273+
? portForwardURL(
274+
wildcardHostname,
275+
port.host_port,
276+
subAgent.name,
277+
workspace.name,
278+
workspace.owner_name,
279+
location.protocol === "https" ? "https" : "http",
280+
)
281+
: "";
282+
return (
283+
<TooltipProvider key={portLabel}>
284+
<Tooltip>
285+
<TooltipTrigger asChild>
286+
<AgentButton disabled={!hasHostBind} asChild>
287+
<a href={linkDest}>
288+
<ExternalLinkIcon />
289+
{portLabel}
290+
</a>
291+
</AgentButton>
292+
</TooltipTrigger>
293+
<TooltipContent>{helperText}</TooltipContent>
294+
</Tooltip>
295+
</TooltipProvider>
296+
);
297+
})}
298+
</section>
299+
)}
261300

262-
{wildcardHostname !== "" &&
263-
devcontainer.container?.ports.map((port) => {
264-
const portLabel = `${port.port}/${port.network.toUpperCase()}`;
265-
const hasHostBind =
266-
port.host_port !== undefined && port.host_ip !== undefined;
267-
const helperText = hasHostBind
268-
? `${port.host_ip}:${port.host_port}`
269-
: "Not bound to host";
270-
const linkDest = hasHostBind
271-
? portForwardURL(
272-
wildcardHostname,
273-
port.host_port,
274-
subAgent.name,
275-
workspace.name,
276-
workspace.owner_name,
277-
location.protocol === "https" ? "https" : "http",
278-
)
279-
: "";
280-
return (
281-
<TooltipProvider key={portLabel}>
282-
<Tooltip>
283-
<TooltipTrigger asChild>
284-
<AgentButton disabled={!hasHostBind} asChild>
285-
<a href={linkDest}>
286-
<ExternalLinkIcon />
287-
{portLabel}
288-
</a>
289-
</AgentButton>
290-
</TooltipTrigger>
291-
<TooltipContent>{helperText}</TooltipContent>
292-
</Tooltip>
293-
</TooltipProvider>
294-
);
295-
})}
296-
</section>
297-
)}
298-
299-
{showSubAgentAppsPlaceholders && (
300-
<section css={styles.apps}>
301-
<Skeleton
302-
width={80}
303-
height={32}
304-
variant="rectangular"
305-
css={styles.buttonSkeleton}
306-
/>
307-
<Skeleton
308-
width={110}
309-
height={32}
310-
variant="rectangular"
311-
css={styles.buttonSkeleton}
312-
/>
313-
</section>
314-
)}
315-
</div>
301+
{showSubAgentAppsPlaceholders && (
302+
<section css={styles.apps}>
303+
<Skeleton
304+
width={80}
305+
height={32}
306+
variant="rectangular"
307+
css={styles.buttonSkeleton}
308+
/>
309+
<Skeleton
310+
width={110}
311+
height={32}
312+
variant="rectangular"
313+
css={styles.buttonSkeleton}
314+
/>
315+
</section>
316+
)}
317+
</div>
318+
)}
316319
</Stack>
317320
);
318321
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy