coder · code-asher · Aug 26, 2024 · Aug 22, 2024 · Aug 23, 2024 · Aug 23, 2024
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -7,7 +7,7 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import { withRouter } from "storybook-addon-remix-react-router";
 import { StrictMode } from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { parseQueryArgs, QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
 import themes from "theme";
 import "theme/globalFonts";
@@ -93,7 +93,18 @@ function withQuery(Story, { parameters }) {
 
   if (parameters.queries) {
     parameters.queries.forEach((query) => {
-      queryClient.setQueryData(query.key, query.data);
+      if (query.data instanceof Error) {
+        // This is copied from setQueryData() but sets the error.
+        const cache = queryClient.getQueryCache();
+        const parsedOptions = parseQueryArgs(query.key)
+        const defaultedOptions = queryClient.defaultQueryOptions(parsedOptions)
+        const cachedQuery = cache.build(queryClient, defaultedOptions);
+        // Set manual data so react-query will not try to refetch.
+        cachedQuery.setData(undefined, { manual: true });
+        cachedQuery.setState({ error: query.data });
+      } else {
+        queryClient.setQueryData(query.key, query.data);
+      }
     });
   }
 

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -21,7 +21,7 @@ export const groups = (organization: string) => {
 	} satisfies UseQueryOptions<Group[]>;
 };
 
-const getGroupQueryKey = (organization: string, groupName: string) => [
+export const getGroupQueryKey = (organization: string, groupName: string) => [
 	"organization",
 	organization,
 	"group",
@@ -77,9 +77,15 @@ export function groupsForUser(organization: string, userId: string) {
 	} as const satisfies UseQueryOptions<Group[], unknown, readonly Group[]>;
 }
 
+export const groupPermissionsKey = (groupId: string) => [
+	"group",
+	groupId,
+	"permissions",
+];
+
 export const groupPermissions = (groupId: string) => {
 	return {
-		queryKey: ["group", groupId, "permissions"],
+		queryKey: groupPermissionsKey(groupId),
 		queryFn: () =>
 			API.checkAuthorization({
 				checks: {

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -47,10 +47,16 @@ export const deleteOrganization = (queryClient: QueryClient) => {
 	};
 };
 
+export const organizationMembersKey = (id: string) => [
+	"organization",
+	id,
+	"members",
+];
+
 export const organizationMembers = (id: string) => {
 	return {
 		queryFn: () => API.getOrganizationMembers(id),
-		queryKey: ["organization", id, "members"],
+		queryKey: organizationMembersKey(id),
 	};
 };
 

diff --git a/site/src/components/UserAutocomplete/MemberAutocomplete.stories.tsx b/site/src/components/UserAutocomplete/MemberAutocomplete.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MockOrganizationMember } from "testHelpers/entities";
+import { MemberAutocomplete } from "./UserAutocomplete";
+
+const meta: Meta<typeof MemberAutocomplete> = {
+	title: "components/MemberAutocomplete",
+	component: MemberAutocomplete,
+};
+
+export default meta;
+type Story = StoryObj<typeof MemberAutocomplete>;
+
+export const WithLabel: Story = {
+	args: {
+		value: MockOrganizationMember,
+		organizationId: MockOrganizationMember.organization_id,
+		label: "Member",
+	},
+};
+
+export const NoLabel: Story = {
+	args: {
+		value: MockOrganizationMember,
+		organizationId: MockOrganizationMember.organization_id,
+	},
+};
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.stories.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof UserAutocomplete> = {
 export default meta;
 type Story = StoryObj<typeof UserAutocomplete>;
 
-export const Example: Story = {
+export const WithLabel: Story = {
 	args: {
 		value: MockUser,
 		label: "User",

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -2,8 +2,10 @@ import { css } from "@emotion/css";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
+import { getErrorMessage } from "api/errors";
+import { organizationMembers } from "api/queries/organizations";
 import { users } from "api/queries/users";
-import type { User } from "api/typesGenerated";
+import type { OrganizationMemberWithUserData, User } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { useDebouncedFunction } from "hooks/debounce";
@@ -16,71 +18,128 @@ import {
 import { useQuery } from "react-query";
 import { prepareQuery } from "utils/filters";
 
-export type UserAutocompleteProps = {
-	value: User | null;
-	onChange: (user: User | null) => void;
-	label?: string;
+// The common properties between users and org members that we need.
+export type SelectedUser = {
+	avatar_url: string;
+	email: string;
+	username: string;
+};
+
+export type CommonAutocompleteProps<T extends SelectedUser> = {
 	className?: string;
-	size?: ComponentProps<typeof TextField>["size"];
+	label?: string;
+	onChange: (user: T | null) => void;
 	required?: boolean;
+	size?: ComponentProps<typeof TextField>["size"];
+	value: T | null;
 };
 
-export const UserAutocomplete: FC<UserAutocompleteProps> = ({
-	value,
-	onChange,
-	label,
-	className,
-	size = "small",
-	required,
-}) => {
-	const [autoComplete, setAutoComplete] = useState<{
-		value: string;
-		open: boolean;
-	}>({
-		value: value?.email ?? "",
-		open: false,
-	});
+export type UserAutocompleteProps = CommonAutocompleteProps<User>;
+
+export const UserAutocomplete: FC<UserAutocompleteProps> = (props) => {
+	const [filter, setFilter] = useState<string>();
+
 	const usersQuery = useQuery({
 		...users({
-			q: prepareQuery(encodeURI(autoComplete.value)),
+			q: prepareQuery(encodeURI(filter ?? "")),
 			limit: 25,
 		}),
-		enabled: autoComplete.open,
+		enabled: filter !== undefined,
+		keepPreviousData: true,
+	});
+	return (
+		<InnerAutocomplete<User>
+			error={usersQuery.error}
+			isFetching={usersQuery.isFetching}
+			setFilter={setFilter}
+			users={usersQuery.data?.users}
+			{...props}
+		/>
+	);
+};
+
+export type MemberAutocompleteProps =
+	CommonAutocompleteProps<OrganizationMemberWithUserData> & {
+		organizationId: string;
+	};
+
+export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
+	organizationId,
+	...props
+}) => {
+	const [filter, setFilter] = useState<string>();
+
+	// Currently this queries all members, as there is no pagination.
+	const membersQuery = useQuery({
+		...organizationMembers(organizationId),
+		enabled: filter !== undefined,
 		keepPreviousData: true,
 	});
+	return (
+		<InnerAutocomplete<OrganizationMemberWithUserData>
+			error={membersQuery.error}
+			isFetching={membersQuery.isFetching}
+			setFilter={setFilter}
+			users={membersQuery.data}
+			{...props}
+		/>
+	);
+};
+
+type InnerAutocompleteProps<T extends SelectedUser> =
+	CommonAutocompleteProps<T> & {
+		/** The error is null if not loaded or no error. */
+		error: unknown;
+		isFetching: boolean;
+		/** Filter is undefined if the autocomplete is closed. */
+		setFilter: (filter: string | undefined) => void;
+		/** Users are undefined if not loaded or errored. */
+		users: readonly T[] | undefined;
+	};
+
+const InnerAutocomplete = <T extends SelectedUser>({
+	className,
+	error,
+	isFetching,
+	label,
+	onChange,
+	required,
+	setFilter,
+	size = "small",
+	users,
+	value,
+}: InnerAutocompleteProps<T>) => {
+	const [open, setOpen] = useState(false);
 
 	const { debounced: debouncedInputOnChange } = useDebouncedFunction(
 		(event: ChangeEvent<HTMLInputElement>) => {
-			setAutoComplete((state) => ({
-				...state,
-				value: event.target.value,
-			}));
+			setFilter(event.target.value ?? "");
 		},
 		750,
 	);
 
 	return (
 		<Autocomplete
-			noOptionsText="No users found"
+			noOptionsText={
+				error
+					? getErrorMessage(error, "Unable to fetch users")
+					: "No users found"
+			}
 			className={className}
-			options={usersQuery.data?.users ?? []}
-			loading={usersQuery.isLoading}
+			options={users ?? []}
+			loading={!users && !error}
 			value={value}
 			data-testid="user-autocomplete"
-			open={autoComplete.open}
+			open={open}
 			isOptionEqualToValue={(a, b) => a.username === b.username}
 			getOptionLabel={(option) => option.email}
 			onOpen={() => {
-				setAutoComplete((state) => ({
-					...state,
-					open: true,
-				}));
+				setOpen(true);
+				setFilter(value?.email ?? "");
 			}}
 			onClose={() => {
-				setAutoComplete({
-					value: value?.email ?? "",
-					open: false,
-				});
+				setOpen(false);
+				setFilter(undefined);
 			}}
 			onChange={(_, newValue) => {
 				onChange(newValue);
@@ -117,9 +176,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 						),
 						endAdornment: (
 							<>
-								{usersQuery.isFetching && autoComplete.open && (
-									<CircularProgress size={16} />
-								)}
+								{isFetching && open && <CircularProgress size={16} />}
 								{params.InputProps.endAdornment}
 							</>
 						),