Add user device delete confirmation

web/messages/en/modal.json

@@ -12,6 +12,8 @@
   "modal_delete_location_body": "Deleting location {name} will also delete related gateways. This action cannot be undone.",
   "modal_delete_network_device_title": "Delete device",
   "modal_delete_network_device_body": "Are you sure you want to delete this device? This action cannot be undone.",
+  "modal_delete_user_device_title": "Delete device",
+  "modal_delete_user_device_body": "Are you sure you want to delete the {name} device? This action cannot be undone.",
   "modal_delete_openid_client_title": "Delete application",
   "modal_delete_openid_client_body": "Are you sure you want to delete this application? This action cannot be undone.",
   "modal_delete_acl_alias_title": "Delete alias",

web/messages/en/profile.json

@@ -39,6 +39,8 @@
   "profile_devices_menu_show_config": "Show configuration",
   "profile_devices_menu_ip_settings": "Device IP settings",
   "profile_devices_tooltip_biometric": "Biometric is enabled for this device",
+  "user_device_delete_success": "Device deleted",
+  "user_device_delete_failed": "Failed to delete device",
   "profile_auth_keys_no_data_title": "You don't have any added keys.",
   "profile_auth_keys_no_data_subtitle": "To add one, click the button below",
   "profile_auth_keys_no_data_cta": "Add new key",

web/src/pages/UsersOverviewPage/UsersTable.tsx

@@ -434,13 +434,6 @@ export const UsersTable = () => {
     [],
   );
 
-  const { mutate: deleteDevice } = useMutation({
-    mutationFn: api.device.deleteDevice,
-    meta: {
-      invalidate: [['user-overview'], ['user'], ['network']],
-    },
-  });
-
   const makeDeviceRowMenu = useCallback(
     (
       device: Device,
@@ -492,15 +485,23 @@ export const UsersTable = () => {
           {
             text: m.controls_delete(),
             onClick: () => {
-              deleteDevice(device.id);
+              openModal(ModalName.ConfirmAction, {
+                title: m.modal_delete_user_device_title(),
+                contentMd: m.modal_delete_user_device_body({ name: device.name }),
+                actionPromise: () => api.device.deleteDevice(device.id),
+                invalidateKeys: [['user-overview'], ['user'], ['network']],
+                submitProps: { text: m.controls_delete(), variant: 'critical' },
+                onSuccess: () => Snackbar.default(m.user_device_delete_success()),
+                onError: () => Snackbar.error(m.user_device_delete_failed()),
+              });
             },
             variant: 'danger',
             icon: 'delete',
           },
         ],
       },
     ],
-    [deleteDevice],
+    [],
   );
 
   const renderExpanded = useCallback(

web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx

@@ -1,5 +1,4 @@
 import './style.scss';
-import { useMutation } from '@tanstack/react-query';
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -112,13 +111,6 @@ const DevicesTable = ({ rowData }: { rowData: RowData[] }) => {
     [devices, user, info.network_present],
   );
 
-  const { mutate: deleteDevice } = useMutation({
-    mutationFn: api.device.deleteDevice,
-    meta: {
-      invalidate: [['user-overview'], ['user', username], ['network']],
-    },
-  });
-
   const makeRowMenu = useCallback(
     (row: RowData): MenuItemsGroup[] => {
       const items: MenuItemProps[] = [
@@ -169,15 +161,23 @@ const DevicesTable = ({ rowData }: { rowData: RowData[] }) => {
         {
           text: m.controls_delete(),
           onClick: () => {
-            deleteDevice(row.id);
+            openModal(ModalName.ConfirmAction, {
+              title: m.modal_delete_user_device_title(),
+              contentMd: m.modal_delete_user_device_body({ name: row.name }),
+              actionPromise: () => api.device.deleteDevice(row.id),
+              invalidateKeys: [['user-overview'], ['user', username], ['network']],
+              submitProps: { text: m.controls_delete(), variant: 'critical' },
+              onSuccess: () => Snackbar.default(m.user_device_delete_success()),
+              onError: () => Snackbar.error(m.user_device_delete_failed()),
+            });
           },
           variant: 'danger',
           icon: 'delete',
         },
       );
       return [{ items }];
     },
-    [reservedNames, username, deleteDevice, isAdmin],
+    [reservedNames, username, isAdmin],
   );
 
   const tableColumns = useMemo(
@@ -296,6 +296,7 @@ const DevicesTable = ({ rowData }: { rowData: RowData[] }) => {
     },
     columns: tableColumns,
     data: rowData,
+    getRowId: (row) => String(row.id),
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),