Aug 26, 2024 · Aug 22, 2024 · Aug 23, 2024 · Aug 23, 2024
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
 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";

  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
 } satisfies UseQueryOptions<Group[]>;
 };

 const getGroupQueryKey = (organization: string, groupName: string) => [
 exportconst getGroupQueryKey = (organization: string, groupName: string) => [
 "organization",
 organization,
 "group",
 } 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
 };
 };

 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
 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
 export default meta;
 type Story = StoryObj<typeof UserAutocomplete>;

 export constExample: Story = {
 export constWithLabel: Story = {
 args: {
 value: MockUser,
 label: "User",
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
 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";
 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);
 ),
 endAdornment: (
 <>
 {usersQuery.isFetching && autoComplete.open && (
 <CircularProgress size={16} />
 )}
 {isFetching && open && <CircularProgress size={16} />}
 {params.InputProps.endAdornment}
 </>
 ),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand DownExpand Up		@@ -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);
		}
		});
		}

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,7 +21,7 @@ export const groups = (organization: string) => {
		} satisfies UseQueryOptions<Group[]>;
		};

		const getGroupQueryKey = (organization: string, groupName: string) => [
		exportconst getGroupQueryKey = (organization: string, groupName: string) => [
		"organization",
		organization,
		"group",
Expand DownExpand Up		@@ -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: {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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),
		};
		};

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ const meta: Meta<typeof UserAutocomplete> = {
		export default meta;
		type Story = StoryObj<typeof UserAutocomplete>;

		export constExample: Story = {
		export constWithLabel: Story = {
		args: {
		value: MockUser,
		label: "User",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand All		@@ -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> = ({
code-asher marked this conversation as resolved. Show resolvedHide resolved
		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);
Expand DownExpand Up		@@ -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}
		</>
		),
Expand Down