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
@@ -74,6 +74,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.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx
@@ -0,0 +1,131 @@
+import { fireEvent, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { HttpResponse, http } from "msw";
+import type { SlimRole } from "api/typesGenerated";
+import {
+  MockUser,
+  MockUser2,
+  MockOrganizationAuditorRole,
+} from "testHelpers/entities";
+import {
+  renderWithTemplateSettingsLayout,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers";
+import { server } from "testHelpers/server";
+import OrganizationMembersPage from "./OrganizationMembersPage";
+
+jest.spyOn(console, "error").mockImplementation(() => {});
+
+const renderPage = async () => {
+  renderWithTemplateSettingsLayout(<OrganizationMembersPage />, {
+    route: `/organizations/my-organization/members`,
+    path: `/organizations/:organization/members`,
+  });
+  await waitForLoaderToBeRemoved();
+};
+
+const removeMember = async () => {
+  const user = userEvent.setup();
+  // Click on the "More options" button to display the "Remove" option
+  const moreButtons = await screen.findAllByLabelText("More options");
+  // get MockUser2
+  const selectedMoreButton = moreButtons[0];
+
+  await user.click(selectedMoreButton);
+
+  const removeButton = screen.getByText(/Remove/);
+  await user.click(removeButton);
+};
+
+const updateUserRole = async (role: SlimRole) => {
+  // Get the first user in the table
+  const users = await screen.findAllByText(/.*@coder.com/);
+  const userRow = users[0].closest("tr");
+  if (!userRow) {
+    throw new Error("Error on get the first user row");
+  }
+
+  // Click on the "edit icon" to display the role options
+  const editButton = within(userRow).getByTitle("Edit user roles");
+  fireEvent.click(editButton);
+
+  // Click on the role option
+  const fieldset = await screen.findByTitle("Available roles");
+  const roleOption = within(fieldset).getByText(role.display_name);
+  fireEvent.click(roleOption);
+
+  return {
+    userRow,
+  };
+};
+
+beforeAll(() => {
+  server.use(
+    http.get("/api/v2/experiments", () => {
+      return HttpResponse.json(["multi-organization"]);
+    }),
+  );
+});
+
+describe("OrganizationMembersPage", () => {
+  describe("remove member", () => {
+    describe("when it is success", () => {
+      it("shows a success message", async () => {
+        server.use(
+          http.delete(
+            `/api/v2/organizations/:organizationId/members/${MockUser2.id}`,
+            async () => {
+              return new HttpResponse(null, { status: 204 });
+            },
+          ),
+        );
+
+        await renderPage();
+        await removeMember();
+        await screen.findByText("Member removed.");
+      });
+    });
+  });
+
+  describe("Update user role", () => {
+    describe("when it is success", () => {
+      it("updates the roles", async () => {
+        server.use(
+          http.put(
+            `/api/v2/organizations/:organizationId/members/${MockUser.id}/roles`,
+            async () => {
+              return HttpResponse.json({
+                ...MockUser,
+                roles: [...MockUser.roles, MockOrganizationAuditorRole],
+              });
+            },
+          ),
+        );
+
+        await renderPage();
+        await updateUserRole(MockOrganizationAuditorRole);
+        await screen.findByText("Roles updated successfully.");
+      });
+    });
+
+    describe("when it fails", () => {
+      it("shows an error message", async () => {
+        server.use(
+          http.put(
+            `/api/v2/organizations/:organizationId/members/${MockUser.id}/roles`,
+            () => {
+              return HttpResponse.json(
+                { message: "Error on updating the user roles." },
+                { status: 400 },
+              );
+            },
+          ),
+        );
+
+        await renderPage();
+        await updateUserRole(MockOrganizationAuditorRole);
+        await screen.findByText("Error on updating the user roles.");
+      });
+    });
+  });
+});