Jul 24, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 23, 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
 --  - 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
 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
 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
    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
 export const organizationMembers = (id: string) => {
  return {
    queryFn: () => API.getOrganizationMembers(id),
 key: ["organization", id, "members"],
 queryKey: ["organization", id, "members"],
  };
 };

  };
 };

 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
    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
 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, MockOrganizationAuditorRole } from "testHelpers/entities";
 import {
  renderWithTemplateSettingsLayout,
  waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
 import { server } from "testHelpers/server";
 import OrganizationMembersPage from "./OrganizationMembersPage";

 jest.spyOn(console, "error").mockImplementation(() => {});

 beforeAll(() => {
  server.use(
    http.get("/api/v2/experiments", () => {
      return HttpResponse.json(["multi-organization"]);
    }),
  );
 });

 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,
  };
 };

 describe("OrganizationMembersPage", () => {
  describe("remove member", () => {
    describe("when it is success", () => {
      it("shows a success message", async () => {
        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.");
      });
    });
  });
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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],
		})
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"`
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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}`,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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"],
		};
		};

Expand DownExpand Up		@@ -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 = () => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,10 @@ export const roles = () => {
		queryFn: API.getRoles,
		};
		};

		export const organizationRoles = (organizationId: string) => {
		return {
		queryKey: ["organization", organizationId, "roles"],
		queryFn: () => API.getOrganizationRoles(organizationId),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,118 @@
		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, MockOrganizationAuditorRole } from "testHelpers/entities";
		import {
		renderWithTemplateSettingsLayout,
		waitForLoaderToBeRemoved,
		} from "testHelpers/renderHelpers";
		import { server } from "testHelpers/server";
		import OrganizationMembersPage from "./OrganizationMembersPage";

		jest.spyOn(console, "error").mockImplementation(() => {});

		beforeAll(() => {
		server.use(
		http.get("/api/v2/experiments", () => {
		return HttpResponse.json(["multi-organization"]);
		}),
		);
		});

		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,
		};
		};

		describe("OrganizationMembersPage", () => {
		describe("remove member", () => {
		describe("when it is success", () => {
		it("shows a success message", async () => {
		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.");
		});
		});
		});
		});