Skip to content

Commit 40c1435

Browse files
floriandurosflorianduros
committed
feat(dialog): add remove section dialog
1 parent b1a3c30 commit 40c1435

5 files changed

Lines changed: 176 additions & 0 deletions

File tree

‎apps/web/res/css/_components.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@
150150
@import "./views/dialogs/_ModalWidgetDialog.pcss";
151151
@import "./views/dialogs/_PollCreateDialog.pcss";
152152
@import "./views/dialogs/_RegistrationEmailPromptDialog.pcss";
153+
@import "./views/dialogs/_RemoveSectionDialog.pcss";
153154
@import "./views/dialogs/_ReportRoomDialog.pcss";
154155
@import "./views/dialogs/_RoomSettingsDialog.pcss";
155156
@import "./views/dialogs/_RoomSettingsDialogBridges.pcss";

‎apps/web/res/css/views/dialogs/_RemoveSectionDialog.pcss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/*
2+
* Copyright 2026 Element Creations Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
.mx_RemoveSectionDialog {
9+
color: var(--cpd-color-text-primary);
10+
}

‎apps/web/src/components/views/dialogs/RemoveSectionDialog.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* Copyright 2026 Element Creations Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import React from "react";
9+
import { type JSX } from "react";
10+
import { Text } from "@vector-im/compound-web";
11+
12+
import { _t } from "../../../languageHandler";
13+
import BaseDialog from "./BaseDialog";
14+
import DialogButtons from "../elements/DialogButtons";
15+
16+
interface RemoveSectionDialogProps {
17+
onFinished: (shouldRemoveSection: boolean) => void;
18+
}
19+
20+
/**
21+
* Dialog shown to the user to remove section in the room list.
22+
*/
23+
export function RemoveSectionDialog({ onFinished }: RemoveSectionDialogProps): JSX.Element {
24+
return (
25+
<BaseDialog
26+
className="mx_RemoveSectionDialog"
27+
onFinished={() => onFinished(false)}
28+
title={_t("remove_section_dialog|title_edition")}
29+
hasCancel={true}
30+
>
31+
<Text as="span">{_t("remove_section_dialog|confirmation")}</Text>
32+
<Text as="span">{_t("remove_section_dialog|description")}</Text>
33+
<DialogButtons
34+
primaryButton={_t("remove_section_dialog|remove_section")}
35+
hasCancel={true}
36+
onCancel={() => onFinished(false)}
37+
onPrimaryButtonClick={() => onFinished(true)}
38+
/>
39+
</BaseDialog>
40+
);
41+
}

‎apps/web/test/unit-tests/components/views/dialogs/RemoveSectionDialog-test.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* Copyright 2026 Element Creations Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
import { render, screen } from "jest-matrix-react";
9+
import userEvent from "@testing-library/user-event";
10+
import React from "react";
11+
12+
import { RemoveSectionDialog } from "../../../../../src/components/views/dialogs/RemoveSectionDialog";
13+
14+
describe("RemoveSectionDialog", () => {
15+
const onFinished: jest.Mock = jest.fn();
16+
17+
beforeEach(() => {
18+
jest.resetAllMocks();
19+
});
20+
21+
function renderComponent(): void {
22+
render(<RemoveSectionDialog onFinished={onFinished} />);
23+
}
24+
25+
it("renders the dialog", () => {
26+
const { container } = render(<RemoveSectionDialog onFinished={onFinished} />);
27+
expect(container).toMatchSnapshot();
28+
});
29+
30+
it("calls onFinished with true when remove section is clicked", async () => {
31+
renderComponent();
32+
await userEvent.click(screen.getByRole("button", { name: "Remove section" }));
33+
expect(onFinished).toHaveBeenCalledWith(true);
34+
});
35+
36+
it("calls onFinished with false when the dialog is cancelled", async () => {
37+
renderComponent();
38+
await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
39+
expect(onFinished).toHaveBeenCalledWith(false);
40+
});
41+
});

‎apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RemoveSectionDialog-test.tsx.snap‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2+
3+
exports[`RemoveSectionDialog renders the dialog 1`] = `
4+
<div>
5+
<div
6+
data-focus-guard="true"
7+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
8+
tabindex="0"
9+
/>
10+
<div
11+
aria-labelledby="mx_BaseDialog_title"
12+
class="mx_RemoveSectionDialog mx_Dialog_fixedWidth"
13+
data-focus-lock-disabled="false"
14+
role="dialog"
15+
tabindex="-1"
16+
>
17+
<div
18+
class="mx_Dialog_header"
19+
>
20+
<h1
21+
class="mx_Heading_h3 mx_Dialog_title"
22+
id="mx_BaseDialog_title"
23+
>
24+
Remove section?
25+
</h1>
26+
</div>
27+
<span
28+
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
29+
>
30+
Are you sure you want to remove this section?
31+
</span>
32+
<span
33+
class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
34+
>
35+
The chats in this section will still be available in your chats list.
36+
</span>
37+
<div
38+
class="mx_Dialog_buttons"
39+
>
40+
<span
41+
class="mx_Dialog_buttons_row"
42+
>
43+
<button
44+
data-testid="dialog-cancel-button"
45+
type="button"
46+
>
47+
Cancel
48+
</button>
49+
<button
50+
class="mx_Dialog_primary"
51+
data-testid="dialog-primary-button"
52+
type="button"
53+
>
54+
Remove section
55+
</button>
56+
</span>
57+
</div>
58+
<div
59+
aria-label="Close dialog"
60+
class="mx_AccessibleButton mx_Dialog_cancelButton"
61+
role="button"
62+
tabindex="0"
63+
>
64+
<svg
65+
fill="currentColor"
66+
height="1em"
67+
viewBox="0 0 24 24"
68+
width="1em"
69+
xmlns="http://www.w3.org/2000/svg"
70+
>
71+
<path
72+
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"
73+
/>
74+
</svg>
75+
</div>
76+
</div>
77+
<div
78+
data-focus-guard="true"
79+
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
80+
tabindex="0"
81+
/>
82+
</div>
83+
`;

0 commit comments

Comments
 (0)
⚡