feat(site): allow recreating devcontainers and showing dirty status

This change allows showing the devcontainer dirty status in the UI as well as a recreate button to update the devcontainer. Closes #16424
coder · mafredri · May 27, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
commit 17712b201725f4dda390eb16b2e43b309d45a85d
diff --git a/agent/agent_test.go b/agent/agent_test.go
@@ -2226,7 +2226,7 @@ func TestAgent_DevcontainerRecreate(t *testing.T) {
 	// devcontainer, we do it in a goroutine so we can process logs
 	// concurrently.
 	go func(container codersdk.WorkspaceAgentContainer) {
-		err := conn.RecreateDevcontainer(ctx, container.ID)
+		_, err := conn.RecreateDevcontainer(ctx, container.ID)
 		assert.NoError(t, err, "recreate devcontainer should succeed")
 	}(container)
 

diff --git a/coderd/workspaceagents.go b/coderd/workspaceagents.go
@@ -956,7 +956,7 @@ func (api *API) workspaceAgentRecreateDevcontainer(rw http.ResponseWriter, r *ht
 	}
 	defer release()
 
-	err = agentConn.RecreateDevcontainer(ctx, container)
+	m, err := agentConn.RecreateDevcontainer(ctx, container)
 	if err != nil {
 		if errors.Is(err, context.Canceled) {
 			httpapi.Write(ctx, rw, http.StatusRequestTimeout, codersdk.Response{
@@ -977,7 +977,7 @@ func (api *API) workspaceAgentRecreateDevcontainer(rw http.ResponseWriter, r *ht
 		return
 	}
 
-	httpapi.Write(ctx, rw, http.StatusNoContent, nil)
+	httpapi.Write(ctx, rw, http.StatusAccepted, m)
 }
 
 // @Summary Get connection info for workspace agent

diff --git a/coderd/workspaceagents_test.go b/coderd/workspaceagents_test.go
@@ -1483,7 +1483,7 @@ func TestWorkspaceAgentRecreateDevcontainer(t *testing.T) {
 
 				ctx := testutil.Context(t, testutil.WaitLong)
 
-				err := client.WorkspaceAgentRecreateDevcontainer(ctx, agentID, devContainer.ID)
+				_, err := client.WorkspaceAgentRecreateDevcontainer(ctx, agentID, devContainer.ID)
 				if wantStatus > 0 {
 					cerr, ok := codersdk.AsError(err)
 					require.True(t, ok, "expected error to be a coder error")

diff --git a/codersdk/workspaceagents.go b/codersdk/workspaceagents.go
@@ -518,16 +518,20 @@ func (c *Client) WorkspaceAgentListContainers(ctx context.Context, agentID uuid.
 }
 
 // WorkspaceAgentRecreateDevcontainer recreates the devcontainer with the given ID.
-func (c *Client) WorkspaceAgentRecreateDevcontainer(ctx context.Context, agentID uuid.UUID, containerIDOrName string) error {
+func (c *Client) WorkspaceAgentRecreateDevcontainer(ctx context.Context, agentID uuid.UUID, containerIDOrName string) (Response, error) {
 	res, err := c.Request(ctx, http.MethodPost, fmt.Sprintf("/api/v2/workspaceagents/%s/containers/devcontainers/container/%s/recreate", agentID, containerIDOrName), nil)
 	if err != nil {
-		return err
+		return Response{}, err
 	}
 	defer res.Body.Close()
-	if res.StatusCode != http.StatusNoContent {
-		return ReadBodyAsError(res)
+	if res.StatusCode != http.StatusAccepted {
+		return Response{}, ReadBodyAsError(res)
 	}
-	return nil
+	var m Response
+	if err := json.NewDecoder(res.Body).Decode(&m); err != nil {
+		return Response{}, xerrors.Errorf("decode response body: %w", err)
+	}
+	return m, nil
 }
 
 //nolint:revive // Follow is a control flag on the server as well.

diff --git a/codersdk/workspacesdk/agentconn.go b/codersdk/workspacesdk/agentconn.go
@@ -389,18 +389,22 @@ func (c *AgentConn) ListContainers(ctx context.Context) (codersdk.WorkspaceAgent
 
 // RecreateDevcontainer recreates a devcontainer with the given container.
 // This is a blocking call and will wait for the container to be recreated.
-func (c *AgentConn) RecreateDevcontainer(ctx context.Context, containerIDOrName string) error {
+func (c *AgentConn) RecreateDevcontainer(ctx context.Context, containerIDOrName string) (codersdk.Response, error) {
 	ctx, span := tracing.StartSpan(ctx)
 	defer span.End()
 	res, err := c.apiRequest(ctx, http.MethodPost, "/api/v0/containers/devcontainers/container/"+containerIDOrName+"/recreate", nil)
 	if err != nil {
-		return xerrors.Errorf("do request: %w", err)
+		return codersdk.Response{}, xerrors.Errorf("do request: %w", err)
 	}
 	defer res.Body.Close()
 	if res.StatusCode != http.StatusAccepted {
-		return codersdk.ReadBodyAsError(res)
+		return codersdk.Response{}, codersdk.ReadBodyAsError(res)
 	}
-	return nil
+	var m codersdk.Response
+	if err := json.NewDecoder(res.Body).Decode(&m); err != nil {
+		return codersdk.Response{}, xerrors.Errorf("decode response body: %w", err)
+	}
+	return m, nil
 }
 
 // apiRequest makes a request to the workspace agent's HTTP API server.

diff --git a/site/src/modules/resources/AgentDevcontainerCard.tsx b/site/src/modules/resources/AgentDevcontainerCard.tsx
@@ -3,14 +3,24 @@ import type {
 	WorkspaceAgent,
 	WorkspaceAgentContainer,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
+import { displayError } from "components/GlobalSnackbar/utils";
+import {
+	HelpTooltip,
+	HelpTooltipContent,
+	HelpTooltipText,
+	HelpTooltipTitle,
+	HelpTooltipTrigger,
+} from "components/HelpTooltip/HelpTooltip";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
-import { ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon, Loader2Icon } from "lucide-react";
 import type { FC } from "react";
+import { useState } from "react";
 import { portForwardURL } from "utils/portForward";
 import { AgentButton } from "./AgentButton";
 import { AgentDevcontainerSSHButton } from "./SSHButton/SSHButton";
@@ -32,24 +42,94 @@ export const AgentDevcontainerCard: FC<AgentDevcontainerCardProps> = ({
 }) => {
 	const folderPath = container.labels["devcontainer.local_folder"];
 	const containerFolder = container.volumes[folderPath];
+	const [isRecreating, setIsRecreating] = useState(false);
+
+	const handleRecreateDevcontainer = async () => {
+		setIsRecreating(true);
+		let recreateSucceeded = false;
+		try {
+			const response = await fetch(
+				`/api/v2/workspaceagents/${agent.id}/containers/devcontainers/container/${container.id}/recreate`,
+				{
+					method: "POST",
+				},
+			);
+			if (!response.ok) {
+				const errorData = await response.json().catch(() => ({}));
+				throw new Error(
+					errorData.message || `Failed to recreate: ${response.statusText}`,
+				);
+			}
+			// If the request was accepted (e.g. 202), we mark it as succeeded.
+			// Once complete, the component will unmount, so the spinner will
+			// disappear with it.
+			if (response.status === 202) {
+				recreateSucceeded = true;
+			}
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : "An unknown error occurred.";
+			displayError(`Failed to recreate devcontainer: ${errorMessage}`);
+			console.error("Failed to recreate devcontainer:", error);
+		} finally {
+			if (!recreateSucceeded) {
+				setIsRecreating(false);
+			}
+		}
+	};
 
 	return (
 		<section
 			className="border border-border border-dashed rounded p-6 "
 			key={container.id}
 		>
-			<header className="flex justify-between">
-				<h3 className="m-0 text-xs font-medium text-content-secondary">
-					{container.name}
-				</h3>
+			<header className="flex justify-between items-center mb-4">
+				<div className="flex items-center gap-2">
+					<h3 className="m-0 text-xs font-medium text-content-secondary">
+						{container.name}
+					</h3>
+					{container.devcontainer_dirty && (
+						<HelpTooltip>
+							<HelpTooltipTrigger className="flex items-center text-xs text-warning-foreground ml-2">
+								<span>Outdated</span>
+							</HelpTooltipTrigger>
+							<HelpTooltipContent>
+								<HelpTooltipTitle>Devcontainer Outdated</HelpTooltipTitle>
+								<HelpTooltipText>
+									Devcontainer configuration has been modified and is outdated.
+									Recreate to get an up-to-date container.
+								</HelpTooltipText>
+							</HelpTooltipContent>
+						</HelpTooltip>
+					)}
+				</div>
 
-				<AgentDevcontainerSSHButton
-					workspace={workspace.name}
-					container={container.name}
-				/>
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						className="text-xs font-medium"
+						onClick={handleRecreateDevcontainer}
+						disabled={isRecreating}
+					>
+						{isRecreating ? (
+							<>
+								<Loader2Icon className="mr-2 h-4 w-4 animate-spin" />
+								Recreating...
+							</>
+						) : (
+							"Recreate"
+						)}
+					</Button>
+
+					<AgentDevcontainerSSHButton
+						workspace={workspace.name}
+						container={container.name}
+					/>
+				</div>
 			</header>
 
-			<h4 className="m-0 text-xl font-semibold">Forwarded ports</h4>
+			<h4 className="m-0 text-xl font-semibold mb-2">Forwarded ports</h4>
 
 			<div className="flex gap-4 flex-wrap mt-4">
 				<VSCodeDevContainerButton