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/views/admin-panel/index.js

@@ -58,25 +58,25 @@ const AdminPanel = () => {
         <PanelView.Item
           title={m.networkInformation}
           icon="view_compact"
-          path="/network-information"
-          component={NetworkInformation}
+          path="network-information"
+          Component={NetworkInformation}
           exact
         />
         {showUserManagement && (
           <PanelView.Item
             title={m.userManagement}
             icon="user_management"
-            path="/user-management"
-            component={UserManagement}
+            path="user-management"
+            Component={UserManagement}
             condition={showUserManagement}
           />
         )}
         {showPacketBroker && (
           <PanelView.Item
             title={m.peeringSettings}
             icon="packet_broker"
-            path="/packet-broker"
-            component={PacketBrokerRouter}
+            path="packet-broker"
+            Component={PacketBrokerRouter}
             condition={showPacketBroker}
           />
         )}

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/app/index.js

@@ -167,7 +167,7 @@ class ConsoleApp extends React.PureComponent {
                         <Route path="/applications/*" Component={Applications} />
                         <Route path="/gateways/*" Component={Gateways} />
                         <Route path="/organizations/*" Component={Organizations} />
-                        <Route path="/admin-panel/*" component={AdminPanel} />
+                        <Route path="/admin-panel/*" Component={AdminPanel} />
                         <Route path="/user/" Component={User} />
                         <Route path="*" Component={GenericNotFound} />
                       </Routes>

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",