fix: filter add group member by organization

code-asher · code-asher · commit 8b7185d3d8e0 · 2024-08-22T12:34:08.000-08:00
This is accomplished by using the members endpoint instead of the users
endpoint, and to that end the UserAutocomplete component has been
reworked to support either endpoint as separate components with a shared
base.
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,9 @@ import { css } from "@emotion/css";
 import Autocomplete from "@mui/material/Autocomplete";
 import CircularProgress from "@mui/material/CircularProgress";
 import TextField from "@mui/material/TextField";
+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,45 +17,99 @@ 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 type UserAutocompleteProps = CommonAutocompleteProps<User>;
+
 export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 	value,
-	onChange,
-	label,
-	className,
-	size = "small",
-	required,
+	...props
 }) => {
-	const [autoComplete, setAutoComplete] = useState<{
-		value: string;
-		open: boolean;
-	}>({
-		value: value?.email ?? "",
-		open: false,
-	});
+	const [filter, setFilter] = useState<string>();
+
 	const usersQuery = useQuery({
 		...users({
-			q: prepareQuery(encodeURI(autoComplete.value)),
+			q: filter !== undefined ? prepareQuery(encodeURI(filter)) : "",
 			limit: 25,
 		}),
-		enabled: autoComplete.open,
+		enabled: filter !== undefined,
 		keepPreviousData: true,
 	});
+	return (
+		<InnerAutocomplete<User>
+			users={usersQuery.data?.users}
+			value={value}
+			setFilter={setFilter}
+			{...props}
+		/>
+	);
+};
+
+export type MemberAutocompleteProps =
+	CommonAutocompleteProps<OrganizationMemberWithUserData> & {
+		organizationId: string;
+	};
+
+export const MemberAutocomplete: FC<MemberAutocompleteProps> = ({
+	value,
+	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>
+			users={membersQuery.data}
+			value={value}
+			setFilter={setFilter}
+			{...props}
+		/>
+	);
+};
+
+type InnerAutocompleteProps<T extends SelectedUser> =
+	CommonAutocompleteProps<T> & {
+		/** Filter is undefined if the autocomplete is closed. */
+		setFilter: (filter: string | undefined) => void;
+		/** Users are undefined if not loaded. */
+		users: readonly T[] | undefined;
+	};
+
+const InnerAutocomplete = <T extends SelectedUser>({
+	className,
+	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,
 	);
@@ -63,24 +118,20 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 		<Autocomplete
 			noOptionsText="No users found"
 			className={className}
-			options={usersQuery.data?.users ?? []}
-			loading={usersQuery.isLoading}
+			options={users ?? []}
+			loading={users !== undefined}
 			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 +168,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 						),
 						endAdornment: (
 							<>
-								{usersQuery.isFetching && autoComplete.open && (
-									<CircularProgress size={16} />
-								)}
+								{users === undefined && open && <CircularProgress size={16} />}
 								{params.InputProps.endAdornment}
 							</>
 						),
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupPage.tsx
@@ -18,7 +18,12 @@ import {
 	groupPermissions,
 	removeMember,
 } from "api/queries/groups";
-import type { Group, ReducedUser, User } from "api/typesGenerated";
+import type {
+	OrganizationMemberWithUserData,
+	Group,
+	ReducedUser,
+	User,
+} from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
@@ -39,7 +44,7 @@ import {
 	PaginationStatus,
 	TableToolbar,
 } from "components/TableToolbar/TableToolbar";
-import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
+import { MemberAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { type FC, useState } from "react";
 import { Helmet } from "react-helmet-async";
@@ -133,11 +138,12 @@ export const GroupPage: FC = () => {
 				{canUpdateGroup && groupData && !isEveryoneGroup(groupData) && (
 					<AddGroupMember
 						isLoading={addMemberMutation.isLoading}
-						onSubmit={async (user, reset) => {
+						organizationId={groupData.organization_id}
+						onSubmit={async (member, reset) => {
 							try {
 								await addMemberMutation.mutateAsync({
 									groupId,
-									userId: user.id,
+									userId: member.user_id,
 								});
 								reset();
 								await groupQuery.refetch();
@@ -231,11 +237,17 @@ export const GroupPage: FC = () => {
 
 interface AddGroupMemberProps {
 	isLoading: boolean;
-	onSubmit: (user: User, reset: () => void) => void;
+	onSubmit: (user: OrganizationMemberWithUserData, reset: () => void) => void;
+	organizationId: string;
 }
 
-const AddGroupMember: FC<AddGroupMemberProps> = ({ isLoading, onSubmit }) => {
-	const [selectedUser, setSelectedUser] = useState<User | null>(null);
+const AddGroupMember: FC<AddGroupMemberProps> = ({
+	isLoading,
+	onSubmit,
+	organizationId,
+}) => {
+	const [selectedUser, setSelectedUser] =
+		useState<OrganizationMemberWithUserData | null>(null);
 
 	const resetValues = () => {
 		setSelectedUser(null);
@@ -252,9 +264,10 @@ const AddGroupMember: FC<AddGroupMemberProps> = ({ isLoading, onSubmit }) => {
 			}}
 		>
 			<Stack direction="row" alignItems="center" spacing={1}>
-				<UserAutocomplete
+				<MemberAutocomplete
 					css={styles.autoComplete}
 					value={selectedUser}
+					organizationId={organizationId}
 					onChange={(newValue) => {
 						setSelectedUser(newValue);
 					}}
