Frontend Error Handling

pkg/webui/components/footer/footer.styl

@@ -18,6 +18,9 @@
   justify-content: space-between
   padding: $cs.s
   color: $tc-subtle-gray
+  flex: none
+  +media-query($bp.s)
+    background-color: white
 
 .link
   text-decoration: underline

pkg/webui/components/header/header.styl

@@ -20,6 +20,9 @@
   display: flex
   padding: 0 $ls.s
   justify-content: space-between
+  flex: none
+  +media-query($bp.s)
+    background-color: white
 
 .logo
   display: flex

pkg/webui/components/header/index.js

@@ -69,6 +69,7 @@ const Header = function ({
   user,
   searchable,
   handleSearchRequest = () => null,
+  anchored = false,
   ...rest
 }) {
   const isGuest = !Boolean(user)
@@ -84,11 +85,19 @@ const Header = function ({
           <React.Fragment>
             <div className={styles.left}>
               <div className={styles.logo}><Logo /></div>
-              <NavigationBar className={styles.navList} entries={navigationEntries} />
+              <NavigationBar
+                className={styles.navList}
+                entries={navigationEntries}
+                anchored={anchored}
+              />
             </div>
             <div className={styles.right}>
               { searchable && <Input icon="search" onEnter={handleSearchRequest} /> }
-              <ProfileDropdown dropdownItems={dropdownItems || defaultDropdownItems} userId={user.ids.user_id} />
+              <ProfileDropdown
+                dropdownItems={dropdownItems || defaultDropdownItems}
+                userId={user.ids.user_id}
+                anchored={anchored}
+              />
             </div>
           </React.Fragment>
         )
@@ -129,6 +138,8 @@ Header.propTypes = {
     action: PropTypes.func,
     icon: PropTypes.string,
   })),
+  /** Flag identifying whether links should be rendered as plain anchor link */
+  anchored: PropTypes.bool,
   /**
   * A handler for when the user clicks the logout button
   */

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

@@ -15,7 +15,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import NavigationLink from '../link'
+import NavigationLink, { NavigationAnchorLink } from '../link'
 import Message from '../../../lib/components/message'
 import Icon from '../../icon'
 import PropTypes from '../../../lib/prop-types'
@@ -25,6 +25,7 @@ import style from './bar.styl'
 const NavigationBar = function ({
   className,
   entries,
+  anchored,
 }) {
   return (
     <nav className={classnames(className, style.bar)}>
@@ -36,8 +37,10 @@ const NavigationBar = function ({
           exact = false,
         } = entry
 
+        const Component = anchored ? NavigationAnchorLink : NavigationLink
+
         return (
-          <NavigationLink
+          <Component
             key={index}
             path={path}
             exact={exact}
@@ -46,7 +49,7 @@ const NavigationBar = function ({
           >
             {icon && <Icon icon={icon} className={style.icon} />}
             <Message content={title} />
-          </NavigationLink>
+          </Component>
         )
       })}
     </nav>
@@ -67,6 +70,8 @@ NavigationBar.propTypes = {
     icon: PropTypes.string,
     exact: PropTypes.bool,
   })),
+  /** Flag identifying whether links should be rendered as plain anchor link */
+  anchored: PropTypes.bool,
 }
 
 NavigationBar.defaultProps = {

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

@@ -17,6 +17,8 @@ import classnames from 'classnames'
 
 import { NavLink } from 'react-router-dom'
 
+import Link from '../../link'
+
 import PropTypes from '../../../lib/prop-types'
 import style from './link.styl'
 
@@ -43,6 +45,21 @@ const NavigationLink = function ({
   )
 }
 
+const NavigationAnchorLink = function ({
+  className,
+  children,
+  path,
+  ...rest
+}) {
+  return (
+    <Link.Anchor
+      href={path}
+      className={classnames(className, style.link)}
+      children={children}
+    />
+  )
+}
+
 NavigationLink.propTypes = {
   /** The path for a link */
   path: PropTypes.string.isRequired,
@@ -55,4 +72,4 @@ NavigationLink.propTypes = {
   exact: PropTypes.bool.isRequired,
 }
 
-export default NavigationLink
+export { NavigationLink as default, NavigationAnchorLink }

pkg/webui/components/profile-dropdown/index.js

@@ -14,10 +14,10 @@
 
 import React from 'react'
 import bind from 'autobind-decorator'
-import { Link } from 'react-router-dom'
 
 import Icon from '../icon'
 import Message from '../../lib/components/message'
+import Link from '../link'
 import PropTypes from '../../lib/prop-types'
 
 import styles from './profile-dropdown.styl'
@@ -80,7 +80,7 @@ export default class ProfileDropdown extends React.PureComponent {
   }
 
   render () {
-    const { userId, dropdownItems, ...rest } = this.props
+    const { userId, dropdownItems, anchored, ...rest } = this.props
 
     return (
       <div
@@ -95,22 +95,33 @@ export default class ProfileDropdown extends React.PureComponent {
         <div className={styles.profilePicture} />
         <span className={styles.id}>{userId}</span>
         <Icon icon="arrow_drop_down" />
-        { this.state.expanded && <Dropdown items={dropdownItems} />}
+        { this.state.expanded && <Dropdown items={dropdownItems} anchored={anchored} />}
       </div>
     )
   }
 }
 
-const Dropdown = ({ items }) => (
+const Dropdown = ({ items, anchored }) => (
   <ul className={styles.dropdown}>
     { items.map( function (item) {
       const icon = item.icon && <Icon className={styles.icon} icon={item.icon} />
+      const ItemElement = item.action
+        ? (
+          <button
+            onClick={item.action}
+            onKeyPress={item.action}
+            role="tab"
+            tabIndex="0"
+          >
+            {icon}
+            <Message content={item.title} />
+          </button>)
+        : anchored
+          ? <Link.Anchor href={item.path}>{icon}<Message content={item.title} /></Link.Anchor>
+          : <Link to={item.path}>{icon}<Message content={item.title} /></Link>
       return (
         <li className={styles.dropdownItem} key={item.title.id || item.title}>
-          { item.action
-            ? <button onClick={item.action} onKeyPress={item.action} role="tab" tabIndex="0">{icon}<Message content={item.title} /></button>
-            : <Link to={item.path}>{icon}<Message content={item.title} /></Link>
-          }
+          { ItemElement }
         </li>
       )
     }
@@ -132,6 +143,8 @@ Dropdown.propTypes = {
     path: PropTypes.string,
     action: PropTypes.func,
   })),
+  /** Flag identifying whether link should be rendered as plain anchor link */
+  anchored: PropTypes.bool,
 }
 
 export { Dropdown }

pkg/webui/components/profile-dropdown/profile-dropdown.styl

@@ -47,6 +47,8 @@ ul.dropdown
 
     & > a, & > button
       one-liner()
+      color: $tc-deep-gray
+      text-decoration: none
       padding: $cs.m 0
       width: 100%
 

pkg/webui/console/containers/gateway-statistics/index.js

@@ -24,7 +24,7 @@ import Icon from '../../../components/icon'
 import DateTime from '../../../lib/components/date-time'
 import Message from '../../../lib/components/message'
 import Button from '../../../components/button'
-import { isNotFoundError, isErrorTranslated } from '../../../lib/errors'
+import { isNotFoundError, isTranslated } from '../../../lib/errors/utils'
 
 import {
   statisticsSelector,
@@ -66,7 +66,7 @@ class GatewayStatistic extends React.PureComponent {
     } else if (fetching) {
       statusIndicator = 'mediocre'
       message = sharedMessages.connecting
-    } else if (error && error.message && isErrorTranslated(error.message)) {
+    } else if (error && error.message && isTranslated(error.message)) {
       statusIndicator = 'unknown'
       message = error.message
     } else if (statistics) {

pkg/webui/console/containers/header/index.js

@@ -0,0 +1,98 @@
+// Copyright © 2019 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.
+
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
+import bind from 'autobind-decorator'
+
+import { logout } from '../../store/actions/user'
+import PropTypes from '../../../lib/prop-types'
+
+import HeaderComponent from '../../../components/header'
+
+@withRouter
+@connect(state => ({
+  user: state.user.user,
+}))
+@bind
+class Header extends Component {
+
+  handleLogout () {
+    const { dispatch } = this.props
+    dispatch(logout())
+  }
+
+  render () {
+    const {
+      user,
+      dropdownItems,
+      navigationEntries,
+      anchored,
+      handleSearchRequest,
+      searchable,
+    } = this.props
+
+    return (
+      <HeaderComponent
+        user={user}
+        handleLogout={this.handleLogout}
+        dropdownItems={dropdownItems}
+        navigationEntries={navigationEntries}
+        anchored={anchored}
+        searchable={searchable}
+        handleSearchRequest={handleSearchRequest}
+      />
+    )
+  }
+}
+
+Header.propTypes = {
+  /**
+  * A list of items for the dropdown
+  * @param {(string|Object)} title - The title to be displayed
+  * @param {string} icon - The icon name to be displayed next to the title
+  * @param {string} path - The path for a navigation tab
+  * @param {function} action - Alternatively, the function to be called on click
+  */
+  dropdownItems: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.message.isRequired,
+    icon: PropTypes.string,
+    path: PropTypes.string.isRequired,
+    action: PropTypes.func,
+  })),
+  /**
+   * A list of navigation bar entries.
+   * @param {(string|Object)} title - The title to be displayed
+   * @param {string} icon - The icon name to be displayed next to the title
+   * @param {string} path -  The path for a navigation tab
+   * @param {boolean} exact - Flag identifying whether the path should be matched exactly
+   */
+  navigationEntries: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    title: PropTypes.message.isRequired,
+    action: PropTypes.func,
+    icon: PropTypes.string,
+  })),
+  /** Flag identifying whether links should be rendered as plain anchor link */
+  anchored: PropTypes.bool,
+  /**
+  * A handler for when the user used the search input
+  */
+  handleSearchRequest: PropTypes.func,
+  /** A flag identifying whether the header should display the search input */
+  searchable: PropTypes.bool,
+}
+
+export default Header

pkg/webui/console/store/selectors/api-keys.js

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const storeSelector = (state, props) => state[props.id]
+const storeSelector = (state, props) => state[props.id] || {}
 
 export const apiKeysStoreSelector = entity => (state, props) => (
   storeSelector(state.apiKeys[entity], props) || {}
@@ -21,7 +21,7 @@ export const apiKeysStoreSelector = entity => (state, props) => (
 export const apiKeysSelector = entity => function (state, props) {
   const store = storeSelector(state.apiKeys[entity], props)
 
-  return store ? store.keys : []
+  return store.keys ? store.keys : []
 }
 
 export const apiKeySelector = function (entity) {

pkg/webui/console/views/app/app.styl

@@ -24,9 +24,3 @@
 .content
   overflow: hidden
   flex: 1
-
-.header,
-.footer
-  flex: none
-  +media-query($bp.s)
-    background-color: white