console: Refactor admin panel

pkg/webui/console/components/panel-view/index.js

@@ -12,16 +12,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react'
+import React, { useCallback } from 'react'
 import { Col, Container, Row } from 'react-grid-system'
-import { NavLink, Switch, Route, useRouteMatch } from 'react-router-dom'
+import { useRoutes, NavLink, Navigate } from 'react-router-dom'
 import classNames from 'classnames'
 
 import Icon from '@ttn-lw/components/icon'
 
 import Message from '@ttn-lw/lib/components/message'
-import NotFoundRoute from '@ttn-lw/lib/components/not-found-route'
 import { ErrorView } from '@ttn-lw/lib/components/error-view'
+import GenericNotFound from '@ttn-lw/lib/components/full-view-error/not-found'
 
 import SubViewError from '@console/views/sub-view-error'
 
@@ -30,57 +30,60 @@ import PropTypes from '@ttn-lw/lib/prop-types'
 import style from './panel-view.styl'
 
 const PanelView = ({ children, className }) => {
-  const { path } = useRouteMatch()
-  const firstChild = React.Children.toArray(children)[0]
+  const childrenArray = React.Children.toArray(children)
+  const firstChild = childrenArray[0]
+
+  const routes = useRoutes([
+    { path: '', element: <Navigate to={firstChild.props.path} replace /> },
+    ...childrenArray.map(child => ({
+      path: `${child.props.path}/*`,
+      element: React.cloneElement(child, { _isRoute: false }),
+    })),
+    { path: '*', element: <GenericNotFound /> },
+  ])
 
   return (
     <Container className={classNames(className, style.panelView)}>
       <Row>
         <Col className={style.menu} lg={3} xl={2}>
-          {React.Children.toArray(children).map(child =>
-            React.cloneElement(child, { path: `${path}${child.props.path}`, _isRoute: true }),
+          {childrenArray.map(child =>
+            React.cloneElement(child, { path: child.props.path, _isRoute: true }),
           )}
         </Col>
         <Col className={style.panelViewMenuItem} lg={9} xl={10}>
-          <ErrorView errorRender={SubViewError}>
-            <Switch>
-              <Route exact path={path} redirect={`${path}${firstChild.path}`} />
-              {React.Children.toArray(children).map(child =>
-                React.cloneElement(child, { path: `${path}${child.props.path}`, _isRoute: false }),
-              )}
-              <NotFoundRoute />
-            </Switch>
-          </ErrorView>
+          <ErrorView errorRender={SubViewError}>{routes}</ErrorView>
         </Col>
       </Row>
     </Container>
   )
 }
 
-const PanelViewItem = ({ icon, title, path, exact, component: Component, _isRoute }) => {
+const PanelViewItem = ({ icon, title, path, Component, _isRoute }) => {
+  const className = useCallback(
+    ({ isActive }) => classNames(style.link, { [style.active]: isActive }),
+    [],
+  )
   if (_isRoute) {
     return (
-      <NavLink to={path} className={style.link} activeClassName={style.active} exact={exact}>
+      <NavLink to={path} className={className}>
         {icon && <Icon icon={icon} className="mr-cs-xs" />} <Message content={title} />
       </NavLink>
     )
   }
 
-  return <Route path={path} component={Component} exact={exact} />
+  return React.createElement(Component)
 }
 
 PanelViewItem.propTypes = {
+  Component: PropTypes.func.isRequired,
   _isRoute: PropTypes.bool,
-  component: PropTypes.func.isRequired,
-  exact: PropTypes.bool,
   icon: PropTypes.string.isRequired,
   path: PropTypes.string.isRequired,
   title: PropTypes.message.isRequired,
 }
 
 PanelViewItem.defaultProps = {
   _isRoute: false,
-  exact: false,
 }
 
 PanelView.propTypes = {

pkg/webui/console/components/payload-formatters-form/index.js

@@ -388,7 +388,7 @@ class PayloadFormattersForm extends React.Component {
               formikRef={this.formRef}
               id="payload-formatter-form"
             >
-              {({ touched }) => (
+              {() => (
                 <>
                   <Form.SubTitle title={m.setupSubTitle} />
                   <Form.Field

pkg/webui/console/containers/deployment-component-status/index.js

@@ -51,9 +51,8 @@ const componentMap = {
   js: sharedMessages.componentJs,
   edtc: sharedMessages.componentEdtc,
   qrg: sharedMessages.componentQrg,
-  gcs: sharedMessages.claimGateway,
-  dcs: sharedMessages.claimDevice,
-  noc: sharedMessages.noc,
+  gcs: sharedMessages.componentGcs,
+  dcs: sharedMessages.componentDcs,
 }
 
 const DeploymentComponentStatus = () => (

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

@@ -101,11 +101,7 @@ const Header = ({ searchable, handleSearchRequest }) => {
         external
       />
       {mayHandleApiKeys && (
-        <Dropdown.Item
-          title={sharedMessages.apiKeys}
-          icon="api_keys"
-          path={`${accountUrl}/api-keys`}
-        />
+        <Dropdown.Item title={sharedMessages.apiKeys} icon="api_keys" path="/user/api-keys" />
       )}
       <Dropdown.Item
         title={sharedMessages.adminPanel}

pkg/webui/console/views/admin-packet-broker/admin-packet-broker.js

@@ -112,15 +112,15 @@ const PacketBroker = () => {
   )
 
   const tabs = [
-    { title: m.defaultRoutingPolicy, link: '/admin/packet-broker', name: 'default' },
+    { title: m.defaultRoutingPolicy, link: '/admin-panel/packet-broker', name: 'default' },
     {
       title: m.defaultGatewayVisibility,
-      link: '/admin/packet-broker/default-gateway-visibility',
+      link: '/admin-panel/packet-broker/default-gateway-visibility',
       name: 'default-gateway-visibility',
     },
     {
       title: sharedMessages.networks,
-      link: '/admin/packet-broker/networks',
+      link: '/admin-panel/packet-broker/networks',
       name: 'networks',
       exact: false,
     },
@@ -131,7 +131,7 @@ const PacketBroker = () => {
   return (
     <Container>
       <Row>
-        <Col lg={8} md={12}>
+        <Col md={12}>
           <PageTitle title={sharedMessages.packetBroker} />
           <div className={style.introduction}>
             <Message content={m.packetBrokerInfoText} className={style.info} />
@@ -250,7 +250,7 @@ const PacketBroker = () => {
         </Col>
         {registered && (
           <>
-            <Col lg={8} md={12}>
+            <Col md={12}>
               <Message content={m.networkVisibility} component="h3" className={style.subTitle} />
               <Row gutterWidth={48}>
                 <Col md={4}>

pkg/webui/console/views/admin-packet-broker/admin-packet-broker.styl

@@ -23,8 +23,8 @@
   margin-top: 0
 
 .h-rule
-  margin-top: $ls.m
-  margin-bottom: $ls.xs
+  margin-top: $ls.xs
+  margin-bottom: $ls.m
 
 .logo
   display: block

pkg/webui/console/views/admin-packet-broker/default-gateway-visibility.js

@@ -55,7 +55,7 @@ const DefaultGatewayVisibilityView = () => {
   )
 
   return (
-    <Col lg={8} md={12}>
+    <Col md={12}>
       <Message
         content={m.gatewayVisibilityInformation}
         component="p"

pkg/webui/console/views/admin-packet-broker/default-routing-policy.js

@@ -65,7 +65,7 @@ const DefaultRoutingPolicyView = () => {
   )
 
   return (
-    <Col lg={8} md={12}>
+    <Col md={12}>
       <Message
         content={m.routingPolicyInformation}
         component="p"

pkg/webui/console/views/admin-panel-network-information/index.js

@@ -48,8 +48,8 @@ const NetworkInformation = () => {
 
   return (
     <>
-      <PageTitle title={m.title} className="panel-title mb-0" />
       <RequireRequest requestAction={requestActions}>
+        <PageTitle title={m.title} className="panel-title mb-0" />
         <NetworkInformationContainer />
         <DeploymentComponentStatus />
       </RequireRequest>

pkg/webui/console/views/admin-user-management/index.js

@@ -14,12 +14,12 @@
 
 import React from 'react'
 import { Routes, Route } from 'react-router-dom'
-import GenericNotFound from '@ttn-lw/lib/components/full-view-error/not-found'
-import ValidateRouteParam from '@ttn-lw/lib/components/validate-route-param'
 
 import { useBreadcrumbs } from '@ttn-lw/components/breadcrumbs/context'
 import Breadcrumb from '@ttn-lw/components/breadcrumbs/breadcrumb'
 
+import GenericNotFound from '@ttn-lw/lib/components/full-view-error/not-found'
+import ValidateRouteParam from '@ttn-lw/lib/components/validate-route-param'
 import IntlHelmet from '@ttn-lw/lib/components/intl-helmet'
 
 import Require from '@console/lib/components/require'

pkg/webui/console/views/application-integrations-webhook-edit/index.js

@@ -1,4 +1,4 @@
-// Copyright © 2021 The Things Network Foundation, The Things Industries B.V.
+// Copyright © 2022 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.
@@ -26,8 +26,6 @@ import RequireRequest from '@ttn-lw/lib/components/require-request'
 
 import WebhookEdit from '@console/containers/webhook-edit'
 
-import Require from '@console/lib/components/require'
-
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 import { getWebhookTemplateId } from '@ttn-lw/lib/selectors/id'
 

pkg/webui/lib/shared-messages.js

@@ -107,6 +107,8 @@ export default defineMessages({
   componentJs: 'Join Server',
   componentNs: 'Network Server',
   componentQrg: 'QR Code Generator',
+  componentDcs: 'Device Claiming Server',
+  componentGcs: 'Gateway Claiming Server',
   confirm: 'Confirm',
   confirmPassword: 'Confirm password',
   connected: 'Connected',

pkg/webui/locales/en.json

@@ -975,8 +975,6 @@
   "console.views.overview.index.createGateway": "Register a gateway",
   "console.views.overview.index.gotoApplications": "Go to applications",
   "console.views.overview.index.gotoGateways": "Go to gateways",
-  "console.views.overview.index.needHelp": "Need help? Have a look at our {documentationLink} or {supportLink}.",
-  "console.views.overview.index.needHelpShort": "Need help? Have a look at our {link}.",
   "console.views.overview.index.welcome": "Welcome to the Console!",
   "console.views.overview.index.welcomeBack": "Welcome back, {userName}! 👋",
   "console.views.overview.index.getStarted": "Get started right away by creating an application or registering a gateway.",
@@ -1218,7 +1216,7 @@
   "lib.shared-messages.collaboratorIdPlaceholder": "collaborator-id",
   "lib.shared-messages.collaboratorWarningSelf": "Changing your own rights could result in loss of access",
   "lib.shared-messages.collaboratorWarningAdmin": "This user is an administrator that will retain all rights to all entities regardless of collaborator status",
-  "lib.shared-messages.collaboratorWarningAdminSelf": "As an administrator, you aways retain all rights to all entities regardless of collaborator status",
+  "lib.shared-messages.collaboratorWarningAdminSelf": "As an administrator, you always retain all rights to all entities regardless of collaborator status",
   "lib.shared-messages.collaboratorModalWarning": "Are you sure you want to remove {collaboratorId} as a collaborator?",
   "lib.shared-messages.collaboratorModalWarningSelf": "Are you sure you want to remove yourself as a collaborator? Access to this entity will be lost until someone else adds you as a collaborator again.",
   "lib.shared-messages.collaboratorRemove": "Collaborator remove",
@@ -1231,6 +1229,8 @@
   "lib.shared-messages.componentJs": "Join Server",
   "lib.shared-messages.componentNs": "Network Server",
   "lib.shared-messages.componentQrg": "QR Code Generator",
+  "lib.shared-messages.componentDcs": "Device Claiming Server",
+  "lib.shared-messages.componentGcs": "Gateway Claiming Server",
   "lib.shared-messages.confirm": "Confirm",
   "lib.shared-messages.confirmPassword": "Confirm password",
   "lib.shared-messages.connected": "Connected",