Merge pull request #6335 from TheThingsNetwork/fix/frontend-claiming

Fix claiming issues in frontend

CHANGELOG.md

@@ -23,6 +23,7 @@ For details about compatibility between different releases, see the **Commitment
 
 - Removing user invitations not working in the user management panel for administrators.
 - Fix payload formatter page launching malformed requests in the Console.
+- Fix end device claiming issues in the Console and improve error messaging.
 - HTTP API routes for parsing QR codes for the QR Generator service. We exercise our right to break compatibility with third party HTTP clients since this is a bug.
   - `/qr-code/end-devices/parse` is changed to `/qr-codes/end-devices/parse`.
   - `/qr-code/end-devices/{format_id}/parse` is changed to `/qr-codes/end-devices/{format_id}/parse`.

pkg/webui/console/containers/device-onboarding-form/index.js

@@ -95,9 +95,10 @@ const DeviceOnboardingForm = () => {
 
   const handleSubmit = useCallback(
     async (values, { resetForm }, cleanedValues) => {
-      const { _registration } = values
+      const { _registration, _claim } = values
       const applicationIds = { application_id: appId }
       const { mac_state = {} } = cleanedValues
+      const isClaiming = _claim === true
 
       setError()
 
@@ -113,6 +114,15 @@ const DeviceOnboardingForm = () => {
           delete mac_state.current_parameters
         }
 
+        // Obtain the device ID from authenticated identifiers when claiming.
+        if (isClaiming) {
+          cleanedValues.ids = {
+            ...cleanedValues.ids,
+            dev_eui: values.authenticated_identifiers.dev_eui,
+            device_id: values.target_device_id,
+          }
+        }
+
         const endDevice = await dispatch(attachPromise(createDevice(appId, cleanedValues)))
         switch (_registration) {
           case REGISTRATION_TYPES.MULTIPLE:

sdk/js/src/service/devices/index.js

@@ -493,7 +493,7 @@ class Devices {
 
     // Initiate claiming, if the device is claimable.
     const hasAuthenticatedIdentifiers = Boolean(authenticated_identifiers)
-    const claimInfoResponse = await this._api.EndDeviceClaimingServer.GetInfoByJoinEUI({
+    const claimInfoResponse = await this._api.EndDeviceClaimingServer.GetInfoByJoinEUI(undefined, {
       join_eui: ids.join_eui,
     })
     const claim = Marshaler.payloadSingleResponse(claimInfoResponse)
@@ -521,12 +521,8 @@ class Devices {
               application_id: applicationId,
             },
           }
-      try {
-        const claimResponse = await this._api.EndDeviceClaimingServer.Claim(undefined, claimPayload)
-        claimDeviceIds = Marshaler.payloadSingleResponse(claimResponse)
-      } catch (error) {
-        throw new Error('Unable to claim end device', { cause: error })
-      }
+      const claimResponse = await this._api.EndDeviceClaimingServer.Claim(undefined, claimPayload)
+      claimDeviceIds = Marshaler.payloadSingleResponse(claimResponse)
     }
 
     let newFieldmasks = mask