Skip to content

Commit 55e28ab

Browse files
mafredrimafredri
committed
ui-2
1 parent 7ed75f2 commit 55e28ab

File tree

2 files changed

+66
-52
lines changed

2 files changed

+66
-52
lines changed

‎site/src/modules/resources/AgentDevcontainerCard.stories.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ const MockWorkspaceAgentDevcontainer: WorkspaceAgentDevcontainer = {
1616
status: "running",
1717
dirty: false,
1818
container: MockWorkspaceAgentContainer,
19+
agent: {
20+
id: "test-agent-id",
21+
name: "test-devcontainer-agent",
22+
directory: "/workspace/test",
23+
},
1924
};
2025

2126
const meta: Meta<typeof AgentDevcontainerCard> = {

‎site/src/modules/resources/AgentDevcontainerCard.tsx

Lines changed: 61 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -139,68 +139,77 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
139139
workspace={workspace.name}
140140
container={devcontainer.container?.name || devcontainer.name}
141141
/> */}
142-
{agent.display_apps.includes("ssh_helper") && ( // TODO agent
142+
{/* TODO(mafredri): Sub agent display apps. */}
143+
{devcontainer.agent && agent.display_apps.includes("ssh_helper") && (
143144
<AgentSSHButton
144145
workspaceName={workspace.name}
145-
agentName={devcontainer.name}
146+
agentName={devcontainer.agent.name || devcontainer.name}
146147
workspaceOwnerUsername={workspace.owner_name}
147148
/>
148149
)}
149150
</div>
150151
</header>
151152

152-
<h4 className="m-0 text-xl font-semibold mb-2">Forwarded ports</h4>
153+
{devcontainer.agent && (
154+
<>
155+
<h4 className="m-0 text-xl font-semibold mb-2">Forwarded ports</h4>
156+
<div className="flex gap-4 flex-wrap mt-4">
157+
{devcontainer.container && (
158+
<VSCodeDevContainerButton
159+
userName={workspace.owner_name}
160+
workspaceName={workspace.name}
161+
devContainerName={devcontainer.container.name}
162+
devContainerFolder={devcontainer.agent.directory}
163+
displayApps={agent.display_apps} // TODO(mafredri): Sub agent display apps.
164+
agentName={agent.name} // This must be set to the parent agent.
165+
/>
166+
)}
153167

154-
<div className="flex gap-4 flex-wrap mt-4">
155-
<VSCodeDevContainerButton
156-
userName={workspace.owner_name}
157-
workspaceName={workspace.name}
158-
devContainerName={devcontainer.name}
159-
devContainerFolder={devcontainer.workspace_folder}
160-
displayApps={agent.display_apps} // TODO agent
161-
agentName={devcontainer.name}
162-
/>
168+
{devcontainer.agent && (
169+
<TerminalLink
170+
workspaceName={workspace.name}
171+
agentName={devcontainer.agent.name}
172+
userName={workspace.owner_name}
173+
/>
174+
)}
163175

164-
<TerminalLink
165-
workspaceName={workspace.name}
166-
agentName={devcontainer.name}
167-
userName={workspace.owner_name}
168-
/>
169-
{wildcardHostname !== "" &&
170-
devcontainer.container?.ports.map((port) => {
171-
const portLabel = `${port.port}/${port.network.toUpperCase()}`;
172-
const hasHostBind =
173-
port.host_port !== undefined && port.host_ip !== undefined;
174-
const helperText = hasHostBind
175-
? `${port.host_ip}:${port.host_port}`
176-
: "Not bound to host";
177-
const linkDest = hasHostBind
178-
? portForwardURL(
179-
wildcardHostname,
180-
port.host_port,
181-
agent.name,
182-
workspace.name,
183-
workspace.owner_name,
184-
location.protocol === "https" ? "https" : "http",
185-
)
186-
: "";
187-
return (
188-
<TooltipProvider key={portLabel}>
189-
<Tooltip>
190-
<TooltipTrigger asChild>
191-
<AgentButton disabled={!hasHostBind} asChild>
192-
<a href={linkDest}>
193-
<ExternalLinkIcon />
194-
{portLabel}
195-
</a>
196-
</AgentButton>
197-
</TooltipTrigger>
198-
<TooltipContent>{helperText}</TooltipContent>
199-
</Tooltip>
200-
</TooltipProvider>
201-
);
202-
})}
203-
</div>
176+
{wildcardHostname !== "" &&
177+
devcontainer.container?.ports.map((port) => {
178+
const portLabel = `${port.port}/${port.network.toUpperCase()}`;
179+
const hasHostBind =
180+
port.host_port !== undefined && port.host_ip !== undefined;
181+
const helperText = hasHostBind
182+
? `${port.host_ip}:${port.host_port}`
183+
: "Not bound to host";
184+
const linkDest = hasHostBind
185+
? portForwardURL(
186+
wildcardHostname,
187+
port.host_port,
188+
devcontainer.agent?.name || agent.name,
189+
workspace.name,
190+
workspace.owner_name,
191+
location.protocol === "https" ? "https" : "http",
192+
)
193+
: "";
194+
return (
195+
<TooltipProvider key={portLabel}>
196+
<Tooltip>
197+
<TooltipTrigger asChild>
198+
<AgentButton disabled={!hasHostBind} asChild>
199+
<a href={linkDest}>
200+
<ExternalLinkIcon />
201+
{portLabel}
202+
</a>
203+
</AgentButton>
204+
</TooltipTrigger>
205+
<TooltipContent>{helperText}</TooltipContent>
206+
</Tooltip>
207+
</TooltipProvider>
208+
);
209+
})}
210+
</div>
211+
</>
212+
)}
204213
</section>
205214
);
206215
};

0 commit comments

Comments
 (0)