Console redesign fixes - 16 aug

cypress/e2e/smoke/devices/index.js

@@ -68,7 +68,9 @@ const checkCollapsingFields = defineSmokeTest('check all end device sub pages',
 
   cy.findByRole('link', { name: /Applications/ }).click()
   cy.findByRole('cell', { name: application.ids.application_id }).click()
-  cy.findByRole('link', { name: /End devices/ }).click()
+  cy.get('#sidebar').within(() => {
+    cy.findByRole('link', { name: /End devices/ }).click()
+  })
   cy.findByRole('cell', { name: `Test Device Name ${deviceId}` }).click()
 
   cy.get('#stage').within(() => {

pkg/webui/components/dropdown/index.js

@@ -174,7 +174,7 @@ DropdownItem.propTypes = {
   active: PropTypes.bool,
   exact: PropTypes.bool,
   external: PropTypes.bool,
-  icon: PropTypes.shape({}),
+  icon: PropTypes.icon,
   messageClassName: PropTypes.string,
   path: PropTypes.string,
   showActive: PropTypes.bool,

pkg/webui/components/header/index.js

@@ -29,6 +29,7 @@ import ProfileDropdown from '@ttn-lw/components/profile-dropdown'
 import AppStatusBadge from '@console/containers/app-status-badge'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
 
 import style from './header.styl'
 
@@ -101,6 +102,8 @@ const Header = ({
           icon={IconPlus}
           dropdownItems={addDropdownItems}
           dropdownPosition="below left"
+          tooltip={sharedMessages.addEntity}
+          tooltipPlacement="bottom"
           className="md-lg:d-none"
         />
         <Button
@@ -109,6 +112,8 @@ const Header = ({
           dropdownItems={bookmarkDropdownItems}
           dropdownClassName={style.bookmarksDropdown}
           dropdownPosition="below left"
+          tooltip={sharedMessages.bookmarks}
+          tooltipPlacement="bottom"
           className="md-lg:d-none"
         />
         <Button

pkg/webui/components/sidebar/dedicated-entity/dedicated-entity.styl

@@ -14,7 +14,7 @@
 
 .dedicated-entity
   text-decoration: none
-  line-height: 1.6rem
+  line-height: $lh.xs3
   color: var(--c-text-neutral-heavy)
   position: relative
   height: 2.5rem

pkg/webui/components/sidebar/section-label/index.js

@@ -119,6 +119,8 @@ const SectionLabel = ({
         dropdownPosition="below right"
         noDropdownIcon
         portalledDropdown
+        tooltip={sharedMessages.addEntity}
+        tooltipPlacement="top"
       />
     </div>
   )

pkg/webui/components/table/table/table.styl

@@ -17,6 +17,9 @@
   width: 100%
   display: table
 
+  +media-query($bp.lg)
+    margin-top: 8rem
+
   .empty-message
     display: table-caption
     caption-side: bottom

pkg/webui/console/components/blurry-network-activity-panel/blurry-network-activity-panel.styl

@@ -44,3 +44,6 @@
 .chart-date
   color: var(--c-text-neutral-light)
   font-size: $fs.s
+
+.upgrade-button
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .09)

pkg/webui/console/components/blurry-network-activity-panel/index.js

@@ -71,11 +71,15 @@ const BlurryNetworkActivityPanel = () => {
             content={sharedMessages.quicklyTroubleshoot}
           />
           <Button.AnchorLink
-            primary
+            naked
             message={sharedMessages.upgradeNow}
             icon={IconBolt}
             href={upgradeUrl}
             target="_blank"
+            className={classnames(
+              style.upgradeButton,
+              'c-bg-brand-extralight c-text-brand-normal fw-bold',
+            )}
           />
         </div>
       </div>

pkg/webui/console/components/entity-title-section/entity-title-section.js

@@ -47,7 +47,7 @@ const EntityTitleSection = props => {
 EntityTitleSection.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   className: PropTypes.string,
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.icon.isRequired,
   iconAlt: PropTypes.message.isRequired,
   id: PropTypes.string.isRequired,
   name: PropTypes.string,

pkg/webui/console/containers/account-select/index.js

@@ -38,7 +38,7 @@ const SingleValue = props => (
 
 SingleValue.propTypes = {
   data: PropTypes.shape({
-    icon: PropTypes.string.isRequired,
+    icon: PropTypes.icon.isRequired,
     description: PropTypes.string,
     label: PropTypes.string.isRequired,
     value: PropTypes.string.isRequired,

pkg/webui/console/containers/application-overview-header/application-overview-header.styl

@@ -31,6 +31,8 @@
     font-weight: $fw.bold
     font-size: $fs.l
     margin: 0
+    overflow: hidden
+    text-overflow: ellipsis
 
   .id
     color: var(--c-text-neutral-semilight)

pkg/webui/console/containers/application-overview-header/index.js

@@ -31,6 +31,7 @@ import toast from '@ttn-lw/components/toast'
 import DocTooltip from '@ttn-lw/components/tooltip/doc'
 import Status from '@ttn-lw/components/status'
 import Dropdown from '@ttn-lw/components/dropdown'
+import Link from '@ttn-lw/components/link'
 
 import Message from '@ttn-lw/lib/components/message'
 import RequireRequest from '@ttn-lw/lib/components/require-request'
@@ -142,35 +143,42 @@ const ApplicationOverviewHeader = () => {
     let node
     if (showLastSeen) {
       node = (
-        <DocTooltip
-          interactive
-          docPath="/getting-started/console/troubleshooting"
-          content={<Message content={m.lastSeenAvailableTooltip} />}
-        >
-          <LastSeen lastSeen={lastSeen} className="c-text-neutral-semilight" />
-        </DocTooltip>
+        <Link to={`/applications/${application_id}/data`}>
+          <DocTooltip
+            interactive
+            docPath="/getting-started/console/troubleshooting"
+            content={<Message content={m.lastSeenAvailableTooltip} />}
+          >
+            <LastSeen lastSeen={lastSeen} className="c-text-neutral-semilight" />
+          </DocTooltip>
+        </Link>
       )
     } else {
       node = (
-        <DocTooltip
-          content={<Message content={m.noActivityTooltip} />}
-          docPath="/getting-started/console/troubleshooting"
-        >
-          <Status
-            status="mediocre"
-            label={sharedMessages.noRecentActivity}
-            className={style.status}
-          />
-        </DocTooltip>
+        <Link to={`/applications/${application_id}/data`}>
+          <DocTooltip
+            content={<Message content={m.noActivityTooltip} />}
+            docPath="/getting-started/console/troubleshooting"
+          >
+            <Status
+              status="mediocre"
+              label={sharedMessages.noRecentActivity}
+              className={style.status}
+            />
+          </DocTooltip>
+        </Link>
       )
     }
     return (
-      <div className="d-inline-flex al-center gap-cs-xxs md-lg:d-none">
+      <Link
+        to={`/applications/${application_id}/data`}
+        className="d-inline-flex al-center gap-cs-xxs md-lg:d-none"
+      >
         <Icon icon={IconBroadcast} small className="c-text-neutral-semilight" />
         {node}
-      </div>
+      </Link>
     )
-  }, [lastSeen, showLastSeen])
+  }, [lastSeen, showLastSeen, application_id])
 
   const handleOpenDeleteApplicationModal = useCallback(() => {
     setDeleteApplicationModalVisible(true)
@@ -202,14 +210,17 @@ const ApplicationOverviewHeader = () => {
         {recentActivity}
         {mayViewDevices && (
           <RequireRequest requestAction={getApplicationDeviceCount(application_id)}>
-            <div className="d-inline-flex al-center gap-cs-xxs md-lg:d-none">
+            <Link
+              to={`/applications/${application_id}/devices`}
+              className="d-inline-flex al-center gap-cs-xxs md-lg:d-none"
+            >
               <Icon icon={IconCpu} small className="c-text-neutral-semilight" />
               <Message
                 content={m.deviceCount}
                 className="c-text-neutral-semilight"
                 values={{ devices: devicesTotalCount }}
               />
-            </div>
+            </Link>
           </RequireRequest>
         )}
         <div className={classnames(style.divider, 'md-lg:d-none')} />
@@ -221,6 +232,9 @@ const ApplicationOverviewHeader = () => {
             disabled={
               (!isBookmarked && addBookmarkLoading) || (isBookmarked && deleteBookmarkLoading)
             }
+            tooltip={
+              isBookmarked ? sharedMessages.removeFromBookmarks : sharedMessages.addToBookmarks
+            }
           />
           <Button
             secondary

pkg/webui/console/containers/device-overview-header/device-overview-header.styl

@@ -31,6 +31,8 @@
     font-weight: $fw.bold
     font-size: $fs.l
     margin: 0
+    overflow: hidden
+    text-overflow: ellipsis
 
   .id
     color: var(--c-text-neutral-semilight)
@@ -63,3 +65,9 @@
 
 .messages-count > div
   margin-right: 0
+
+.status
+  color: var(--c-text-neutral-semilight)
+  display: flex
+  align-items: center
+  white-space: nowrap

pkg/webui/console/containers/gateway-connection/index.js

@@ -21,6 +21,7 @@ import Icon, { IconArrowsSort, IconBroadcast } from '@ttn-lw/components/icon'
 import Status from '@ttn-lw/components/status'
 import DocTooltip from '@ttn-lw/components/tooltip/doc'
 import Tooltip from '@ttn-lw/components/tooltip'
+import Link from '@ttn-lw/components/link'
 
 import Message from '@ttn-lw/lib/components/message'
 
@@ -202,10 +203,13 @@ const GatewayConnection = props => {
   }, [statistics])
 
   return (
-    <div className={classnames(className, 'd-flex', 'al-center', 'gap-cs-m')}>
+    <Link
+      to={`/gateways/${gtwId}/data`}
+      className={classnames(className, 'd-flex', 'al-center', 'gap-cs-m')}
+    >
       {status}
       {messages}
-    </div>
+    </Link>
   )
 }
 

pkg/webui/console/containers/gateway-overview-header/gateway-overview-header.styl

@@ -31,6 +31,8 @@
     font-weight: $fw.bold
     font-size: $fs.l
     margin: 0
+    overflow: hidden
+    text-overflow: ellipsis
 
   .id
     color: var(--c-text-neutral-semilight)

pkg/webui/console/containers/gateway-overview-header/index.js

@@ -146,6 +146,9 @@ const GatewayOverviewHeader = ({ gateway }) => {
             disabled={
               (!isBookmarked && addBookmarkLoading) || (isBookmarked && deleteBookmarkLoading)
             }
+            tooltip={
+              isBookmarked ? sharedMessages.removeFromBookmarks : sharedMessages.addToBookmarks
+            }
           />
           <Button
             secondary

pkg/webui/console/containers/gateway-status-panel/gateway-status-panel.styl

@@ -23,8 +23,8 @@
     .gtw-status-panel-upgrade-button
       background: var(--c-bg-brand-extralight)
       color: var(--c-text-brand-normal)
-      font-weight: $fw.medium
-      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .05)
+      font-weight: $fw.bold
+      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, .09)
       margin-top: $cs.m
       width: fit-content
 

pkg/webui/console/containers/header/notifications-dropdown.js

@@ -17,7 +17,6 @@ import { useSelector } from 'react-redux'
 import classnames from 'classnames'
 import { defineMessages } from 'react-intl'
 
-import Icon, { IconKey } from '@ttn-lw/components/icon'
 import Link from '@ttn-lw/components/link'
 import Status from '@ttn-lw/components/status'
 
@@ -79,7 +78,10 @@ const NotificationsDropdown = () => {
               className={classnames(style.notificationsDropdownLink, 'd-flex')}
             >
               <div className={style.notificationsDropdownLinkIcon}>
-                <Icon icon={IconKey} />
+                <Notification.Icon
+                  data={notification}
+                  notificationType={notification.notification_type}
+                />
               </div>
               <div className={style.notificationContainer}>
                 <div className={classnames(style.title, 'fw-bold')}>

pkg/webui/console/containers/latest-decoded-payload-panel/index.js

@@ -76,7 +76,7 @@ const m = defineMessages({
   seeInLiveData: 'See in live data',
   up: '{up} up',
   rssi: `{rssi}dBm RSSI`,
-  snr: `{snr}dB SNR`,
+  snr: `{snr}dBm SNR`,
   noRecentActivityDescription: "There haven't been any uplinks recently in this application",
 })
 
@@ -289,6 +289,8 @@ const LatestDecodedPayloadPanel = ({ appId, events, shortCutLinkPath, className,
                   small
                   className={style.maximize}
                   onClick={handleOpenMaximizeCodeModal}
+                  tooltip={sharedMessages.expand}
+                  tooltipPlacement="top"
                 />
               )}
             </div>

pkg/webui/console/containers/notifications-dashboard-panel/index.js

@@ -17,7 +17,7 @@ import { useSelector } from 'react-redux'
 import { createSelector } from 'reselect'
 import { defineMessages } from 'react-intl'
 
-import { IconInbox } from '@ttn-lw/components/icon'
+import Icon, { IconInbox } from '@ttn-lw/components/icon'
 import Panel from '@ttn-lw/components/panel'
 import Status from '@ttn-lw/components/status'
 import ScrollFader from '@ttn-lw/components/scroll-fader'
@@ -117,7 +117,8 @@ const NotificationsDashboardPanel = () => {
       className={style.notificationPanel}
     >
       {notifications && notifications.length === 0 ? (
-        <div className="d-flex direction-column flex-grow j-center">
+        <div className="d-flex direction-column flex-grow j-center al-center">
+          <Icon size={64} icon={IconInbox} className="c-icon-neutral-extralight" />
           <Message
             content={sharedMessages.noNotifications}
             className="d-block text-center fs-l fw-bold"

pkg/webui/console/containers/sidebar/sidebar.styl

@@ -16,7 +16,7 @@ $sidebar-width = 22rem
 
 .sidebar
   border-normal(right)
-  line-height: 1
+  line-height: 1.2
   font-size: $fs.s
   width: $sidebar-width
   flex-shrink: 0

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

@@ -218,7 +218,7 @@ const RoutingConfigurationView = () => {
             </Routes>
           </>
         )}
-        <SubmitBar align="end">
+        <SubmitBar align="end" className="mt-cs-xl3">
           <Form.Submit component={SubmitButton} message={'Save routing configuration'} />
         </SubmitBar>
       </Form>

pkg/webui/containers/collaborator-select/index.js

@@ -181,7 +181,7 @@ Suggest.propTypes = {
     PropTypes.shape({
       label: PropTypes.string.isRequired,
       value: PropTypes.string.isRequired,
-      icon: PropTypes.shape({}).isRequired,
+      icon: PropTypes.icon.isRequired,
     }),
   ),
   isResctrictedUser: PropTypes.bool,