Oct 10, 2022 · Sep 13, 2022 · Sep 13, 2022 · Sep 13, 2022 · Sep 15, 2022 · Sep 17, 2022
diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
  value: UserOrGroupAutocompleteValue
  onChange: (value: UserOrGroupAutocompleteValue) => void
  organizationId: string
  exclude: UserOrGroupAutocompleteValue[]
 }

 export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = ({
  value,
  onChange,
  organizationId,
  exclude,
 }) => {
  const styles = useStyles()
  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
    },
  })
  const { userResults, groupResults } = searchState.context
  const options = [...groupResults, ...userResults].filter((result) => {
    const excludeIds = exclude.map((optionToExclude) => optionToExclude?.id)
    return !excludeIds.includes(result.id)
  })

  const handleFilterChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
    sendSearch("SEARCH", { query: event.target.value })
  }, 500)
          />
        )
      }}
      options={[...groupResults, ...userResults]}
      options={options}
      loading={searchState.matches("searching")}
      className={styles.autocomplete}
      renderInput={(params) => (
diff --git a/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx b/site/src/pages/TemplatePage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx
 import { FC, useState } from "react"
 import { Maybe } from "components/Conditionals/Maybe"

 const AddTemplateUserOrGroup: React.FC<{
 type AddTemplateUserOrGroupProps ={
  organizationId: string
  isLoading: boolean
  templateACL: TemplateACL | undefined
  onSubmit: (
    userOrGroup: TemplateUser | TemplateGroup,
    role: TemplateRole,
    reset: () => void,
  ) => void
 }> = ({ isLoading, onSubmit, organizationId }) => {
 }

 const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
  isLoading,
  onSubmit,
  organizationId,
  templateACL,
 }) => {
  const styles = useStyles()
  const [selectedOption, setSelectedOption] = useState<UserOrGroupAutocompleteValue>(null)
  const [selectedRole, setSelectedRole] = useState<TemplateRole>("view")
  const excludeFromAutocomplete = templateACL ? [...templateACL.group, ...templateACL.users] : []

  const resetValues = () => {
    setSelectedOption(null)
    >
      <Stack direction="row" alignItems="center" spacing={1}>
        <UserOrGroupAutocomplete
          exclude={excludeFromAutocomplete}
          organizationId={organizationId}
          value={selectedOption}
          onChange={(newValue) => {
    <Stack spacing={2.5}>
      <Maybe condition={canUpdatePermissions}>
        <AddTemplateUserOrGroup
          templateACL={templateACL}
          organizationId={organizationId}
          isLoading={isAddingUser || isAddingGroup}
          onSubmit={(value, role, resetAutocomplete) =>
diff --git a/site/src/xServices/template/searchUsersAndGroupsXService.ts b/site/src/xServices/template/searchUsersAndGroupsXService.ts
 export const searchUsersAndGroupsMachine = createMachine(
  {
    id: "searchUsersAndGroups",
    predictableActionArguments: true,
    schema: {
      context: {} as {
        organizationId: string
    states: {
      idle: {
        on: {
          SEARCH: "searching",
          SEARCH: {
            target: "searching",
            cond: "queryHasMinLength",
          },
          CLEAR_RESULTS: {
            actions: ["clearResults"],
            target: "idle",
        groupResults: (_) => [],
      }),
    },
    guards: {
      queryHasMinLength: (_, { query }) => query.length >= 3,
    },
  },
 )
diff --git a/yarn.lock b/yarn.lock
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,12 +19,14 @@ export type UserOrGroupAutocompleteProps = {
		value: UserOrGroupAutocompleteValue
		onChange: (value: UserOrGroupAutocompleteValue) => void
		organizationId: string
		exclude: UserOrGroupAutocompleteValue[]
		}

		export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = ({
		value,
		onChange,
		organizationId,
		exclude,
		}) => {
		const styles = useStyles()
		const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
Expand All		@@ -36,6 +38,11 @@ export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = (
		},
		})
		const { userResults, groupResults } = searchState.context
		const options = [...groupResults, ...userResults].filter((result) => {
		const excludeIds = exclude.map((optionToExclude) => optionToExclude?.id)
		return !excludeIds.includes(result.id)
		})

		const handleFilterChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
		sendSearch("SEARCH", { query: event.target.value })
		}, 500)
Expand DownExpand Up		@@ -80,7 +87,7 @@ export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = (
		/>
		)
		}}
		options={[...groupResults, ...userResults]}
		options={options}
		loading={searchState.matches("searching")}
		className={styles.autocomplete}
		renderInput={(params) => (
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,18 +23,27 @@ import {
		import { FC, useState } from "react"
		import { Maybe } from "components/Conditionals/Maybe"

		const AddTemplateUserOrGroup: React.FC<{
		type AddTemplateUserOrGroupProps ={
		organizationId: string
		isLoading: boolean
		templateACL: TemplateACL \| undefined
		onSubmit: (
		userOrGroup: TemplateUser \| TemplateGroup,
		role: TemplateRole,
		reset: () => void,
		) => void
		}> = ({ isLoading, onSubmit, organizationId }) => {
		}

		const AddTemplateUserOrGroup: React.FC<AddTemplateUserOrGroupProps> = ({
		isLoading,
		onSubmit,
		organizationId,
		templateACL,
		}) => {
		const styles = useStyles()
		const [selectedOption, setSelectedOption] = useState<UserOrGroupAutocompleteValue>(null)
		const [selectedRole, setSelectedRole] = useState<TemplateRole>("view")
		const excludeFromAutocomplete = templateACL ? [...templateACL.group, ...templateACL.users] : []

		const resetValues = () => {
		setSelectedOption(null)
Expand All		@@ -60,6 +69,7 @@ const AddTemplateUserOrGroup: React.FC<{
		>
		<Stack direction="row" alignItems="center" spacing={1}>
		<UserOrGroupAutocomplete
		exclude={excludeFromAutocomplete}
		organizationId={organizationId}
		value={selectedOption}
		onChange={(newValue) => {
Expand DownExpand Up		@@ -144,6 +154,7 @@ export const TemplatePermissionsPageView: FC<
		<Stack spacing={2.5}>
		<Maybe condition={canUpdatePermissions}>
		<AddTemplateUserOrGroup
		templateACL={templateACL}
		organizationId={organizationId}
		isLoading={isAddingUser \|\| isAddingGroup}
		onSubmit={(value, role, resetAutocomplete) =>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,6 +10,7 @@ export type SearchUsersAndGroupsEvent =
		export const searchUsersAndGroupsMachine = createMachine(
		{
		id: "searchUsersAndGroups",
		predictableActionArguments: true,
		schema: {
		context: {} as {
		organizationId: string
Expand All		@@ -31,7 +32,10 @@ export const searchUsersAndGroupsMachine = createMachine(
		states: {
		idle: {
		on: {
		SEARCH: "searching",
		SEARCH: {
		target: "searching",
		cond: "queryHasMinLength",
		},
		CLEAR_RESULTS: {
		actions: ["clearResults"],
		target: "idle",
Expand DownExpand Up		@@ -70,5 +74,8 @@ export const searchUsersAndGroupsMachine = createMachine(
		groupResults: (_) => [],
		}),
		},
		guards: {
		queryHasMinLength: (_, { query }) => query.length >= 3,
		},
		},
		)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1