Nov 25, 2025 · Nov 27, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 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
 ProvisionerLogLevel,
 UsageAppName,
 Workspace,
 WorkspaceACL,
 WorkspaceAgentLog,
 WorkspaceBuild,
 WorkspaceBuildParameter,
 WorkspaceRole,
 WorkspacesRequest,
 WorkspacesResponse,
 } from "api/typesGenerated";
 } from "modules/workspaces/permissions";
 import type { ConnectionStatus } from "pages/TerminalPage/types";
 import type {
 MutationOptions,
 QueryClient,
 QueryOptions,
 UseMutationOptions,
 };
 };

 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/UserOrGroupAutocomplete/UserOrGroupOption.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupOption.tsx
 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>;
 }

 /**
 * Shared render component for user/group autocomplete options.
 * Displays avatar, name, and subtitle for both users and groups.
 */
 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>
 );
 };

 /**
 * Tailwind classes for the autocomplete container.
 * Apply to the MUI Autocomplete component.
 */
 export const autocompleteClassName =
 "w-[300px] [&_.MuiFormControl-root]:w-full [&_.MuiInputBase-root]:w-full";
diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx
 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 {
 autocompleteClassName,
 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;
 enabled: autoComplete.open,
 placeholderData: keepPreviousData,
 });
 const options = aclAvailableQuery.data
 const options: AutocompleteOption[] = aclAvailableQuery.data
 ? [
 ...aclAvailableQuery.data.groups,
 ...aclAvailableQuery.data.users,
 );

 return (
 <Autocomplete
 <Autocomplete<AutocompleteOption, false, false, false>
 noOptionsText="No users or groups found"
 value={value}
 value={value ?? null}
 id="user-or-group-autocomplete"
 open={autoComplete.open}
 onOpen={() => {
 onChange={(_, newValue) => {
 onChange(newValue);
 }}
 isOptionEqualToValue={(option, value) => option.id === value.id}
 isOptionEqualToValue={(option, optionValue) =>
 optionValue !== null && 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={(props, option) => (
 <UserOrGroupOption htmlProps={props} option={option} />
 )}
 options={options}
 loading={aclAvailableQuery.isFetching}
 css={autoCompleteStyles}
 className={autocompleteClassName}
 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%;
  }
 `;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,9 +5,11 @@ import type {
		ProvisionerLogLevel,
		UsageAppName,
		Workspace,
		WorkspaceACL,
		WorkspaceAgentLog,
		WorkspaceBuild,
		WorkspaceBuildParameter,
		WorkspaceRole,
		WorkspacesRequest,
		WorkspacesResponse,
		} from "api/typesGenerated";
Expand All		@@ -18,6 +20,7 @@ import {
		} from "modules/workspaces/permissions";
		import type { ConnectionStatus } from "pages/TerminalPage/types";
		import type {
		MutationOptions,
		QueryClient,
		QueryOptions,
		UseMutationOptions,
Expand All		@@ -42,6 +45,66 @@ 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;
		};
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,54 @@
		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>;
		}

		/**
		* Shared render component for user/group autocomplete options.
		* Displays avatar, name, and subtitle for both users and groups.
		*/
		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>
		);
		};

		/**
		* Tailwind classes for the autocomplete container.
		* Apply to the MUI Autocomplete component.
		*/
		export const autocompleteClassName =
		"w-[300px] [&_.MuiFormControl-root]:w-full [&_.MuiInputBase-root]:w-full";
Original file line number	Diff line number	Diff line change
		@@ -1,17 +1,20 @@
		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 {
		autocompleteClassName,
		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;
Expand All		@@ -38,7 +41,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,
Expand All		@@ -61,9 +64,9 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
		);

		return (
		<Autocomplete
		<Autocomplete<AutocompleteOption, false, false, false>
		noOptionsText="No users or groups found"
		value={value}
		value={value ?? null}
		id="user-or-group-autocomplete"
		open={autoComplete.open}
		onOpen={() => {
Expand All		@@ -81,68 +84,38 @@ export const UserOrGroupAutocomplete: FC<UserOrGroupAutocompleteProps> = ({
		onChange={(_, newValue) => {
		onChange(newValue);
		}}
		isOptionEqualToValue={(option, value) => option.id === value.id}
		isOptionEqualToValue={(option, optionValue) =>
		optionValue !== null && 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={(props, option) => (
		<UserOrGroupOption htmlProps={props} option={option} />
		)}
		options={options}
		loading={aclAvailableQuery.isFetching}
		css={autoCompleteStyles}
		className={autocompleteClassName}
		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%;
		}
		`;