Block adding network device when there are no available locations

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"
 }

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<RowData>();
 
 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,
       );