Add bookmarks panel to console overview

pkg/webui/components/dropdown/index.js

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

pkg/webui/components/header/header.styl

@@ -32,6 +32,7 @@
   .bookmarks-dropdown
     max-width: 19.3rem
     width: 19.3rem // Avoids flash of small container when dropdown is opened
+    padding: 0
 
 .logo
   height: $cs.l

pkg/webui/components/panel/toggle/index.js

@@ -46,7 +46,7 @@ Toggle.propTypes = {
   onToggleChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.string.isRequired,
+      label: PropTypes.message.isRequired,
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,

pkg/webui/components/panel/toggle/toggle.styl

@@ -39,7 +39,7 @@
     &:hover:not(.toggle-button-active)
       background: var(--c-bg-neutral-light)
 
-@container panel (max-width: 395px)
+@container panel (max-width: 485px)
   .toggle
     width: 100%
 

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

@@ -14,12 +14,25 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { useSelector } from 'react-redux'
 
+import { IconApplication, IconDevice, IconGateway, IconOrganization } from '@ttn-lw/components/icon'
 import Button from '@ttn-lw/components/button'
+import Dropdown from '@ttn-lw/components/dropdown'
 
 import Message from '@ttn-lw/lib/components/message'
 
 import PropTypes from '@ttn-lw/lib/prop-types'
+import sharedMessages from '@ttn-lw/lib/shared-messages'
+
+import {
+  checkFromState,
+  mayViewApplications,
+  mayViewGateways,
+  mayViewOrganizationsOfUser,
+} from '@console/lib/feature-checks'
+
+import { selectUser } from '@console/store/selectors/logout'
 
 const SectionLabel = ({
   label,
@@ -28,23 +41,71 @@ const SectionLabel = ({
   onClick,
   buttonDisabled,
   'data-test-id': dataTestId,
-}) => (
-  <div
-    className={classnames(
-      className,
-      'd-flex',
-      'j-between',
-      'al-center',
-      'c-text-neutral-light',
-      'ml-cs-s',
-      'fs-s',
-    )}
-    data-test-id={dataTestId}
-  >
-    <Message content={label} />
-    <Button naked small icon={icon} disabled={buttonDisabled} onClick={onClick} />
-  </div>
-)
+}) => {
+  const user = useSelector(selectUser)
+  const mayViewApps = useSelector(state =>
+    user ? checkFromState(mayViewApplications, state) : false,
+  )
+  const mayViewGtws = useSelector(state => (user ? checkFromState(mayViewGateways, state) : false))
+  const mayViewOrgs = useSelector(state =>
+    user ? checkFromState(mayViewOrganizationsOfUser, state) : false,
+  )
+
+  const plusDropdownItems = (
+    <>
+      {mayViewApps && (
+        <Dropdown.Item
+          title={sharedMessages.addApplication}
+          icon={IconApplication}
+          path="/applications/add"
+        />
+      )}
+      {mayViewGtws && (
+        <Dropdown.Item title={sharedMessages.addGateway} icon={IconGateway} path="/gateways/add" />
+      )}
+      {mayViewOrgs && (
+        <Dropdown.Item
+          title={sharedMessages.addOrganization}
+          icon={IconOrganization}
+          path="/organizations/add"
+        />
+      )}
+
+      <Dropdown.Item
+        title="Register end device in application"
+        icon={IconDevice}
+        path="/devices/add"
+      />
+    </>
+  )
+
+  return (
+    <div
+      className={classnames(
+        className,
+        'd-flex',
+        'j-between',
+        'al-center',
+        'c-text-neutral-light',
+        'ml-cs-xs',
+        'fs-s',
+      )}
+      data-test-id={dataTestId}
+    >
+      <Message content={label} />
+      <Button
+        naked
+        small
+        icon={icon}
+        disabled={buttonDisabled}
+        onClick={onClick}
+        dropdownItems={plusDropdownItems}
+        dropdownPosition="below right"
+        noDropdownIcon
+      />
+    </div>
+  )
+}
 
 SectionLabel.propTypes = {
   buttonDisabled: PropTypes.bool,

pkg/webui/components/spinner/index.js

@@ -31,6 +31,7 @@ const Spinner = ({
   micro = false,
   small,
   inline = false,
+  right = false,
 }) => {
   const [visible, setVisible] = useState(false)
   const visibilityTimeout = setTimeout(() => setVisible(true), after)
@@ -52,6 +53,7 @@ const Spinner = ({
       faded,
       visible,
       inline,
+      right,
     }),
   )
 
@@ -82,6 +84,7 @@ Spinner.propTypes = {
   faded: PropTypes.bool,
   inline: PropTypes.bool,
   micro: PropTypes.bool,
+  right: PropTypes.bool,
   small: PropTypes.bool,
 }
 
@@ -94,6 +97,7 @@ Spinner.defaultProps = {
   inline: false,
   micro: false,
   small: false,
+  right: false,
 }
 
 export default Spinner

pkg/webui/components/spinner/spinner.styl

@@ -33,6 +33,10 @@ $xs = $cs.m
     justify-content: flex-start
     align-items: center
 
+  &.right
+    &:not(.inline)
+      text-align: right
+
 .spinner
   width: $l
   height: $l

pkg/webui/components/table/row/index.js

@@ -96,7 +96,7 @@ Row.propTypes = {
   /** A flag indicating whether the row is wrapping the head of a table. */
   head: PropTypes.bool,
   /** The identifier of the row. */
-  id: PropTypes.number,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** The href to be passed as `to` prop to the `<Link />` component that wraps the row. */
   linkTo: PropTypes.string,
   /**

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

@@ -34,9 +34,16 @@ const m = defineMessages({
 })
 
 const Bookmark = ({ bookmark }) => {
-  const { title, path, icon } = useBookmark(bookmark)
+  const { title, ids, path, icon } = useBookmark(bookmark)
 
-  return <Dropdown.Item title={title} path={path} icon={icon} messageClassName={style.bookmark} />
+  return (
+    <Dropdown.Item
+      title={title === '' ? ids.id : title}
+      path={path}
+      icon={icon}
+      messageClassName={style.bookmark}
+    />
+  )
 }
 
 Bookmark.propTypes = {
@@ -61,9 +68,11 @@ const BookmarksDropdown = () => {
     </div>
   ) : (
     <>
-      {dropdownItems.slice(0, 15).map(bookmark => (
-        <Bookmark key={bookmark.created_at} bookmark={bookmark} />
-      ))}
+      <div className={style.bookmarkContainer}>
+        {dropdownItems.slice(0, 15).map((bookmark, index) => (
+          <Bookmark key={index} bookmark={bookmark} />
+        ))}
+      </div>
       {dropdownItems.length > 15 && (
         <div className="p-cs-l c-text-neutral-light fs-s text-center c-bg-brand-extralight br-l">
           <Message content={m.threshold} />

pkg/webui/console/containers/header/header.styl

@@ -63,3 +63,7 @@
 .bookmark
   overflow: hidden
   text-overflow: ellipsis
+
+  &-container
+    padding: $cs.xs
+    border-bottom: 1px solid var(--c-border-neutral-light)

pkg/webui/console/containers/header/index.js

@@ -14,7 +14,6 @@
 
 import React, { useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { defineMessages } from 'react-intl'
 
 import {
   IconLogout,
@@ -52,12 +51,6 @@ import Logo from '../logo'
 import NotificationsDropdown from './notifications-dropdown'
 import BookmarksDropdown from './bookmarks-dropdown'
 
-const m = defineMessages({
-  addApplication: 'Add new application',
-  addGateway: 'Add new gateway',
-  addOrganization: 'Add new organization',
-})
-
 const accountUrl = selectAccountUrl()
 
 const Header = ({ onMenuClick }) => {
@@ -78,14 +71,18 @@ const Header = ({ onMenuClick }) => {
   const plusDropdownItems = (
     <>
       {mayViewApps && (
-        <Dropdown.Item title={m.addApplication} icon={IconApplication} path="/applications/add" />
+        <Dropdown.Item
+          title={sharedMessages.addApplication}
+          icon={IconApplication}
+          path="/applications/add"
+        />
       )}
       {mayViewGtws && (
-        <Dropdown.Item title={m.addGateway} icon={IconGateway} path="/gateways/add" />
+        <Dropdown.Item title={sharedMessages.addGateway} icon={IconGateway} path="/gateways/add" />
       )}
       {mayViewOrgs && (
         <Dropdown.Item
-          title={m.addOrganization}
+          title={sharedMessages.addOrganization}
           icon={IconOrganization}
           path="/organizations/add"
         />

pkg/webui/console/containers/shortcut-panel/index.js

@@ -32,7 +32,7 @@ const m = defineMessages({
   shortcuts: 'Quick actions',
   addApplication: 'New Application',
   addGateway: 'New Gateway',
-  addOrganization: 'New Organization',
+  addNewOrganization: 'New Organization',
   addPersonalApiKey: 'New personal API key',
   registerDevice: 'Register a device',
 })
@@ -54,7 +54,7 @@ const ShortcutPanel = () => (
       />
       <ShortcutItem
         icon={IconUsersGroup}
-        title={m.addOrganization}
+        title={m.addNewOrganization}
         link="/organizations/add"
         className="item-4"
       />

pkg/webui/console/containers/sidebar/navigation/app-list-side-navigation.js

@@ -13,17 +13,19 @@
 // limitations under the License.
 
 import React, { useContext } from 'react'
+import { useSelector } from 'react-redux'
 
-import { IconPlus } from '@ttn-lw/components/icon'
-import SectionLabel from '@ttn-lw/components/sidebar/section-label'
-import SideNavigation from '@ttn-lw/components/sidebar/side-menu'
-
-import sharedMessages from '@ttn-lw/lib/shared-messages'
+import { selectApplicationBookmarks } from '@console/store/selectors/user-preferences'
+import { selectUserId } from '@console/store/selectors/logout'
 
 import SidebarContext from '../context'
 
+import TopEntitiesSection from './top-entities-section'
+
 const AppListSideNavigation = () => {
-  const { topEntities, isMinimized } = useContext(SidebarContext)
+  const topEntities = useSelector(state => selectApplicationBookmarks(state))
+  const { isMinimized } = useContext(SidebarContext)
+  const userId = useSelector(selectUserId)
 
   if (isMinimized || topEntities.length === 0) {
     // Rendering an empty div to prevent the shadow of the search bar
@@ -32,16 +34,7 @@ const AppListSideNavigation = () => {
     return <div />
   }
 
-  return (
-    <div>
-      <SectionLabel label={sharedMessages.topApplications} icon={IconPlus} onClick={() => null} />
-      <SideNavigation>
-        {topEntities.map(({ path, entity, title }) => (
-          <SideNavigation.Item title={title} path={path} icon={entity} key={path} />
-        ))}
-      </SideNavigation>
-    </div>
-  )
+  return <TopEntitiesSection topEntities={topEntities} userId={userId} />
 }
 
 export default AppListSideNavigation

pkg/webui/console/containers/sidebar/navigation/general-side-navigation.js

@@ -22,11 +22,9 @@ import {
   IconLayoutDashboard,
   IconUserShield,
   IconKey,
-  IconPlus,
   IconInbox,
 } from '@ttn-lw/components/icon'
 import SideNavigation from '@ttn-lw/components/sidebar/side-menu'
-import SectionLabel from '@ttn-lw/components/sidebar/section-label'
 
 import sharedMessages from '@ttn-lw/lib/shared-messages'
 
@@ -38,12 +36,15 @@ import {
 import getCookie from '@console/lib/table-utils'
 
 import { selectUser, selectUserIsAdmin } from '@console/store/selectors/logout'
+import { selectBookmarksList } from '@console/store/selectors/user-preferences'
 
 import SidebarContext from '../context'
 
-const GeneralSideNavigation = () => {
-  const { topEntities, isMinimized } = useContext(SidebarContext)
+import TopEntitiesSection from './top-entities-section'
 
+const GeneralSideNavigation = () => {
+  const { isMinimized } = useContext(SidebarContext)
+  const topEntities = useSelector(state => selectBookmarksList(state))
   const isUserAdmin = useSelector(selectUserIsAdmin)
   const user = useSelector(selectUser)
   const mayViewOrgs = useSelector(state =>
@@ -94,13 +95,8 @@ const GeneralSideNavigation = () => {
           />
         )}
       </SideNavigation>
-      {!isMinimized && (
-        <SideNavigation className="mt-cs-xs">
-          <SectionLabel label={sharedMessages.topEntities} icon={IconPlus} onClick={() => null} />
-          {topEntities.map(({ path, title, entity }) => (
-            <SideNavigation.Item key={path} title={title} path={path} icon={entity} />
-          ))}
-        </SideNavigation>
+      {!isMinimized && topEntities.length > 0 && (
+        <TopEntitiesSection topEntities={topEntities} userId={user.ids.user_id} />
       )}
     </>
   )