From 80cd55742e7879a6c398acce018aab33933d5114 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Wed, 22 Mar 2023 17:34:12 +0000
Subject: [PATCH] chore(UI): update autocomplete no options text

---
 site/src/components/UserAutocomplete/UserAutocomplete.tsx | 4 ++++
 site/src/i18n/en/common.json                              | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
index cf912f6710db9..4d3f55d1d0399 100644
--- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx
+++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -9,6 +9,7 @@ import { AvatarData } from "components/AvatarData/AvatarData"
 import debounce from "just-debounce-it"
 import { ChangeEvent, FC, useEffect, useState } from "react"
 import { searchUserMachine } from "xServices/users/searchUserXService"
+import { useTranslation } from "react-i18next"
 
 export type UserAutocompleteProps = {
   value: User | null
@@ -24,6 +25,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   className,
 }) => {
   const styles = useStyles()
+  const { t } = useTranslation("common")
+
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false)
   const [searchState, sendSearch] = useMachine(searchUserMachine)
   const { searchResults } = searchState.context
@@ -46,6 +49,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 
   return (
     <Autocomplete
+      noOptionsText={t("forms.typeToSearch")}
       className={className}
       options={searchResults}
       loading={searchState.matches("searching")}
diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
index 61d268b5ba8cd..595f3568b729c 100644
--- a/site/src/i18n/en/common.json
+++ b/site/src/i18n/en/common.json
@@ -41,5 +41,8 @@
     "error": "Coder update check failed."
   },
   "licenseFieldTextHelper": "You need an enterprise license to use it.",
-  "learnMore": "Learn more"
+  "learnMore": "Learn more",
+  "forms": {
+    "typeToSearch": "Start typing to search..."
+  }
 }