Revert "WV-2912 notification count (#4733)"

This reverts commit bd95b01.

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')
+  notificationsListItem = page.locator('#notifications_info_item .fa-circle-exclamation')
   tooltipSelector = page.locator('.tooltip-inner div')
 })
 
@@ -39,21 +39,30 @@ test('No visible notifications with mockAlert parameter set to no_types', async
   await expect(boltListItem).not.toBeVisible()
 })
 
-test('Verify that layer notices don\'t show up in the notification list or contribute to the count', async () => {
+test('Outage takes precedence when all three notifications are present', 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 and message content is highlighted and found in modal', async () => {
+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')
   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.2",
+    "@babel/core": "^7.23.0",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-transform-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.38.1",
     "@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.51.0",
+    "eslint": "^8.50.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.2.0",
+    "eslint-plugin-n": "^16.1.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.3",
+    "sass": "^1.69.0",
     "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.6.1",
+    "react-joyride": "^2.5.4",
     "react-mobile-datepicker": "^4.0.2",
     "react-redux": "^8.1.3",
     "react-resizable": "^3.0.5",

web/js/app.js

@@ -36,7 +36,6 @@ 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
@@ -68,12 +67,10 @@ class App extends React.Component {
 
   componentDidUpdate(prevProps) {
     // Check if the numberUnseen prop has changed
-    const {
-      kioskModeEnabled, notifications, numberOutagesUnseen,
-    } = this.props;
+    const { kioskModeEnabled, numberOutagesUnseen, object } = this.props;
     if (numberOutagesUnseen !== prevProps.numberOutagesUnseen) {
       if (numberOutagesUnseen > 0 && !kioskModeEnabled) {
-        this.openNotification(notifications, numberOutagesUnseen);
+        this.openNotification(object.outages, numberOutagesUnseen);
       }
     }
   }
@@ -201,7 +198,6 @@ function mapStateToProps(state) {
     isEmbedModeActive: state.embed.isEmbedModeActive,
     isMobile: state.screenSize.isMobileDevice,
     isTourActive: state.tour.active,
-    notifications,
     numberOutagesUnseen,
     numberUnseen,
     object,
@@ -221,14 +217,6 @@ 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',
@@ -237,7 +225,6 @@ const mapDispatchToProps = (dispatch) => ({
         onClose: () => {
           if (numberOutagesUnseen > 0) {
             dispatch(outageNotificationsSeenAction());
-            addToLocalStorage(notificationsSeenObj);
           }
         },
       }),
@@ -260,7 +247,6 @@ 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: type ? numberUnseen : 0,
+      badge: numberUnseen,
       className: type ? `${type}-notification` : '',
       onClick: () => {
         notificationClick(object, numberUnseen);

web/js/containers/toolbar.js

@@ -102,9 +102,7 @@ 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();
@@ -350,7 +348,6 @@ class toolbarContainer extends Component {
       isDistractionFreeModeActive,
       isMobile,
     } = this.props;
-
     const notificationClass = notificationType
       ? ` wv-status-${notificationType}`
       : ' wv-status-hide';
@@ -442,7 +439,7 @@ const mapStateToProps = (state) => {
     ui,
   } = state;
   const { isDistractionFreeModeActive, isKioskModeActive } = ui;
-  const { numberUnseen, type } = notifications;
+  const { number, type } = notifications;
   const { activeString } = compare;
   const activeLayersForProj = getAllActiveLayers(state);
   const isMobile = screenSize.isMobileDevice;
@@ -482,7 +479,7 @@ const mapStateToProps = (state) => {
     ),
     modalIsOpen,
     notificationType: type,
-    notificationContentNumber: numberUnseen,
+    notificationContentNumber: number,
     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),
+          numberUnseen: getCount(notificationsByType, true),
           numberOutagesUnseen,
           type: getPriority(notificationsByType),
           isActive: true,
@@ -48,25 +48,11 @@ export function notificationsReducer(state = notificationReducerState, action) {
         type: '',
         isActive: true,
       };
-    case OUTAGE_NOTIFICATIONS_SEEN: {
-      const notificationObj = {
-        alerts: state.object.alerts,
-        messages: state.object.messages,
-        layerNotices: state.object.layerNotices,
-        outages: [],
-      };
+    case OUTAGE_NOTIFICATIONS_SEEN:
       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: 1,
+        numberUnseen: 0,
         type: 'outage',
         isActive: true,
         object: constants.MOCK_SORTED_NOTIFICATIONS,

web/js/modules/notifications/util.js

@@ -153,6 +153,13 @@ 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;
 }