From cbe46c816eadc96f562a84403855a26a25cb7c91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kayla=20=E3=81=AF=E3=81=AA?= <mckayla@hey.com>
Date: Tue, 10 Mar 2026 12:26:33 -0600
Subject: [PATCH] feat: add workspace sharing buttons to tasks (#22729)

Attempt to re-merge https://github.com/coder/coder/pull/21491 now that
the supporting backend work is done

Closes https://github.com/coder/coder/issues/22278
---
 coderd/workspaces.go                          | 11 ----
 .../tasks/TasksSidebar/TasksSidebar.tsx       |  6 +-
 .../WorkspaceSharingForm.tsx                  | 14 +----
 site/src/pages/TaskPage/TaskPage.tsx          |  8 ++-
 site/src/pages/TaskPage/TaskTopbar.tsx        | 18 +++++-
 .../src/pages/TasksPage/TasksPage.stories.tsx |  2 +-
 site/src/pages/TasksPage/TasksPage.tsx        | 59 ++++++++++++-------
 site/src/pages/TasksPage/TasksTable.tsx       |  4 +-
 .../WorkspaceActions/ShareButton.tsx          |  5 +-
 .../WorkspaceSharingPageView.tsx              |  1 -
 10 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/coderd/workspaces.go b/coderd/workspaces.go
index f2114e1f92..4c1359f9de 100644
--- a/coderd/workspaces.go
+++ b/coderd/workspaces.go
@@ -2354,17 +2354,6 @@ func (api *API) patchWorkspaceACL(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	// Don't allow adding new groups or users to a workspace associated with a
-	// task. Sharing a task workspace without sharing the task itself is a broken
-	// half measure that we don't want to support right now. To be fixed!
-	if workspace.TaskID.Valid {
-		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
-			Message: "Task workspaces cannot be shared.",
-			Detail:  "This workspace is managed by a task. Task sharing has not yet been implemented.",
-		})
-		return
-	}
-
 	apiKey := httpmw.APIKey(r)
 	if _, ok := req.UserRoles[apiKey.UserID.String()]; ok {
 		httpapi.Write(ctx, rw, http.StatusBadRequest, codersdk.Response{
diff --git a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
index aa920cd60d..0fff35aa06 100644
--- a/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
+++ b/site/src/modules/tasks/TasksSidebar/TasksSidebar.tsx
@@ -103,10 +103,8 @@ export const TasksSidebar: FC = () => {
 							<Button
 								variant={isCollapsed ? "subtle" : "default"}
 								size={isCollapsed ? "icon" : "sm"}
-								asChild={true}
-								className={cn({
-									"[&_svg]:p-0": isCollapsed,
-								})}
+								asChild
+								className={cn({ "[&_svg]:p-0": isCollapsed })}
 							>
 								<RouterLink to="/tasks">
 									<span className={isCollapsed ? "hidden" : ""}>New Task</span>{" "}
diff --git a/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx b/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
index 50a24441ee..ae027cd2d4 100644
--- a/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
+++ b/site/src/modules/workspaces/WorkspaceSharingForm/WorkspaceSharingForm.tsx
@@ -144,7 +144,6 @@ interface WorkspaceSharingFormProps {
 	organizationId: string;
 	workspaceACL: WorkspaceACL | undefined;
 	canUpdatePermissions: boolean;
-	isTaskWorkspace: boolean;
 	error: unknown;
 	onUpdateUser: (user: WorkspaceUser, role: WorkspaceRole) => void;
 	updatingUserId: WorkspaceUser["id"] | undefined;
@@ -161,7 +160,6 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 	organizationId,
 	workspaceACL,
 	canUpdatePermissions,
-	isTaskWorkspace,
 	error,
 	updatingUserId,
 	onUpdateUser,
@@ -231,17 +229,7 @@ export const WorkspaceSharingForm: FC<WorkspaceSharingFormProps> = ({
 
 	const tableBody = (
 		<TableBody>
-			{isTaskWorkspace ? (
-				<TableRow>
-					<TableCell colSpan={999}>
-						<EmptyState
-							message="Task workspaces cannot be shared"
-							description="This workspace is managed by a task. Task sharing has not yet been implemented."
-							isCompact={isCompact}
-						/>
-					</TableCell>
-				</TableRow>
-			) : !workspaceACL ? (
+			{!workspaceACL ? (
 				<TableLoader />
 			) : isEmpty ? (
 				<TableRow>
diff --git a/site/src/pages/TaskPage/TaskPage.tsx b/site/src/pages/TaskPage/TaskPage.tsx
index 3a5b8f9f9e..bf9604c477 100644
--- a/site/src/pages/TaskPage/TaskPage.tsx
+++ b/site/src/pages/TaskPage/TaskPage.tsx
@@ -5,6 +5,7 @@ import { template as templateQueryOptions } from "api/queries/templates";
 import {
 	workspaceByOwnerAndName,
 	workspaceByOwnerAndNameKey,
+	workspacePermissions,
 } from "api/queries/workspaces";
 import type {
 	Task,
@@ -118,6 +119,7 @@ const TaskPage = () => {
 			return state.error ? false : 5_000;
 		},
 	});
+	const { data: permissions } = useQuery(workspacePermissions(workspace));
 	const refetch = taskQuery.error ? taskQuery.refetch : workspaceQuery.refetch;
 	const error = taskQuery.error ?? workspaceQuery.error;
 	const waitingStatuses: WorkspaceStatus[] = ["starting", "pending"];
@@ -361,7 +363,11 @@ const TaskPage = () => {
 		<TaskPageLayout>
 			<title>{pageTitle(task.display_name)}</title>
 
-			<TaskTopbar task={task} workspace={workspace} />
+			<TaskTopbar
+				task={task}
+				workspace={workspace}
+				canUpdatePermissions={permissions?.updateWorkspace ?? false}
+			/>
 			{content}
 
 			<ModifyPromptDialog
diff --git a/site/src/pages/TaskPage/TaskTopbar.tsx b/site/src/pages/TaskPage/TaskTopbar.tsx
index e0a21729d5..d0c13c27f4 100644
--- a/site/src/pages/TaskPage/TaskTopbar.tsx
+++ b/site/src/pages/TaskPage/TaskTopbar.tsx
@@ -21,12 +21,21 @@ import {
 } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
+import { ShareButton } from "../WorkspacePage/WorkspaceActions/ShareButton";
 import { TaskStartupWarningButton } from "./TaskStartupWarningButton";
 import { TaskStatusLink } from "./TaskStatusLink";
 
-type TaskTopbarProps = { task: Task; workspace: Workspace };
+type TaskTopbarProps = {
+	task: Task;
+	workspace: Workspace;
+	canUpdatePermissions: boolean;
+};
 
-export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
+export const TaskTopbar: FC<TaskTopbarProps> = ({
+	task,
+	workspace,
+	canUpdatePermissions,
+}) => {
 	return (
 		<header className="flex flex-shrink-0 items-center gap-2 p-3 border-solid border-border border-0 border-b">
 			<TooltipProvider>
@@ -81,6 +90,11 @@ export const TaskTopbar: FC<TaskTopbarProps> = ({ task, workspace }) => {
 					</PopoverContent>
 				</Popover>
 
+				<ShareButton
+					workspace={workspace}
+					canUpdatePermissions={canUpdatePermissions}
+				/>
+
 				<Button asChild variant="outline" size="sm">
 					<RouterLink to={`/@${workspace.owner_name}/${workspace.name}`}>
 						<LayoutPanelTopIcon />
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
index 011dff8f5f..83e6f51789 100644
--- a/site/src/pages/TasksPage/TasksPage.stories.tsx
+++ b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -195,7 +195,7 @@ export const LoadedTasksWaitingForInputTab: Story = {
 		const canvas = within(canvasElement);
 
 		await step("Switch to 'Waiting for input' tab", async () => {
-			const waitingForInputTab = await canvas.findByRole("button", {
+			const waitingForInputTab = await canvas.findByRole("switch", {
 				name: /waiting for input/i,
 			});
 			await userEvent.click(waitingForInputTab);
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
index 8ec311b088..18510fd005 100644
--- a/site/src/pages/TasksPage/TasksPage.tsx
+++ b/site/src/pages/TasksPage/TasksPage.tsx
@@ -26,6 +26,7 @@ import {
 	PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Spinner } from "components/Spinner/Spinner";
+import { Switch } from "components/Switch/Switch";
 import { TableToolbar } from "components/TableToolbar/TableToolbar";
 import { useAuthenticated } from "hooks";
 import { useSearchParamsKey } from "hooks/useSearchParamsKey";
@@ -57,10 +58,6 @@ const TasksPage: FC = () => {
 		key: "owner",
 		defaultValue: user.username,
 	});
-	const tab = useSearchParamsKey({
-		key: "tab",
-		defaultValue: "all",
-	});
 	const filter: TasksFilter = {
 		owner: ownerFilter.value,
 	};
@@ -69,11 +66,15 @@ const TasksPage: FC = () => {
 		queryFn: () => API.getTasks(filter),
 		refetchInterval: 10_000,
 	});
+	const statusFilter = useSearchParamsKey({
+		key: "status",
+		defaultValue: "",
+	});
 	const idleTasks = tasksQuery.data?.filter(
 		(task) => task.status === "active" && task.current_state?.state === "idle",
 	);
 	const displayedTasks =
-		tab.value === "waiting-for-input" ? idleTasks : tasksQuery.data;
+		statusFilter.value === "waiting-for-input" ? idleTasks : tasksQuery.data;
 
 	const [checkedTaskIds, setCheckedTaskIds] = useState<Set<string>>(new Set());
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -171,28 +172,44 @@ const TasksPage: FC = () => {
 						aiTemplatesQuery.data &&
 						aiTemplatesQuery.data.length > 0 && (
 							<section className="py-8">
-								{permissions.viewDeploymentConfig && (
-									<section
-										className="mt-6 flex justify-between"
-										aria-label="Controls"
-									>
+								<section
+									className="mt-6 flex justify-between"
+									aria-label="Controls"
+								>
+									<div className="flex items-center gap-x-6">
 										<div className="flex items-center bg-surface-secondary rounded-lg p-1">
 											<PillButton
-												active={tab.value === "all"}
+												active={ownerFilter.value === user.username}
 												onClick={() => {
-													tab.setValue("all");
+													ownerFilter.setValue(user.username);
+													setCheckedTaskIds(new Set());
+												}}
+											>
+												My tasks
+											</PillButton>
+											<PillButton
+												active={ownerFilter.value === ""}
+												onClick={() => {
+													ownerFilter.setValue("");
 													setCheckedTaskIds(new Set());
 												}}
 											>
 												All tasks
 											</PillButton>
-											<PillButton
-												disabled={!idleTasks || idleTasks.length === 0}
-												active={tab.value === "waiting-for-input"}
-												onClick={() => {
-													tab.setValue("waiting-for-input");
+										</div>
+										<div className="flex items-center gap-2">
+											<Switch
+												id="waiting-for-input"
+												onCheckedChange={(checked) => {
+													statusFilter.setValue(
+														checked ? "waiting-for-input" : "",
+													);
 													setCheckedTaskIds(new Set());
 												}}
+											/>
+											<label
+												htmlFor="waiting-for-input"
+												className="flex items-center gap-2 text-sm text-content-primary select-none cursor-pointer"
 											>
 												Waiting for input
 												{idleTasks && idleTasks.length > 0 && (
@@ -200,9 +217,11 @@ const TasksPage: FC = () => {
 														{idleTasks.length}
 													</Badge>
 												)}
-											</PillButton>
+											</label>
 										</div>
+									</div>
 
+									{permissions.viewAllUsers && (
 										<UsersCombobox
 											value={ownerFilter.value}
 											onValueChange={(username) => {
@@ -212,8 +231,8 @@ const TasksPage: FC = () => {
 												setCheckedTaskIds(new Set());
 											}}
 										/>
-									</section>
-								)}
+									)}
+								</section>
 
 								<div className="mt-6">
 									<TableToolbar>
diff --git a/site/src/pages/TasksPage/TasksTable.tsx b/site/src/pages/TasksPage/TasksTable.tsx
index 0f1eb79a76..3746717e64 100644
--- a/site/src/pages/TasksPage/TasksTable.tsx
+++ b/site/src/pages/TasksPage/TasksTable.tsx
@@ -209,7 +209,9 @@ const TaskRow: FC<TaskRowProps> = ({ task, checked, onCheckChange }) => {
 	const taskPageLink = `/tasks/${task.owner_name}/${task.id}`;
 	// Discard role, breaks Chromatic.
 	const { role, ...clickableRowProps } = useClickableTableRow({
-		onClick: () => navigate(taskPageLink),
+		onClick: () => {
+			navigate(taskPageLink);
+		},
 	});
 
 	return (
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/ShareButton.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/ShareButton.tsx
index 6050371c51..fa426ff591 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/ShareButton.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/ShareButton.tsx
@@ -34,14 +34,15 @@ export const ShareButton: FC<ShareButtonProps> = ({
 			</PopoverTrigger>
 			<PopoverContent align="end" className="w-[580px] p-4">
 				<div className="flex items-center gap-2 mb-4">
-					<h3 className="text-lg font-semibold m-0">Workspace Sharing</h3>
+					<h3 className="text-lg font-semibold m-0">
+						{workspace.task_id ? "Task" : "Workspace"} Sharing
+					</h3>
 					<FeatureStageBadge contentType="beta" size="sm" />
 				</div>
 				<WorkspaceSharingForm
 					organizationId={workspace.organization_id}
 					workspaceACL={sharing.workspaceACL}
 					canUpdatePermissions={canUpdatePermissions}
-					isTaskWorkspace={Boolean(workspace.task_id)}
 					error={sharing.error ?? sharing.mutationError}
 					updatingUserId={sharing.updatingUserId}
 					onUpdateUser={sharing.updateUser}
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPageView.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPageView.tsx
index 7b8c93fc15..1c2a5329c0 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPageView.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSharingPage/WorkspaceSharingPageView.tsx
@@ -55,7 +55,6 @@ export const WorkspaceSharingPageView: FC<WorkspaceSharingPageViewProps> = ({
 			organizationId={workspace.organization_id}
 			workspaceACL={workspaceACL}
 			canUpdatePermissions={canUpdatePermissions}
-			isTaskWorkspace={Boolean(workspace.task_id)}
 			error={error}
 			updatingUserId={updatingUserId}
 			onUpdateUser={onUpdateUser}