Merge pull request #6761 from TheThingsNetwork/feature/new-sidebar

New sidebar

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/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)
   }
 
@@ -50,7 +60,13 @@ module.exports = async ({ config, mode }) => {
     module: {
       rules: [...config.module.rules, styleConfig],
     },
-    plugins: [...config.plugins, ...filteredPlugins],
+    plugins: [
+      ...config.plugins,
+      ...filteredPlugins,
+      new webpack.DefinePlugin({
+        'process.predefined.SUPPORTED_LOCALES': JSON.stringify(supportedLocales),
+      }),
+    ],
   }
 
   return cfg

pkg/webui/account/containers/clients-table/index.js

@@ -151,7 +151,7 @@ const ClientsTable = () => {
         }),
         render: details => (
           <ButtonGroup align="end">
-            <Button message={sharedMessages.restore} onClick={details.restore} />
+            <Button message={sharedMessages.restore} onClick={details.restore} secondary />
             <DeleteModalButton
               entityId={details.id}
               entityName={name}

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

@@ -18,7 +18,7 @@ import classnames from 'classnames'
 
 import authRoutes from '@account/constants/auth-routes'
 
-import sidebarStyle from '@ttn-lw/components/navigation/side/side.styl'
+import sidebarStyle from '@ttn-lw/components/sidebar/side-menu/side.styl'
 
 import Footer from '@ttn-lw/containers/footer'
 

pkg/webui/account/views/oauth-client/index.js

@@ -19,7 +19,7 @@ import { Routes, Route, useParams } from 'react-router-dom'
 import applicationIcon from '@assets/misc/application.svg'
 
 import { useBreadcrumbs } from '@ttn-lw/components/breadcrumbs/context'
-import SideNavigation from '@ttn-lw/components/navigation/side'
+import SideNavigation from '@ttn-lw/components/sidebar/side-menu'
 import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
 import Breadcrumbs from '@ttn-lw/components/breadcrumbs'
 

pkg/webui/components/breadcrumbs/breadcrumb/breadcrumb.styl

@@ -12,27 +12,33 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-.link
-  one-liner()
-  text-decoration: none
-  color: $tc-subtle-gray
-  min-height: 18px
+
+.container
+  display: flex
 
   &:not(:last-child):after
     material-icon()
+    nudge('down', 1px)
     margin: 0 $cs.xxs
     content: 'keyboard_arrow_right'
     color: $tc-subtle-gray
 
+.link
+  one-liner()
+  text-decoration: none
+  color: $tc-subtle-gray
+  display: flex
+  align-items: center
   +focus-visible()
     text-decoration: underline
     color: $tc-deep-gray
 
-
 .last
   one-liner()
+  display: flex
+  align-items: center
   color: $tc-deep-gray
-  min-height: 18px
+  font-weight: $fw.bold
   +media-query($bp.s)
     &:last-child
       padding-right: $ls.xxs

pkg/webui/components/breadcrumbs/breadcrumb/index.js

@@ -29,16 +29,22 @@ const Breadcrumb = ({ className, path, content, isLast }) => {
   let componentProps
   if (!isLast) {
     Component = Link
-    componentProps = { className: classnames(className, style.link), to: path, secondary: true }
+    componentProps = {
+      className: style.link,
+      to: path,
+      secondary: true,
+    }
   } else {
     Component = 'span'
     componentProps = { className: classnames(className, style.last) }
   }
 
   return (
-    <Component {...componentProps}>
-      {isRawText ? <span>{content}</span> : <Message content={content} />}
-    </Component>
+    <span className={classnames(className, style.container)}>
+      <Component {...componentProps}>
+        {isRawText ? content : <Message content={content} />}
+      </Component>
+    </span>
   )
 }
 

pkg/webui/components/breadcrumbs/breadcrumbs.js

@@ -15,7 +15,6 @@
 import React from 'react'
 import ReactDom from 'react-dom'
 import classnames from 'classnames'
-import { Container } from 'react-grid-system'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
 
@@ -52,9 +51,7 @@ const PortalledBreadcrumbs = ({ className, ...rest }) => {
       nodes.push(
         ReactDom.createPortal(
           <div className={classnames(className, style.breadcrumbsContainer)}>
-            <Container>
-              <Breadcrumbs {...rest} />
-            </Container>
+            <Breadcrumbs {...rest} />
           </div>,
           element,
         ),

pkg/webui/components/breadcrumbs/breadcrumbs.styl

@@ -14,10 +14,10 @@
 
 .breadcrumbs
   color: $tc-subtle-gray
-  height: $breadcrumbs-bar-height
   display: flex
   align-items: center
   overflow: hidden
+  height: 1rem
 
   +media-query($bp.s)
     overflow: auto
@@ -28,6 +28,7 @@
       display: none
 
   &-container
-    border-normal('bottom')
     box-sizing: border-box
     height: $breadcrumbs-bar-height
+    display: flex
+    align-items: center