Backport new Admin Panel

CHANGELOG.md

@@ -12,6 +12,7 @@ For details about compatibility between different releases, see the **Commitment
 ### Added
 
 - Support claim in device import in the Console.
+- New Admin Panel in the Console.
 
 ### Changed
 

cypress/integration/console/admin-panel/admin-panel.spec.js

@@ -0,0 +1,36 @@
+// Copyright © 2023 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.
+
+describe('Admin Panel', () => {
+  before(() => {
+    cy.dropAndSeedDatabase()
+    cy.intercept('/api/v3/pba/info', { fixture: 'console/packet-broker/info-registered.json' })
+  })
+
+  beforeEach(() => {
+    cy.loginConsole({ user_id: 'admin', password: 'admin' })
+  })
+
+  it('succeeds displaying different views in the admin panel', () => {
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel`)
+
+    cy.findByText('User management').should('be.visible').click()
+    cy.findByText('User management', { selector: 'h1' }).should('be.visible')
+    cy.findByTestId('error-notification').should('not.exist')
+
+    cy.findByText('Peering settings').should('be.visible').click()
+    cy.findByText('Packet Broker', { selector: 'h1' }).should('be.visible')
+    cy.findByTestId('error-notification').should('not.exist')
+  })
+})

cypress/integration/console/admin-panel/network-information/network-information.spec.js

@@ -0,0 +1,35 @@
+// Copyright © 2023 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.
+
+describe('Network information section', () => {
+  before(() => {
+    cy.dropAndSeedDatabase()
+  })
+
+  beforeEach(() => {
+    cy.loginConsole({ user_id: 'admin', password: 'admin' })
+  })
+
+  it('succeeds showing registry totals', () => {
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/network-information`)
+    cy.findByText('Network information', { selector: 'h1' }).should('be.visible')
+    // Shows registry totals.
+    cy.findAllByText('Total applications').should('be.visible')
+    cy.findAllByText('Total gateways').should('be.visible')
+    cy.findAllByText('Registered users').should('be.visible')
+    cy.findAllByText('Organizations').should('be.visible')
+    cy.findByText('Deployment').should('be.visible')
+    cy.findByText('Available components').should('be.visible')
+  })
+})

cypress/integration/console/packet-broker/default-gateway-visibility.spec.js → cypress/integration/console/admin-panel/packet-broker/default-gateway-visibility.spec.js

@@ -31,7 +31,9 @@ describe('Packet Broker routing policies', () => {
     })
     cy.intercept('GET', '/api/v3/pba/home-networks/policies/default', { statusCode: 404 })
     cy.intercept('PUT', '/api/v3/pba/home-networks/gateway-visibilities/default', {}).as('putCall')
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/default-gateway-visibility`)
+    cy.visit(
+      `${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/default-gateway-visibility`,
+    )
 
     cy.findByLabelText('Location').check()
     cy.findByLabelText('Antenna placement').check()
@@ -53,7 +55,9 @@ describe('Packet Broker routing policies', () => {
       fixture: 'console/packet-broker/default-gateway-visibility.json',
     })
     cy.intercept('PUT', '/api/v3/pba/home-networks/gateway-visibilities/default', {}).as('putCall')
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/default-gateway-visibility`)
+    cy.visit(
+      `${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/default-gateway-visibility`,
+    )
 
     cy.findByLabelText('Location').uncheck()
     cy.findByLabelText('Antenna placement').uncheck()

cypress/integration/console/packet-broker/networks.spec.js → cypress/integration/console/admin-panel/packet-broker/networks.spec.js

@@ -45,7 +45,7 @@ describe('Packet Broker networks', () => {
     cy.intercept('/api/v3/pba/home-networks/policies*', {
       fixture: 'console/packet-broker/policies-home-network.json',
     })
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks`)
 
     const { networks } = this.networks
     const networksFiltered = networks.filter(
@@ -73,7 +73,7 @@ describe('Packet Broker networks', () => {
       n => n.forwarder_id.net_id === 19 && n.forwarder_id.tenant_id === 'johan',
     )
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks/19/johan`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19/johan`)
 
     cy.findAllByText(`${network.id.net_id.toString(16).padStart(6, '0')}/${network.id.tenant_id}`)
     cy.findByText(

cypress/integration/console/packet-broker/registration.spec.js → cypress/integration/console/admin-panel/packet-broker/registration.spec.js

@@ -36,18 +36,18 @@ describe('Packet Broker registration', () => {
 
     cy.loginConsole({ user_id: user.ids.user_id, password: user.password })
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
     cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/`)
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks/19`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19`)
     cy.location('pathname').should('eq', `${Cypress.config('consoleRootPath')}/`)
   })
 
   it('displays a notification when Packet Broker is not set up', () => {
     cy.intercept('/api/v3/pba/info', { statusCode: 403 })
 
     cy.loginConsole({ user_id: 'admin', password: 'admin' })
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
     cy.findByTestId('notification')
       .findByText(/not set up/)
@@ -58,11 +58,11 @@ describe('Packet Broker registration', () => {
   it('displays UI elements in place', () => {
     cy.intercept('/api/v3/pba/info', { fixture: 'console/packet-broker/info.json' })
     cy.loginConsole({ user_id: 'admin', password: 'admin' })
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
     cy.findByText('Packet Broker', { selector: 'h1' }).should('be.visible')
     cy.findByText(/Packet Broker can be used to exchange traffic/).should('be.visible')
-    cy.findByText('Packet Broker', { selector: 'a' }).should('be.visible')
+    cy.findByText('Packet Broker documentation', { selector: 'a' }).should('be.visible')
     cy.findByText('Packet Broker website', { selector: 'a' }).should('be.visible')
     cy.findByText('Register network', { selector: 'span' }).should('be.visible')
     cy.findByTestId('switch')
@@ -87,7 +87,7 @@ describe('Packet Broker registration', () => {
     cy.intercept('/api/v3/pba/info', { fixture: 'console/packet-broker/info.json' })
 
     cy.loginConsole({ user_id: 'admin', password: 'admin' })
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
     cy.findByText('Register network').click().next().findByTestId('switch').should('be.checked')
     cy.findByText('List network publicly')

cypress/integration/console/packet-broker/routing-policies.spec.js → cypress/integration/console/admin-panel/packet-broker/routing-policies.spec.js

@@ -35,7 +35,7 @@ describe('Packet Broker routing policies', () => {
   it('succeeds setting a default routing policy', () => {
     cy.intercept('GET', '/api/v3/pba/home-networks/policies/default', { statusCode: 404 })
     cy.intercept('PUT', '/api/v3/pba/home-networks/policies/default', {})
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
     cy.findByLabelText('Use default routing policy for this network').check()
 
@@ -71,7 +71,7 @@ describe('Packet Broker routing policies', () => {
     })
     cy.intercept('DELETE', '/api/v3/pba/home-networks/policies/default', {})
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker`)
 
     cy.findByLabelText('Do not use a default routing policy for this network').check()
     cy.findByRole('button', { name: 'Save default policy' }).click()
@@ -93,7 +93,7 @@ describe('Packet Broker routing policies', () => {
     })
     cy.intercept('PUT', '/api/v3/pba/home-networks/policies/19', {})
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks/19`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19`)
 
     // Check routing policy form checkboxes.
     cy.findByLabelText('Use network specific routing policy').check()
@@ -138,7 +138,7 @@ describe('Packet Broker routing policies', () => {
     })
     cy.intercept('DELETE', '/api/v3/pba/home-networks/policies/19', {})
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks/19`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19`)
 
     cy.findByLabelText('Do not use a routing policy for this network').check()
     cy.findByRole('button', { name: 'Save routing policy' }).click()
@@ -161,7 +161,7 @@ describe('Packet Broker routing policies', () => {
     })
     cy.intercept('DELETE', '/api/v3/pba/home-networks/policies/19', {})
 
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/packet-broker/networks/19`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/packet-broker/networks/19`)
 
     cy.findByLabelText('Use default routing policy for this network').check()
     cy.findByRole('button', { name: 'Save routing policy' }).click()

cypress/integration/console/user-management/invitations.spec.js → cypress/integration/console/admin-panel/user-management/invitations.spec.js

@@ -22,7 +22,7 @@ describe('Send invite', () => {
   })
 
   it('displays UI elements in place', () => {
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/user-management/invitations/add`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/user-management/invitations/add`)
 
     cy.findByText('Invite', { selector: 'h1' }).should('be.visible')
     cy.findByLabelText('Email address')
@@ -33,7 +33,7 @@ describe('Send invite', () => {
   })
 
   it('validates before submitting an empty form', () => {
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/user-management/invitations/add`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/user-management/invitations/add`)
 
     cy.findByRole('button', { name: 'Invite' }).should('be.visible').click()
 
@@ -42,12 +42,12 @@ describe('Send invite', () => {
       .and('be.visible')
     cy.location('pathname').should(
       'eq',
-      `${Cypress.config('consoleRootPath')}/admin/user-management/invitations/add`,
+      `${Cypress.config('consoleRootPath')}/admin-panel/user-management/invitations/add`,
     )
   })
 
   it('succeeds inviting a user', () => {
-    cy.visit(`${Cypress.config('consoleRootPath')}/admin/user-management/invitations/add`)
+    cy.visit(`${Cypress.config('consoleRootPath')}/admin-panel/user-management/invitations/add`)
     cy.findByLabelText('Email address').type('[email protected]')
 
     cy.findByRole('button', { name: 'Invite' }).click()
@@ -56,7 +56,7 @@ describe('Send invite', () => {
     cy.findByTestId('full-error-view').should('not.exist')
     cy.location('pathname').should(
       'eq',
-      `${Cypress.config('consoleRootPath')}/admin/user-management`,
+      `${Cypress.config('consoleRootPath')}/admin-panel/user-management`,
     )
     cy.findByText('User invitations').click()
     cy.findByRole('cell', { name: '[email protected]' }).should('be.visible')

cypress/integration/console/devices/import.spec.js

@@ -87,9 +87,9 @@ describe('End device messaging', () => {
       const devicesFile = 'successful-devices.json'
       cy.findByLabelText('File').attachFile(devicesFile)
       cy.findByRole('button', { name: 'Import end devices' }).click()
-      cy.findByText('0 of 3 (0.00% finished)')
+      cy.findByText('0 of 3 (0% finished)')
       cy.findByText('Operation finished')
-      cy.findByText('3 of 3 (100.00% finished)')
+      cy.findByText('3 of 3 (100% finished)')
       cy.findByTestId('notification')
         .should('be.visible')
         .findByText('All end devices imported successfully')
@@ -117,7 +117,7 @@ describe('End device messaging', () => {
       cy.findByRole('button', { name: 'Import end devices' }).click()
 
       cy.findByText('Operation finished').should('be.visible')
-      cy.findByText('3 of 3 (100.00% finished)').should('be.visible')
+      cy.findByText('3 of 3 (100% finished)').should('be.visible')
       cy.findByText('Successfully converted 1 of 3 end devices').should('be.visible')
       cy.findByTestId('notification')
         .should('be.visible')
@@ -196,7 +196,7 @@ describe('End device messaging', () => {
       cy.findByLabelText('File').attachFile(devicesFile)
       cy.findByRole('button', { name: 'Import end devices' }).click()
       cy.findByText('Operation finished').should('be.visible')
-      cy.findByText('3 of 3 (100.00% finished)').should('be.visible')
+      cy.findByText('3 of 3 (100% finished)').should('be.visible')
       cy.findByText('Successfully converted 2 of 3 end devices').should('be.visible')
       cy.findByTestId('notification')
         .findByText('Not all devices imported successfully')
@@ -230,9 +230,9 @@ describe('End device messaging', () => {
       const devicesFile = 'successful-devices.json'
       cy.findByLabelText('File').attachFile(devicesFile)
       cy.findByRole('button', { name: 'Import end devices' }).click()
-      cy.findByText('0 of 3 (0.00% finished)')
+      cy.findByText('0 of 3 (0% finished)')
       cy.findByText('Operation finished')
-      cy.findByText('3 of 3 (100.00% finished)')
+      cy.findByText('3 of 3 (100% finished)')
       cy.findByTestId('notification')
         .should('be.visible')
         .findByText('All end devices imported successfully')

pkg/webui/components/breadcrumbs/context.js

@@ -34,7 +34,11 @@ class BreadcrumbsProvider extends React.Component {
     this.setState(prev => {
       const index = prev.breadcrumbs.findIndex(({ id: breadcrumbId }) => breadcrumbId === id)
       if (index === -1) {
-        return { breadcrumbs: [...prev.breadcrumbs, { id, breadcrumb }] }
+        return {
+          breadcrumbs: [...prev.breadcrumbs, { id, breadcrumb }].sort((a, b) =>
+            a.id < b.id ? -1 : 1,
+          ),
+        }
       }
 
       // Replace breadcrumb with existing id.

pkg/webui/components/button/index.js

@@ -153,7 +153,7 @@ const LinkButton = props => {
 }
 
 const AnchorLinkButton = props => {
-  const { target, title, name, href, ...rest } = props
+  const { target, title, name, href, external, ...rest } = props
   const dataProps = useMemo(() => filterDataProps(rest), [rest])
   const htmlProps = { target, title, name, ...dataProps }
   const buttonClassNames = assembleClassnames(props)
@@ -162,6 +162,7 @@ const AnchorLinkButton = props => {
       className={buttonClassNames}
       href={href}
       children={buttonChildren(props)}
+      external={external}
       {...htmlProps}
     />
   )

pkg/webui/components/dropdown/dropdown.styl

@@ -30,10 +30,10 @@ ul.dropdown
 
   hr
     margin-top: 0
-    height: .4rem
+    height: .1rem
+    background-color: $c-divider
 
   li.dropdown-header-item
-    border-normal('bottom')
     display: block
     margin-bottom: 0
     font-weight: $fw.bold
@@ -59,22 +59,19 @@ ul.dropdown
       width: 100%
       &:not(.active)
         color: $tc-deep-gray
-        
+
       &.active
         border-left: $c-active-blue 5px solid
         color: $c-active-blue
-        
+
       &:hover
         color: white
-        
+
         .icon
           color: white
 
     .icon
       margin-right: $cs.xs
 
-    &:not(:last-child)
-      border-normal('bottom')
-
     &:hover
       background-color: $c-active-blue