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
@@ -56,4 +56,38 @@ describe("CreateSectionDialog", () => {
|
||||
await userEvent.keyboard("{Enter}");
|
||||
expect(onFinished).toHaveBeenCalledWith(true, "My section");
|
||||
});
|
||||
|
||||
describe("editing mode", () => {
|
||||
function renderEditComponent(): void {
|
||||
render(<CreateSectionDialog onFinished={onFinished} sectionToEdit="Existing Section" />);
|
||||
}
|
||||
|
||||
it("pre-fills the input with the existing section name", () => {
|
||||
renderEditComponent();
|
||||
const input = screen.getByRole("textbox");
|
||||
expect(input).toHaveValue("Existing Section");
|
||||
});
|
||||
|
||||
it("shows the edit section button instead of create section", () => {
|
||||
renderEditComponent();
|
||||
expect(screen.getByRole("button", { name: "Edit section" })).toBeInTheDocument();
|
||||
expect(screen.queryByRole("button", { name: "Create section" })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onFinished with the updated name when edit section is clicked", async () => {
|
||||
renderEditComponent();
|
||||
const input = screen.getByRole("textbox");
|
||||
await userEvent.clear(input);
|
||||
await userEvent.type(input, "Updated Section");
|
||||
await userEvent.click(screen.getByRole("button", { name: "Edit section" }));
|
||||
expect(onFinished).toHaveBeenCalledWith(true, "Updated Section");
|
||||
});
|
||||
|
||||
it("has the edit section button disabled when the input is empty", async () => {
|
||||
renderEditComponent();
|
||||
const input = screen.getByRole("textbox");
|
||||
await userEvent.clear(input);
|
||||
expect(screen.getByRole("button", { name: "Edit section" })).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
* Copyright 2026 Element Creations Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { render, screen } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import React from "react";
|
||||
|
||||
import { RemoveSectionDialog } from "../../../../../src/components/views/dialogs/RemoveSectionDialog";
|
||||
|
||||
describe("RemoveSectionDialog", () => {
|
||||
const onFinished: jest.Mock = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
it("renders the dialog when section is not empty", () => {
|
||||
const { container } = render(<RemoveSectionDialog onFinished={onFinished} isEmpty={false} />);
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(
|
||||
screen.getByText("The chats in this section will still be available in your chats list."),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders the dialog when section is empty", () => {
|
||||
const { container } = render(<RemoveSectionDialog onFinished={onFinished} isEmpty={true} />);
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(
|
||||
screen.queryByText("The chats in this section will still be available in your chats list."),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls onFinished with true when remove section is clicked", async () => {
|
||||
render(<RemoveSectionDialog onFinished={onFinished} isEmpty={false} />);
|
||||
await userEvent.click(screen.getByRole("button", { name: "Remove section" }));
|
||||
expect(onFinished).toHaveBeenCalledWith(true);
|
||||
});
|
||||
|
||||
it("calls onFinished with false when the dialog is cancelled", async () => {
|
||||
render(<RemoveSectionDialog onFinished={onFinished} isEmpty={false} />);
|
||||
await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
|
||||
expect(onFinished).toHaveBeenCalledWith(false);
|
||||
});
|
||||
});
|
||||
+2
-1
@@ -29,7 +29,7 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-6x); --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55"
|
||||
class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60"
|
||||
>
|
||||
Sections are only for you
|
||||
</span>
|
||||
@@ -52,6 +52,7 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
|
||||
name="sectionName"
|
||||
required=""
|
||||
title=""
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
+161
@@ -0,0 +1,161 @@
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`RemoveSectionDialog renders the dialog when section is empty 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="mx_BaseDialog_title"
|
||||
class="mx_RemoveSectionDialog mx_Dialog_fixedWidth"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
id="mx_BaseDialog_title"
|
||||
>
|
||||
Remove section?
|
||||
</h1>
|
||||
</div>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
|
||||
>
|
||||
Are you sure you want to remove this section?
|
||||
</span>
|
||||
<div
|
||||
class="mx_Dialog_buttons"
|
||||
>
|
||||
<span
|
||||
class="mx_Dialog_buttons_row"
|
||||
>
|
||||
<button
|
||||
data-testid="dialog-cancel-button"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="mx_Dialog_primary"
|
||||
data-testid="dialog-primary-button"
|
||||
type="button"
|
||||
>
|
||||
Remove section
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`RemoveSectionDialog renders the dialog when section is not empty 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="mx_BaseDialog_title"
|
||||
class="mx_RemoveSectionDialog mx_Dialog_fixedWidth"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="mx_Dialog_header"
|
||||
>
|
||||
<h1
|
||||
class="mx_Heading_h3 mx_Dialog_title"
|
||||
id="mx_BaseDialog_title"
|
||||
>
|
||||
Remove section?
|
||||
</h1>
|
||||
</div>
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
|
||||
>
|
||||
Are you sure you want to remove this section?
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
|
||||
>
|
||||
The chats in this section will still be available in your chats list.
|
||||
</span>
|
||||
<div
|
||||
class="mx_Dialog_buttons"
|
||||
>
|
||||
<span
|
||||
class="mx_Dialog_buttons_row"
|
||||
>
|
||||
<button
|
||||
data-testid="dialog-cancel-button"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="mx_Dialog_primary"
|
||||
data-testid="dialog-primary-button"
|
||||
type="button"
|
||||
>
|
||||
Remove section
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_Dialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
Reference in New Issue
Block a user