dev: Update build related dependencies

config/.prettierrc.js

@@ -16,4 +16,4 @@ const yaml = require('js-yaml')
 const fs = require('fs')
 const path = require('path')
 
-module.exports = yaml.safeLoad(fs.readFileSync(path.join(__dirname, 'prettierrc.yaml'), 'utf8'))
+module.exports = yaml.load(fs.readFileSync(path.join(__dirname, 'prettierrc.yaml'), 'utf8'))

config/jest/setup.js

@@ -12,10 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import snapshotDiff from 'snapshot-diff'
-
-global.snapshotDiff = snapshotDiff
-
 /* eslint-disable no-console */
 const originalConsoleError = console.error
 console.error = (message, ...args) => {

config/manifest-template.yaml

@@ -1,6 +1,4 @@
 <%
-  for (var filetype in htmlWebpackPlugin.files) {
-    if (['manifest', 'chunks', 'publicPath'].indexOf(filetype) !== -1) continue;
-    for (var file of htmlWebpackPlugin.files[filetype]) {
+  for (var file of [...htmlWebpackPlugin.files.js, ...htmlWebpackPlugin.files.css]) {
 %>"<%= file.replace(/^.*\//,'').replace(/\.[a-f0-9]{20}/,'') %>": "<%= file.replace(/^.*\//,'') %>"
-<% }} %>
+<% } %>

config/storybook/.babelrc

@@ -1,3 +1,3 @@
 {
-  "extends": "../.babelrc"
+  "extends": "../babel.config.json"
 }

config/webpack.config.babel.js

@@ -21,7 +21,7 @@ import webpack from 'webpack'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin'
-import CleanWebpackPlugin from 'clean-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import ShellPlugin from 'webpack-shell-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HashOutput from 'webpack-plugin-hash-output'
@@ -115,19 +115,22 @@ export const styleConfig = {
     {
       loader: 'css-loader',
       options: {
-        camelCase: true,
-        localIdentName: env({
-          production: '[hash:base64:10]',
-          development: '[path][local]-[hash:base64:10]',
-        }),
-        modules: true,
+        modules: {
+          exportLocalsConvention: 'camelCase',
+          localIdentName: env({
+            production: '[hash:base64:10]',
+            development: '[path][local]-[hash:base64:10]',
+          }),
+        },
       },
     },
     {
       loader: 'stylus-loader',
       options: {
-        import: [path.resolve(context, 'pkg/webui/styles/include.styl')],
-        use: [nib()],
+        stylusOptions: {
+          import: [path.resolve(context, 'pkg/webui/styles/include.styl')],
+          use: nib(),
+        },
       },
     },
   ],
@@ -262,24 +265,24 @@ export default {
         filename: `manifest.yaml`,
         showErrors: false,
         template: path.resolve('config', 'manifest-template.yaml'),
+        minify: false,
       }),
       new MiniCssExtractPlugin({
         filename: env({
           development: '[name].css',
           production: '[name].[contenthash].css',
         }),
       }),
-      new CleanWebpackPlugin(path.resolve(CONTEXT, PUBLIC_DIR), {
-        root: context,
-        verbose: false,
+      new CleanWebpackPlugin({
         dry: WEBPACK_IS_DEV_SERVER_BUILD,
-        exclude: env({
-          production: [],
-          development: ['libs.bundle.js', 'libs.bundle.js.map'],
+        verbose: false,
+        cleanOnceBeforeBuildPatterns: env({
+          production: ['**/*'],
+          development: ['**/*', '!libs.bundle.js', '!libs.bundle.js.map'],
         }),
       }),
-      // Copy static assets to output directory
-      new CopyWebpackPlugin([`${src}/assets/static`]),
+      // Copy static assets to output directory.
+      new CopyWebpackPlugin({ patterns: [{ from: `${src}/assets/static` }] }),
     ],
     production: [
       new webpack.SourceMapDevToolPlugin({

cypress/integration/console/devices/create-repository.spec.js

@@ -168,6 +168,10 @@ describe('End device repository create', () => {
         cy.findByLabelText('Brand').selectOption('test-brand-otaa')
         cy.findByLabelText('Model').selectOption('test-model2')
 
+        cy.findByRole('button', { name: 'Register end device' })
+          .should('be.visible')
+          .and('not.be.disabled')
+
         cy.findByRole('button', { name: 'Register end device' }).click()
 
         cy.location('pathname').should(
@@ -423,6 +427,10 @@ describe('End device repository create', () => {
         cy.findByLabelText('Model').selectOption('test-model1')
         cy.findByLabelText('Profile (Region)').selectOption('EU_863_870')
 
+        cy.findByRole('button', { name: 'Register end device' })
+          .should('be.visible')
+          .and('not.be.disabled')
+
         cy.findByRole('button', { name: 'Register end device' }).click()
 
         cy.location('pathname').should(

cypress/plugins/tasks.js

@@ -32,7 +32,7 @@ client.connect()
 const stackConfigTask = (_, config) => {
   try {
     const out = execSync('go run ./cmd/ttn-lw-stack config --yml')
-    const yml = yaml.safeLoad(out)
+    const yml = yaml.load(out)
 
     // Cluster.
     config.asBaseUrl = yml.console.ui.as['base-url']

package.json

@@ -6,38 +6,37 @@
   "repository": "https://github.com/TheThingsNetwork/lorawan-stack.git",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/cli": "^7.0.0",
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/plugin-transform-spread": "^7.2.2",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/register": "^7.0.0",
-    "@babel/runtime-corejs2": "^7.4.3",
-    "@cypress/code-coverage": "^3.8.1",
+    "@babel/cli": "^7.12.17",
+    "@babel/core": "^7.12.17",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/plugin-proposal-decorators": "^7.12.13",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.12.17",
+    "@babel/plugin-transform-spread": "^7.12.13",
+    "@babel/plugin-transform-strict-mode": "^7.12.13",
+    "@babel/preset-env": "^7.12.17",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/register": "^7.12.13",
+    "@babel/runtime-corejs2": "^7.12.18",
+    "@cypress/code-coverage": "^3.9.2",
     "@hot-loader/react-dom": "^16.9.0-4.12.11",
     "@storybook/addon-actions": "^5.3.19",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-info": "^5.3.19",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/react": "^5.3.19",
-    "@testing-library/cypress": "^7.0.3",
+    "@testing-library/cypress": "^7.0.4",
     "add-asset-html-webpack-plugin": "^3.1.3",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.2.6",
-    "babel-loader": "^8.0.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.2",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-intl": "^2.3.1",
-    "babel-plugin-react-intl-auto": "^1.0.0",
-    "babel-upgrade": "^1.0.1",
-    "clean-webpack-plugin": "^0.1.17",
-    "copy-webpack-plugin": "^5.1.0",
-    "css-hot-loader": "^1.3.9",
-    "css-loader": "^2.1.1",
+    "babel-plugin-react-intl": "^3.0.1",
+    "babel-plugin-react-intl-auto": "^3.3.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.4.0",
+    "css-hot-loader": "^1.4.4",
+    "css-loader": "^5.0.2",
     "cypress": "6.8.0",
     "cypress-file-upload": "^5.0.2",
     "eslint": "^6.2.2",
@@ -52,31 +51,28 @@
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.4.0",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.1.0",
-    "js-yaml": "^3.13.1",
-    "json": "^9.0.6",
-    "messageformat-parser": "^2.0.0",
-    "mini-css-extract-plugin": "^0.4.0",
-    "mkdirp": "^1.0.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.1",
+    "jest": "^26.6.3",
+    "js-yaml": "^4.0.0",
+    "json": "^10.0.0",
+    "messageformat-parser": "^4.1.3",
+    "mini-css-extract-plugin": "^1.3.8",
+    "mkdirp": "^1.0.4",
     "nib": "^1.1.2",
     "pg": "^8.5.1",
     "prettier": "^1.18.2",
-    "react-test-renderer": "^16.0.0",
-    "snapshot-diff": "^0.5.1",
     "stylint": "^2.0.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.2",
-    "wait-on": "^5.1.0",
-    "webpack": "^4.43.0",
+    "stylus": "^0.54.8",
+    "stylus-loader": "^4.3.3",
+    "wait-on": "^5.2.1",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
     "webpack-plugin-hash-output": "^3.1.0",
     "webpack-shell-plugin": "https://github.com/cdeutsch/webpack-shell-plugin.git#bee537d",
-    "yargs": "^12.0.1",
-    "yarn": "^1.22.0"
+    "yargs": "^16.2.0",
+    "yarn": "^1.22.10"
   },
   "dependencies": {
     "@formatjs/intl-relativetimeformat": "^2.8.2",
@@ -133,7 +129,7 @@
     "cypress": "6.8.0"
   },
   "babel": {
-    "extends": "./config/.babelrc"
+    "extends": "./config/babel.config.json"
   },
   "jest": {
     "setupFiles": [

pkg/webui/account/store/actions/user.js

@@ -18,7 +18,11 @@ export const GET_USER_BASE = 'GET_USER'
 export const [
   { request: GET_USER, success: GET_USER_SUCCESS, failure: GET_USER_FAILURE },
   { request: getUser, success: getUserSuccess, failure: getUserFailure },
-] = createRequestActions(GET_USER_BASE, id => ({ id }), (id, selector) => ({ selector }))
+] = createRequestActions(
+  GET_USER_BASE,
+  id => ({ id }),
+  (id, selector) => ({ selector }),
+)
 
 export const UPDATE_USER_BASE = 'UPDATE_USER'
 export const [

pkg/webui/components/tabs/story.js

@@ -53,7 +53,10 @@ storiesOf('Tabs', module)
     })(story)(context),
   )
   .add('Default', () => {
-    const tabs = [{ title: 'All', name: 'all' }, { title: 'Starred', name: 'starred' }]
+    const tabs = [
+      { title: 'All', name: 'all' },
+      { title: 'Starred', name: 'starred' },
+    ]
 
     return <Example tabs={tabs} active={tabs[0].name} />
   })
@@ -66,7 +69,10 @@ storiesOf('Tabs', module)
     return <Example tabs={tabs} active={tabs[0].name} />
   })
   .add('Default (narrow)', () => {
-    const tabs = [{ title: 'All', name: 'all' }, { title: 'Starred', name: 'starred' }]
+    const tabs = [
+      { title: 'All', name: 'all' },
+      { title: 'Starred', name: 'starred' },
+    ]
 
     return <Example tabs={tabs} active={tabs[0].name} narrow />
   })

pkg/webui/console/containers/application-title-section/connect.js

@@ -106,4 +106,9 @@ export default TitleSection =>
     mapStateToProps,
     mapDispatchToProps,
     mergeProps,
-  )(withRequest(({ appId, loadData }) => loadData(appId), () => false)(TitleSection))
+  )(
+    withRequest(
+      ({ appId, loadData }) => loadData(appId),
+      () => false,
+    )(TitleSection),
+  )

pkg/webui/console/containers/gateway-location-form/connect.js

@@ -29,8 +29,4 @@ const mapDispatchToProps = {
   updateGateway: attachPromise(updateGateway),
 }
 
-export default Component =>
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  )(Component)
+export default Component => connect(mapStateToProps, mapDispatchToProps)(Component)

pkg/webui/console/containers/gateway-title-section/connect.js

@@ -88,4 +88,9 @@ export default TitleSection =>
     mapStateToProps,
     mapDispatchToProps,
     mergeProps,
-  )(withRequest(({ loadData }) => loadData(), () => false)(TitleSection))
+  )(
+    withRequest(
+      ({ loadData }) => loadData(),
+      () => false,
+    )(TitleSection),
+  )

pkg/webui/console/containers/organization-events/connect.js

@@ -44,8 +44,4 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
       : dispatch(pauseOrganizationEventsStream(ownProps.orgId)),
 })
 
-export default Events =>
-  connect(
-    mapStateToProps,
-    mapDispatchToProps,
-  )(Events)
+export default Events => connect(mapStateToProps, mapDispatchToProps)(Events)

pkg/webui/console/containers/organization-title-section/connect.js

@@ -88,4 +88,9 @@ export default TitleSection =>
     mapStateToProps,
     mapDispatchToProps,
     mergeProps,
-  )(withRequest(({ loadData }) => loadData(), () => false)(TitleSection))
+  )(
+    withRequest(
+      ({ loadData }) => loadData(),
+      () => false,
+    )(TitleSection),
+  )

pkg/webui/console/store/actions/applications.js

@@ -45,7 +45,11 @@ export const GET_APP_BASE = 'GET_APPLICATION'
 export const [
   { request: GET_APP, success: GET_APP_SUCCESS, failure: GET_APP_FAILURE },
   { request: getApplication, success: getApplicationSuccess, failure: getApplicationFailure },
-] = createRequestActions(GET_APP_BASE, id => ({ id }), (id, selector) => ({ selector }))
+] = createRequestActions(
+  GET_APP_BASE,
+  id => ({ id }),
+  (id, selector) => ({ selector }),
+)
 
 export const GET_APP_DEV_COUNT_BASE = 'GET_APPLICATION_DEVICE_COUNT'
 export const [

pkg/webui/console/store/actions/gateways.js

@@ -46,7 +46,11 @@ export const GET_GTW_BASE = 'GET_GATEWAY'
 export const [
   { request: GET_GTW, success: GET_GTW_SUCCESS, failure: GET_GTW_FAILURE },
   { request: getGateway, success: getGatewaySuccess, failure: getGatewayFailure },
-] = createRequestActions(GET_GTW_BASE, id => ({ id }), (id, selector) => ({ selector }))
+] = createRequestActions(
+  GET_GTW_BASE,
+  id => ({ id }),
+  (id, selector) => ({ selector }),
+)
 
 export const UPDATE_GTW_BASE = 'UPDATE_GATEWAY'
 export const [
@@ -106,7 +110,11 @@ export const [
     success: startGatewayStatisticsSuccess,
     failure: startGatewayStatisticsFailure,
   },
-] = createRequestActions(START_GTW_STATS_BASE, id => ({ id }), (id, timeout) => ({ timeout }))
+] = createRequestActions(
+  START_GTW_STATS_BASE,
+  id => ({ id }),
+  (id, timeout) => ({ timeout }),
+)
 
 export const STOP_GTW_STATS = 'STOP_GATEWAY_STATISTICS'
 export const stopGatewayStatistics = () => ({ type: STOP_GTW_STATS })

pkg/webui/console/store/actions/link.js

@@ -22,7 +22,11 @@ export const [
     success: getApplicationLinkSuccess,
     failure: getApplicationLinkFailure,
   },
-] = createRequestActions(GET_APP_LINK_BASE, id => ({ id }), (id, selector) => ({ selector }))
+] = createRequestActions(
+  GET_APP_LINK_BASE,
+  id => ({ id }),
+  (id, selector) => ({ selector }),
+)
 
 export const UPDATE_APP_LINK_SUCCESS = 'UPDATE_APPLICATION_LINK_SUCCESS'
 export const DELETE_APP_LINK_SUCCESS = 'DELETE_APPLICATION_LINK_SUCCESS'