Remove searchUsersAndGroups xservice

coder · BrunoQuaresma · Oct 20, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
commit 25520f308018cfb84e71bedbc6cf5836ccd1ff72
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -6,6 +6,7 @@ import {
   type TemplateVersion,
   CreateTemplateRequest,
   ProvisionerJob,
+  UsersRequest,
 } from "api/typesGenerated";
 import { type QueryClient, type QueryOptions } from "react-query";
 import { delay } from "utils/delay";
@@ -104,6 +105,16 @@ export const updateActiveTemplateVersion = (
   };
 };
 
+export const templaceACLAvailable = (
+  templateId: string,
+  options: UsersRequest,
+) => {
+  return {
+    queryKey: ["template", templateId, "aclAvailable", options],
+    queryFn: () => API.getTemplateACLAvailable(templateId, options),
+  };
+};
+
 export const templateVersionExternalAuthKey = (versionId: string) => [
   "templateVersion",
   versionId,

diff --git a/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx b/site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/UserOrGroupAutocomplete.tsx
@@ -1,67 +1,86 @@
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
-import { useMachine } from "@xstate/react";
 import Box from "@mui/material/Box";
 import { type ChangeEvent, useState } from "react";
 import { css } from "@emotion/react";
 import type { Group, User } from "api/typesGenerated";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { getGroupSubtitle } from "utils/groups";
-import { searchUsersAndGroupsMachine } from "xServices/template/searchUsersAndGroupsXService";
 import { useDebouncedFunction } from "hooks/debounce";
+import { useQuery } from "react-query";
+import { templaceACLAvailable } from "api/queries/templates";
+import { prepareQuery } from "utils/filters";
 
 export type UserOrGroupAutocompleteValue = User | Group | null;
 
 export type UserOrGroupAutocompleteProps = {
   value: UserOrGroupAutocompleteValue;
   onChange: (value: UserOrGroupAutocompleteValue) => void;
   organizationId: string;
-  templateID?: string;
+  templateID: string;
   exclude: UserOrGroupAutocompleteValue[];
 };
 
 export const UserOrGroupAutocomplete: React.FC<
   UserOrGroupAutocompleteProps
-> = ({ value, onChange, organizationId, templateID, exclude }) => {
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
-  const [searchState, sendSearch] = useMachine(searchUsersAndGroupsMachine, {
-    context: {
-      userResults: [],
-      groupResults: [],
-      organizationId,
-      templateID,
-    },
+> = ({ value, onChange, templateID, exclude }) => {
+  const [autoComplete, setAutoComplete] = useState<{
+    value: string;
+    open: boolean;
+  }>({
+    value: "",
+    open: 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 aclAvailableQuery = useQuery({
+    ...templaceACLAvailable(templateID, {
+      q: prepareQuery(encodeURI(autoComplete.value)),
+      limit: 25,
+    }),
+    enabled: autoComplete.open,
+    keepPreviousData: true,
   });
+  const options = aclAvailableQuery.data
+    ? [
+        ...aclAvailableQuery.data.groups,
+        ...aclAvailableQuery.data.users,
+      ].filter((result) => {
+        const excludeIds = exclude.map(
+          (optionToExclude) => optionToExclude?.id,
+        );
+        return !excludeIds.includes(result.id);
+      })
+    : [];
 
   const { debounced: handleFilterChange } = useDebouncedFunction(
     (event: ChangeEvent<HTMLInputElement>) => {
-      sendSearch("SEARCH", { query: event.target.value });
+      setAutoComplete((state) => ({
+        ...state,
+        value: event.target.value,
+      }));
     },
     500,
   );
 
   return (
     <Autocomplete
+      noOptionsText="No users or groups found"
       value={value}
       id="user-or-group-autocomplete"
-      open={isAutocompleteOpen}
+      open={autoComplete.open}
       onOpen={() => {
-        setIsAutocompleteOpen(true);
+        setAutoComplete((state) => ({
+          ...state,
+          open: true,
+        }));
       }}
       onClose={() => {
-        setIsAutocompleteOpen(false);
+        setAutoComplete({
+          value: isGroup(value) ? value.display_name : value?.email ?? "",
+          open: false,
+        });
       }}
       onChange={(_, newValue) => {
-        if (newValue === null) {
-          sendSearch("CLEAR_RESULTS");
-        }
-
         onChange(newValue);
       }}
       isOptionEqualToValue={(option, value) => option.id === value.id}
@@ -86,7 +105,7 @@ export const UserOrGroupAutocomplete: React.FC<
         );
       }}
       options={options}
-      loading={searchState.matches("searching")}
+      loading={aclAvailableQuery.isFetching}
       css={autoCompleteStyles}
       renderInput={(params) => (
         <>
@@ -100,7 +119,7 @@ export const UserOrGroupAutocomplete: React.FC<
               onChange: handleFilterChange,
               endAdornment: (
                 <>
-                  {searchState.matches("searching") ? (
+                  {aclAvailableQuery.isFetching ? (
                     <CircularProgress size={16} />
                   ) : null}
                   {params.InputProps.endAdornment}

diff --git a/site/src/xServices/template/searchUsersAndGroupsXService.ts b/site/src/xServices/template/searchUsersAndGroupsXService.ts