Fix repetitive results

BrunoQuaresma · BrunoQuaresma · commit 510287b0ad30 · 2022-10-07T14:38:27.000Z
diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -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)
@@ -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)
@@ -80,7 +87,7 @@ export const UserOrGroupAutocomplete: React.FC<UserOrGroupAutocompleteProps> = (
           />
         )
       }}
-      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
@@ -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)
@@ -60,6 +69,7 @@ const AddTemplateUserOrGroup: React.FC<{
     >
       <Stack direction="row" alignItems="center" spacing={1}>
         <UserOrGroupAutocomplete
+          exclude={excludeFromAutocomplete}
           organizationId={organizationId}
           value={selectedOption}
           onChange={(newValue) => {
@@ -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) =>
diff --git a/site/src/xServices/template/searchUsersAndGroupsXService.ts b/site/src/xServices/template/searchUsersAndGroupsXService.ts
@@ -10,6 +10,7 @@ export type SearchUsersAndGroupsEvent =
 export const searchUsersAndGroupsMachine = createMachine(
   {
     id: "searchUsersAndGroups",
+    predictableActionArguments: true,
     schema: {
       context: {} as {
         organizationId: string
@@ -31,7 +32,10 @@ export const searchUsersAndGroupsMachine = createMachine(
     states: {
       idle: {
         on: {
-          SEARCH: "searching",
+          SEARCH: {
+            target: "searching",
+            cond: "queryHasMinLength",
+          },
           CLEAR_RESULTS: {
             actions: ["clearResults"],
             target: "idle",
@@ -70,5 +74,8 @@ export const searchUsersAndGroupsMachine = createMachine(
         groupResults: (_) => [],
       }),
     },
+    guards: {
+      queryHasMinLength: (_, { query }) => query.length >= 3,
+    },
   },
 )
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 +# yarn lockfile v1
++
++