coder · jaaydenh · Nov 25, 2025 · Nov 27, 2025 · Dec 2, 2025 · Dec 9, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1901,6 +1901,16 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getWorkspaceACL = async (
+		workspaceId: string,
+	): Promise<TypesGen.WorkspaceACL> => {
+		const response = await this.axios.get(
+			`/api/v2/workspaces/${workspaceId}/acl`,
+		);
+
+		return response.data;
+	};
+
 	updateWorkspaceACL = async (
 		workspaceId: string,
 		data: TypesGen.UpdateWorkspaceACL,

diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -5,9 +5,11 @@ import type {
 	ProvisionerLogLevel,
 	UsageAppName,
 	Workspace,
+	WorkspaceACL,
 	WorkspaceAgentLog,
 	WorkspaceBuild,
 	WorkspaceBuildParameter,
+	WorkspaceRole,
 	WorkspacesRequest,
 	WorkspacesResponse,
 } from "api/typesGenerated";
@@ -18,6 +20,7 @@ import {
 } from "modules/workspaces/permissions";
 import type { ConnectionStatus } from "pages/TerminalPage/types";
 import type {
+	MutationOptions,
 	QueryClient,
 	QueryOptions,
 	UseMutationOptions,
@@ -42,6 +45,63 @@ export const workspaceByOwnerAndName = (owner: string, name: string) => {
 	};
 };
 
+const workspaceACLKey = (workspaceId: string) => ["workspaceAcl", workspaceId];
+
+export const workspaceACL = (workspaceId: string) => {
+	return {
+		queryKey: workspaceACLKey(workspaceId),
+		queryFn: () => API.getWorkspaceACL(workspaceId),
+	} satisfies QueryOptions<WorkspaceACL>;
+};
+
+export const setWorkspaceUserRole = (
+	queryClient: QueryClient,
+): MutationOptions<
+	void,
+	unknown,
+	{
+		workspaceId: string;
+		userId: string;
+		role: WorkspaceRole;
+	}
+> => {
+	return {
+		mutationFn: ({ workspaceId, userId, role }) =>
+			API.updateWorkspaceACL(workspaceId, {
+				user_roles: {
+					[userId]: role,
+				},
+			}),
+		onSuccess: async (_res, { workspaceId }) => {
+			await queryClient.invalidateQueries({
+				queryKey: workspaceACLKey(workspaceId),
+			});
+		},
+	};
+};
+
+export const setWorkspaceGroupRole = (
+	queryClient: QueryClient,
+): MutationOptions<
+	void,
+	unknown,
+	{ workspaceId: string; groupId: string; role: WorkspaceRole }
+> => {
+	return {
+		mutationFn: ({ workspaceId, groupId, role }) =>
+			API.updateWorkspaceACL(workspaceId, {
+				group_roles: {
+					[groupId]: role,
+				},
+			}),
+		onSuccess: async (_res, { workspaceId }) => {
+			await queryClient.invalidateQueries({
+				queryKey: workspaceACLKey(workspaceId),
+			});
+		},
+	};
+};
+
 type CreateWorkspaceMutationVariables = CreateWorkspaceRequest & {
 	userId: string;
 };

diff --git a/site/src/components/Select/Select.tsx b/site/src/components/Select/Select.tsx
@@ -141,7 +141,7 @@ export const SelectItem = React.forwardRef<
 		)}
 		{...props}
 	>
-		<span className="absolute right-2 flex items-center justify-center">
+		<span className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center">
 			<SelectPrimitive.ItemIndicator className="size-icon-sm">
 				<Check className="size-icon-sm" />
 			</SelectPrimitive.ItemIndicator>

diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupOption.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupOption.tsx
@@ -0,0 +1,43 @@
+import type { Group, ReducedUser, User } from "api/typesGenerated";
+import { AvatarData } from "components/Avatar/AvatarData";
+import type { HTMLAttributes } from "react";
+import { getGroupSubtitle } from "utils/groups";
+
+type UserOrGroupAutocompleteValue = User | ReducedUser | Group | null;
+
+type UserOption = User | ReducedUser;
+type OptionType = UserOption | Group;
+
+/**
+ * Type guard to check if the value is a Group.
+ * Groups have a "members" property that users don't have.
+ */
+export const isGroup = (
+	value: UserOrGroupAutocompleteValue,
+): value is Group => {
+	return value !== null && typeof value === "object" && "members" in value;
+};
+
+interface UserOrGroupOptionProps {
+	option: OptionType;
+	htmlProps: HTMLAttributes<HTMLLIElement>;
+}
+
+export const UserOrGroupOption = ({
+	option,
+	htmlProps,
+}: UserOrGroupOptionProps) => {
+	const isOptionGroup = isGroup(option);
+
+	return (
+		<li {...htmlProps}>
+			<AvatarData
+				title={
+					isOptionGroup ? option.display_name || option.name : option.username
+				}
+				subtitle={isOptionGroup ? getGroupSubtitle(option) : option.email}
+				src={option.avatar_url}
+			/>
+		</li>
+	);
+};
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx
@@ -1,17 +1,19 @@
-import { css } from "@emotion/react";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import { templaceACLAvailable } from "api/queries/templates";
 import type { Group, ReducedUser } from "api/typesGenerated";
-import { AvatarData } from "components/Avatar/AvatarData";
+import {
+	isGroup,
+	UserOrGroupOption,
+} from "components/UserOrGroupAutocomplete/UserOrGroupOption";
 import { useDebouncedFunction } from "hooks/debounce";
 import { type ChangeEvent, type FC, useState } from "react";
 import { keepPreviousData, useQuery } from "react-query";
 import { prepareQuery } from "utils/filters";
-import { getGroupSubtitle } from "utils/groups";
 
 export type UserOrGroupAutocompleteValue = ReducedUser | Group | null;
+type AutocompleteOption = Exclude<UserOrGroupAutocompleteValue, null>;
 
 type UserOrGroupAutocompleteProps = {
 	value: UserOrGroupAutocompleteValue;
@@ -38,7 +40,7 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
 		enabled: autoComplete.open,
 		placeholderData: keepPreviousData,
 	});
-	const options = aclAvailableQuery.data
+	const options: AutocompleteOption[] = aclAvailableQuery.data
 		? [
 				...aclAvailableQuery.data.groups,
 				...aclAvailableQuery.data.users,
@@ -81,68 +83,38 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
 			onChange={(_, newValue) => {
 				onChange(newValue);
 			}}
-			isOptionEqualToValue={(option, value) => option.id === value.id}
+			isOptionEqualToValue={(option, optionValue) =>
+				option.id === optionValue.id
+			}
 			getOptionLabel={(option) =>
 				isGroup(option) ? option.display_name || option.name : option.email
 			}
-			renderOption={(props, option) => {
-				const isOptionGroup = isGroup(option);
-
-				return (
-					<li {...props}>
-						<AvatarData
-							title={
-								isOptionGroup
-									? option.display_name || option.name
-									: option.username
-							}
-							subtitle={isOptionGroup ? getGroupSubtitle(option) : option.email}
-							src={option.avatar_url}
-						/>
-					</li>
-				);
-			}}
+			renderOption={({ key, ...props }, option) => (
+				<UserOrGroupOption key={key} htmlProps={props} option={option} />
+			)}
 			options={options}
 			loading={aclAvailableQuery.isFetching}
-			css={autoCompleteStyles}
+			className="w-[300px] [&_.MuiFormControl-root]:w-full [&_.MuiInputBase-root]:w-full"
 			renderInput={(params) => (
-				<>
-					<TextField
-						{...params}
-						margin="none"
-						size="small"
-						placeholder="Search for user or group"
-						InputProps={{
-							...params.InputProps,
-							onChange: handleFilterChange,
-							endAdornment: (
-								<>
-									{aclAvailableQuery.isFetching ? (
-										<CircularProgress size={16} />
-									) : null}
-									{params.InputProps.endAdornment}
-								</>
-							),
-						}}
-					/>
-				</>
+				<TextField
+					{...params}
+					margin="none"
+					size="small"
+					placeholder="Search for user or group"
+					InputProps={{
+						...params.InputProps,
+						onChange: handleFilterChange,
+						endAdornment: (
+							<>
+								{aclAvailableQuery.isFetching ? (
+									<CircularProgress size={16} />
+								) : null}
+								{params.InputProps.endAdornment}
+							</>
+						),
+					}}
+				/>
 			)}
 		/>
 	);
 };
-
-const isGroup = (value: UserOrGroupAutocompleteValue): value is Group => {
-	return value !== null && "members" in value;
-};
-
-const autoCompleteStyles = css`
-  width: 300px;
-
-  & .MuiFormControl-root {
-    width: 100%;
-  }
-
-  & .MuiInputBase-root {
-    width: 100%;
-  }
-`;