Sep 27, 2022 · Sep 26, 2022 · Sep 26, 2022 · Sep 26, 2022 · Sep 26, 2022 · Sep 26, 2022
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import Autocomplete from "@material-ui/lab/Autocomplete"
 import { useMachine } from "@xstate/react"
 import { User } from "api/typesGenerated"
 import { AvatarData } from "components/AvatarData/AvatarData"
 import debounce from "just-debounce-it"
 import { ChangeEvent, useEffect, useState } from "react"
 import { searchUserMachine } from "xServices/users/searchUserXService"

 export type UserAutocompleteProps = {
  value?: User
  onChange: (user: User | null) => void
 }

 export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({ value, onChange }) => {
  const styles = useStyles()
  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
  const [searchState, sendSearch] = useMachine(searchUserMachine)
  const { searchResults } = searchState.context
  const [selectedValue, setSelectedValue] = useState<User | null>(value || null)

  // seed list of options on the first page load if a user pases in a value
  // since some organizations have long lists of users, we do not load all options on page load.
  useEffect(() => {
    if (value) {
      sendSearch("SEARCH", { query: value.email })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleFilterChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
    sendSearch("SEARCH", { query: event.target.value })
  }, 1000)

  return (
    <Autocomplete
      value={selectedValue}
      id="user-autocomplete"
      open={isAutocompleteOpen}
      onOpen={() => {
        setIsAutocompleteOpen(true)
      }}
      onClose={() => {
        setIsAutocompleteOpen(false)
      }}
      onChange={(_, newValue) => {
        if (newValue === null) {
          sendSearch("CLEAR_RESULTS")
        }

        setSelectedValue(newValue)
        onChange(newValue)
      }}
      getOptionSelected={(option: User, value: User) => option.username === value.username}
      getOptionLabel={(option) => option.email}
      renderOption={(option: User) => (
        <AvatarData
          title={option.username}
          subtitle={option.email}
          highlightTitle
          avatar={
            option.avatar_url ? (
              <img
                className={styles.avatar}
                alt={`${option.username}'s Avatar`}
                src={option.avatar_url}
              />
            ) : null
          }
        />
      )}
      options={searchResults}
      loading={searchState.matches("searching")}
      className={styles.autocomplete}
      renderInput={(params) => (
        <TextField
          {...params}
          margin="none"
          variant="outlined"
          placeholder="User email or username"
          InputProps={{
            ...params.InputProps,
            onChange: handleFilterChange,
            endAdornment: (
              <>
                {searchState.matches("searching") ? <CircularProgress size={16} /> : null}
                {params.InputProps.endAdornment}
              </>
            ),
          }}
        />
      )}
    />
  )
 }
 export const useStyles = makeStyles((theme) => {
  return {
    autocomplete: {
      width: "100%",

      "& .MuiFormControl-root": {
        width: "100%",
      },

      "& .MuiInputBase-root": {
        width: "100%",
        // Match button small height
        height: 40,
      },

      "& input": {
        fontSize: 14,
        padding: `${theme.spacing(0, 0.5, 0, 0.5)} !important`,
      },
    },

    avatar: {
      width: theme.spacing(4.5),
      height: theme.spacing(4.5),
      borderRadius: "100%",
    },
  }
 })
diff --git a/site/src/xServices/users/searchUserXService.ts b/site/src/xServices/users/searchUserXService.ts
 import { getUsers } from "api/api"
 import { User } from "api/typesGenerated"
 import { queryToFilter } from "util/filters"
 import { assign, createMachine } from "xstate"

 export type AutocompleteEvent = { type: "SEARCH"; query: string } | { type: "CLEAR_RESULTS" }

 export const searchUserMachine = createMachine(
  {
    id: "searchUserMachine",
    schema: {
      context: {} as {
        searchResults?: User[]
      },
      events: {} as AutocompleteEvent,
      services: {} as {
        searchUsers: {
          data: User[]
        }
      },
    },
    context: {
      searchResults: [],
    },
    tsTypes: {} as import("./searchUserXService.typegen").Typegen0,
    initial: "idle",
    states: {
      idle: {
        on: {
          SEARCH: "searching",
          CLEAR_RESULTS: {
            actions: ["clearResults"],
            target: "idle",
          },
        },
      },
      searching: {
        invoke: {
          src: "searchUsers",
          onDone: {
            target: "idle",
            actions: ["assignSearchResults"],
          },
        },
      },
    },
  },
  {
    services: {
      searchUsers: (_, { query }) => getUsers(queryToFilter(query)),
    },
    actions: {
      assignSearchResults: assign({
        searchResults: (_, { data }) => data,
      }),
      clearResults: assign({
        searchResults: (_) => undefined,
      }),
    },
  },
 )
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,125 @@
		import CircularProgress from "@material-ui/core/CircularProgress"
		import { makeStyles } from "@material-ui/core/styles"
		import TextField from "@material-ui/core/TextField"
		import Autocomplete from "@material-ui/lab/Autocomplete"
		import { useMachine } from "@xstate/react"
		import { User } from "api/typesGenerated"
		import { AvatarData } from "components/AvatarData/AvatarData"
		import debounce from "just-debounce-it"
		import { ChangeEvent, useEffect, useState } from "react"
		import { searchUserMachine } from "xServices/users/searchUserXService"

		export type UserAutocompleteProps = {
		value?: User
		onChange: (user: User \| null) => void
		}

		export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({ value, onChange }) => {
		const styles = useStyles()
		const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
		const [searchState, sendSearch] = useMachine(searchUserMachine)
		const { searchResults } = searchState.context
		const [selectedValue, setSelectedValue] = useState<User \| null>(value \|\| null)

		// seed list of options on the first page load if a user pases in a value
		// since some organizations have long lists of users, we do not load all options on page load.
		useEffect(() => {
		if (value) {
		sendSearch("SEARCH", { query: value.email })
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [])
Copy link CollaboratorAuthor BrunoQuaresmaSep 27, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. We have some users in v1 with 1000 ~ 2,500 users so loading them at the beginning can be heavy. I think we could only load this when the user start to type in the search box + debouce(to avoid extra loads during typing). What do you think? Copy link Member Kira-PilotSep 27, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. @BrunoQuaresma good point! Your solution sounds right. So we can get this out there (@kylecarbs wants to use it) how about we do something like: `useEffect(() => { if (value) { sendSearch("SEARCH", { query: value.email }) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [])` for now? Copy link CollaboratorAuthor BrunoQuaresmaSep 27, 2022 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Sounds good!

		const handleFilterChange = debounce((event: ChangeEvent<HTMLInputElement>) => {
		sendSearch("SEARCH", { query: event.target.value })
		}, 1000)

		return (
		<Autocomplete
		value={selectedValue}
		id="user-autocomplete"
		open={isAutocompleteOpen}
		onOpen={() => {
		setIsAutocompleteOpen(true)
		}}
		onClose={() => {
		setIsAutocompleteOpen(false)
		}}
		onChange={(_, newValue) => {
		if (newValue === null) {
		sendSearch("CLEAR_RESULTS")
		}

		setSelectedValue(newValue)
		onChange(newValue)
		}}
		getOptionSelected={(option: User, value: User) => option.username === value.username}
		getOptionLabel={(option) => option.email}
		renderOption={(option: User) => (
		<AvatarData
		title={option.username}
		subtitle={option.email}
		highlightTitle
		avatar={
		option.avatar_url ? (
		<img
		className={styles.avatar}
		alt={`${option.username}'s Avatar`}
		src={option.avatar_url}
		/>
		) : null
		}
		/>
		)}
		options={searchResults}
		loading={searchState.matches("searching")}
		className={styles.autocomplete}
		renderInput={(params) => (
		<TextField
		{...params}
		margin="none"
		variant="outlined"
		placeholder="User email or username"
		InputProps={{
		...params.InputProps,
		onChange: handleFilterChange,
		endAdornment: (
		<>
		{searchState.matches("searching") ? <CircularProgress size={16} /> : null}
		{params.InputProps.endAdornment}
		</>
		),
		}}
		/>
		)}
		/>
		)
		}
		export const useStyles = makeStyles((theme) => {
		return {
		autocomplete: {
		width: "100%",

		"& .MuiFormControl-root": {
		width: "100%",
		},

		"& .MuiInputBase-root": {
		width: "100%",
		// Match button small height
		height: 40,
		},

		"& input": {
		fontSize: 14,
		padding: `${theme.spacing(0, 0.5, 0, 0.5)} !important`,
		},
		},

		avatar: {
		width: theme.spacing(4.5),
		height: theme.spacing(4.5),
		borderRadius: "100%",
		},
		}
		})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,61 @@
		import { getUsers } from "api/api"
		import { User } from "api/typesGenerated"
		import { queryToFilter } from "util/filters"
		import { assign, createMachine } from "xstate"

		export type AutocompleteEvent = { type: "SEARCH"; query: string } \| { type: "CLEAR_RESULTS" }

		export const searchUserMachine = createMachine(
		{
		id: "searchUserMachine",
		schema: {
		context: {} as {
		searchResults?: User[]
		},
		events: {} as AutocompleteEvent,
		services: {} as {
		searchUsers: {
		data: User[]
		}
		},
		},
		context: {
		searchResults: [],
		},
		tsTypes: {} as import("./searchUserXService.typegen").Typegen0,
		initial: "idle",
		states: {
		idle: {
		on: {
		SEARCH: "searching",
		CLEAR_RESULTS: {
		actions: ["clearResults"],
		target: "idle",
		},
		},
		},
		searching: {
		invoke: {
		src: "searchUsers",
		onDone: {
		target: "idle",
		actions: ["assignSearchResults"],
		},
		},
		},
		},
		},
		{
		services: {
		searchUsers: (_, { query }) => getUsers(queryToFilter(query)),
		},
		actions: {
		assignSearchResults: assign({
		searchResults: (_, { data }) => data,
		}),
		clearResults: assign({
		searchResults: (_) => undefined,
		}),
		},
		},
		)