Merge Console redesign into release branch

.github/workflows/js.yml

@@ -39,6 +39,8 @@ jobs:
         run: tools/bin/mage -v jsSDK:lint
       - name: Lint frontend code
         run: tools/bin/mage -v js:lint
+      - name: Lint stylus files
+        run: tools/bin/mage -v styl:lint
       - name: Check for diff
         run: tools/bin/mage git:diff
 

.gitignore

@@ -40,6 +40,9 @@
 # Icon must end with two \r
 Icon
 
+# Except for everything in the icon component directory
+!/pkg/webui/components/icon/
+
 # Thumbnails
 ._*
 

DESIGN.md

@@ -191,7 +191,7 @@ The line-height for `14px` font-size is `25px`, equaling `1.785rem`.
 
 ### Iconography
 
-For the time being, we use [Google Material Icons](https://material.io/resources/icons), but are currently looking into an icon set that suits our needs better.
+We are using [Tabler Icons](https://tablericons.com/) as our primary icon set. It is a free and open source icon set that is designed to be used in web applications.
 
 ![Icons](https://user-images.githubusercontent.com/5710611/77132143-ae040780-6aa1-11ea-9560-de6ae8f4e315.png)
 

config/.stylelintrc.yaml

@@ -0,0 +1,39 @@
+extends:
+  - 'stylelint-stylus/standard'
+rules:
+  color-no-hex: true
+  color-named: 'never'
+  declaration-no-important: true
+  stylus/at-rule-no-unknown: true
+  stylus/property-no-unknown: true
+  stylus/selector-type-no-unknown: true
+  stylus/at-extend-style: null
+  stylus/at-rule-empty-line-before: null
+  stylus/at-rule-name-space-after: null
+  stylus/block-closing-brace-empty-line-before: null
+  stylus/block-closing-brace-newline-after: null
+  stylus/block-closing-brace-newline-before: 'always-multi-line'
+  stylus/block-opening-brace-newline-after: 'always-multi-line'
+  stylus/block-opening-brace-space-after: 'always-single-line'
+  stylus/block-opening-brace-space-before: 'always'
+  stylus/color-hex-case: 'upper'
+  stylus/declaration-colon: 'always'
+  stylus/hash-object-property-comma: 'always'
+  stylus/indentation: 2
+  stylus/media-feature-colon: 'always'
+  stylus/no-at-require: null
+  stylus/no-eol-whitespace: true
+  stylus/number-leading-zero: 'never'
+  stylus/number-no-trailing-zeros: true
+  stylus/pythonic: 'always'
+  stylus/selector-list-comma: 'always'
+  stylus/selector-list-comma-newline-after: 'always-multi-line'
+  stylus/selector-list-comma-space-after: 'always-single-line'
+  stylus/selector-list-comma-space-before: 'never'
+  stylus/selector-pseudo-class-case: 'lower'
+  stylus/semicolon: 'never'
+  stylus/single-line-comment-double-slash-space-after: 'always'
+  stylus/single-line-comment-no-empty: null
+  stylus/single-line-comment:
+    - 'always'
+    - style: 'double-slash'

config/cypress.config.js

@@ -65,8 +65,9 @@ module.exports = defineConfig({
 
       return configWithPermissions
     },
+    scrollBehavior: 'center',
     experimentalRunAllSpecs: true,
-    excludeSpecPattern: '!*.spec.js',
+    excludeSpecPattern: ['!*.spec.js'],
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
   asBaseUrl: 'http://localhost:1885/api/v3',

config/eslintrc.yaml

@@ -141,6 +141,8 @@ rules:
   react/forbid-foreign-prop-types: off
   # Prevent undefined components.
   react/jsx-no-undef: warn
+  # Allow arrow functions as props
+  react/jsx-no-bind: off
   # Prevent vague prop types.
   react/forbid-prop-types:
     - warn

config/storybook/main.js

@@ -15,15 +15,23 @@
 /* eslint-disable import/no-commonjs */
 
 module.exports = {
-  stories: ['../../pkg/webui/**/story.js', '../../pkg/webui/**/*.stories.js'],
-  addons: ['@storybook/addon-actions'],
-  staticDirs: ['../../public'],
-
   framework: {
     name: '@storybook/react-webpack5',
     options: {},
   },
-
+  stories: [
+    '../../pkg/webui/**/story.js',
+    '../../pkg/webui/**/*.stories.js',
+    '../../pkg/webui/**/*.mdx',
+    '../../pkg/webui/**/*stories.mdx',
+  ],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-essentials',
+    '@storybook/addon-mdx-gfm',
+    '@storybook/addon-designs',
+  ],
+  staticDirs: ['../../public'],
   docs: {
     autodocs: true,
   },

config/storybook/preview.js

@@ -15,9 +15,7 @@
 /* eslint-disable import/prefer-default-export */
 
 import React from 'react'
-import { Provider } from 'react-redux'
 import { IntlProvider } from 'react-intl'
-import { createMemoryHistory } from 'history'
 import { MemoryRouter } from 'react-router-dom'
 
 import messages from '@ttn-lw/locales/en.json'
@@ -26,21 +24,16 @@ import backendMessages from '@ttn-lw/locales/.backend/en.json'
 import '../../pkg/webui/styles/main.styl'
 import '../../pkg/webui/styles/utilities/general.styl'
 import '../../pkg/webui/styles/utilities/spacing.styl'
+import '../../pkg/webui/styles/utilities/tokens.styl'
 import 'focus-visible/dist/focus-visible'
-import createStore from './store'
 import Center from './center'
 
-const history = createMemoryHistory()
-const store = createStore(history)
-
 export const decorators = [
   Story => (
-    <Provider store={store}>
-      <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
-        <MemoryRouter>
-          <Center>{Story()}</Center>
-        </MemoryRouter>
-      </IntlProvider>
-    </Provider>
+    <IntlProvider key="key" messages={{ ...messages, ...backendMessages }} locale="en-US">
+      <MemoryRouter>
+        <Center>{Story()}</Center>
+      </MemoryRouter>
+    </IntlProvider>
   ),
 ]

config/storybook/webpack.config.js

@@ -14,6 +14,9 @@
 
 /* eslint-env node */
 /* eslint-disable import/no-commonjs */
+import fs from 'fs'
+import path from 'path'
+
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 require('@babel/register')
 
@@ -22,9 +25,16 @@ const { default: bundleConfig, styleConfig } = require('../webpack.config.babel'
 // List of allowed plugins.
 const allow = [MiniCssExtractPlugin]
 
+const { CONTEXT = '.' } = process.env
+const context = path.resolve(CONTEXT)
+const supportedLocales = fs
+  .readdirSync(path.resolve(context, 'pkg/webui/locales'))
+  .filter(fn => fn.endsWith('.json'))
+  .map(fn => fn.split('.')[0])
+
 module.exports = async ({ config, mode }) => {
+  const webpack = require('webpack')
   if (mode === 'PRODUCTION') {
-    const webpack = require('webpack')
     allow.push(webpack.DllReferencePlugin)
   }
 
@@ -37,6 +47,7 @@ module.exports = async ({ config, mode }) => {
   const cfg = {
     ...config,
     resolve: {
+      fallback: { crypto: false },
       alias: {
         ...config.resolve.alias,
         ...bundleConfig.resolve.alias,
@@ -57,7 +68,13 @@ module.exports = async ({ config, mode }) => {
         styleConfig,
       ],
     },
-    plugins: [...config.plugins, ...filteredPlugins],
+    plugins: [
+      ...config.plugins,
+      ...filteredPlugins,
+      new webpack.DefinePlugin({
+        'process.predefined.SUPPORTED_LOCALES': JSON.stringify(supportedLocales),
+      }),
+    ],
   }
 
   return cfg

config/webpack.config.babel.js

@@ -27,7 +27,6 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import ShellPlugin from 'webpack-shell-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
-import nib from 'nib'
 
 import pjson from '../package.json'
 
@@ -41,6 +40,7 @@ const {
   PUBLIC_DIR = 'public',
   NODE_ENV = 'production',
   MAGE = 'tools/bin/mage',
+  CI = false,
 } = process.env
 
 const WEBPACK_IS_DEV_SERVER_BUILD = process.env.WEBPACK_IS_DEV_SERVER_BUILD === 'true'
@@ -136,7 +136,7 @@ export const styleConfig = {
         modules: {
           exportLocalsConvention: 'camelCase',
           localIdentName: env({
-            production: '[hash:base64:10]',
+            production: '[hash:base64:4]',
             development: '[local]-[hash:base64:4]',
           }),
         },
@@ -147,7 +147,6 @@ export const styleConfig = {
       options: {
         stylusOptions: {
           import: [path.resolve(context, 'pkg/webui/styles/include.styl')],
-          use: nib(),
         },
       },
     },
@@ -258,7 +257,7 @@ export default {
         },
       },
       {
-        test: /\.(woff|woff2|ttf|eot|jpg|jpeg|png|svg)$/i,
+        test: /\.(woff|woff2|ttf|eot|otf|jpg|jpeg|png|svg)$/i,
         type: 'asset/resource',
         generator: {
           filename: '[name].[contenthash:20][ext]',
@@ -284,6 +283,7 @@ export default {
     all: [
       new webpack.EnvironmentPlugin({
         NODE_ENV,
+        CI,
         VERSION: version,
         REVISION: revision,
         ADDITIONAL_CONFIG: JSON.stringify(ADDITIONAL_CONFIG),

cypress/e2e/account/authorization.spec.js

@@ -12,34 +12,73 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+const user = {
+  ids: { user_id: 'create-app-test-user' },
+  primary_email_address: '[email protected]',
+  password: 'ABCDefg123!',
+  password_confirm: 'ABCDefg123!',
+}
+
 describe('Account App authorization view', () => {
-  before(() => {
+  beforeEach(() => {
     cy.dropAndSeedDatabase()
+    cy.createUser(user)
   })
 
   it('displays UI elements in place', () => {
-    const user = {
-      ids: { user_id: 'create-app-test-user' },
-      primary_email_address: '[email protected]',
-      password: 'ABCDefg123!',
-      password_confirm: 'ABCDefg123!',
-    }
-
-    cy.createUser(user)
-    cy.visitConsoleAuthorizationScreen({ user_id: user.ids.user_id, password: user.password })
-
     // Check authorization screen.
+    cy.visitConsoleAuthorizationScreen({ user_id: user.ids.user_id, password: user.password })
     cy.location('pathname').should('contain', `${Cypress.config('accountAppRootPath')}/authorize`)
     cy.findByTestId('full-error-view').should('not.exist')
     cy.findByText('Request for permission').should('be.visible')
     cy.findByText('Console').should('be.visible')
     cy.findByText('All possible rights', { exact: false }).should('be.visible')
     cy.findByText('all possible current and future rights').should('be.visible')
-    cy.findByText(`You are logged in as ${user.ids.user_id}.`).should('be.visible')
+    cy.findByText(/You are logged in as/).should('be.visible')
+    cy.findByText(user.ids.user_id).should('be.visible')
     cy.findByText(
       `You will be redirected to ${Cypress.config('consoleRootPath')}/oauth/callback`,
     ).should('be.visible')
     cy.findByRole('button', { name: /Cancel/ }).should('be.visible')
     cy.findByRole('button', { name: /Authorize Console/ }).should('be.visible')
   })
+
+  it('succeeds manually authorizing Account App clients', () => {
+    // Set Console client's `skip_authorization` flag to false.
+    cy.task('execSql', `UPDATE clients SET skip_authorization=false WHERE client_id='console';`)
+    cy.visit(Cypress.config('consoleRootPath'))
+
+    // Login.
+    cy.findByLabelText('User ID').type(user.ids.user_id)
+    cy.findByLabelText('Password').type(user.password)
+    cy.findByRole('button', { name: 'Login' }).click()
+
+    // Authorize.
+    cy.location('pathname').should('contain', `${Cypress.config('accountAppRootPath')}/authorize`)
+    cy.findByRole('button', { name: /Authorize Console/ }).click()
+
+    // Check Console landing view.
+    cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/`)
+    cy.findByTestId('full-error-view').should('not.exist')
+  })
+
+  it('succeeds manually aborting Account App client authorization', () => {
+    // Set Console client's `skip_authorization` flag to false.
+    cy.task('execSql', `UPDATE clients SET skip_authorization=false WHERE client_id='console';`)
+    cy.visit(Cypress.config('consoleRootPath'))
+
+    // Login.
+    cy.findByLabelText('User ID').type(user.ids.user_id)
+    cy.findByLabelText('Password').type(user.password)
+    cy.findByRole('button', { name: 'Login' }).click()
+
+    // Deny authorization.
+    cy.location('pathname').should('contain', `${Cypress.config('accountAppRootPath')}/authorize`)
+    cy.findByRole('button', { name: /Cancel/ }).click()
+
+    // Check Console error.
+    cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/oauth/callback`)
+    cy.findByTestId('full-error-view').should('exist')
+    cy.findByText(/Login failed/).should('be.visible')
+  })
 })