feat: Add notification.updated event (#8871)

app/javascript/dashboard/helper/actionCable.js

@@ -24,6 +24,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.mentioned': this.onConversationMentioned,
       'notification.created': this.onNotificationCreated,
       'notification.deleted': this.onNotificationDeleted,
+      'notification.updated': this.onNotificationUpdated,
       'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
@@ -200,6 +201,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/deleteNotification', data);
   };
 
+  onNotificationUpdated = data => {
+    this.app.$store.dispatch('notifications/updateNotification', data);
+  };
+
   // eslint-disable-next-line class-methods-use-this
   onFirstReplyCreated = () => {
     bus.$emit('fetch_overview_reports');

app/javascript/dashboard/store/modules/notifications/actions.js

@@ -54,7 +54,7 @@ export const actions = {
     try {
       await NotificationsAPI.read(primaryActorType, primaryActorId);
       commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, unreadCount - 1);
-      commit(types.UPDATE_NOTIFICATION, { id, read_at: new Date() });
+      commit(types.READ_NOTIFICATION, { id, read_at: new Date() });
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
@@ -64,7 +64,7 @@ export const actions = {
     commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
     try {
       await NotificationsAPI.unRead(id);
-      commit(types.UPDATE_NOTIFICATION, { id, read_at: null });
+      commit(types.READ_NOTIFICATION, { id, read_at: null });
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
@@ -127,6 +127,7 @@ export const actions = {
         id,
         snoozedUntil,
       });
+
       const {
         data: { snoozed_until = null },
       } = response;
@@ -140,6 +141,10 @@ export const actions = {
     }
   },
 
+  updateNotification: async ({ commit }, data) => {
+    commit(types.UPDATE_NOTIFICATION, data);
+  },
+
   addNotification({ commit }, data) {
     commit(types.ADD_NOTIFICATION, data);
   },

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -34,7 +34,7 @@ export const mutations = {
       });
     });
   },
-  [types.UPDATE_NOTIFICATION]: ($state, { id, read_at }) => {
+  [types.READ_NOTIFICATION]: ($state, { id, read_at }) => {
     Vue.set($state.records[id], 'read_at', read_at);
   },
   [types.UPDATE_ALL_NOTIFICATIONS]: $state => {
@@ -52,6 +52,15 @@ export const mutations = {
     Vue.set($state.meta, 'unreadCount', unreadCount);
     Vue.set($state.meta, 'count', count);
   },
+  [types.UPDATE_NOTIFICATION]($state, data) {
+    const { notification, unread_count: unreadCount, count } = data;
+    Vue.set($state.records, notification.id, {
+      ...($state.records[notification.id] || {}),
+      ...notification,
+    });
+    Vue.set($state.meta, 'unreadCount', unreadCount);
+    Vue.set($state.meta, 'count', count);
+  },
   [types.DELETE_NOTIFICATION]($state, data) {
     const { notification, unread_count: unreadCount, count } = data;
     Vue.delete($state.records, notification.id);

app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import { actions } from '../../notifications/actions';
 import types from '../../../mutation-types';
-
 const commit = jest.fn();
 global.axios = axios;
 jest.mock('axios');
@@ -101,7 +100,7 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
         [types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
-        [types.UPDATE_NOTIFICATION, { id: 1, read_at: expect.any(Date) }],
+        [types.READ_NOTIFICATION, { id: 1, read_at: expect.any(Date) }],
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
       ]);
     });
@@ -125,7 +124,7 @@ describe('#actions', () => {
       await actions.unread({ commit }, { id: 1 });
       expect(commit.mock.calls).toEqual([
         ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: true }],
-        ['UPDATE_NOTIFICATION', { id: 1, read_at: null }],
+        ['READ_NOTIFICATION', { id: 1, read_at: null }],
         ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: false }],
       ]);
     });
@@ -264,17 +263,20 @@ describe('#actions', () => {
 
   describe('snooze', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({});
+      axios.post.mockResolvedValue({
+        data: { snoozed_until: '20 Jan, 5.04pm' },
+      });
       await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
       expect(commit.mock.calls).toEqual([
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
-        [types.SNOOZE_NOTIFICATION, { id: 1, snoozed_until: 1703057715 }],
+        [types.SNOOZE_NOTIFICATION, { id: 1, snoozed_until: '20 Jan, 5.04pm' }],
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
       ]);
     });
     it('sends correct actions if API is error', async () => {
       axios.post.mockRejectedValue({ message: 'Incorrect header' });
       await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
+
       expect(commit.mock.calls).toEqual([
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
         [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],

app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js

@@ -75,7 +75,7 @@ describe('#mutations', () => {
           1: { id: 1, primary_actor_id: 1 },
         },
       };
-      mutations[types.UPDATE_NOTIFICATION](state, {
+      mutations[types.READ_NOTIFICATION](state, {
         id: 1,
         read_at: true,
       });

app/javascript/dashboard/store/mutation-types.js

@@ -132,6 +132,7 @@ export default {
   SET_NOTIFICATIONS_UNREAD_COUNT: 'SET_NOTIFICATIONS_UNREAD_COUNT',
   SET_NOTIFICATIONS_UI_FLAG: 'SET_NOTIFICATIONS_UI_FLAG',
   UPDATE_NOTIFICATION: 'UPDATE_NOTIFICATION',
+  READ_NOTIFICATION: 'READ_NOTIFICATION',
   ADD_NOTIFICATION: 'ADD_NOTIFICATION',
   DELETE_NOTIFICATION: 'DELETE_NOTIFICATION',
   UPDATE_ALL_NOTIFICATIONS: 'UPDATE_ALL_NOTIFICATIONS',