From 01aabc5cb1dc5a492e69fec1d07b5f08a566ece3 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Mon, 9 Sep 2024 15:20:52 +0000 Subject: [PATCH 1/4] feat: add groups column to members page in organizations --- .../OrganizationMembersPage.tsx | 4 ++++ .../OrganizationMembersPageView.tsx | 14 ++++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx index 209d3c14e11e9..93ceb7c040bc9 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx @@ -1,3 +1,4 @@ +import { groupsByUserId } from "api/queries/groups"; import { addOrganizationMember, organizationMembers, @@ -22,6 +23,8 @@ const OrganizationMembersPage: FC = () => { }; const { user: me } = useAuthenticated(); + const groupsByUserIdQuery = useQuery(groupsByUserId()); + const membersQuery = useQuery(organizationMembers(organizationName)); const organizationRolesQuery = useQuery(organizationRoles(organizationName)); @@ -58,6 +61,7 @@ const OrganizationMembersPage: FC = () => { isUpdatingMemberRoles={updateMemberRolesMutation.isLoading} me={me} members={membersQuery.data} + groupsByUserId={groupsByUserIdQuery.data} addMember={async (user: User) => { await addMemberMutation.mutateAsync(user.id); void membersQuery.refetch(); diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index 58c260a360e89..88f763a0562e3 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -8,6 +8,7 @@ import TableContainer from "@mui/material/TableContainer"; import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { getErrorMessage } from "api/errors"; +import type { GroupsByUserId } from "api/queries/groups"; import type { OrganizationMemberWithUserData, SlimRole, @@ -30,6 +31,7 @@ import { UserAvatar } from "components/UserAvatar/UserAvatar"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; import { UserRoleCell } from "./UserTable/UserRoleCell"; +import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; interface OrganizationMembersPageViewProps { allAvailableRoles: readonly SlimRole[] | undefined; @@ -39,6 +41,7 @@ interface OrganizationMembersPageViewProps { isUpdatingMemberRoles: boolean; me: User; members: OrganizationMemberWithUserData[] | undefined; + groupsByUserId: GroupsByUserId | undefined, addMember: (user: User) => Promise; removeMember: (member: OrganizationMemberWithUserData) => Promise; updateMemberRoles: ( @@ -68,13 +71,19 @@ export const OrganizationMembersPageView: FC< - User - + User + Roles + + + Groups + + + @@ -111,6 +120,7 @@ export const OrganizationMembersPageView: FC< } }} /> + {member.user_id !== props.me.id && props.canEditMembers && ( From b6958470804264434d4310d68bd3cb5041162609 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Mon, 9 Sep 2024 15:49:34 +0000 Subject: [PATCH 2/4] fix: run 'make fmt' --- .../OrganizationMembersPageView.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index 88f763a0562e3..04cd5a7837efe 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -28,10 +28,10 @@ import { SettingsHeader } from "components/SettingsHeader/SettingsHeader"; import { Stack } from "components/Stack/Stack"; import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; +import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; import { type FC, useState } from "react"; import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip"; import { UserRoleCell } from "./UserTable/UserRoleCell"; -import { UserGroupsCell } from "pages/UsersPage/UsersTable/UserGroupsCell"; interface OrganizationMembersPageViewProps { allAvailableRoles: readonly SlimRole[] | undefined; @@ -41,7 +41,7 @@ interface OrganizationMembersPageViewProps { isUpdatingMemberRoles: boolean; me: User; members: OrganizationMemberWithUserData[] | undefined; - groupsByUserId: GroupsByUserId | undefined, + groupsByUserId: GroupsByUserId | undefined; addMember: (user: User) => Promise; removeMember: (member: OrganizationMemberWithUserData) => Promise; updateMemberRoles: ( @@ -120,7 +120,9 @@ export const OrganizationMembersPageView: FC< } }} /> - + {member.user_id !== props.me.id && props.canEditMembers && ( From baa09c177e28fe0158005041be80328db6ab96e4 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Tue, 10 Sep 2024 16:03:26 +0000 Subject: [PATCH 3/4] fix: stop displaying groups member is in for other organisations --- site/src/api/queries/groups.ts | 7 +++++++ .../OrganizationMembersPage.tsx | 11 ++++++++--- .../OrganizationMembersPageView.stories.tsx | 5 ++++- .../OrganizationMembersPageView.tsx | 11 +++++++---- 4 files changed, 26 insertions(+), 8 deletions(-) diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts index ddc3d7e3b921c..4ddce87a249a2 100644 --- a/site/src/api/queries/groups.ts +++ b/site/src/api/queries/groups.ts @@ -53,6 +53,13 @@ export function groupsByUserId() { } satisfies UseQueryOptions; } +export function groupsByUserIdInOrganization(organization: string) { + return { + ...groupsByOrganization(organization), + select: selectGroupsByUserId, + } satisfies UseQueryOptions; +} + 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 index 93ceb7c040bc9..ff06cb889883f 100644 --- 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 index 6e7cb9317600a..2b6ae6d8a20ce 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx @@ -15,7 +15,10 @@ const meta: Meta = { 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 index 04cd5a7837efe..e57ea5de1520e 100644 --- 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 | undefined, groupsByUserId: GroupsByUserId | undefined; addMember: (user: User) => Promise; removeMember: (member: OrganizationMemberWithUserData) => Promise; @@ -50,6 +51,10 @@ interface OrganizationMembersPageViewProps { ) => Promise; } +interface OrganizationMemberTableEntry extends OrganizationMemberWithUserData { + groups: readonly Group[] | undefined, +}; + export const OrganizationMembersPageView: FC< OrganizationMembersPageViewProps > = (props) => { @@ -120,9 +125,7 @@ export const OrganizationMembersPageView: FC< } }} /> - + {member.user_id !== props.me.id && props.canEditMembers && ( From fc987cb3eef637f7d0ec8ff5983b9bb52a4dbb61 Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Tue, 10 Sep 2024 16:44:44 +0000 Subject: [PATCH 4/4] fix: run 'make fmt' --- .../OrganizationMembersPage.tsx | 13 +++++++++---- .../OrganizationMembersPageView.stories.tsx | 4 ++-- .../OrganizationMembersPageView.tsx | 6 +++--- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx index ff06cb889883f..9edd091ec6dac 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx @@ -1,4 +1,7 @@ -import { groupsByUserId, groupsByUserIdInOrganization } from "api/queries/groups"; +import { + groupsByUserId, + groupsByUserIdInOrganization, +} from "api/queries/groups"; import { addOrganizationMember, organizationMembers, @@ -23,15 +26,17 @@ const OrganizationMembersPage: FC = () => { }; const { user: me } = useAuthenticated(); - const groupsByUserIdQuery = useQuery(groupsByUserIdInOrganization(organizationName)); + 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}; - }) + return { ...member, groups }; + }); const addMemberMutation = useMutation( addOrganizationMember(queryClient, organizationName), diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx index 2b6ae6d8a20ce..f3427bd58775d 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.stories.tsx @@ -16,8 +16,8 @@ const meta: Meta = { isUpdatingMemberRoles: false, me: MockUser, members: [ - {...MockOrganizationMember, groups: []}, - {...MockOrganizationMember2, groups: []}, + { ...MockOrganizationMember, groups: [] }, + { ...MockOrganizationMember2, groups: [] }, ], addMember: () => Promise.resolve(), removeMember: () => Promise.resolve(), diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx index e57ea5de1520e..18200b1e5e3d4 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationMembersPageView.tsx @@ -41,7 +41,7 @@ interface OrganizationMembersPageViewProps { isAddingMember: boolean; isUpdatingMemberRoles: boolean; me: User; - members: Array | undefined, + members: Array | undefined; groupsByUserId: GroupsByUserId | undefined; addMember: (user: User) => Promise; removeMember: (member: OrganizationMemberWithUserData) => Promise; @@ -52,8 +52,8 @@ interface OrganizationMembersPageViewProps { } interface OrganizationMemberTableEntry extends OrganizationMemberWithUserData { - groups: readonly Group[] | undefined, -}; + groups: readonly Group[] | undefined; +} export const OrganizationMembersPageView: FC< OrganizationMembersPageViewProps