chore: replace MoreMenu with DropdownMenu (#17615)

Replace MoreMenu with DropDownMenu component to match update design
patterns.

Note: This was the result of experimentation using Cursor to make the
changes and Claude Code for fixing tests.

One key takeaway is that verbose e2e logging, especially benign
warnings/errors can confuse Claude Code in running playwright and
confirming its work.


<img width="201" alt="Screenshot 2025-05-01 at 00 00 52"
src="https://github.com/user-attachments/assets/4905582e-902e-4b61-adc8-14cab6bd006b"
/>
<img width="257" alt="Screenshot 2025-05-01 at 00 01 07"
src="https://github.com/user-attachments/assets/5befc420-724a-4c57-9a9d-330a39867fae"
/>
<img width="270" alt="Screenshot 2025-05-01 at 00 01 20"
src="https://github.com/user-attachments/assets/9cbf07cb-7d44-4228-ae6f-216e9f2faed0"
/>
<img width="224" alt="Screenshot 2025-05-01 at 00 01 30"
src="https://github.com/user-attachments/assets/9fe95916-3d9d-4600-9b1f-8a620e152a53"
/>

site/e2e/tests/groups/removeMember.spec.ts

@@ -33,9 +33,8 @@ test("remove member", async ({ page, baseURL }) => {
 	await expect(page).toHaveTitle(`${group.display_name} - Coder`);
 
 	const userRow = page.getByRole("row", { name: member.username });
-	await userRow.getByRole("button", { name: "More options" }).click();
-
-	const menu = page.locator("#more-options");
+	await userRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
 	await menu.getByText("Remove").click({ timeout: 1_000 });
 
 	await expect(page.getByText("Member removed successfully.")).toBeVisible();

site/e2e/tests/organizationGroups.spec.ts

@@ -79,8 +79,10 @@ test("create group", async ({ page }) => {
 	await expect(page.getByText("No users found")).toBeVisible();
 
 	// Remove someone from the group
-	await addedRow.getByLabel("More options").click();
-	await page.getByText("Remove").click();
+	await addedRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
+
 	await expect(addedRow).not.toBeVisible();
 
 	// Delete the group

site/e2e/tests/organizationMembers.spec.ts

@@ -39,8 +39,9 @@ test("add and remove organization member", async ({ page }) => {
 	await expect(addedRow.getByText("+1 more")).toBeVisible();
 
 	// Remove them from the org
-	await addedRow.getByLabel("More options").click();
-	await page.getByText("Remove").click(); // Click the "Remove" option
+	await addedRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
 	await page.getByRole("button", { name: "Remove" }).click(); // Click "Remove" in the confirmation dialog
 	await expect(addedRow).not.toBeVisible();
 });

site/e2e/tests/organizations/customRoles/customRoles.spec.ts

@@ -37,8 +37,8 @@ test.describe("CustomRolesPage", () => {
 		await expect(roleRow.getByText(customRole.display_name)).toBeVisible();
 		await expect(roleRow.getByText("organization_member")).toBeVisible();
 
-		await roleRow.getByRole("button", { name: "More options" }).click();
-		const menu = page.locator("#more-options");
+		await roleRow.getByRole("button", { name: "Open menu" }).click();
+		const menu = page.getByRole("menu");
 		await menu.getByText("Edit").click();
 
 		await expect(page).toHaveURL(
@@ -118,7 +118,7 @@ test.describe("CustomRolesPage", () => {
 
 		// Verify that the more menu (three dots) is not present for built-in roles
 		await expect(
-			roleRow.getByRole("button", { name: "More options" }),
+			roleRow.getByRole("button", { name: "Open menu" }),
 		).not.toBeVisible();
 
 		await deleteOrganization(org.name);
@@ -175,9 +175,9 @@ test.describe("CustomRolesPage", () => {
 		await page.goto(`/organizations/${org.name}/roles`);
 
 		const roleRow = page.getByTestId(`role-${customRole.name}`);
-		await roleRow.getByRole("button", { name: "More options" }).click();
+		await roleRow.getByRole("button", { name: "Open menu" }).click();
 
-		const menu = page.locator("#more-options");
+		const menu = page.getByRole("menu");
 		await menu.getByText("Delete…").click();
 
 		const input = page.getByRole("textbox");

site/e2e/tests/updateTemplate.spec.ts

@@ -53,8 +53,10 @@ test("add and remove a group", async ({ page }) => {
 	await expect(row).toBeVisible();
 
 	// Now remove the group
-	await row.getByLabel("More options").click();
-	await page.getByText("Remove").click();
+	await row.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Remove").click();
+
 	await expect(page.getByText("Group removed successfully!")).toBeVisible();
 	await expect(row).not.toBeVisible();
 });

site/e2e/tests/users/removeUser.spec.ts

@@ -17,9 +17,9 @@ test("remove user", async ({ page, baseURL }) => {
 	await expect(page).toHaveTitle("Users - Coder");
 
 	const userRow = page.getByRole("row", { name: user.email });
-	await userRow.getByRole("button", { name: "More options" }).click();
-	const menu = page.locator("#more-options");
-	await menu.getByText("Delete").click();
+	await userRow.getByRole("button", { name: "Open menu" }).click();
+	const menu = page.getByRole("menu");
+	await menu.getByText("Delete…").click();
 
 	const dialog = page.getByTestId("dialog");
 	await dialog.getByLabel("Name of the user to delete").fill(user.username);