Update all webui dependencies and refactor breaking changes

.github/workflows/e2e.yml

@@ -159,6 +159,7 @@ jobs:
         id: get-failed-spec
         continue-on-error: true
         run: |
+          sed -i 's/\.\.\///g' .failed-specs-*.txt
           echo "failed-test=$(paste -d , .failed-specs-*.txt)" >> $GITHUB_OUTPUT
           echo "neg-failed-test=!$(paste -d ',!' .failed-specs-*.txt)" >> $GITHUB_OUTPUT
       - name: Unzip build artifacts
@@ -173,7 +174,7 @@ jobs:
         uses: cypress-io/github-action@v4
         if: steps.get-failed-spec.outputs.failed-test != ''
         with:
-          config-file: config/cypress.json
+          config-file: config/cypress.config.js
           config: baseUrl=https://localhost:8885
           record: true
           parallel: true
@@ -183,15 +184,15 @@ jobs:
       - name: Run frontend end-to-end tests
         uses: cypress-io/github-action@v4
         with:
-          config-file: config/cypress.json
+          config-file: config/cypress.config.js
           config: baseUrl=https://localhost:8885
           record: true
           parallel: true
           browser: chrome
           group: main-${{ needs.determine-if-required.outputs.hash }}
           spec: |
             **/*
-            !cypress/integration/smoke/smoke.spec.js
+            !cypress/e2e/smoke/smoke.spec.js
             ${{ steps.get-failed-spec.outputs.neg-failed-test }}
       - name: Upload logs
         uses: actions/upload-artifact@v3
@@ -252,11 +253,11 @@ jobs:
       - name: Run end-to-end smoke tests (Firefox)
         uses: cypress-io/github-action@v4
         with:
-          config-file: config/cypress.json
+          config-file: config/cypress.config.js
           config: baseUrl=https://localhost:8885
           browser: firefox
           record: true
-          spec: cypress/integration/smoke/smoke.spec.js
+          spec: cypress/e2e/smoke/smoke.spec.js
       - name: Upload logs
         uses: actions/upload-artifact@v3
         if: failure()

config/cypress.config.js

@@ -0,0 +1,96 @@
+// Copyright © 2023 The Things Network Foundation, The Things Industries B.V.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/* eslint-disable import/no-commonjs */
+
+const { defineConfig } = require('cypress')
+const { cypressBrowserPermissionsPlugin } = require('cypress-browser-permissions')
+const cypressLogToOutput = require('cypress-log-to-output')
+
+const tasks = require('../cypress/plugins/tasks')
+
+module.exports = defineConfig({
+  projectId: 'uqdraf',
+  viewportHeight: 900,
+  viewportWidth: 1440,
+  defaultCommandTimeout: 10000,
+  animationDistanceThreshold: 3,
+  video: false,
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  env: {
+    browserPermissions: {
+      camera: 'allow',
+    },
+  },
+  e2e: {
+    setupNodeEvents: (on, config) => {
+      const configWithPermissions = cypressBrowserPermissionsPlugin(on, config)
+
+      tasks.stackConfigTask(on, configWithPermissions)
+      tasks.sqlTask(on, configWithPermissions)
+      tasks.fileExistsTask(on, configWithPermissions)
+      tasks.emailTask(on, configWithPermissions)
+
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        // Log console log to output when debug mode is enabled.
+        if (process.env.RUNNER_DEBUG) {
+          launchOptions.args = cypressLogToOutput.browserLaunchHandler(browser, launchOptions.args)
+        }
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          launchOptions.args.push(
+            '--use-file-for-fake-video-capture=cypress/fixtures/qr-code-mock-feed.y4m',
+          )
+        }
+
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--disable-gpu')
+        }
+
+        return launchOptions
+      })
+
+      return configWithPermissions
+    },
+    experimentalRunAllSpecs: true,
+    excludeSpecPattern: '!*.spec.js',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+  asBaseUrl: 'http://localhost:1885/api/v3',
+  asEnabled: true,
+  nsBaseUrl: 'http://localhost:1885/api/v3',
+  nsEnabled: true,
+  jsBaseUrl: 'http://localhost:1885/api/v3',
+  jsEnabled: true,
+  isBaseUrl: 'http://localhost:1885/api/v3',
+  isEnabled: true,
+  gsBaseUrl: 'http://localhost:1885/api/v3',
+  gsEnabled: true,
+  edtcBaseUrl: 'http://localhost:1885/api/v3',
+  edtcEnabled: true,
+  qrgBaseUrl: 'http://localhost:1885/api/v3',
+  qrgEnabled: true,
+  consoleSiteName: 'The Things Stack for LoRaWAN',
+  consoleSubTitle: 'Management platform for The Things Stack for LoRaWAN',
+  consoleTitle: 'Console',
+  consoleAssetsRootPath: '/assets',
+  consoleRootPath: '/console',
+  accountAppSiteName: 'The Things Stack for LoRaWAN',
+  accountAppSubTitle: '',
+  accountAppTitle: 'Account',
+  accountAppRootPath: '/oauth',
+  accountAppAssetsRootPath: '/assets',
+})

config/eslintrc.yaml

@@ -1,4 +1,4 @@
 extends:
   - ttn
   - plugin:jest/recommended
   - plugin:jsdoc/recommended
@@ -6,7 +6,7 @@
   - plugin:cypress/recommended
   - prettier
 
-parser: babel-eslint
+parser: '@babel/eslint-parser'
 
 plugins:
   - jsdoc
@@ -45,65 +45,65 @@
   import/order:
     - warn
     - groups:
-      - builtin
-      - external
-      - internal
-      - parent
-      - sibling
-      - index
+        - builtin
+        - external
+        - internal
+        - parent
+        - sibling
+        - index
       newlines-between: always
       pathGroups:
-      - pattern: "\\@{ttn-lw,console,account}/constants"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/api"
-        group: internal
-        position: after
-      - pattern: "\\@ttn-lw/components/**"
-        group: internal
-        position: after
-      - pattern: "\\@ttn-lw/containers/**"
-        group: internal
-        position: after
-      - pattern: "\\@ttn-lw/lib/components/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/components/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/containers/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/lib/components/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/views/**"
-        group: internal
-        position: after
-      - pattern: "\\@ttn-lw/lib/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/lib/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/store/actions/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/store/reducers/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/store/selectors/**"
-        group: internal
-        position: after
-      - pattern: "\\@{console,account}/store/middleware/**"
-        group: internal
-        position: after
-      - pattern: "(\\@assets/**|\\@ttn-lw/styles/**)"
-        group: sibling
-        position: after
-      - pattern: "./*.styl"
-        group: sibling
-        position: after
+        - pattern: "\\@{ttn-lw,console,account}/constants"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/api"
+          group: internal
+          position: after
+        - pattern: "\\@ttn-lw/components/**"
+          group: internal
+          position: after
+        - pattern: "\\@ttn-lw/containers/**"
+          group: internal
+          position: after
+        - pattern: "\\@ttn-lw/lib/components/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/components/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/containers/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/lib/components/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/views/**"
+          group: internal
+          position: after
+        - pattern: "\\@ttn-lw/lib/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/lib/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/store/actions/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/store/reducers/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/store/selectors/**"
+          group: internal
+          position: after
+        - pattern: "\\@{console,account}/store/middleware/**"
+          group: internal
+          position: after
+        - pattern: "(\\@assets/**|\\@ttn-lw/styles/**)"
+          group: sibling
+          position: after
+        - pattern: './*.styl'
+          group: sibling
+          position: after
 
   # Prevent superfluous path traversions in import statements.
   import/no-useless-path-segments:

config/webpack.config.babel.js

@@ -292,7 +292,7 @@ export default {
         manifest: path.resolve(context, CACHE_DIR, 'dll.json'),
       }),
       new AddAssetHtmlPlugin({
-        filepath: path.resolve(context, PUBLIC_DIR, 'libs*bundle.js'),
+        glob: path.resolve(context, PUBLIC_DIR, 'libs*bundle.js'),
       }),
     ],
     production: [

cypress/integration/account/authorization-management.spec.js → cypress/e2e/account/authorization-management.spec.js

@@ -79,11 +79,6 @@ describe('Account App authorization management', () => {
     cy.findByRole('button', { name: /Invalidate all access tokens/ }).click()
     cy.findByTestId('error-notification').should('not.exist')
 
-    cy.location('pathname').should(
-      'eq',
-      `${Cypress.config('accountAppRootPath')}/client-authorizations/console`,
-    )
-
     cy.visit(`${Cypress.config('accountAppRootPath')}/client-authorizations/console/access-tokens`)
     cy.findByRole('rowgroup').should('not.exist')
   })
@@ -93,10 +88,6 @@ describe('Account App authorization management', () => {
     cy.visit(`${Cypress.config('accountAppRootPath')}/client-authorizations/console/access-tokens`)
     cy.findByRole('button', { name: /Invalidate this access token/ }).click()
     cy.findByTestId('error-notification').should('not.exist')
-
-    cy.location('pathname').should(
-      'eq',
-      `${Cypress.config('accountAppRootPath')}/client-authorizations/console`,
-    )
+    cy.findByRole('rowgroup').should('not.exist')
   })
 })

cypress/integration/account/code.spec.js → cypress/e2e/account/code.spec.js

@@ -42,6 +42,6 @@ describe('Account App code view', () => {
 
   it('redirects back if no code is supplied', () => {
     cy.visit(`${Cypress.config('accountAppRootPath')}/code`)
-    cy.location('pathname').should('eq', `${Cypress.config('accountAppRootPath')}/`)
+    cy.location('pathname').should('eq', Cypress.config('accountAppRootPath'))
   })
 })

cypress/integration/account/profile-settings.spec.js → cypress/e2e/account/profile-settings.spec.js

@@ -69,7 +69,8 @@ describe('Account App profile settings', () => {
 
     cy.findByLabelText('Use Gravatar').check()
     cy.findByLabelText('Name').type(userUpdate.name)
-    cy.findByLabelText('Email address').clear().type(userUpdate.primary_email_address)
+    cy.findByLabelText('Email address').clear()
+    cy.findByLabelText('Email address').type(userUpdate.primary_email_address)
 
     // Check if the profile picture (preview) was updated properly.
     cy.get('form').within(() => {
@@ -162,7 +163,6 @@ describe('Account App profile settings', () => {
 describe('Account App profile settings with disabled upload', () => {
   before(() => {
     cy.dropAndSeedDatabase()
-    cy.server()
     cy.augmentIsConfig({ profile_picture: { disable_upload: true } })
   })
   it('displays UI elements in place', () => {
@@ -200,7 +200,6 @@ describe('Account App profile settings with disabled upload', () => {
 describe('Account App profile settings without gravatar', () => {
   before(() => {
     cy.dropAndSeedDatabase()
-    cy.server()
     cy.augmentIsConfig({ profile_picture: { use_gravatar: false } })
   })
   it('displays UI elements in place', () => {

cypress/integration/console/admin-panel/packet-broker/registration.spec.js → cypress/e2e/console/admin-panel/packet-broker/registration.spec.js

@@ -37,10 +37,10 @@ describe('Packet Broker registration', () => {
     cy.loginConsole({ user_id: user.ids.user_id, password: user.password })
 
     cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
-    cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/`)
+    cy.location('pathname').should('eq', Cypress.config('consoleRootPath'))
 
     cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19`)
-    cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/`)
+    cy.location('pathname').should('eq', Cypress.config('consoleRootPath'))
   })
 
   it('displays a notification when Packet Broker is not set up', () => {
@@ -89,7 +89,8 @@ describe('Packet Broker registration', () => {
     cy.loginConsole({ user_id: 'admin', password: 'admin' })
     cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
-    cy.findByText('Register network').click().next().findByTestId('switch').should('be.checked')
+    cy.findByText('Register network').click()
+    cy.findByText('Register network').next().findByTestId('switch').should('be.checked')
     cy.findByText('List network publicly')
       .should('be.visible')
       .next()

cypress/integration/console/auth/login.spec.js → cypress/e2e/console/auth/login.spec.js

@@ -30,7 +30,7 @@ describe('Account App login', () => {
 
     cy.get('header').within(() => {
       cy.findByRole('link')
-        .should('have.attr', 'href', `${Cypress.config('accountAppRootPath')}/`)
+        .should('have.attr', 'href', Cypress.config('accountAppRootPath'))
         .findByRole('img')
         .should('be.visible')
         .should('have.attr', 'src', `${Cypress.config('accountAppAssetsRootPath')}/account.svg`)