From 6a3105a45e46e49bc388bc50d27a0ffea93374cb Mon Sep 17 00:00:00 2001 From: Kevin Schiffer Date: Thu, 29 Jun 2023 17:21:28 +0200 Subject: [PATCH] console: Refactor admin panel --- .../console/components/panel-view/index.js | 47 ++++++++++--------- .../payload-formatters-form/index.js | 2 +- .../deployment-component-status/index.js | 5 +- pkg/webui/console/views/admin-panel/index.js | 12 ++--- .../views/admin-user-management/index.js | 4 +- pkg/webui/console/views/app/index.js | 2 +- .../index.js | 4 +- pkg/webui/lib/shared-messages.js | 2 + pkg/webui/locales/en.json | 6 +-- 9 files changed, 43 insertions(+), 41 deletions(-) diff --git a/pkg/webui/console/components/panel-view/index.js b/pkg/webui/console/components/panel-view/index.js index a5db09259bb..651a837417d 100644 --- a/pkg/webui/console/components/panel-view/index.js +++ b/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,49 +30,53 @@ 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: }, + ...childrenArray.map(child => ({ + path: `${child.props.path}/*`, + element: React.cloneElement(child, { _isRoute: false }), + })), + { path: '*', element: }, + ]) return ( - {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 }), )} - - - - {React.Children.toArray(children).map(child => - React.cloneElement(child, { path: `${path}${child.props.path}`, _isRoute: false }), - )} - - - + {routes} ) } -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 ( - + {icon && } ) } - return + 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, @@ -80,7 +84,6 @@ PanelViewItem.propTypes = { PanelViewItem.defaultProps = { _isRoute: false, - exact: false, } PanelView.propTypes = { diff --git a/pkg/webui/console/components/payload-formatters-form/index.js b/pkg/webui/console/components/payload-formatters-form/index.js index 410fb493326..27b54823c17 100644 --- a/pkg/webui/console/components/payload-formatters-form/index.js +++ b/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 }) => ( + {() => ( <> ( diff --git a/pkg/webui/console/views/admin-panel/index.js b/pkg/webui/console/views/admin-panel/index.js index 05033b5cccb..ef14afefb3f 100644 --- a/pkg/webui/console/views/admin-panel/index.js +++ b/pkg/webui/console/views/admin-panel/index.js @@ -58,16 +58,16 @@ const AdminPanel = () => { {showUserManagement && ( )} @@ -75,8 +75,8 @@ const AdminPanel = () => { )} diff --git a/pkg/webui/console/views/admin-user-management/index.js b/pkg/webui/console/views/admin-user-management/index.js index 4ce74b5f59d..7b3e4d28479 100644 --- a/pkg/webui/console/views/admin-user-management/index.js +++ b/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' diff --git a/pkg/webui/console/views/app/index.js b/pkg/webui/console/views/app/index.js index df1e76e22d7..2f9a9a5a17f 100644 --- a/pkg/webui/console/views/app/index.js +++ b/pkg/webui/console/views/app/index.js @@ -167,7 +167,7 @@ class ConsoleApp extends React.PureComponent { - + diff --git a/pkg/webui/console/views/application-integrations-webhook-edit/index.js b/pkg/webui/console/views/application-integrations-webhook-edit/index.js index 63417b3a99f..5de814e94a9 100644 --- a/pkg/webui/console/views/application-integrations-webhook-edit/index.js +++ b/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' diff --git a/pkg/webui/lib/shared-messages.js b/pkg/webui/lib/shared-messages.js index d9f8fc16978..2a1f85134a9 100644 --- a/pkg/webui/lib/shared-messages.js +++ b/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', diff --git a/pkg/webui/locales/en.json b/pkg/webui/locales/en.json index 159ebac4bc6..74c02c425fb 100644 --- a/pkg/webui/locales/en.json +++ b/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",