console: Refactor routing logic in packet broker views

TheThingsNetwork · Oct 26, 2023 · c0b533a · c0b533a
1 parent 111613d
commit c0b533a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/pkg/webui/console/views/admin-packet-broker/admin-packet-broker.js b/pkg/webui/console/views/admin-packet-broker/admin-packet-broker.js
@@ -15,7 +15,7 @@
 import React, { useCallback, useState } from 'react'
 import { Container, Col, Row } from 'react-grid-system'
 import { useSelector, useDispatch } from 'react-redux'
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import classnames from 'classnames'
 
 import PacketBrokerLogo from '@assets/misc/packet-broker.svg'
@@ -69,7 +69,7 @@ const PacketBroker = () => {
     } else {
       setDeregisterModalVisible(true)
     }
-  }, [dispatch, registered, setDeregisterModalVisible])
+  }, [dispatch, registered])
 
   const handleDeregisterModalComplete = useCallback(
     approved => {
@@ -102,8 +102,9 @@ const PacketBroker = () => {
   const tabs = [
     {
       title: m.routingConfig,
-      link: '/admin-panel/packet-broker',
+      link: '/admin-panel/packet-broker/routing-configuration',
       name: 'default',
+      exact: false,
     },
     {
       title: m.defaultGatewayVisibility,
@@ -221,8 +222,9 @@ const PacketBroker = () => {
             <Col md={12} style={{ position: 'relative' }} className="mt-cs-xxl">
               <Tabs tabs={tabs} active={activeTab} onTabChange={setActiveTab} divider />
               <Routes>
-                <Route index path="/*" Component={RoutingConfigurationView} />
+                <Route path="routing-configuration/*" Component={RoutingConfigurationView} />
                 <Route path="default-gateway-visibility" Component={DefaultGatewayVisibilityView} />
+                <Route path="/" element={<Navigate to="routing-configuration" />} />
                 <Route path="*" component={GenericNotFound} />
               </Routes>
             </Col>

diff --git a/pkg/webui/console/views/admin-packet-broker/index.js b/pkg/webui/console/views/admin-packet-broker/index.js
@@ -44,7 +44,7 @@ const PacketBrokerRouter = () => {
       <RequireRequest requestAction={getPacketBrokerInfo()}>
         <Routes>
           <Route
-            path="networks/:netId/:tenantId?"
+            path="routing-configuration/networks/:netId/:tenantId?"
             element={
               <ValidateRouteParam
                 check={{ tenantId: pathIdRegexp, netId: /^\d+$/ }}

diff --git a/pkg/webui/console/views/admin-packet-broker/network-routing-policies.js b/pkg/webui/console/views/admin-packet-broker/network-routing-policies.js
@@ -23,8 +23,11 @@ import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 const NetworkRoutingPoliciesView = () => {
   useBreadcrumbs(
-    'admin-panel.packet-broker.networks',
-    <Breadcrumb path={'/admin-panel/packet-broker/networks'} content={sharedMessages.networks} />,
+    'admin-panel.packet-broker.routing-configuration.networks',
+    <Breadcrumb
+      path={'/admin-panel/packet-broker/routing-configuration/networks'}
+      content={sharedMessages.networks}
+    />,
   )
 
   return <PacketBrokerNetworksTable />

diff --git a/pkg/webui/console/views/admin-packet-broker/network-routing-policy.js b/pkg/webui/console/views/admin-packet-broker/network-routing-policy.js
@@ -73,11 +73,16 @@ const NetworkRoutingPolicyViewInner = () => {
   const defaultRoutingPolicy = useSelector(selectHomeNetworkDefaultRoutingPolicy)
 
   useBreadcrumbs(
-    'admin-panel.packet-broker.networks.single',
+    'admin-panel.packet-broker.routing-configuration.networks.single',
     <>
-      <Breadcrumb path={'/admin-panel/packet-broker/networks'} content={sharedMessages.networks} />
       <Breadcrumb
-        path={`/admin-panel/packet-broker/networks/${netId}${tenantId ? `/${tenantId}` : ''}`}
+        path={'/admin-panel/packet-broker/routing-configuration/networks'}
+        content={sharedMessages.networks}
+      />
+      <Breadcrumb
+        path={`/admin-panel/packet-broker/routing-configuration/networks/${netId}${
+          tenantId ? `/${tenantId}` : ''
+        }`}
         content={network.name || displayId}
       />
     </>,
@@ -160,7 +165,11 @@ const NetworkRoutingPolicyViewInner = () => {
       <Row>
         <Col md={12}>
           <PageTitle title={m.network} values={{ network: network.name || displayId }}>
-            <Link to="/admin-panel/packet-broker/networks" secondary className={style.backLink}>
+            <Link
+              to="/admin-panel/packet-broker/routing-configuration/networks"
+              secondary
+              className={style.backLink}
+            >
               ← <Message content={m.backToAllNetworks} />
             </Link>
           </PageTitle>
@@ -228,7 +237,10 @@ const NetworkRoutingPolicyView = () => {
   const registered = useSelector(selectRegistered)
 
   return (
-    <Require condition={registered} otherwise={{ redirect: '/admin-panel/packet-broker' }}>
+    <Require
+      condition={registered}
+      otherwise={{ redirect: '/admin-panel/packet-broker/routing-configuration' }}
+    >
       <RequireRequest
         requestAction={[
           getPacketBrokerNetwork(combinedId, { fetchPolicies: true }),

diff --git a/pkg/webui/console/views/admin-packet-broker/routing-configuration.js b/pkg/webui/console/views/admin-packet-broker/routing-configuration.js
@@ -103,10 +103,14 @@ const RoutingConfigurationView = () => {
   const dispatch = useDispatch()
   const [activeTab, setActiveTab] = useState('default-routing-policy')
   const tabs = [
-    { title: m.defaultRoutingPolicy, link: '/admin-panel/packet-broker', name: 'default' },
+    {
+      title: m.defaultRoutingPolicy,
+      link: '/admin-panel/packet-broker/routing-configuration',
+      name: 'default',
+    },
     {
       title: sharedMessages.networks,
-      link: '/admin-panel/packet-broker/networks',
+      link: '/admin-panel/packet-broker/routing-configuration/networks',
       name: 'networks',
       exact: false,
     },