reduce button explosion

johnstcn · johnstcn · commit da8bd12701a6 · 2025-06-19T16:14:50.000+01:00
diff --git a/site/src/modules/workspaces/actions.ts b/site/src/modules/workspaces/actions.ts
@@ -6,15 +6,15 @@ import type { Workspace } from "api/typesGenerated";
 const actionTypes = [
 	"start",
 	"starting",
-	// Replaces start when an update is available.
+	// Appears beside start when an update is available.
 	"updateAndStart",
 	// Replaces start when an update is required.
 	"updateAndStartRequireActiveVersion",
 	"stop",
 	"stopping",
 	"restart",
 	"restarting",
-	// Replaces restart when an update is available.
+	// Appears beside restart when an update is available.
 	"updateAndRestart",
 	// Replaces restart when an update is required.
 	"updateAndRestartRequireActiveVersion",
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx
@@ -18,39 +18,33 @@ export interface ActionButtonProps {
 	handleAction: (buildParameters?: WorkspaceBuildParameter[]) => void;
 	disabled?: boolean;
 	tooltipText?: string;
+	isRunning?: boolean;
+	requireActiveVersion?: boolean;
 }
 
-export const UpdateAndStartButton: FC<ActionButtonProps> = ({
+export const UpdateButton: FC<ActionButtonProps> = ({
 	handleAction,
 	loading,
+	isRunning,
+	requireActiveVersion,
 }) => {
 	return (
-		<Tooltip title="Start workspace with the latest template version.">
+		<Tooltip
+			title={
+				requireActiveVersion
+					? "This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version."
+					: isRunning
+						? "Stop workspace and restart it with the latest template version."
+						: "Start workspace with the latest template version."
+			}
+		>
 			<TopbarButton
-				disabled={loading}
 				data-testid="workspace-update-button"
-				onClick={() => handleAction()}
-			>
-				<CirclePlayIcon />
-				{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
-			</TopbarButton>
-		</Tooltip>
-	);
-};
-
-export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
-	handleAction,
-	loading,
-}) => {
-	return (
-		<Tooltip title="Stop workspace, if running, and restart it with the latest template version.">
-			<TopbarButton
 				disabled={loading}
-				data-testid="workspace-update-and-restart-button"
 				onClick={() => handleAction()}
 			>
-				<RotateCcwIcon />
-				{loading ? <>Updating&hellip;</> : <>Update and restart&hellip;</>}
+				{isRunning ? <RotateCcwIcon /> : <CirclePlayIcon />}
+				{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
 			</TopbarButton>
 		</Tooltip>
 	);
@@ -103,19 +97,6 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	);
 };
 
-export const UpdateAndStartButtonRequireActiveVersion: FC<
-	ActionButtonProps
-> = ({ handleAction }) => {
-	return (
-		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
-			<TopbarButton onClick={() => handleAction()}>
-				<CirclePlayIcon />
-				Update and start&hellip;
-			</TopbarButton>
-		</Tooltip>
-	);
-};
-
 export const StopButton: FC<ActionButtonProps> = ({
 	handleAction,
 	loading,
@@ -157,19 +138,6 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	);
 };
 
-export const UpdateAndRestartButtonRequireActiveVersion: FC<
-	ActionButtonProps
-> = ({ handleAction }) => {
-	return (
-		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
-			<TopbarButton onClick={() => handleAction()}>
-				<RotateCcwIcon />
-				Update and restart&hellip;
-			</TopbarButton>
-		</Tooltip>
-	);
-};
-
 export const CancelButton: FC<ActionButtonProps> = ({ handleAction }) => {
 	return (
 		<TopbarButton onClick={() => handleAction()}>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -18,10 +18,7 @@ import {
 	RestartButton,
 	StartButton,
 	StopButton,
-	UpdateAndRestartButton,
-	UpdateAndRestartButtonRequireActiveVersion,
-	UpdateAndStartButton,
-	UpdateAndStartButtonRequireActiveVersion,
+	UpdateButton,
 } from "./Buttons";
 import { DebugButton } from "./DebugButton";
 import { RetryButton } from "./RetryButton";
@@ -82,15 +79,35 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 
 	// A mapping of button type to the corresponding React component
 	const buttonMapping: Record<ActionType, ReactNode> = {
-		updateAndStart: <UpdateAndStartButton handleAction={handleUpdate} />,
+		updateAndStart: (
+			<UpdateButton
+				handleAction={handleUpdate}
+				isRunning={false}
+				requireActiveVersion={false}
+			/>
+		),
 		updateAndStartRequireActiveVersion: (
-			<UpdateAndStartButtonRequireActiveVersion handleAction={handleUpdate} />
+			<UpdateButton
+				handleAction={handleUpdate}
+				isRunning={false}
+				requireActiveVersion={true}
+			/>
+		),
+		updateAndRestart: (
+			<UpdateButton
+				handleAction={handleUpdate}
+				isRunning={true}
+				requireActiveVersion={false}
+			/>
 		),
-		updateAndRestart: <UpdateAndRestartButton handleAction={handleUpdate} />,
 		updateAndRestartRequireActiveVersion: (
-			<UpdateAndRestartButtonRequireActiveVersion handleAction={handleUpdate} />
+			<UpdateButton
+				handleAction={handleUpdate}
+				isRunning={true}
+				requireActiveVersion={true}
+			/>
 		),
-		updating: <UpdateAndStartButton loading handleAction={handleUpdate} />,
+		updating: <UpdateButton loading handleAction={handleUpdate} />,
 		start: (
 			<StartButton
 				workspace={workspace}
