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

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<string, number>): 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 (
         <SettingsFieldset legend={title}>
             {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: <div>{_t("user_info|demote_self_confirm_room")}</div>,
+                                    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 });
+                        }}
                     />
                 );
             })}