coder · aslilac · Jul 24, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/coderd/database/queries.sql.go b/coderd/database/queries.sql.go
diff --git a/coderd/database/queries/organizationmembers.sql b/coderd/database/queries/organizationmembers.sql
@@ -5,7 +5,7 @@
 --  - Use both to get a specific org member row
 SELECT
 	sqlc.embed(organization_members),
-	users.username, users.avatar_url, users.name, users.rbac_roles as "global_roles"
+	users.username, users.avatar_url, users.name, users.email, users.rbac_roles as "global_roles"
 FROM
 	organization_members
 		INNER JOIN

diff --git a/coderd/members.go b/coderd/members.go
@@ -319,6 +319,7 @@ func convertOrganizationMembersWithUserData(ctx context.Context, db database.Sto
 			Username:           rows[i].Username,
 			AvatarURL:          rows[i].AvatarURL,
 			Name:               rows[i].Name,
+			Email:              rows[i].Email,
 			GlobalRoles:        db2sdk.SlimRolesFromNames(rows[i].GlobalRoles),
 			OrganizationMember: convertedMembers[i],
 		})

diff --git a/codersdk/organizations.go b/codersdk/organizations.go
@@ -70,6 +70,7 @@ type OrganizationMemberWithUserData struct {
 	Username           string     `table:"username,default_sort" json:"username"`
 	Name               string     `table:"name" json:"name"`
 	AvatarURL          string     `json:"avatar_url"`
+	Email              string     `json:"email"`
 	GlobalRoles        []SlimRole `json:"global_roles"`
 	OrganizationMember `table:"m,recursive_inline"`
 }

diff --git a/docs/api/members.md b/docs/api/members.md
diff --git a/docs/api/schemas.md b/docs/api/schemas.md
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -549,6 +549,27 @@ class ApiMethods {
     return response.data;
   };
 
+  getOrganizationRoles = async (organizationId: string) => {
+    const response = await this.axios.get<TypesGen.AssignableRoles[]>(
+      `/api/v2/organizations/${organizationId}/members/roles`,
+    );
+
+    return response.data;
+  };
+
+  updateOrganizationMemberRoles = async (
+    organizationId: string,
+    userId: string,
+    roles: TypesGen.SlimRole["name"][],
+  ): Promise<TypesGen.User> => {
+    const response = await this.axios.put<TypesGen.User>(
+      `/api/v2/organizations/${organizationId}/members/${userId}/roles`,
+      { roles },
+    );
+
+    return response.data;
+  };
+
   addOrganizationMember = async (organizationId: string, userId: string) => {
     const response = await this.axios.post<TypesGen.OrganizationMember>(
       `/api/v2/organizations/${organizationId}/members/${userId}`,

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -49,7 +49,7 @@ export const deleteOrganization = (queryClient: QueryClient) => {
 export const organizationMembers = (id: string) => {
   return {
     queryFn: () => API.getOrganizationMembers(id),
-    key: ["organization", id, "members"],
+    queryKey: ["organization", id, "members"],
   };
 };
 
@@ -80,6 +80,25 @@ export const removeOrganizationMember = (
   };
 };
 
+export const updateOrganizationMemberRoles = (
+  queryClient: QueryClient,
+  organizationId: string,
+) => {
+  return {
+    mutationFn: ({ userId, roles }: { userId: string; roles: string[] }) => {
+      return API.updateOrganizationMemberRoles(organizationId, userId, roles);
+    },
+
+    onSuccess: async () => {
+      await queryClient.invalidateQueries([
+        "organization",
+        organizationId,
+        "members",
+      ]);
+    },
+  };
+};
+
 export const organizationsKey = ["organizations"] as const;
 
 export const organizations = () => {

diff --git a/site/src/api/queries/roles.ts b/site/src/api/queries/roles.ts
@@ -6,3 +6,10 @@ export const roles = () => {
     queryFn: API.getRoles,
   };
 };
+
+export const organizationRoles = (organizationId: string) => {
+  return {
+    queryKey: ["organization", organizationId, "roles"],
+    queryFn: () => API.getOrganizationRoles(organizationId),
+  };
+};
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
@@ -7,7 +7,6 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import Tooltip from "@mui/material/Tooltip";
 import { type FC, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useParams } from "react-router-dom";
@@ -16,11 +15,13 @@ import {
   addOrganizationMember,
   organizationMembers,
   removeOrganizationMember,
+  updateOrganizationMemberRoles,
 } from "api/queries/organizations";
-import type { OrganizationMemberWithUserData, User } from "api/typesGenerated";
+import { organizationRoles } from "api/queries/roles";
+import type { User } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarData } from "components/AvatarData/AvatarData";
-import { displayError } from "components/GlobalSnackbar/utils";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import {
   MoreMenu,
   MoreMenuTrigger,
@@ -29,24 +30,30 @@ import {
   ThreeDotsButton,
 } from "components/MoreMenu/MoreMenu";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { TableColumnHelpTooltip } from "./UserTable/TableColumnHelpTooltip";
+import { UserRoleCell } from "./UserTable/UserRoleCell";
 
 const OrganizationMembersPage: FC = () => {
   const queryClient = useQueryClient();
   const { organization } = useParams() as { organization: string };
   const { user: me } = useAuthenticated();
 
   const membersQuery = useQuery(organizationMembers(organization));
+  const organizationRolesQuery = useQuery(organizationRoles(organization));
+
   const addMemberMutation = useMutation(
     addOrganizationMember(queryClient, organization),
   );
   const removeMemberMutation = useMutation(
     removeOrganizationMember(queryClient, organization),
   );
+  const updateMemberRolesMutation = useMutation(
+    updateOrganizationMemberRoles(queryClient, organization),
+  );
 
   const error =
     membersQuery.error ?? addMemberMutation.error ?? removeMemberMutation.error;
@@ -61,7 +68,7 @@ const OrganizationMembersPage: FC = () => {
       <Stack>
         {Boolean(error) && <ErrorAlert error={error} />}
 
-        <AddGroupMember
+        <AddOrganizationMember
           isLoading={addMemberMutation.isLoading}
           onSubmit={async (user) => {
             await addMemberMutation.mutateAsync(user.id);
@@ -74,7 +81,12 @@ const OrganizationMembersPage: FC = () => {
             <TableHead>
               <TableRow>
                 <TableCell width="50%">User</TableCell>
-                <TableCell width="49%">Roles</TableCell>
+                <TableCell width="49%">
+                  <Stack direction="row" spacing={1} alignItems="center">
+                    <span>Roles</span>
+                    <TableColumnHelpTooltip variant="roles" />
+                  </Stack>
+                </TableCell>
                 <TableCell width="1%"></TableCell>
               </TableRow>
             </TableHead>
@@ -89,26 +101,25 @@ const OrganizationMembersPage: FC = () => {
                           avatarURL={member.avatar_url}
                         />
                       }
-                      title={member.name}
-                      subtitle={member.username}
+                      title={member.name || member.username}
+                      subtitle={member.email}
                     />
                   </TableCell>
-                  <TableCell>
-                    {getMemberRoles(member).map((role) => (
-                      <Pill
-                        key={role.name}
-                        css={role.global ? styles.globalRole : styles.role}
-                      >
-                        {role.global ? (
-                          <Tooltip title="This user has this role for all organizations.">
-                            <span>{role.name}*</span>
-                          </Tooltip>
-                        ) : (
-                          role.name
-                        )}
-                      </Pill>
-                    ))}
-                  </TableCell>
+                  <UserRoleCell
+                    inheritedRoles={member.global_roles}
+                    roles={member.roles}
+                    allAvailableRoles={organizationRolesQuery.data}
+                    oidcRoleSyncEnabled={false}
+                    isLoading={organizationRolesQuery.isLoading}
+                    canEditUsers
+                    onEditRoles={async (newRoleNames) => {
+                      await updateMemberRolesMutation.mutateAsync({
+                        userId: member.user_id,
+                        roles: newRoleNames,
+                      });
+                      displaySuccess("Roles updated successfully.");
+                    }}
+                  />
                   <TableCell>
                     {member.user_id !== me.id && (
                       <MoreMenu>
@@ -141,33 +152,17 @@ const OrganizationMembersPage: FC = () => {
   );
 };
 
-function getMemberRoles(member: OrganizationMemberWithUserData) {
-  const roles = new Map<string, { name: string; global?: boolean }>();
-
-  for (const role of member.global_roles) {
-    roles.set(role.name, {
-      name: role.display_name || role.name,
-      global: true,
-    });
-  }
-  for (const role of member.roles) {
-    if (roles.has(role.name)) {
-      continue;
-    }
-    roles.set(role.name, { name: role.display_name || role.name });
-  }
-
-  return [...roles.values()];
-}
-
 export default OrganizationMembersPage;
 
-interface AddGroupMemberProps {
+interface AddOrganizationMemberProps {
   isLoading: boolean;
   onSubmit: (user: User) => Promise<void>;
 }
 
-const AddGroupMember: FC<AddGroupMemberProps> = ({ isLoading, onSubmit }) => {
+const AddOrganizationMember: FC<AddOrganizationMemberProps> = ({
+  isLoading,
+  onSubmit,
+}) => {
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
 
   return (

diff --git a/...ge/UsersTable/EditRolesButton.stories.tsx → ...age/UserTable/EditRolesButton.stories.tsx b/...ge/UsersTable/EditRolesButton.stories.tsx → ...age/UserTable/EditRolesButton.stories.tsx
diff --git a/.../UsersPage/UsersTable/EditRolesButton.tsx → ...ettingsPage/UserTable/EditRolesButton.tsx b/.../UsersPage/UsersTable/EditRolesButton.tsx → ...ettingsPage/UserTable/EditRolesButton.tsx
@@ -73,7 +73,7 @@ export interface EditRolesButtonProps {
   selectedRoleNames: Set<string>;
   onChange: (roles: SlimRole["name"][]) => void;
   oidcRoleSync: boolean;
-  userLoginType: string;
+  userLoginType?: string;
 }
 
 export const EditRolesButton: FC<EditRolesButtonProps> = ({

diff --git a/...age/UsersTable/TableColumnHelpTooltip.tsx → ...Page/UserTable/TableColumnHelpTooltip.tsx b/...age/UsersTable/TableColumnHelpTooltip.tsx → ...Page/UserTable/TableColumnHelpTooltip.tsx