From 4f32727829c1087e9d3d9955785d8a6255457c7d Mon Sep 17 00:00:00 2001 From: Marc Date: Thu, 17 Apr 2025 10:58:27 +0200 Subject: [PATCH] feat: warn self change on roles settings (#28926) * feat: warn self change on roles settings * test: update RolesRoomSettingsTab to match new modal condition * test: update e2e RolesRoomSettingsTab to add new modal * feat: powerlevelselector reput initial value if cancel --- ...oles-permissions-room-settings-tab.spec.ts | 9 +++ .../views/settings/PowerLevelSelector.tsx | 28 ++++++++- .../settings/PowerLevelSelector-test.tsx | 61 ++++++++++++++++++- .../tabs/room/RolesRoomSettingsTab-test.tsx | 3 + 4 files changed, 99 insertions(+), 2 deletions(-) diff --git a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts b/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts index 7cc4001c58..06ee25e9cb 100644 --- a/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts +++ b/playwright/e2e/settings/roles-permissions-room-settings-tab.spec.ts @@ -37,6 +37,15 @@ test.describe("Roles & Permissions room settings tab", () => { // Change the role of Alice to Moderator (50) await combobox.selectOption("Moderator"); await expect(combobox).toHaveValue("50"); + + // Should display a modal to warn that we are demoting the only admin user + const modal = await page.locator(".mx_Dialog", { + hasText: "Warning", + }); + await expect(modal).toBeVisible(); + // Click on the continue button in the modal + await modal.getByRole("button", { name: "Continue" }).click(); + const respPromise = page.waitForRequest("**/state/**"); await applyButton.click(); await respPromise; diff --git a/src/components/views/settings/PowerLevelSelector.tsx b/src/components/views/settings/PowerLevelSelector.tsx index 32731715ff..0b570c1516 100644 --- a/src/components/views/settings/PowerLevelSelector.tsx +++ b/src/components/views/settings/PowerLevelSelector.tsx @@ -13,6 +13,8 @@ import { useMatrixClientContext } from "../../../contexts/MatrixClientContext"; import PowerSelector from "../elements/PowerSelector"; import { _t } from "../../../languageHandler"; import SettingsFieldset from "./SettingsFieldset"; +import Modal from "../../../Modal"; +import QuestionDialog from "../dialogs/QuestionDialog"; /** * Display in a fieldset, the power level of the users and allow to change them. @@ -77,6 +79,13 @@ export function PowerLevelSelector({ // No user to display, we return the children into fragment to convert it to JSX.Element type if (!users.length) return <>{children}; + // check at least one admin in the list + const roomHasAtLeastOneAdmin = (usersLevels: Record): boolean => { + const userLevelValues = Object.values(usersLevels); + // At least one user as the pL 100 which means he is admin + return userLevelValues.some((uL) => uL === 100); + }; + return ( {users.map((userId) => { @@ -96,7 +105,24 @@ export function PowerLevelSelector({ disabled={!canChange} label={userId} key={userId} - onChange={(value) => setCurrentPowerLevel({ value, userId })} + onChange={async (value) => { + const userLevelsTmp = Object.assign({}, userLevels); + userLevelsTmp[userId] = value; + if (!roomHasAtLeastOneAdmin(userLevelsTmp)) { + const { finished } = Modal.createDialog(QuestionDialog, { + title: _t("common|warning"), + description:
{_t("user_info|demote_self_confirm_room")}
, + button: _t("action|continue"), + }); + const [confirmed] = await finished; + if (!confirmed) { + // if cancel, we reput initial value + setCurrentPowerLevel({ value: userLevels[userId], userId }); + return; + } + } + setCurrentPowerLevel({ value, userId }); + }} /> ); })} diff --git a/test/unit-tests/components/views/settings/PowerLevelSelector-test.tsx b/test/unit-tests/components/views/settings/PowerLevelSelector-test.tsx index 7837db5f71..2b9b3e62fa 100644 --- a/test/unit-tests/components/views/settings/PowerLevelSelector-test.tsx +++ b/test/unit-tests/components/views/settings/PowerLevelSelector-test.tsx @@ -61,7 +61,12 @@ describe("PowerLevelSelector", () => { it("should be able to change the power level of the current user", async () => { const onClick = jest.fn(); - renderPLS({ onClick }); + const userLevels = { + [currentUser]: 100, + "@alice:server.org": 100, + "@bob:server.org": 0, + }; + renderPLS({ userLevels, onClick }); // Until the power level is changed, the apply button should be disabled // compound button is using aria-disabled instead of the disabled attribute, we can't toBeDisabled on it @@ -107,4 +112,58 @@ describe("PowerLevelSelector", () => { expect(screen.getByText("empty label")).toBeInTheDocument(); }); + + it("should display modal warning if user is last admin", async () => { + const onClick = jest.fn(); + + renderPLS({ onClick }); + + // Until the power level is changed, the apply button should be disabled + // compound button is using aria-disabled instead of the disabled attribute, we can't toBeDisabled on it + expect(screen.getByRole("button", { name: "Apply" })).toHaveAttribute("aria-disabled", "true"); + + const select = screen.getByRole("combobox", { name: currentUser }); + // Sanity check + expect(select).toHaveValue("100"); + + // Change current user power level to 50 + await userEvent.selectOptions(select, "50"); + + // modal should appear because only admin in the room + expect(screen.findByText("WARNING")).toBeTruthy(); + + await userEvent.click(screen.getByRole("button", { name: "Continue" })); + + expect(select).toHaveValue("50"); + // After the user level changes, the apply button should be enabled + expect(screen.getByRole("button", { name: "Apply" })).toHaveAttribute("aria-disabled", "false"); + + // Click on Apply should call onClick with the new power level + await userEvent.click(screen.getByRole("button", { name: "Apply" })); + expect(onClick).toHaveBeenCalledWith(50, currentUser); + }); + + it("should display modal warning if user is last admin and return to initial value if user cancel", async () => { + const onClick = jest.fn(); + + renderPLS({ onClick }); + + // Until the power level is changed, the apply button should be disabled + // compound button is using aria-disabled instead of the disabled attribute, we can't toBeDisabled on it + expect(screen.getByRole("button", { name: "Apply" })).toHaveAttribute("aria-disabled", "true"); + + const select = screen.getByRole("combobox", { name: currentUser }); + // Sanity check + expect(select).toHaveValue("100"); + + // Change current user power level to 50 + await userEvent.selectOptions(select, "50"); + + // modal should appear because only admin in the room + expect(screen.findByText("WARNING")).toBeTruthy(); + + await userEvent.click(screen.getByRole("button", { name: "Cancel" })); + // the power level should be back to initial value + expect(select).toHaveValue("100"); + }); }); diff --git a/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx index 9dc5860119..604fe8ae41 100644 --- a/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx @@ -224,6 +224,9 @@ describe("RolesRoomSettingsTab", () => { content: { users: { [cli.getUserId()!]: 100, + // needs at least one remaning admin in the room if we want to demote our user + // otherwise another modal will be displayed + ["@admin:server"]: 100, }, }, });