fix: TypeError: Cannot read properties of null (reading 'assignee') (#8647)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -50,6 +50,7 @@
         :is-loading="uiFlags.isFetching"
         :on-click-notification="openConversation"
         :in-last-page="inLastPage"
+        @close="closeNotificationPanel"
       />
       <div
         v-if="records.length !== 0"

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <woot-button
+      size="expanded"
+      color-scheme="secondary"
+      variant="link"
+      @click="onClickOpenNotification()"
+    >
+      <div
+        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
+      >
+        <div
+          v-if="!notificationItem.read_at"
+          class="w-2 h-2 rounded-full bg-woot-500"
+        />
+        <div v-else class="w-2 flex" />
+        <div
+          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
+        >
+          <div class="flex justify-between">
+            <div class="items-center flex">
+              <span class="font-bold text-slate-800 dark:text-slate-100">
+                {{
+                  `#${
+                    notificationItem.primary_actor
+                      ? notificationItem.primary_actor.id
+                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
+                  }`
+                }}
+              </span>
+              <span
+                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+              >
+                {{
+                  $t(
+                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
+                  )
+                }}
+              </span>
+            </div>
+            <div v-if="hasNotificationAssignee">
+              <thumbnail
+                :src="notificationAssigneeThumbnail"
+                size="16px"
+                :username="notificationAssigneeName"
+              />
+            </div>
+          </div>
+          <div class="w-full flex">
+            <span
+              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+            >
+              {{ notificationItem.push_message_title }}
+            </span>
+          </div>
+          <span
+            class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
+          >
+            {{ dynamicTime(notificationItem.created_at) }}
+          </span>
+        </div>
+      </div>
+    </woot-button>
+  </div>
+</template>
+
+<script>
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import timeMixin from 'dashboard/mixins/time';
+
+export default {
+  components: {
+    Thumbnail,
+  },
+  mixins: [timeMixin],
+  props: {
+    notificationItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  computed: {
+    notificationAssignee() {
+      const { primary_actor: primaryActor } = this.notificationItem;
+      return primaryActor?.meta?.assignee;
+    },
+    hasNotificationAssignee() {
+      return !!this.notificationAssignee;
+    },
+    notificationAssigneeName() {
+      return this.notificationAssignee?.name || '';
+    },
+    notificationAssigneeThumbnail() {
+      return this.notificationAssignee?.thumbnail || '';
+    },
+  },
+  methods: {
+    onClickOpenNotification() {
+      this.$emit('open-notification', this.notificationItem);
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -1,70 +1,12 @@
 <template>
   <div class="flex-col py-2 px-2.5 overflow-auto h-full flex">
-    <woot-button
+    <notification-panel-item
       v-for="notificationItem in notifications"
       v-show="!isLoading"
       :key="notificationItem.id"
-      size="expanded"
+      :notification-item="notificationItem"
-      color-scheme="secondary"
+      @open-notification="onClickNotification"
-      variant="link"
+    />
-      @click="() => onClickNotification(notificationItem)"
-    >
-      <div
-        class="flex-row items-center p-2.5 leading-[1.4] border-b border-solid border-slate-50 dark:border-slate-700 flex w-full hover:bg-slate-75 dark:hover:bg-slate-900 hover:rounded-md"
-      >
-        <div
-          v-if="!notificationItem.read_at"
-          class="w-2 h-2 rounded-full bg-woot-500"
-        />
-        <div v-else class="w-2 flex" />
-        <div
-          class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
-        >
-          <div class="flex justify-between">
-            <div class="items-center flex">
-              <span class="font-bold text-slate-800 dark:text-slate-100">
-                {{
-                  `#${
-                    notificationItem.primary_actor
-                      ? notificationItem.primary_actor.id
-                      : $t(`NOTIFICATIONS_PAGE.DELETE_TITLE`)
-                  }`
-                }}
-              </span>
-              <span
-                class="text-xxs p-0.5 px-1 my-0 mx-2 bg-slate-50 dark:bg-slate-700 rounded-md"
-              >
-                {{
-                  $t(
-                    `NOTIFICATIONS_PAGE.TYPE_LABEL.${notificationItem.notification_type}`
-                  )
-                }}
-              </span>
-            </div>
-            <div>
-              <thumbnail
-                v-if="hasAssignee(notificationItem)"
-                :src="notificationItem.primary_actor.meta.assignee.thumbnail"
-                size="16px"
-                :username="notificationItem.primary_actor.meta.assignee.name"
-              />
-            </div>
-          </div>
-          <div class="w-full flex">
-            <span
-              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
-            >
-              {{ notificationItem.push_message_title }}
-            </span>
-          </div>
-          <span
-            class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
-          >
-            {{ dynamicTime(notificationItem.created_at) }}
-          </span>
-        </div>
-      </div>
-    </woot-button>
     <empty-state
       v-if="showEmptyResult"
       :title="$t('NOTIFICATIONS_PAGE.UNREAD_NOTIFICATION.EMPTY_MESSAGE')"
@@ -94,18 +36,16 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import timeMixin from '../../../../mixins/time';
+import NotificationPanelItem from './NotificationPanelItem.vue';
 
 export default {
   components: {
-    Thumbnail,
+    NotificationPanelItem,
     Spinner,
     EmptyState,
   },
-  mixins: [timeMixin],
   props: {
     notifications: {
       type: Array,
@@ -139,9 +79,7 @@ export default {
           name: 'notifications_index',
         });
       }
-    },
+      this.$emit('close');
-    hasAssignee(notification) {
-      return notification.primary_actor.meta?.assignee;
     },
   },
 };