WV-2912 notification count

e2e/features/notifications/notify-test.spec.js

@@ -20,7 +20,7 @@ test.beforeAll(async ({ browser }) => {
   selectors = createSelectors(page)
   infoButtonIcon = page.locator('#wv-info-button svg.svg-inline--fa')
   infoMenu = page.locator('#toolbar_info')
-  notificationsListItem = page.locator('#notifications_info_item .fa-circle-exclamation')
+  notificationsListItem = page.locator('#notifications_info_item')
   tooltipSelector = page.locator('.tooltip-inner div')
 })
 
@@ -39,30 +39,21 @@ test('No visible notifications with mockAlert parameter set to no_types', async
   await expect(boltListItem).not.toBeVisible()
 })
 
-test('Outage takes precedence when all three notifications are present', async () => {
+test('Verify that layer notices don\'t show up in the notification list or contribute to the count', async () => {
   const { modalCloseButton } = selectors
   const url = `${layerNoticesQuery}&mockAlerts=all_types`
-  const statusOutage = await page.locator('#wv-info-button.wv-status-outage')
   await page.goto(url)
   await modalCloseButton.click()
-  await expect(statusOutage).toBeVisible()
   await infoButtonIcon.click()
-  await expect(infoMenu).toContainText('Notifications')
-  await expect(notificationsListItem).toBeVisible()
-})
-
-test('Verify that layer notices don\'t show up in the notification list or contribute to the count', async () => {
   const badge = await page.locator('span.badge')
   await expect(badge).toBeVisible()
   await expect(badge).toContainText('2')
 })
 
-test('Alert, outage, and message content is highlighted and found in modal', async () => {
-  const outageContentHighlighted = await page.locator('#notification_list_modal .outage-notification-item span')
+test('Alert and message content is highlighted and found in modal', async () => {
   const alertContentHighlighted = await page.locator('#notification_list_modal .alert-notification-item p')
   const messageContentHighlighted = await page.locator('#notification_list_modal .message-notification-item p')
   await notificationsListItem.click()
-  await expect(outageContentHighlighted).toContainText('Posted 20 May 2018')
   await expect(alertContentHighlighted).toContainText('learn how to visualize global satellite imagery')
   await expect(messageContentHighlighted).toContainText('This is a message test')
 })

package.json

@@ -77,12 +77,12 @@
     "upload": "node tasks/util/upload.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-transform-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@webpack-cli/serve": "^2.0.5",
     "ajv": "^8.12.0",
@@ -95,14 +95,14 @@
     "css-minimizer-webpack-plugin": "^5.0.1",
     "css-url-relative-plugin": "^1.1.0",
     "cssnano": "^6.0.1",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-standard": "^17.1.0",
     "eslint-import-resolver-webpack": "^0.13.7",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^27.4.2",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-n": "^16.1.0",
+    "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-no-storage": "^1.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
@@ -126,7 +126,7 @@
     "react-test-renderer": "^18.0.0",
     "redux-mock-store": "^1.5.4",
     "run-script-os": "^1.1.6",
-    "sass": "^1.69.0",
+    "sass": "^1.69.3",
     "sass-loader": "^13.3.2",
     "shelljs": "^0.8.5",
     "showdown": "^2.1.0",
@@ -189,7 +189,7 @@
     "react-draggable": "^4.4.6",
     "react-image-crop": "^10.1.8",
     "react-infinite-scroller": "^1.2.6",
-    "react-joyride": "^2.5.4",
+    "react-joyride": "^2.6.1",
     "react-mobile-datepicker": "^4.0.2",
     "react-redux": "^8.1.3",
     "react-resizable": "^3.0.5",

web/js/app.js

@@ -36,6 +36,7 @@ import Debug from './components/util/debug';
 import keyPress from './modules/key-press/actions';
 import setScreenInfo from './modules/screen-size/actions';
 // Notifications
+import { addToLocalStorage } from './modules/notifications/util';
 import Notifications from './containers/notifications';
 import { outageNotificationsSeenAction } from './modules/notifications/actions';
 // Dependency CSS
@@ -67,10 +68,12 @@ class App extends React.Component {
 
   componentDidUpdate(prevProps) {
     // Check if the numberUnseen prop has changed
-    const { kioskModeEnabled, numberOutagesUnseen, object } = this.props;
+    const {
+      kioskModeEnabled, notifications, numberOutagesUnseen,
+    } = this.props;
     if (numberOutagesUnseen !== prevProps.numberOutagesUnseen) {
       if (numberOutagesUnseen > 0 && !kioskModeEnabled) {
-        this.openNotification(object.outages, numberOutagesUnseen);
+        this.openNotification(notifications, numberOutagesUnseen);
       }
     }
   }
@@ -198,6 +201,7 @@ function mapStateToProps(state) {
     isEmbedModeActive: state.embed.isEmbedModeActive,
     isMobile: state.screenSize.isMobileDevice,
     isTourActive: state.tour.active,
+    notifications,
     numberOutagesUnseen,
     numberUnseen,
     object,
@@ -217,6 +221,14 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setScreenInfo());
   },
   notificationClick: (obj, numberOutagesUnseen) => {
+    // Used to update local storage to reflect OUTAGES have been seen
+    const notificationsSeenObj = {
+      alerts: [],
+      layerNotices: [],
+      messages: [],
+      outages: obj.object.outages,
+    };
+
     dispatch(
       openCustomContent('NOTIFICATION_LIST_MODAL', {
         headerText: 'Notifications',
@@ -225,6 +237,7 @@ const mapDispatchToProps = (dispatch) => ({
         onClose: () => {
           if (numberOutagesUnseen > 0) {
             dispatch(outageNotificationsSeenAction());
+            addToLocalStorage(notificationsSeenObj);
           }
         },
       }),
@@ -247,6 +260,7 @@ App.propTypes = {
   locationKey: PropTypes.string,
   modalId: PropTypes.string,
   notificationClick: PropTypes.func,
+  notifications: PropTypes.object,
   numberOutagesUnseen: PropTypes.number,
   parameters: PropTypes.object,
   setScreenInfoAction: PropTypes.func,

web/js/containers/info.js

@@ -50,7 +50,7 @@ function InfoList (props) {
           ? 'exclamation-circle'
           : ['fas', 'bolt'],
       id: 'notifications_info_item',
-      badge: numberUnseen,
+      badge: type ? numberUnseen : 0,
       className: type ? `${type}-notification` : '',
       onClick: () => {
         notificationClick(object, numberUnseen);

web/js/containers/toolbar.js

@@ -102,7 +102,9 @@ class toolbarContainer extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { isAboutOpen, openAboutModal, modalIsOpen } = this.props;
+    const {
+      isAboutOpen, openAboutModal, modalIsOpen,
+    } = this.props;
     if (modalIsOpen !== prevProps.modalIsOpen) {
       if (isAboutOpen) {
         openAboutModal();
@@ -348,6 +350,7 @@ class toolbarContainer extends Component {
       isDistractionFreeModeActive,
       isMobile,
     } = this.props;
+
     const notificationClass = notificationType
       ? ` wv-status-${notificationType}`
       : ' wv-status-hide';
@@ -439,7 +442,7 @@ const mapStateToProps = (state) => {
     ui,
   } = state;
   const { isDistractionFreeModeActive, isKioskModeActive } = ui;
-  const { number, type } = notifications;
+  const { numberUnseen, type } = notifications;
   const { activeString } = compare;
   const activeLayersForProj = getAllActiveLayers(state);
   const isMobile = screenSize.isMobileDevice;
@@ -479,7 +482,7 @@ const mapStateToProps = (state) => {
     ),
     modalIsOpen,
     notificationType: type,
-    notificationContentNumber: number,
+    notificationContentNumber: numberUnseen,
     proj,
     rotation: map.rotation,
     shouldBeCollapsed,

web/js/modules/notifications/reducers.js

@@ -32,7 +32,7 @@ export function notificationsReducer(state = notificationReducerState, action) {
         return {
           ...state,
           number: getCount(notificationsByType),
-          numberUnseen: getCount(notificationsByType, true),
+          numberUnseen: getCount(notificationsByType),
           numberOutagesUnseen,
           type: getPriority(notificationsByType),
           isActive: true,
@@ -48,11 +48,25 @@ export function notificationsReducer(state = notificationReducerState, action) {
         type: '',
         isActive: true,
       };
-    case OUTAGE_NOTIFICATIONS_SEEN:
+    case OUTAGE_NOTIFICATIONS_SEEN: {
+      const notificationObj = {
+        alerts: state.object.alerts,
+        messages: state.object.messages,
+        layerNotices: state.object.layerNotices,
+        outages: [],
+      };
       return {
         ...state,
+        numberUnseen: state.number - state.numberOutagesUnseen >= 0
+          ? state.number - state.numberOutagesUnseen
+          : 0,
+        number: state.number - state.numberOutagesUnseen >= 0
+          ? state.number - state.numberOutagesUnseen
+          : 0,
         numberOutagesUnseen: 0,
+        type: getPriority(notificationObj),
       };
+    }
     default:
       return state;
   }

web/js/modules/notifications/reducers.test.js

@@ -54,7 +54,7 @@ describe('notificationsReducer', () => {
       ).toEqual({
         number: 1,
         numberOutagesUnseen: 1,
-        numberUnseen: 0,
+        numberUnseen: 1,
         type: 'outage',
         isActive: true,
         object: constants.MOCK_SORTED_NOTIFICATIONS,

web/js/modules/notifications/util.js

@@ -153,13 +153,6 @@ export function getCount(notifications, unseenOnly) {
     messages, outages, alerts,
   } = notifications;
 
-  if (unseenOnly) {
-    const messageCount = getNumberOfTypeNotSeen(NOTIFICATION_MSG, notifications.layerNotices.filter((obj) => obj.notification_type === 'message'));
-    const alertCount = getNumberOfTypeNotSeen(NOTIFICATION_ALERT, notifications.layerNotices.filter((obj) => obj.notification_type === 'alert'));
-    const outageCount = getNumberOfTypeNotSeen(NOTIFICATION_OUTAGE, notifications.layerNotices.filter((obj) => obj.notification_type === 'outage'));
-
-    return messageCount + outageCount + alertCount;
-  }
   return messages.length + alerts.length + outages.length;
 }