dev,console,account: Update eslint dependencies and format files

config/eslintrc.yaml

@@ -5,7 +5,6 @@ extends:
   - plugin:import/recommended
   - plugin:cypress/recommended
   - prettier
-  - prettier/react
 
 parser: babel-eslint
 
@@ -120,6 +119,10 @@ rules:
     - warn
     - maxSize: 400
 
+  jest/no-conditional-expect: off
+  jest/no-try-expect: off
+  jest/no-done-callback: off
+
   # Change to `error` after https://github.com/TheThingsNetwork/lorawan-stack/issues/1086
   # is resolved.
 
@@ -169,6 +172,10 @@ rules:
       classPropertiesAllowed: false
       allowStandaloneDeclarations: false
 
+  arrow-body-style:
+    - warn
+    - as-needed
+
 # Overwrite jest's expect rules for cypress test files, which uses a different
 # assertion syntax.
 overrides:

config/prettierrc.yaml

@@ -3,3 +3,4 @@ semi: false
 trailingComma: 'all'
 singleQuote: true
 bracketSpacing: true
+arrowParens: 'avoid'

package.json

@@ -8,6 +8,7 @@
   "devDependencies": {
     "@babel/cli": "^7.12.17",
     "@babel/core": "^7.12.17",
+    "@babel/eslint-parser": "^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",
@@ -39,18 +40,18 @@
     "css-loader": "^5.0.2",
     "cypress": "6.8.0",
     "cypress-file-upload": "^5.0.2",
-    "eslint": "^6.2.2",
-    "eslint-config-prettier": "^6.0.0",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^8.0.0",
     "eslint-config-ttn": "git+https://github.com/TheThingsNetwork/eslint-config-ttn.git#v1.4.0",
-    "eslint-import-resolver-webpack": "^0.12.2",
-    "eslint-plugin-babel": "^4.1.2",
-    "eslint-plugin-cypress": "^2.10.3",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-jest": "^21.17.0",
-    "eslint-plugin-jsdoc": "^24.0.0",
-    "eslint-plugin-prefer-arrow": "^1.2.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.4.0",
+    "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-cypress": "^2.11.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.5",
+    "eslint-plugin-jsdoc": "^32.1.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.1",
     "jest": "^26.6.3",
@@ -61,7 +62,7 @@
     "mkdirp": "^1.0.4",
     "nib": "^1.1.2",
     "pg": "^8.5.1",
-    "prettier": "^1.18.2",
+    "prettier": "^2.2.1",
     "stylint": "^2.0.0",
     "stylus": "^0.54.8",
     "stylus-loader": "^4.3.3",

pkg/webui/account/api/index.js

@@ -25,9 +25,7 @@ const instance = axios.create({
 })
 
 instance.interceptors.response.use(
-  response => {
-    return response
-  },
+  response => response,
   async error => {
     if (isPermissionDeniedError(error) && error.response.data.includes('CSRF')) {
       // If the CSRF token is invalid, it likely means that the CSRF cookie

pkg/webui/account/containers/change-password-form/index.js

@@ -44,9 +44,7 @@ const m = defineMessages({
 })
 
 const validationSchemaOldPassword = Yup.object().shape({
-  old: Yup.string()
-    .required(sharedMessages.validateRequired)
-    .default(''),
+  old: Yup.string().required(sharedMessages.validateRequired).default(''),
   revoke_all_access: Yup.bool().default(false),
 })
 

pkg/webui/account/store/middleware/identity-server.js

@@ -20,9 +20,7 @@ import * as is from '@console/store/actions/identity-server'
 
 const getIsConfigurationLogic = createRequestLogic({
   type: is.GET_IS_CONFIGURATION,
-  process: async () => {
-    return tts.Is.getConfiguration()
-  },
+  process: async () => tts.Is.getConfiguration(),
 })
 
 export default [getIsConfigurationLogic]

pkg/webui/account/views/front/index.js

@@ -34,34 +34,32 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './front.styl'
 
-const FrontView = ({ location }) => {
-  return (
-    <div className={style.container}>
-      <section className={style.content}>
-        <Header />
-        <div className={style.main}>
-          <Switch>
-            <Route path="/login" component={Login} />
-            <Route path="/token-login" component={TokenLogin} />
-            <Route path="/register" component={CreateAccount} />
-            <Route path="/forgot-password" component={ForgotPassword} />
-            <Route path="/update-password" component={UpdatePassword} />
-            <Route path="/validate" component={Validate} />
-            <Redirect exact from="/" to="/login" />
-            {authRoutes.map(({ path, exact }) => (
-              <Route path={path} exact={exact} key={path}>
-                <Redirect to={`/login?n=${selectApplicationRootPath()}${location.pathname}`} />
-              </Route>
-            ))}
-            <Route component={FrontNotFound} />
-          </Switch>
-        </div>
-      </section>
-      <section className={style.visual} />
-      <Footer className={style.footer} />
-    </div>
-  )
-}
+const FrontView = ({ location }) => (
+  <div className={style.container}>
+    <section className={style.content}>
+      <Header />
+      <div className={style.main}>
+        <Switch>
+          <Route path="/login" component={Login} />
+          <Route path="/token-login" component={TokenLogin} />
+          <Route path="/register" component={CreateAccount} />
+          <Route path="/forgot-password" component={ForgotPassword} />
+          <Route path="/update-password" component={UpdatePassword} />
+          <Route path="/validate" component={Validate} />
+          <Redirect exact from="/" to="/login" />
+          {authRoutes.map(({ path, exact }) => (
+            <Route path={path} exact={exact} key={path}>
+              <Redirect to={`/login?n=${selectApplicationRootPath()}${location.pathname}`} />
+            </Route>
+          ))}
+          <Route component={FrontNotFound} />
+        </Switch>
+      </div>
+    </section>
+    <section className={style.visual} />
+    <Footer className={style.footer} />
+  </div>
+)
 
 FrontView.propTypes = {
   location: PropTypes.location.isRequired,

pkg/webui/components/button/story.js

@@ -66,7 +66,7 @@ class Example extends React.Component {
       error: true,
     })
     setTimeout(
-      function() {
+      function () {
         this.setState({
           error: false,
         })

pkg/webui/components/data-sheet/index.js

@@ -95,7 +95,7 @@ DataSheet.propTypes = {
           type: PropTypes.string,
           /** Whether this 'code' or 'byte' item should be hidden by default. */
           sensitive: PropTypes.bool,
-          /** Optional subitems of this item (same shape as item, but no deeper
+          /** Optional subitems of this item (same shape as item, but no deeper.
            * hierarchies). */
           subItems: PropTypes.arrayOf(PropTypes.object),
         }),
@@ -150,7 +150,7 @@ DataSheetRow.propTypes = {
     type: PropTypes.string,
     /** Whether this 'code' or 'byte' item should be hidden by default. */
     sensitive: PropTypes.bool,
-    /** Optional subitems of this item (same shape as item, but no deeper
+    /** Optional subitems of this item (same shape as item, but no deeper.
      * hierarchies). */
     subItems: PropTypes.arrayOf(PropTypes.object),
   }).isRequired,

pkg/webui/components/file-input/index.js

@@ -41,7 +41,7 @@ export default class FileInput extends Component {
   static propTypes = {
     accept: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     changeMessage: PropTypes.message,
-    /** `dataTransform` is a marshaler used to transform the raw field value into
+    /** `dataTransform` is a marshaler used to transform the raw field value into.
      * a value matching the field schema. */
     dataTransform: PropTypes.func,
     disabled: PropTypes.bool,

pkg/webui/components/form/story.js

@@ -102,13 +102,8 @@ storiesOf('Form', module)
         validate
         onSubmit={handleSubmit}
         validationSchema={Yup.object().shape({
-          name: Yup.string()
-            .min(5, 'Too Short')
-            .max(25, 'Too Long')
-            .required('Required'),
-          description: Yup.string()
-            .min(5, 'Too Short')
-            .max(50, 'Too Long'),
+          name: Yup.string().min(5, 'Too Short').max(25, 'Too Long').required('Required'),
+          description: Yup.string().min(5, 'Too Short').max(50, 'Too Long'),
           checkboxes: Yup.object().test('checkboxes', 'Cannot be empty', values =>
             Object.values(values).reduce((acc, curr) => acc || curr, false),
           ),

pkg/webui/components/icon/story.js

@@ -44,14 +44,12 @@ display value of the wrapping \`<span />\`in your local scoped css. The
 positioning will differ slightly, so the nudge props can be used to fine-tune
 the appearance.`
 
-const iconElement = icons.map(icon => {
-  return (
-    <div className={style.wrapper} key={icon}>
-      <Icon icon={icon} />
-      {icon}
-    </div>
-  )
-})
+const iconElement = icons.map(icon => (
+  <div className={style.wrapper} key={icon}>
+    <Icon icon={icon} />
+    {icon}
+  </div>
+))
 
 storiesOf('Icon', module)
   .addDecorator((story, context) =>

pkg/webui/components/input/story.js

@@ -54,11 +54,7 @@ class Example extends React.Component {
 }
 
 const generateRandomValue = () => `random-value-${Math.floor(Math.random() * 100)}`
-const generateRandom16Bytes = () =>
-  crypto
-    .randomBytes(16)
-    .toString('hex')
-    .toUpperCase()
+const generateRandom16Bytes = () => crypto.randomBytes(16).toString('hex').toUpperCase()
 
 storiesOf('Input', module)
   .add('Default', () => (

pkg/webui/components/modal/portalled/index.js

@@ -26,6 +26,8 @@ import Modal from '..'
  * top of the DOM hierarchy, regardless of its position in the component
  * hierarchy.
  *
+ * @param {object} props - The props of the modal component.
+ * @param {boolean} props.visible - Whether the modal is currently visible.
  * @returns {object} - The modal rendered into a portal.
  */
 const PortalledModal = ({ visible, ...modalProps }) =>

pkg/webui/components/navigation/side/index.js

@@ -67,7 +67,7 @@ export class SideNavigation extends Component {
      * screensizes).
      */
     isDrawerOpen: false,
-    /** A flag indicating whether the user has last toggled the sidebar to
+    /** A flag indicating whether the user has last toggled the sidebar to.
      * minimized state. */
     preferMinimized: false,
   }

pkg/webui/components/profile-picture/story.js

@@ -20,7 +20,7 @@ import ProfilePicture from '.'
 
 const pp = {
   sizes: {
-    '256': 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
+    256: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50',
   },
 }
 

pkg/webui/components/table/story/storyData.js

@@ -98,11 +98,7 @@ export default {
   },
   paginatedExample: {
     headers,
-    rows: rows
-      .concat(rows)
-      .concat(rows)
-      .concat(rows)
-      .concat(rows),
+    rows: rows.concat(rows).concat(rows).concat(rows).concat(rows),
   },
   clickableRowsExample: {
     headers,

pkg/webui/components/widget-container/index.js

@@ -23,27 +23,25 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 
 import style from './widget-container.styl'
 
-const WidgetContainer = ({ children, title, toAllUrl, linkMessage, className }) => {
-  return (
-    <aside className={classnames(style.container, className)}>
-      <div className={style.header}>
-        {typeof title === 'object' && 'id' in title ? (
-          <Message content={title} className={style.headerTitle} />
-        ) : (
-          title
-        )}
-        <Link className={style.seeAllLink} secondary to={toAllUrl}>
-          <Message content={linkMessage} /> →
-        </Link>
-      </div>
-      <div className={style.body}>
-        <Link className={style.bodyLink} to={toAllUrl}>
-          {children}
-        </Link>
-      </div>
-    </aside>
-  )
-}
+const WidgetContainer = ({ children, title, toAllUrl, linkMessage, className }) => (
+  <aside className={classnames(style.container, className)}>
+    <div className={style.header}>
+      {typeof title === 'object' && 'id' in title ? (
+        <Message content={title} className={style.headerTitle} />
+      ) : (
+        title
+      )}
+      <Link className={style.seeAllLink} secondary to={toAllUrl}>
+        <Message content={linkMessage} /> →
+      </Link>
+    </div>
+    <div className={style.body}>
+      <Link className={style.bodyLink} to={toAllUrl}>
+        {children}
+      </Link>
+    </div>
+  </aside>
+)
 
 WidgetContainer.propTypes = {
   children: PropTypes.node.isRequired,

pkg/webui/components/wizard/story.js

@@ -70,9 +70,7 @@ storiesOf('Wizard', module).add('Basic', () => (
       <Wizard.Step title="Account settings" id="1">
         <Wizard.Form
           validationSchema={Yup.object({
-            email: Yup.string()
-              .email()
-              .required(),
+            email: Yup.string().email().required(),
             password: Yup.string().required(),
           }).noUnknown()}
           initialValues={{ email: '', password: '' }}
@@ -86,10 +84,7 @@ storiesOf('Wizard', module).add('Basic', () => (
         <Wizard.Form
           onSubmit={stepSubmit('step2')}
           validationSchema={Yup.object({
-            year: Yup.number()
-              .min(1900)
-              .max(1999)
-              .required(),
+            year: Yup.number().min(1900).max(1999).required(),
             gender: Yup.string().required(),
           }).noUnknown()}
           initialValues={{ year: 0, gender: '' }}

pkg/webui/console/api/index.js

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import axios from 'axios'
-
 import TTS, { STACK_COMPONENTS_MAP, AUTHORIZATION_MODES } from 'ttn-lw'
 
 import toast from '@ttn-lw/components/toast'
@@ -45,9 +44,7 @@ const csrf = selectCSRFToken()
 const instance = axios.create()
 
 instance.interceptors.response.use(
-  response => {
-    return response
-  },
+  response => response,
   error => {
     if ('response' in error && error.response && 'data' in error.response) {
       throw error.response.data