Resolve "Notification Panel Crash with Comment Notifications Lacking User Sender"

changelog/entries/unreleased/bug/2157_notification_panel_crash_with_comment_notifications_lacking_.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Fix bug causing the notification panel to crash with comment notifications lacking user sender",
+    "issue_number": 2157,
+    "bullet_points": [],
+    "created_at": "2023-12-14"
+}

premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentMentionNotification.vue

@@ -7,7 +7,12 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="rowCommentMentionNotification.title" tag="span">
         <template #sender>
-          <strong>{{ notification.sender.first_name }}</strong>
+          <strong v-if="sender">{{ sender }}</strong>
+          <strong v-else
+            ><s>{{
+              $t('rowCommentMentionNotification.deletedUser')
+            }}</s></strong
+          >
         </template>
         <template #row>
           <strong>{{ notification.data.row_id }}</strong>

premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentNotification.vue

@@ -7,7 +7,10 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="rowCommentNotification.title" tag="span">
         <template #sender>
-          <strong>{{ notification.sender.first_name }}</strong>
+          <strong v-if="sender">{{ sender }}</strong>
+          <strong v-else
+            ><s>{{ $t('rowCommentNotification.deletedUser') }}</s></strong
+          >
         </template>
         <template #row>
           <strong>{{ notification.data.row_id }}</strong>

premium/web-frontend/modules/baserow_premium/locales/en.json

@@ -54,10 +54,12 @@
         "delete": "Delete comment"
     },
     "rowCommentMentionNotification": {
-        "title": "{sender} mentioned you in row {row} in {table}"
+        "title": "{sender} mentioned you in row {row} in {table}",
+        "deletedUser": "A deleted user"
     },
     "rowCommentNotification": {
-        "title": "{sender} posted a comment in row {row} in {table}"
+        "title": "{sender} posted a comment in row {row} in {table}",
+        "deletedUser": "A deleted user"
     },
     "trashType": {
         "row_comment": "row comment"

web-frontend/modules/core/components/NotificationPanel.vue

@@ -139,20 +139,23 @@ export default {
     }),
   },
   watch: {
-    loaded(newVal, oldVal) {
+    loaded(isLoaded) {
       // On receiving many notifications, only the unread count is sent via web
-      // sockets. The store's 'loaded' state resets to false due to sync
+      // sockets and the 'loaded' state resets to false in the store. This
-      // discrepancies. If the panel is closed, new notifications load on next
+      // watcher ensure to do the correct action if the panel is open and we
-      // open. If open, to preserve scroll position, a refresh hint displays
+      // receive new notifications.
-      // instead of reloading.
 
-      if (this.open && oldVal && !newVal) {
+      if (isLoaded || !this.open) {
+        return
+      }
+
+      // If we have no notifications, we can safely load the initial set.
+      // Otherwise, we show a hint that new notifications are available.
       if (this.totalCount === 0) {
         this.initialLoad()
       } else {
         this.needRefresh = true
       }
-      }
     },
   },
   methods: {
@@ -167,7 +170,7 @@ export default {
       }
     },
     show(target) {
-      if (!this.loaded) {
+      if (!this.loaded && !this.loading) {
         this.initialLoad()
       }
       this.open = true
@@ -184,10 +187,6 @@ export default {
         }
       })
       this.$once('hidden', removeOnClickOutsideHandler)
-
-      if (!this.loaded) {
-        this.initialLoad()
-      }
       this.$emit('shown')
     },
     hide() {

web-frontend/modules/core/components/notifications/NotificationSenderInitialsIcon.vue

@@ -1,6 +1,6 @@
 <template functional>
   <div class="notification-panel__notification-user-initials">
-    {{ props.notification.sender.first_name | nameAbbreviation }}
+    {{ props.notification.sender?.first_name | nameAbbreviation }}
   </div>
 </template>
 

web-frontend/modules/core/components/notifications/WorkspaceInvitationAcceptedNotification.vue

@@ -7,7 +7,12 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="workspaceInvitationAcceptedNotification.title" tag="span">
         <template #sender>
-          <strong>{{ notification.sender.first_name }}</strong>
+          <strong v-if="sender">{{ sender }}</strong>
+          <strong v-else
+            ><s>{{
+              $t('workspaceInvitationAcceptedNotification.deletedUser')
+            }}</s></strong
+          >
         </template>
         <template #workspaceName>
           <strong>{{ notification.data.invited_to_workspace_name }}</strong>

web-frontend/modules/core/components/notifications/WorkspaceInvitationCreatedNotification.vue

@@ -7,7 +7,12 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="workspaceInvitationCreatedNotification.title" tag="span">
         <template #sender>
-          <strong>{{ notification.sender.first_name }}</strong>
+          <strong v-if="sender">{{ sender }}</strong>
+          <strong v-else
+            ><s>{{
+              $t('workspaceInvitationCreatedNotification.deletedUser')
+            }}</s></strong
+          >
         </template>
         <template #workspaceName>
           <strong>{{ notification.data.invited_to_workspace_name }}</strong>

web-frontend/modules/core/components/notifications/WorkspaceInvitationRejectedNotification.vue

@@ -7,7 +7,12 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="workspaceInvitationRejectedNotification.title" tag="span">
         <template #sender>
-          <strong>{{ notification.sender.first_name }}</strong>
+          <strong v-if="sender">{{ sender }}</strong>
+          <strong v-else
+            ><s>{{
+              $t('workspaceInvitationRejectedNotification.deletedUser')
+            }}</s></strong
+          >
         </template>
         <template #workspaceName>
           <strong>{{ notification.data.invited_to_workspace_name }}</strong>

web-frontend/modules/core/locales/en.json

@@ -555,13 +555,16 @@
         "notFound": "No users found"
     },
     "workspaceInvitationAcceptedNotification": {
-        "title": "{sender} has accepted your invitation to join {workspaceName}"
+        "title": "{sender} has accepted your invitation to join {workspaceName}",
+        "deletedUser": "A deleted user"
     },
     "workspaceInvitationRejectedNotification": {
-        "title": "{sender} has rejected your invitation to join {workspaceName}"
+        "title": "{sender} has rejected your invitation to join {workspaceName}",
+        "deletedUser": "A deleted user"
     },
     "workspaceInvitationCreatedNotification": {
-        "title": "{sender} has invited you to join {workspaceName}"
+        "title": "{sender} has invited you to join {workspaceName}",
+        "deletedUser": "A deleted user"
     },
     "versionUpgradeNotification": {
         "title": "{version} is here! Check out what's new."

web-frontend/modules/core/mixins/notificationContent.js

@@ -1,6 +1,11 @@
 import { notifyIf } from '@baserow/modules/core/utils/error'
 
 export default {
+  computed: {
+    sender() {
+      return this.notification.sender?.first_name
+    },
+  },
   methods: {
     markAsReadAndHandleClick(evt) {
       this.$emit('click')

web-frontend/modules/core/store/notification.js

@@ -171,8 +171,8 @@ export const actions = {
     }
   },
   async fetchAll({ commit, state }, { workspaceId }) {
-    commit('SET_LOADING', true)
     commit('SET_LOADED', false)
+    commit('SET_LOADING', true)
     try {
       const { data } = await notificationService(this.$client).fetchAll(
         workspaceId,

web-frontend/modules/database/components/notifications/CollaboratorAddedToRowNotification.vue

@@ -7,9 +7,12 @@
     <div class="notification-panel__notification-content-title">
       <i18n path="collaboratorAddedToRowNotification.title" tag="span">
         <template #sender>
-          <strong>{{
+          <strong v-if="sender">{{ sender }}</strong>
-            notification.sender?.first_name || $t('anonymous')
+          <strong v-else
-          }}</strong>
+            ><s>{{
+              $t('collaboratorAddedToRowNotification.deletedUser')
+            }}</s></strong
+          >
         </template>
         <template #fieldName>
           <strong>{{ notification.data.field_name }}</strong>

web-frontend/modules/database/locales/en.json

@@ -804,7 +804,8 @@
     "notifyUserWhenAdded": "Notify user when added"
   },
   "collaboratorAddedToRowNotification": {
-    "title": "{sender} assigned you to {fieldName} in row {rowId} in {tableName}"
+    "title": "{sender} assigned you to {fieldName} in row {rowId} in {tableName}",
+    "deletedUser": "A deleted user"
   },
   "formSubmittedNotification": {
     "title": "{formName} has been submitted in table {tableName}:",