From 2de8e7ccc5474dab2c79c2ca624edb63cc8f5eeb Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 30 May 2023 19:39:03 +0000
Subject: [PATCH] fix(site): Make current user first in the list and fix search

---
 .../WorkspacesPage/filter/autocompletes.ts    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/site/src/pages/WorkspacesPage/filter/autocompletes.ts b/site/src/pages/WorkspacesPage/filter/autocompletes.ts
index 75ed71144286e..8a1284827925d 100644
--- a/site/src/pages/WorkspacesPage/filter/autocompletes.ts
+++ b/site/src/pages/WorkspacesPage/filter/autocompletes.ts
@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query"
 import { getTemplates, getUsers } from "api/api"
 import { WorkspaceStatuses } from "api/typesGenerated"
 import { getDisplayWorkspaceStatus } from "utils/workspace"
+import { useMe } from "hooks"
 
 type UseAutocompleteOptions<TOption extends BaseOption> = {
   id: string
@@ -50,7 +51,7 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
   })
   const selectedOption = selectedOptionQuery.data
   const searchOptionsQuery = useQuery({
-    queryKey: [id, "autocomplete", "search"],
+    queryKey: [id, "autocomplete", "search", query],
     queryFn: () => getOptions(query),
     enabled,
   })
@@ -114,8 +115,18 @@ export const useUsersAutocomplete = (
   value: string | undefined,
   onChange: (option: OwnerOption | undefined) => void,
   enabled?: boolean,
-) =>
-  useAutocomplete({
+) => {
+  const me = useMe()
+
+  const addMeAsFirstOption = (options: OwnerOption[]) => {
+    options = options.filter((option) => option.value !== me.username)
+    return [
+      { label: me.username, value: me.username, avatarUrl: me.avatar_url },
+      ...options,
+    ]
+  }
+
+  return useAutocomplete({
     onChange,
     enabled,
     value,
@@ -134,13 +145,16 @@ export const useUsersAutocomplete = (
     },
     getOptions: async (query) => {
       const usersRes = await getUsers({ q: query, limit: 25 })
-      return usersRes.users.map((user) => ({
+      let options: OwnerOption[] = usersRes.users.map((user) => ({
         label: user.username,
         value: user.username,
         avatarUrl: user.avatar_url,
       }))
+      options = addMeAsFirstOption(options)
+      return options
     },
   })
+}
 
 export type UsersAutocomplete = ReturnType<typeof useUsersAutocomplete>