Room list: edit or remove custom sections (#33283)

* feat(sc): add section menu to section header

* feat(rls): add edit and remove sections

* feat(dialog): add editing mode to CreateSectionDialog

* feat(dialog): add remove section dialog

* feat(vm): wire up vm and stores

* test: update existing snapshots

* test(e2e): add playwright tests to edit and remove a section

* chore: fix remove section i18n key

* fix: able to send empty sections

* chore: update create section editing docs

* chore: remove useless fallback

* chore: add logs when section is unknown

* feat: use different wording when removing an empty section

* fix: only animate the chevron icon in the section header

* fix: change dialog subtitle weight to medium
This commit is contained in:
Florian Duros
2026-04-28 10:16:34 +00:00
committed by GitHub
parent 1dd5748d6f
commit c363d2eb82
22 changed files with 1090 additions and 160 deletions
@@ -196,6 +196,68 @@ test.describe("Room list custom sections", () => {
});
});
test.describe("Section editing", () => {
test("should edit a custom section name via the section header menu", async ({ page, app }) => {
await app.client.createRoom({ name: "my room" });
await createCustomSection(page, "Work");
// Open the section header menu
const sectionHeader = getSectionHeader(page, "Work");
await sectionHeader.hover();
await sectionHeader.getByRole("button", { name: "More options" }).click();
// Click "Edit section"
await page.getByRole("menuitem", { name: "Edit section" }).click();
// The edit dialog should appear pre-filled with the current name
const dialog = page.getByRole("dialog", { name: "Edit a section" });
await expect(dialog).toBeVisible();
await expect(dialog.getByRole("textbox", { name: "Section name" })).toHaveValue("Work");
// Change the name and confirm
await dialog.getByRole("textbox", { name: "Section name" }).fill("Personal");
await dialog.getByRole("button", { name: "Edit section" }).click();
// Dialog should close
await expect(dialog).not.toBeVisible();
// Section should have the new name
await expect(getSectionHeader(page, "Personal")).toBeVisible();
await expect(getSectionHeader(page, "Work")).not.toBeVisible();
});
});
test.describe("Section removal", () => {
test("should move rooms back to Chats when their section is removed", async ({ page, app }) => {
await app.client.createRoom({ name: "my room" });
await createCustomSection(page, "Work");
await createCustomSection(page, "Personal");
const roomList = getRoomList(page);
// Move room to Work section
const roomItem = roomList.getByRole("row", { name: "Open room my room" });
await roomItem.hover();
await roomItem.getByRole("button", { name: "More Options" }).click();
await page.getByRole("menuitem", { name: "Move to" }).hover();
await page.getByRole("menuitem", { name: "Work" }).click();
await assertRoomInSection(page, "Work", "my room");
// Remove the Work section
const sectionHeader = getSectionHeader(page, "Work");
await sectionHeader.hover();
await sectionHeader.getByRole("button", { name: "More options" }).click();
await page.getByRole("menuitem", { name: "Remove section" }).click();
const dialog = page.getByRole("dialog", { name: "Remove section?" });
await dialog.getByRole("button", { name: "Remove section" }).click();
// Section should be gone
await expect(getSectionHeader(page, "Work")).not.toBeVisible();
// Room should now be in the Chats section
await assertRoomInSection(page, "Chats", "my room");
});
});
test.describe("Adding a room to a custom section", () => {
test("should add a room to a custom section via the More Options menu", async ({ page, app }) => {
await app.client.createRoom({ name: "my room" });