From b430edf43b802d13569e0137296dced7a11fbab4 Mon Sep 17 00:00:00 2001
From: Huy Hoang <83349539+nnhhoang@users.noreply.github.com>
Date: Tue, 30 Jun 2026 20:04:07 +0700
Subject: [PATCH] Pluralise the multi-session remove button and confirmation
 dialog (#33983)

* Pluralise the multi-session remove button and confirmation dialog

When several sessions are selected in Settings > Sessions, the bulk remove button and its confirmation dialog used the singular "Remove this device" string. The singular "this" misleadingly implied the current device would be removed. Use the existing count-aware settings|sessions|sign_out_n_sessions key, matching the other-sessions menu, so the label reads "Remove N sessions".

Fixes #33812

* Update device-management e2e test for the pluralised remove button

The multi-select remove button now reads "Remove N sessions" instead of "Remove this device", so update the Playwright assertion to match.

* Put "Cancel" before "Remove N sessions" in the bulk session action bar

In the "Other sessions" multi-select action bar, "Remove N sessions" was
rendered before "Cancel", which placed the destructive action on the left.
Swap the two buttons so "Cancel" is on the left and "Remove N sessions" on the
right, per review feedback on #33983.
---
 .../e2e/settings/device-management.spec.ts    |  2 +-
 .../settings/devices/FilteredDeviceList.tsx   | 20 +++++++++----------
 .../settings/tabs/user/SessionManagerTab.tsx  |  4 ++--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/playwright/e2e/settings/device-management.spec.ts b/apps/web/playwright/e2e/settings/device-management.spec.ts
index 265ec9c877..c2e2855fc2 100644
--- a/apps/web/playwright/e2e/settings/device-management.spec.ts
+++ b/apps/web/playwright/e2e/settings/device-management.spec.ts
@@ -59,7 +59,7 @@ test.describe("Device manager", () => {
         await filteredDeviceListItems.last().click({ force: true });
 
         // sign out from list selection action buttons
-        await tab.getByRole("button", { name: "Remove this device", exact: true }).click();
+        await tab.getByRole("button", { name: "Remove 2 sessions", exact: true }).click();
         await page.getByRole("dialog").getByTestId("dialog-primary-button").click();
 
         // list updated after sign out
diff --git a/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx b/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
index dc4f010782..d387fc7b0e 100644
--- a/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -323,16 +323,6 @@ export const FilteredDeviceList = ({
             >
                 {selectedDeviceIds.length ? (
                     <>
-                        <AccessibleButton
-                            data-testid="sign-out-selection-cta"
-                            kind="danger_inline"
-                            disabled={isSigningOut}
-                            onClick={() => onSignOutDevices(selectedDeviceIds)}
-                            className="mx_FilteredDeviceList_headerButton"
-                        >
-                            {isSigningOut && <Spinner size={16} />}
-                            {_t("action|sign_out")}
-                        </AccessibleButton>
                         <AccessibleButton
                             data-testid="cancel-selection-cta"
                             kind="content_inline"
@@ -342,6 +332,16 @@ export const FilteredDeviceList = ({
                         >
                             {_t("action|cancel")}
                         </AccessibleButton>
+                        <AccessibleButton
+                            data-testid="sign-out-selection-cta"
+                            kind="danger_inline"
+                            disabled={isSigningOut}
+                            onClick={() => onSignOutDevices(selectedDeviceIds)}
+                            className="mx_FilteredDeviceList_headerButton"
+                        >
+                            {isSigningOut && <Spinner size={16} />}
+                            {_t("settings|sessions|sign_out_n_sessions", { count: selectedDeviceIds.length })}
+                        </AccessibleButton>
                     </>
                 ) : (
                     <FilterDropdown<DeviceFilterKey>
diff --git a/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
index 6f7db4227e..c144e86f8d 100644
--- a/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
@@ -40,7 +40,7 @@ const LoginWithQR = lazy(() => import("../../../auth/LoginWithQR"));
 
 const confirmSignOut = async (sessionsToSignOutCount: number): Promise<boolean> => {
     const { finished } = Modal.createDialog(QuestionDialog, {
-        title: _t("action|sign_out"),
+        title: _t("settings|sessions|sign_out_n_sessions", { count: sessionsToSignOutCount }),
         description: (
             <div>
                 <p>
@@ -51,7 +51,7 @@ const confirmSignOut = async (sessionsToSignOutCount: number): Promise<boolean>
             </div>
         ),
         cancelButton: _t("action|cancel"),
-        button: _t("action|sign_out"),
+        button: _t("settings|sessions|sign_out_n_sessions", { count: sessionsToSignOutCount }),
     });
     const [confirmed] = await finished;