diff --git a/web/messages/en/modal.json b/web/messages/en/modal.json index f29705c956..b2592755da 100644 --- a/web/messages/en/modal.json +++ b/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", diff --git a/web/messages/en/profile.json b/web/messages/en/profile.json index a77bddf060..3aba70509c 100644 --- a/web/messages/en/profile.json +++ b/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", diff --git a/web/src/pages/UsersOverviewPage/UsersTable.tsx b/web/src/pages/UsersOverviewPage/UsersTable.tsx index cfbba7c76b..1e0114c116 100644 --- a/web/src/pages/UsersOverviewPage/UsersTable.tsx +++ b/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,7 +485,15 @@ 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', @@ -500,7 +501,7 @@ export const UsersTable = () => { ], }, ], - [deleteDevice], + [], ); const renderExpanded = useCallback( diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx index 94e85ebcd7..a8047c69e0 100644 --- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDevicesTab/components/ProfileDevicesTable/ProfileDevicesTable.tsx +++ b/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,7 +161,15 @@ 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', @@ -177,7 +177,7 @@ const DevicesTable = ({ rowData }: { rowData: RowData[] }) => { ); 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(),