diff --git a/web/messages/en/modal.json b/web/messages/en/modal.json index b2592755da..0e0ed3b7af 100644 --- a/web/messages/en/modal.json +++ b/web/messages/en/modal.json @@ -159,5 +159,8 @@ "modal_assign_user_device_ip_card_title": "{deviceName} IP settings", "modal_assign_user_device_ip_assignment_description": "You can change the IP address for this device separately in each location/network one-by-one.", "modal_assign_user_device_ip_success": "{deviceName}'s IP addresses were successfully updated.", - "modal_assign_user_device_ip_error": "Failed to update IP addresses" + "modal_assign_user_device_ip_error": "Failed to update IP addresses", + "modal_no_available_locations_title": "Cannot add network device", + "modal_no_available_locations_body": "Network devices can only be added to locations that have MFA disabled. You don't have any locations that meet this requirement. You can create a new location in the Locations section.", + "modal_no_available_locations_go_to_locations": "Go to locations" } diff --git a/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx b/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx index 29df046ae1..1b6064a4e7 100644 --- a/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx +++ b/web/src/pages/NetworkDevicesPage/NetworkDevicesTable.tsx @@ -1,4 +1,5 @@ import { useMutation } from '@tanstack/react-query'; +import { useNavigate } from '@tanstack/react-router'; import { createColumnHelper, getCoreRowModel, @@ -45,6 +46,7 @@ type RowData = NetworkDevice; const columnHelper = createColumnHelper(); export const NetworkDevicesTable = ({ networkDevices }: Props) => { + const navigate = useNavigate(); const reservedNames = useMemo( () => networkDevices.map((n) => n.name), [networkDevices], @@ -60,7 +62,15 @@ export const NetworkDevicesTable = ({ networkDevices }: Props) => { ['name'], ['asc'], ); - if (!availableLocations.length) return; + if (!availableLocations.length) { + openModal(ModalName.ConfirmAction, { + title: m.modal_no_available_locations_title(), + contentMd: m.modal_no_available_locations_body(), + actionPromise: async () => navigate({ to: '/locations' }), + submitProps: { text: m.modal_no_available_locations_go_to_locations() }, + }); + return; + } const { data: availableIps } = await api.network_device.getAvailableIp( availableLocations[0].id, );