Merge pull request #7156 from TheThingsNetwork/feature/7063-do-not-pr…

…efill-id Do not autogenerate/prefill gateway and device ID in the console
TheThingsNetwork · Jul 4, 2024 · afb8f16 · afb8f16
2 parents b15cafb + 9466fef
commit afb8f16
Show file tree

Hide file tree

Showing 18 changed files with 50 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,8 @@ For details about compatibility between different releases, see the **Commitment
 
 ### Changed
 
+- Gateway ID and device ID are not autogenerated and prefilled anymore.
+
 ### Deprecated
 
 ### Removed

diff --git a/cypress/e2e/console/devices/onboarding/claiming.spec.js b/cypress/e2e/console/devices/onboarding/claiming.spec.js
@@ -81,8 +81,6 @@ describe('End device repository claiming', () => {
     // Provision first device using claiming flow.
     cy.findByLabelText('DevEUI').type(device1.devEui)
     cy.findByLabelText('Claim authentication code').type(device1.cac)
-    cy.findByLabelText('End device ID').should('have.value', `eui-${device1.devEui.toLowerCase()}`)
-    cy.findByLabelText('End device ID').clear()
     cy.findByLabelText('End device ID').type(device1.id)
     cy.findByLabelText('Register another end device of this type').check()
     cy.findByRole('button', { name: 'Register end device' }).click()
@@ -97,8 +95,6 @@ describe('End device repository claiming', () => {
     // Provision second device using claiming flow.
     cy.findByLabelText('DevEUI').type(device2.devEui)
     cy.findByLabelText('Claim authentication code').type(device2.cac)
-    cy.findByLabelText('End device ID').should('have.value', `eui-${device2.devEui.toLowerCase()}`)
-    cy.findByLabelText('End device ID').clear()
     cy.findByLabelText('End device ID').type(device2.id)
     cy.findByLabelText('View registered end device').check()
     cy.findByRole('button', { name: 'Register end device' }).click()

diff --git a/cypress/e2e/console/devices/onboarding/manual-registration.spec.js b/cypress/e2e/console/devices/onboarding/manual-registration.spec.js
@@ -124,6 +124,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('LoRaWAN version').selectOption(device.lorawan_version)
         cy.findByLabelText('JoinEUI').type(`${device.join_eui}{enter}`)
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey')
           .parents('[data-test-id="form-field"]')
           .findByRole('button', { name: /Generate/ })
@@ -165,10 +166,7 @@ describe('End device manual create', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
         cy.findByLabelText('AppKey').type(device.app_key)
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${device.dev_eui.toLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -201,6 +199,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -234,6 +233,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -265,6 +265,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -300,6 +301,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -332,6 +334,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -366,6 +369,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -402,6 +406,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('JoinEUI').type(device.join_eui)
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(device.dev_eui)
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLowerCase()}`)
         cy.findByLabelText('AppKey').type(device.app_key)
         cy.findByLabelText('NwkKey').type(device.nwk_key)
 
@@ -592,10 +597,7 @@ describe('End device manual create', () => {
         cy.findByLabelText('FNwkSIntKey').type(device.f_nwk_s_int_key)
         cy.findByLabelText('SNwkSIntKey').type(device.f_nwk_s_int_key)
         cy.findByLabelText('NwkSEncKey').type(device.f_nwk_s_int_key)
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${device.dev_eui.toLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${device.dev_eui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 

diff --git a/cypress/e2e/console/devices/onboarding/qr-scan.spec.js b/cypress/e2e/console/devices/onboarding/qr-scan.spec.js
@@ -161,7 +161,7 @@ describe('Device onboarding with QR scan', () => {
     cy.findByLabelText('DevEUI').should('have.value', devEui).should('be.disabled')
     cy.findByRole('button', { name: 'Reset' }).should('be.disabled')
     cy.findByLabelText('AppKey').type(generateHexValue(32))
-    cy.findByLabelText('End device ID').should('have.value', `eui-${device.devEui}`)
+    cy.findByLabelText('End device ID').type(`eui-${device.devEui.toLocaleLowerCase()}`)
 
     // Reset QR data.
     cy.findByRole('button', { name: /Reset QR code data/g }).click()

diff --git a/cypress/e2e/console/devices/onboarding/repository-registration.spec.js b/cypress/e2e/console/devices/onboarding/repository-registration.spec.js
@@ -135,10 +135,7 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -193,10 +190,7 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -222,10 +216,7 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -288,10 +279,7 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -340,10 +328,7 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui.toLocaleLowerCase()}`)
 
         cy.findByRole('button', { name: 'Register end device' }).click()
 
@@ -369,10 +354,8 @@ describe('End device repository manual registration', () => {
         cy.findByRole('button', { name: 'Confirm' }).click()
         cy.findByLabelText('DevEUI').type(devEui1)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui1.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui1.toLocaleLowerCase()}`)
+
         cy.findByLabelText('Register another end device of this type').check()
 
         cy.findByRole('button', { name: 'Register end device' }).click()
@@ -386,10 +369,8 @@ describe('End device repository manual registration', () => {
         // End device registration.
         cy.findByLabelText('DevEUI').type(devEui2)
         cy.findByLabelText('AppKey').type(generateHexValue(32))
-        cy.findByLabelText('End device ID').should(
-          'have.value',
-          `eui-${devEui2.toLocaleLowerCase()}`,
-        )
+        cy.findByLabelText('End device ID').type(`eui-${devEui2.toLocaleLowerCase()}`)
+
         cy.findByLabelText('View registered end device').check()
 
         cy.findByRole('button', { name: 'Register end device' }).click()

diff --git a/cypress/e2e/console/gateways/create.spec.js b/cypress/e2e/console/gateways/create.spec.js
@@ -52,7 +52,7 @@ describe('Gateway create', () => {
 
     cy.findByLabelText('Gateway EUI').type(gateway.eui)
     cy.findByLabelText('Gateway EUI').blur()
-    cy.findByLabelText('Gateway ID').should('have.value', `eui-${gateway.eui}`)
+    cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
     cy.findByLabelText('Gateway name').type('Test Gateway')
     cy.findByText('Frequency plan')
       .parents('div[data-test-id="form-field"]')
@@ -78,7 +78,7 @@ describe('Gateway create', () => {
     cy.contains('Convert MAC to EUI').should('not.exist')
 
     const gatewayEui = `${gatewayMac.substring(0, 6)}fffe${gatewayMac.substring(6)}`
-    cy.findByLabelText('Gateway ID').should('have.value', `eui-${gatewayEui}`)
+    cy.findByLabelText('Gateway ID').type(`eui-${gatewayEui}`)
   })
 
   it('succeeds showing modal when generating API keys for CUPS and LNS', () => {
@@ -89,7 +89,7 @@ describe('Gateway create', () => {
 
     cy.findByLabelText('Gateway EUI').type(gateway.eui)
     cy.findByLabelText('Gateway EUI').blur()
-    cy.findByLabelText('Gateway ID').should('have.value', `eui-${gateway.eui}`)
+    cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
     cy.findByLabelText('Gateway name').type('Test Gateway')
     cy.findByText('Frequency plan')
       .parents('div[data-test-id="form-field"]')
@@ -129,6 +129,7 @@ describe('Gateway create', () => {
     }
 
     cy.findByLabelText('Gateway EUI').type(gateway.eui)
+    cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
     cy.findByText('Frequency plan')
       .parents('div[data-test-id="form-field"]')
       .find('input')
@@ -153,6 +154,7 @@ describe('Gateway create', () => {
     }
 
     cy.findByLabelText('Gateway EUI').type(gateway.eui)
+    cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
     cy.findByText('Frequency plan')
       .parents('div[data-test-id="form-field"]')
       .find('input')
@@ -192,6 +194,7 @@ describe('Gateway create', () => {
       }
 
       cy.findByLabelText('Gateway EUI').type(gateway.eui)
+      cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
 
       cy.findByTestId('key-value-map').should('not.exist')
       cy.findByRole('button', { name: 'Register gateway' }).click()

diff --git a/cypress/e2e/smoke/gateways/create.js b/cypress/e2e/smoke/gateways/create.js
@@ -40,6 +40,7 @@ const gatewayCreate = defineSmokeTest('succeeds creating gateway', () => {
   cy.findByRole('link', { name: /Register gateway/ }).click()
   cy.findByLabelText('Gateway EUI').type(gateway.eui)
   cy.findByLabelText('Gateway name').type(gateway.name)
+  cy.findByLabelText('Gateway ID').type(`eui-${gateway.eui}`)
   cy.findByText('Frequency plan')
     .parents('div[data-test-id="form-field"]')
     .find('input')

diff --git a/pkg/webui/console/containers/dev-eui-component/index.js b/pkg/webui/console/containers/dev-eui-component/index.js
@@ -18,7 +18,7 @@ import classnames from 'classnames'
 import { defineMessages } from 'react-intl'
 
 import Input from '@ttn-lw/components/input'
-import Form, { useFormContext } from '@ttn-lw/components/form'
+import Form from '@ttn-lw/components/form'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -44,7 +44,6 @@ const m = defineMessages({
 
 const DevEUIComponent = props => {
   const { name, required, disabled, autoFocus } = props
-  const { values, setFieldValue, touched } = useFormContext()
 
   const dispatch = useDispatch()
   const appId = useSelector(selectSelectedApplicationId)
@@ -53,9 +52,6 @@ const DevEUIComponent = props => {
   const [devEUIGenerated, setDevEUIGenerated] = useState(false)
   const [errorMessage, setErrorMessage] = useState(undefined)
   const applicationDevEUICounter = useSelector(selectApplicationDevEUICount)
-  const idTouched = touched?.ids?.device_id || touched?.target_device_id
-  const hasEuiId =
-    /eui-\d{16}/.test(values?.target_device_id) || /eui-\d{16}/.test(values?.ids?.device_id)
 
   const indicatorContent = errorMessage || {
     ...sharedMessages.used,
@@ -76,32 +72,19 @@ const DevEUIComponent = props => {
     return result.dev_eui
   }, [appId, dispatch, fetchDevEUICounter, promisifiedIssueDevEUI])
 
-  const handleIdPrefill = useCallback(
-    eventOrEui => {
-      const value = typeof eventOrEui === 'string' ? eventOrEui : eventOrEui.target.value
-      if (value.length === 16 && (!idTouched || hasEuiId)) {
-        const generatedId = `eui-${value.toLowerCase()}`
-        setFieldValue('target_device_id', generatedId)
-        setFieldValue('ids.device_id', generatedId)
-      }
-    },
-    [hasEuiId, idTouched, setFieldValue],
-  )
-
   const handleGenerate = useCallback(async () => {
     try {
       const result = await handleDevEUIRequest()
       setDevEUIGenerated(true)
       setErrorMessage(undefined)
-      handleIdPrefill(result)
       return result
     } catch (error) {
       if (getBackendErrorName(error) === 'global_eui_limit_reached') {
         setErrorMessage(sharedMessages.devEUIBlockLimitReached)
       } else setErrorMessage(m.unknownError)
       setDevEUIGenerated(true)
     }
-  }, [handleDevEUIRequest, handleIdPrefill])
+  }, [handleDevEUIRequest])
 
   const devEUIGenerateDisabled =
     applicationDevEUICounter === env.devEUIConfig.applicationLimit ||
@@ -117,7 +100,6 @@ const DevEUIComponent = props => {
       max={8}
       component={Input.Generate}
       tooltipId={tooltipIds.DEV_EUI}
-      onBlur={handleIdPrefill}
       onGenerateValue={handleGenerate}
       actionDisable={devEUIGenerateDisabled}
       required={required}
@@ -136,7 +118,6 @@ const DevEUIComponent = props => {
       required={required}
       component={Input}
       tooltipId={tooltipIds.DEV_EUI}
-      onBlur={handleIdPrefill}
       disabled={disabled}
       autoFocus={autoFocus}
     />

diff --git a/pkg/webui/console/containers/device-onboarding-form/messages.js b/pkg/webui/console/containers/device-onboarding-form/messages.js
@@ -37,7 +37,6 @@ export default defineMessages({
   singleRegistration: 'View registered end device',
   multipleRegistration: 'Register another end device of this type',
   createSuccess: 'End device registered',
-  deviceIdDescription: 'This value is automatically prefilled using the DevEUI',
   onboardingDisabled:
     'Device onboarding can only be performed on deployments that have Network Server, Application Server and Join Server activated. Please use the CLI to register devices on individual components.',
   pingSlotDataRateTitle: 'Ping slot data rate',

diff --git a/...ontainers/device-onboarding-form/provisioning-form-section/claiming-form-section/index.js b/...ontainers/device-onboarding-form/provisioning-form-section/claiming-form-section/index.js
@@ -22,8 +22,6 @@ import DevEUIComponent from '@console/containers/dev-eui-component'
 import tooltipIds from '@ttn-lw/lib/constants/tooltip-ids'
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
-import m from '../../messages'
-
 const initialValues = {
   authenticated_identifiers: {
     dev_eui: '',
@@ -57,7 +55,6 @@ const DeviceClaimingFormSection = () => {
         component={Input}
         inputRef={idInputRef}
         tooltipId={tooltipIds.DEVICE_ID}
-        description={m.deviceIdDescription}
       />
     </>
   )

diff --git a/...iners/device-onboarding-form/provisioning-form-section/registration-form-section/index.js b/...iners/device-onboarding-form/provisioning-form-section/registration-form-section/index.js
@@ -27,8 +27,6 @@ import sharedMessages from '@ttn-lw/lib/shared-messages'
 import { parseLorawanMacVersion, generate16BytesKey } from '@console/lib/device-utils'
 import { checkFromState, mayEditApplicationDeviceKeys } from '@console/lib/feature-checks'
 
-import messages from '../../messages'
-
 import { initialValues } from './validation-schema'
 
 const devAddrEncoder = dev_addr => ({ ids: { dev_addr }, session: { dev_addr } })
@@ -177,7 +175,6 @@ const DeviceRegistrationFormSection = () => {
         component={Input}
         inputRef={idInputRef}
         tooltipId={tooltipIds.DEVICE_ID}
-        description={messages.deviceIdDescription}
       />
     </div>
   )