TheThingsNetwork · ryaplots · Feb 7, 2024 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
@@ -0,0 +1,78 @@
+// 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.
+
+import { generateCollaborator } from '../../../support/utils'
+
+describe('Notifications', () => {
+  const collabUserId = 'test-collab-user'
+  const collabUser = {
+    ids: { user_id: collabUserId },
+    primary_email_address: '[email protected]',
+    password: 'ABCDefg123!',
+    password_confirm: 'ABCDefg123!',
+  }
+  const application = { ids: { application_id: 'test-application' } }
+  const userCollaborator = generateCollaborator('applications', 'user')
+  const apiKeyName = 'api-test-key'
+  const apiKey = {
+    name: apiKeyName,
+    rights: ['RIGHT_APPLICATION_ALL'],
+  }
+
+  before(() => {
+    cy.dropAndSeedDatabase()
+    cy.createUser(collabUser)
+    cy.createApplication(application, 'admin')
+    cy.createCollaborator('applications', application.ids.application_id, userCollaborator)
+    cy.createApiKey('applications', application.ids.application_id, apiKey, key => {
+      Cypress.config('apiKeyId', key.id)
+    })
+  })
+
+  beforeEach(() => {
+    cy.loginConsole({ user_id: 'admin', password: 'admin' })
+    cy.visit(`${Cypress.config('consoleRootPath')}/notifications`)
+  })
+
+  it('succeeds showing a list of notifications', () => {
+    cy.findByText('Notifications').should('be.visible')
+    cy.get(`[data-test-id="notification-list-item"]`).should('be.visible')
+  })
+
+  it('succeeds opening a notification', () => {
+    cy.findByText(/A collaborator of your application has been added or updated/).click()
+    cy.findByRole('button', { name: /Archive/ }).should('be.visible')
+  })
+
+  it('succeeds archiving and unarchiving a notification', () => {
+    cy.findByText(/A collaborator of your application has been added or updated/).click()
+    cy.findByRole('button', { name: /Archive/ }).click()
+    cy.findByText(/See archived messages/).click()
+    cy.findByText(/A collaborator of your application has been added or updated/).should(
+      'be.visible',
+    )
+    cy.findByText(/A collaborator of your application has been added or updated/).click()
+    cy.findByRole('button', { name: /Unarchive/ }).click()
+    cy.findByText(/See all messages/).click()
+    cy.findByText(/A collaborator of your application has been added or updated/).should(
+      'be.visible',
+    )
+  })
+
+  it('succeeds marking all notifications as read', () => {
+    cy.findByTestId('total-unseen-notifications').should('be.visible')
+    cy.findByRole('button', { name: /Mark all as read/ }).click()
+    cy.findByTestId('total-unseen-notifications').should('not.exist')
+  })
+})
diff --git a/package.json b/package.json
@@ -127,6 +127,7 @@
     "react-toastify": "^9.1.3",
     "react-virtualized-auto-sizer": "^1.0.21",
     "react-window": "^1.8.10",
+    "react-window-infinite-loader": "^1.0.9",
     "redux": "^4.2.1",
     "redux-actions": "^2.6.5",
     "redux-logic": "^5.0.1",

@@ -92,7 +92,10 @@ const CollaboratorsTable = props => {
             return (
               <span>
                 {collaboratorId}{' '}
-                <Message className="c-text-neutral-light" content={sharedMessages.currentUserIndicator} />
+                <Message
+                  className="c-text-neutral-light"
+                  content={sharedMessages.currentUserIndicator}
+                />
               </span>
             )
           }

@@ -41,6 +41,17 @@
     &:only-child
       margin-right: - $cs.xxs
 
+  &.with-alert:after
+    content: ''
+    position: absolute
+    top: 4px
+    left: 17px
+    border: 3px solid var(--c-border-neutral-min)
+    border-radius: 100%
+    size: 13px
+    box-sizing: border-box
+    background-color: var(--c-bg-brand-normal)
+
   .expand-icon
     color: var(--c-icon-neutral-light)
     font-size: 1.285rem

@@ -19,13 +19,15 @@ import { useIntl } from 'react-intl'
 import Link from '@ttn-lw/components/link'
 import Spinner from '@ttn-lw/components/spinner'
 import Icon from '@ttn-lw/components/icon'
-import Dropdown from '@ttn-lw/components/dropdown'
+import Status from '@ttn-lw/components/status'
 
 import Message from '@ttn-lw/lib/components/message'
 
 import combineRefs from '@ttn-lw/lib/combine-refs'
 import PropTypes from '@ttn-lw/lib/prop-types'
 
+import Dropdown from '../dropdown'
+
 import style from './button.styl'
 
 const filterDataProps = props =>
@@ -50,6 +52,7 @@ const assembleClassnames = ({
   dropdownItems,
   className,
   error,
+  withAlert,
 }) =>
   classnames(style.button, {
     [className]: !Boolean(dropdownItems), // If there are dropdown items, the button is wrapped in a div with the className.
@@ -65,6 +68,7 @@ const assembleClassnames = ({
     [style.onlyIcon]: icon !== undefined && !message,
     [style.withDropdown]: Boolean(dropdownItems),
     [style.error]: error && !busy,
+    [style.withAlert]: withAlert,
   })
 
 const buttonChildren = props => {
@@ -171,16 +175,28 @@ Button.defaultProps = {
 }
 
 const LinkButton = props => {
-  const { disabled, titleMessage } = props
+  const { disabled, titleMessage, onClick, value } = props
   const buttonClassNames = assembleClassnames(props)
   const { to } = props
+
+  const handleClick = useCallback(
+    evt => {
+      // Passing a value to the onClick handler is useful for components that
+      // are rendered multiple times, e.g. in a list. The value can be used to
+      // identify the component that was clicked.
+      onClick(evt, value)
+    },
+    [onClick, value],
+  )
+
   return (
     <Link
       className={buttonClassNames}
       to={to}
       disabled={disabled}
       title={titleMessage}
       children={buttonChildren(props)}
+      onClick={handleClick}
     />
   )
 }
@@ -291,10 +307,15 @@ Button.defaultProps = {
 }
 
 LinkButton.propTypes = {
+  onClick: PropTypes.func,
   ...commonPropTypes,
   ...Link.propTypes,
 }
 
+LinkButton.defaultProps = {
+  onClick: () => null,
+}
+
 Button.Link = LinkButton
 Button.Link.displayName = 'Button.Link'
 

@@ -188,18 +188,23 @@ DropdownItem.defaultProps = {
   submenuItems: undefined,
 }
 
-const DropdownHeaderItem = ({ title }) => (
-  <li className={style.dropdownHeaderItem}>
+const DropdownHeaderItem = ({ title, className }) => (
+  <li className={classnames(style.dropdownHeaderItem, className)}>
     <span>
       <Message content={title} />
     </span>
   </li>
 )
 
 DropdownHeaderItem.propTypes = {
+  className: PropTypes.string,
   title: PropTypes.message.isRequired,
 }
 
+DropdownHeaderItem.defaultProps = {
+  className: undefined,
+}
+
 Dropdown.Item = DropdownItem
 Dropdown.HeaderItem = DropdownHeaderItem
 Dropdown.Attached = AttachedDropdown

@@ -25,6 +25,11 @@
   +media-query($bp.xs)
     padding: 0 $cs.xs
 
+  .notifications-dropdown
+    max-width: 31rem
+    width: 31rem // Avoids flash of small container when dropdown is opened
+    padding: 0
+
 .logo
   height: $cs.l
   +media-query($bp.xs)

@@ -29,8 +29,10 @@ const Header = ({
   addDropdownItems,
   starDropdownItems,
   profileDropdownItems,
+  notificationsDropdownItems,
   user,
   onMenuClick,
+  showNotificationDot,
   ...rest
 }) => (
   <header {...rest} className={classnames(className, style.container)}>
@@ -49,7 +51,14 @@ const Header = ({
         dropdownPosition="below left"
         className="xs:d-none"
       />
-      <Button secondary icon="inbox" dropdownItems={<></>} dropdownPosition="below left" />
+      <Button
+        secondary
+        icon="inbox"
+        dropdownItems={notificationsDropdownItems}
+        dropdownClassName={style.notificationsDropdown}
+        dropdownPosition="below left"
+        withAlert={showNotificationDot}
+      />
       <ProfileDropdown
         brandLogo={brandLogo}
         data-test-id="profile-dropdown"
@@ -73,10 +82,14 @@ Header.propTypes = {
   brandLogo: imgPropType,
   /** The classname applied to the component. */
   className: PropTypes.string,
+  /** The dropdown items when the notifications button is clicked. */
+  notificationsDropdownItems: PropTypes.node.isRequired,
   /** A handler for when the menu button is clicked. */
   onMenuClick: PropTypes.func.isRequired,
   /** The dropdown items when the profile button is clicked. */
   profileDropdownItems: PropTypes.node.isRequired,
+  /** Whether to show a notification dot. */
+  showNotificationDot: PropTypes.bool,
   /** The dropdown items when the star button is clicked. */
   starDropdownItems: PropTypes.node.isRequired,
   /**
@@ -90,6 +103,7 @@ Header.defaultProps = {
   className: undefined,
   user: undefined,
   brandLogo: undefined,
+  showNotificationDot: false,
 }
 
 export default Header
@@ -72,7 +72,7 @@ $xs = $cs.m
 .center
   &:not(.inline)
     position: absolute
-    top: ($l * -1) // To achieve visual centering.
+    top: 0
     left: 0
     right: 0
     bottom: 0
@@ -83,11 +83,11 @@ $xs = $cs.m
 
   &.small
     height: $s
-    top: ($s * -1) // To achieve visual centering.
+    top: 0
 
   &.micro
     height: $xs
-    top: ($xs * -1) // To achieve visual centering.
+    top: 0
 
 .small .spinner
   width: $s

@@ -197,7 +197,11 @@ const ApplicationGeneralSettingsForm = ({
       isResctrictedUser={isResctrictedUser}
       userId={userId}
     />
-    <Message content={m.techContactDescription} component="p" className="mt-cs-xs c-text-neutral-light" />
+    <Message
+      content={m.techContactDescription}
+      component="p"
+      className="mt-cs-xs c-text-neutral-light"
+    />
     <SubmitBar>
       <Form.Submit component={SubmitButton} message={sharedMessages.saveChanges} />
       <Require featureCheck={mayDeleteApplication}>

@@ -0,0 +1,33 @@
+// 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.
+
+import ApiKeyCreated from './templates/api-key-created'
+import ApiKeyChanged from './templates/api-key-changed'
+import ClientRequested from './templates/client-requested'
+import CollaboratorChanged from './templates/collaborator-changed'
+import EntityStateChanged from './templates/entity-state-changed'
+import PasswordChanged from './templates/password-changed'
+import UserRequested from './templates/user-requested'
+
+const notificationMap = {
+  api_key_created: ApiKeyCreated,
+  api_key_changed: ApiKeyChanged,
+  client_requested: ClientRequested,
+  collaborator_changed: CollaboratorChanged,
+  entity_state_changed: EntityStateChanged,
+  password_changed: PasswordChanged,
+  user_requested: UserRequested,
+}
+
+export default notificationMap