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

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");
+    });
 });

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,
                         },
                     },
                 });