fix: stop displaying groups member is in for other organisations

DanielleMaywood · DanielleMaywood · commit baa09c177e28 · 2024-09-10T16:03:26.000Z
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -53,6 +53,13 @@ export function groupsByUserId() {
 	} satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
 }
 
+export function groupsByUserIdInOrganization(organization: string) {
+	return {
+		...groupsByOrganization(organization),
+		select: selectGroupsByUserId,
+	} satisfies UseQueryOptions<Group[], unknown, GroupsByUserId>;
+}
+
 export function selectGroupsByUserId(groups: Group[]): GroupsByUserId {
 	// Sorting here means that nothing has to be sorted for the individual
 	// user arrays later
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
@@ -1,4 +1,4 @@
-import { groupsByUserId } from "api/queries/groups";
+import { groupsByUserId, groupsByUserIdInOrganization } from "api/queries/groups";
 import {
 	addOrganizationMember,
 	organizationMembers,
@@ -23,11 +23,16 @@ const OrganizationMembersPage: FC = () => {
 	};
 	const { user: me } = useAuthenticated();
 
-	const groupsByUserIdQuery = useQuery(groupsByUserId());
+	const groupsByUserIdQuery = useQuery(groupsByUserIdInOrganization(organizationName));
 
 	const membersQuery = useQuery(organizationMembers(organizationName));
 	const organizationRolesQuery = useQuery(organizationRoles(organizationName));
 
+	const members = membersQuery.data?.map((member) => {
+		const groups = groupsByUserIdQuery.data?.get(member.user_id) ?? [];
+		return {...member, groups};
+	})
+
 	const addMemberMutation = useMutation(
 		addOrganizationMember(queryClient, organizationName),
 	);
@@ -60,7 +65,7 @@ const OrganizationMembersPage: FC = () => {
 			isAddingMember={addMemberMutation.isLoading}
 			isUpdatingMemberRoles={updateMemberRolesMutation.isLoading}
 			me={me}
-			members={membersQuery.data}
+			members={members}
 			groupsByUserId={groupsByUserIdQuery.data}
 			addMember={async (user: User) => {
 				await addMemberMutation.mutateAsync(user.id);
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx
@@ -15,7 +15,10 @@ const meta: Meta<typeof OrganizationMembersPageView> = {
 		isAddingMember: false,
 		isUpdatingMemberRoles: false,
 		me: MockUser,
-		members: [MockOrganizationMember, MockOrganizationMember2],
+		members: [
+			{...MockOrganizationMember, groups: []},
+			{...MockOrganizationMember2, groups: []},
+		],
 		addMember: () => Promise.resolve(),
 		removeMember: () => Promise.resolve(),
 		updateMemberRoles: () => Promise.resolve(),
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx
@@ -10,6 +10,7 @@ import TableRow from "@mui/material/TableRow";
 import { getErrorMessage } from "api/errors";
 import type { GroupsByUserId } from "api/queries/groups";
 import type {
+	Group,
 	OrganizationMemberWithUserData,
 	SlimRole,
 	User,
@@ -40,7 +41,7 @@ interface OrganizationMembersPageViewProps {
 	isAddingMember: boolean;
 	isUpdatingMemberRoles: boolean;
 	me: User;
-	members: OrganizationMemberWithUserData[] | undefined;
+	members: Array<OrganizationMemberTableEntry> | undefined,
 	groupsByUserId: GroupsByUserId | undefined;
 	addMember: (user: User) => Promise<void>;
 	removeMember: (member: OrganizationMemberWithUserData) => Promise<void>;
@@ -50,6 +51,10 @@ interface OrganizationMembersPageViewProps {
 	) => Promise<void>;
 }
 
+interface OrganizationMemberTableEntry extends OrganizationMemberWithUserData {
+	groups: readonly Group[] | undefined,
+};
+
 export const OrganizationMembersPageView: FC<
 	OrganizationMembersPageViewProps
 > = (props) => {
@@ -120,9 +125,7 @@ export const OrganizationMembersPageView: FC<
 											}
 										}}
 									/>
-									<UserGroupsCell
-										userGroups={props.groupsByUserId?.get(member.user_id)}
-									/>
+									<UserGroupsCell userGroups={member.groups} />
 									<TableCell>
 										{member.user_id !== props.me.id && props.canEditMembers && (
 											<MoreMenu>
