From 5c75aa3e97560ab7c5eda80f5c1879e18eebd737 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 25 Jul 2024 11:47:08 +0100
Subject: [PATCH 1/4] Rewire frontend notifications to backend notifications
 API

---
 frontend/src/api/user.js                      | 17 ++++++
 .../src/components/NotificationsButton.vue    | 11 +++-
 .../notifications/NotificationsDrawer.vue     | 14 ++---
 .../components/notifications/Notification.vue | 24 ++++----
 .../TeamInvitationNotification.vue            | 10 +++-
 frontend/src/pages/account/NoTeamsUser.vue    |  4 +-
 .../src/pages/account/Teams/Invitations.vue   |  9 ++-
 frontend/src/pages/account/Teams/index.vue    | 14 ++---
 frontend/src/pages/account/index.vue          |  6 +-
 frontend/src/store/account.js                 | 56 ++++++++-----------
 .../stylesheets/components/notifications.scss |  8 ++-
 11 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/frontend/src/api/user.js b/frontend/src/api/user.js
index a33b354694..d799588667 100644
--- a/frontend/src/api/user.js
+++ b/frontend/src/api/user.js
@@ -75,6 +75,21 @@ const deleteUser = async () => {
         return res.data
     })
 }
+const getNotifications = async () => {
+    return client.get('/api/v1/user/notifications').then(res => {
+        res.data.invitations = res.data.notifications.map(r => {
+            r.createdSince = daysSince(r.createdAt)
+            return r
+        })
+        return res.data
+    })
+}
+const markNotificationRead = async (id) => {
+    return client.put('/api/v1/user/notifications/' + id, {
+        read: true
+    })
+}
+
 const getTeamInvitations = async () => {
     return client.get('/api/v1/user/invitations').then(res => {
         res.data.invitations = res.data.invitations.map(r => {
@@ -224,6 +239,8 @@ export default {
     changePassword,
     updateUser,
     deleteUser,
+    getNotifications,
+    markNotificationRead,
     getTeamInvitations,
     acceptTeamInvitation,
     rejectTeamInvitation,
diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index 843dd2827e..8322aaa0cc 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -2,7 +2,7 @@
     <div class="notifications-button-wrapper">
         <button class="notifications-button" data-el="notifications-button" data-click-exclude="right-drawer" @click="onClick">
             <MailIcon />
-            <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notifications.total" />
+            <ff-notification-pill v-if="hasNotifications" data-el="notification-pill" class="ml-3" :count="notificationsCount" />
         </button>
     </div>
 </template>
@@ -20,7 +20,14 @@ export default {
     computed: {
         ...mapState('ux', ['rightDrawer']),
         ...mapGetters('account', ['hasNotifications']),
-        ...mapGetters('account', ['notifications'])
+        ...mapGetters('account', ['unreadNotificationsCount']),
+        notificationsCount: function () {
+            // Return null if count = 0 so we don't show a 0 in the pill
+            if (!this.unreadNotificationsCount) {
+                return null
+            }
+            return this.unreadNotificationsCount
+        }
     },
     methods: {
         ...mapActions('ux', ['openRightDrawer', 'closeRightDrawer']),
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 6f5893ba67..85fc52a9b4 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -10,9 +10,9 @@
             <!--            </div>-->
         </div>
         <ul v-if="hasNotificationMessages" class="messages-wrapper" data-el="messages-wrapper">
-            <li v-for="notification in notificationMessages" :key="notification.id" data-el="message">
+            <li v-for="notification in notifications" :key="notification.id" data-el="message">
                 <component
-                    :is="notificationsComponentMap['team-invitation']"
+                    :is="notificationsComponentMap[notification.type]"
                     :notification="notification"
                     :selections="selections"
                     @selected="onSelected"
@@ -38,21 +38,21 @@ export default {
         return {
             notificationsComponentMap: {
                 // todo replace hardcoded value with actual notification type
-                'team-invitation': markRaw(TeamInvitationNotification)
+                'team-invite': markRaw(TeamInvitationNotification)
             },
             selections: []
         }
     },
     computed: {
-        ...mapGetters('account', ['notificationMessages']),
+        ...mapGetters('account', ['notifications']),
         canSelectAll () {
-            return this.notificationMessages.length !== this.selections.length
+            return this.notifications.length !== this.selections.length
         },
         canDeselectAll () {
             return this.selections.length > 0
         },
         hasNotificationMessages () {
-            return this.notificationMessages.length > 0
+            return this.notifications.length > 0
         }
     },
     methods: {
@@ -66,7 +66,7 @@ export default {
             }
         },
         selectAll () {
-            this.selections = [...this.notificationMessages]
+            this.selections = [...this.notifications]
         },
         deselectAll () {
             this.selections = []
diff --git a/frontend/src/components/notifications/Notification.vue b/frontend/src/components/notifications/Notification.vue
index 1cc5527475..e856c30442 100644
--- a/frontend/src/components/notifications/Notification.vue
+++ b/frontend/src/components/notifications/Notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="message" @click="go(to)">
+    <div class="message" :class="{ unread: !notification.read }" @click="go(to)">
         <div class="body">
             <div class="icon ff-icon ff-icon-lg">
                 <slot name="icon" />
@@ -23,6 +23,8 @@
 <script>
 import { mapActions } from 'vuex'
 
+import userApi from '../../api/user.js'
+
 import NotificationMessageMixin from '../../mixins/NotificationMessage.js'
 
 export default {
@@ -34,24 +36,26 @@ export default {
             required: true
         }
     },
-    computed: {
-        invitorName () {
-            return this.notification.invitor.name
-        },
-        teamName () {
-            return this.notification.team.name
-        }
-    },
     methods: {
         ...mapActions('ux', ['closeRightDrawer']),
         go (to) {
             this.closeRightDrawer()
-            this.$router.push(to)
+            this.notification.read = true
+            userApi.markNotificationRead(this.notification.id)
+            if (to.url) {
+            // Handle external links
+                window.open(to.url, '_blank').focus()
+            } else {
+                this.$router.push(to)
+            }
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
+.body.unread {
+    border-left: 3px solid blue;
+}
 
 </style>
diff --git a/frontend/src/components/notifications/TeamInvitationNotification.vue b/frontend/src/components/notifications/TeamInvitationNotification.vue
index aab3432deb..65320e9a80 100644
--- a/frontend/src/components/notifications/TeamInvitationNotification.vue
+++ b/frontend/src/components/notifications/TeamInvitationNotification.vue
@@ -1,5 +1,9 @@
 <template>
-    <NotificationMessage data-el="invitation-message" :to="{name: 'User Invitations'}">
+    <NotificationMessage
+        :notification="notification"
+        :selections="selections"
+        data-el="invitation-message" :to="{name: 'User Invitations'}"
+    >
         <template #icon>
             <UserAddIcon />
         </template>
@@ -28,10 +32,10 @@ export default {
     mixins: [NotificationMessageMixin],
     computed: {
         invitorName () {
-            return this.notification.invitor.name
+            return this.notification.data.invitor.username
         },
         teamName () {
-            return this.notification.team.name
+            return this.notification.data.team.name
         }
     }
 }
diff --git a/frontend/src/pages/account/NoTeamsUser.vue b/frontend/src/pages/account/NoTeamsUser.vue
index 15b965b5b1..b50f6fb1ba 100644
--- a/frontend/src/pages/account/NoTeamsUser.vue
+++ b/frontend/src/pages/account/NoTeamsUser.vue
@@ -29,7 +29,7 @@ export default {
     computed: {
         ...mapState('account', ['settings', 'user']),
         ...mapGetters('account', {
-            invitationCount: 'totalNotificationsCount'
+            invitationCount: 'teamInvitationsCount'
         })
     },
     mounted () {
@@ -37,7 +37,7 @@ export default {
     },
     methods: {
         async fetchData () {
-            await this.$store.dispatch('account/getNotifications')
+            await this.$store.dispatch('account/getInvitations')
         }
     }
 }
diff --git a/frontend/src/pages/account/Teams/Invitations.vue b/frontend/src/pages/account/Teams/Invitations.vue
index 765156993f..1b2dfb2722 100644
--- a/frontend/src/pages/account/Teams/Invitations.vue
+++ b/frontend/src/pages/account/Teams/Invitations.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="space-y-6">
-        <ff-data-table data-el="table" :columns="inviteColumns" :rows="invitations">
+        <ff-data-table data-el="table" :columns="inviteColumns" :rows="invitations" noDataMessage="No Invitations">
             <template #row-actions="{row}">
                 <ff-button data-action="invite-reject" kind="secondary-danger" @click="rejectInvite(row)">Reject</ff-button>
                 <ff-button data-action="invite-accept" @click="acceptInvite(row)">Accept</ff-button>
@@ -43,12 +43,13 @@ export default {
         })
     },
     mounted () {
-        this.$store.dispatch('account/getNotifications')
+        this.$store.dispatch('account/getInvitations')
     },
     methods: {
         async acceptInvite (invite) {
             await userApi.acceptTeamInvitation(invite.id, invite.team.id)
             await this.$store.dispatch('account/getNotifications')
+            await this.$store.dispatch('account/getInvitations')
             await this.$store.dispatch('account/refreshTeams')
             Alerts.emit(`Invite to "${invite.team.name}" has been accepted.`, 'confirmation')
             // navigate to team dashboad once invite accepted
@@ -62,10 +63,8 @@ export default {
         async rejectInvite (invite) {
             await userApi.rejectTeamInvitation(invite.id, invite.team.id)
             await this.$store.dispatch('account/getNotifications')
+            await this.$store.dispatch('account/getInvitations')
             Alerts.emit(`Invite to "${invite.team.name}" has been rejected.`, 'confirmation')
-        },
-        async fetchData () {
-            await this.$store.dispatch('account/getNotifications')
         }
     }
 }
diff --git a/frontend/src/pages/account/Teams/index.vue b/frontend/src/pages/account/Teams/index.vue
index 0ebe9a04c7..93a3662391 100644
--- a/frontend/src/pages/account/Teams/index.vue
+++ b/frontend/src/pages/account/Teams/index.vue
@@ -29,12 +29,12 @@ export default {
     },
     computed: {
         ...mapState('account', ['user', 'teams']),
-        ...mapGetters('account', ['notifications'])
+        ...mapGetters('account', ['teamInvitationsCount'])
     },
     watch: {
-        notifications: {
+        teamInvitationsCount: {
             handler: function () {
-                this.updateNotifications()
+                this.updateInvitations()
             },
             deep: true
         }
@@ -44,12 +44,12 @@ export default {
             { name: 'Teams', path: '/account/teams' }
         ]
         this.sideNavigation.push({ name: 'Invitations', path: '/account/teams/invitations' })
-        this.updateNotifications()
+        this.updateInvitations()
     },
     methods: {
-        updateNotifications () {
-            if (this.notifications.invitations > 0) {
-                this.sideNavigation[1].name = `Invitations (${this.notifications.invitations})`
+        updateInvitations () {
+            if (this.teamInvitationsCount > 0) {
+                this.sideNavigation[1].name = `Invitations (${this.teamInvitationsCount})`
             } else {
                 this.sideNavigation[1].name = 'Invitations'
             }
diff --git a/frontend/src/pages/account/index.vue b/frontend/src/pages/account/index.vue
index a275eba423..ce76458395 100644
--- a/frontend/src/pages/account/index.vue
+++ b/frontend/src/pages/account/index.vue
@@ -61,10 +61,10 @@ export default {
     },
     computed: {
         ...mapState('account', ['user', 'team']),
-        ...mapGetters('account', ['notifications'])
+        ...mapGetters('account', ['teamInvitationsCount'])
     },
     watch: {
-        notifications: {
+        teamInvitationsCount: {
             handler: function () {
                 this.updateNotifications()
             },
@@ -77,7 +77,7 @@ export default {
     },
     methods: {
         updateNotifications () {
-            this.navigation[1].notifications = this.notifications.invitations
+            this.navigation[1].notifications = this.teamInvitationsCount
         }
     }
 }
diff --git a/frontend/src/store/account.js b/frontend/src/store/account.js
index c175d5a395..1549e41f62 100644
--- a/frontend/src/store/account.js
+++ b/frontend/src/store/account.js
@@ -32,6 +32,7 @@ const state = () => ({
     notifications: {
         payload: []
     },
+    invitations: [],
     // An error during login
     loginError: null,
     //
@@ -60,26 +61,6 @@ const getters = {
     teamMembership (state) {
         return state.teamMembership
     },
-    notifications (state) {
-        const n = { ...state.notifications }
-
-        let sum = 0
-        for (const type of Object.keys(n)) {
-            if (!['total', 'payload'].includes(type)) {
-                sum += n[type]
-            }
-        }
-
-        n.total = sum
-
-        return n
-    },
-    notificationMessages (state, getters) {
-        const notifications = getters.notifications.payload ?? []
-
-        return notifications.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-    },
-    totalNotificationsCount: (state, getters) => getters.notifications.total,
     redirectUrlAfterLogin (state) {
         return state.redirectUrlAfterLogin
     },
@@ -99,8 +80,14 @@ const getters = {
     },
     blueprints: state => state.teamBlueprints[state.team?.id] || [],
     defaultBlueprint: (state, getters) => getters.blueprints?.find(blueprint => blueprint.default),
-    hasNotifications: (state, getters) => getters.notifications.total > 0,
-    teamInvitations: state => state.notifications.payload // filter out team invites by notification.type = invite
+
+    notifications: state => state.notifications,
+    notificationsCount: state => state.notifications?.length || 0,
+    unreadNotificationsCount: state => state.notifications?.filter(n => !n.read).length || 0,
+    hasNotifications: (state, getters) => getters.notificationsCount > 0,
+
+    teamInvitations: state => state.invitations,
+    teamInvitationsCount: state => state.invitations?.length || 0
 }
 
 const mutations = {
@@ -140,11 +127,8 @@ const mutations = {
     setTeams (state, teams) {
         state.teams = teams
     },
-    setNotificationsCount (state, payload) {
-        state.notifications[payload.type] = payload.count
-    },
-    setNotificationsPayload (state, notifications) {
-        state.notifications.payload = notifications
+    setNotifications (state, notifications) {
+        state.notifications = notifications
     },
     sessionExpired (state) {
         state.user = null
@@ -167,6 +151,9 @@ const mutations = {
     },
     setTeamBlueprints (state, { teamId, blueprints }) {
         state.teamBlueprints[teamId] = blueprints
+    },
+    setTeamInvitations (state, invitations) {
+        state.invitations = invitations
     }
 }
 
@@ -195,6 +182,8 @@ const actions = {
 
             // check notifications count
             await dispatch('getNotifications')
+            // check notifications count
+            await dispatch('getInvitations')
 
             const teams = await teamApi.getTeams()
             commit('setTeams', teams.teams)
@@ -358,13 +347,16 @@ const actions = {
         state.commit('setRedirectUrl', url)
     },
     async getNotifications (state) {
+        await userApi.getNotifications()
+            .then((notifications) => {
+                state.commit('setNotifications', notifications.notifications)
+            })
+            .catch(_ => {})
+    },
+    async getInvitations (state) {
         await userApi.getTeamInvitations()
             .then((invitations) => {
-                state.commit('setNotificationsCount', {
-                    type: 'invitations',
-                    count: invitations.count
-                })
-                state.commit('setNotificationsPayload', invitations.invitations)
+                state.commit('setTeamInvitations', invitations.invitations)
             })
             .catch(_ => {})
     }
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
index bd97687d3c..62c855bf92 100644
--- a/frontend/src/stylesheets/components/notifications.scss
+++ b/frontend/src/stylesheets/components/notifications.scss
@@ -84,16 +84,22 @@ $ff-notifications-drawer-side-padding: 12px;
         background-color: $ff-grey-100;
         
         .message {
+            color: $ff-grey-400;
             background-color: $ff-white;
             border-bottom: 1px solid $ff-grey-300;
+            border-left: 3px solid rgba(0,0,0,0);
             padding: 9px $ff-notifications-drawer-side-padding;
             transition: ease-in-out .3s;
+            
             cursor: pointer;
 
             &:hover .title {
                 color: $ff-blue-500;
             }
-
+            &.unread {
+                border-left-color: $ff-blue-500;
+                color: $ff-grey-800;
+            }
             .body {
                 flex: 1;
                 display: flex;

From a50830df2f66d080b8547fd08af7db69d9315f1d Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 25 Jul 2024 13:51:02 +0100
Subject: [PATCH 2/4] Fix up ui tests for invite handling

---
 .../tests/team/team-membership.spec.js        | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/team/team-membership.spec.js b/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
index 56fe1742dd..5802393229 100644
--- a/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
+++ b/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
@@ -2,22 +2,26 @@ describe('FlowForge - Team Membership', () => {
     // let team // , project
 
     beforeEach(() => {
+        cy.intercept('/api/*/teams/*/invitations').as('getTeamsInvitations')
         cy.login('alice', 'aaPassword')
         cy.home()
     })
 
     it('loads team members into the data table', () => {
         cy.visit('team/ateam/members/general')
-        cy.wait(['@getInvitations'])
+        cy.wait(['@getTeamsInvitations'])
 
         // starts off with alice and bob as members
         cy.get('[data-el="members-table"] tbody').find('tr').should('have.length', 2) // should be 2 members
+
+        cy.visit('team/ateam/members/invitations')
+        // starts off with one invitation already
+        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', 1)
     })
 
     it('owner/admin can invite user', () => {
-        cy.intercept('/api/*/teams/*/invitations').as('getTeamsInvitations')
         cy.visit('team/ateam/members/general')
-        cy.wait(['@getInvitations'])
+        cy.wait(['@getTeamsInvitations'])
 
         // click invite button
         cy.get('[data-action="member-invite-button"]').click()
@@ -32,9 +36,10 @@ describe('FlowForge - Team Membership', () => {
     })
 
     it('loads invitations into the data table', () => {
+        cy.intercept('/api/*/teams/*/invitations').as('getTeamsInvitations')
         cy.visit('team/ateam/members/invitations')
-        cy.wait('@getInvitations')
-        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', 1)
+        cy.wait('@getTeamsInvitations')
+        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', 2)
     })
 
     it('user can accept a team invite', () => {
@@ -57,8 +62,8 @@ describe('FlowForge - Team Membership', () => {
         cy.wait(['@getTeams', '@getInvitations'])
 
         // check it has been removed (note: tr will have 1 td with "No Data Found" and a class of .status-message when empty)
-        cy.get('[data-el="table"] tbody tr').should('have.length', 1) // 1 row stating "No Data Found"
-        cy.get('[data-el="table"] tbody tr td').contains('No Data Found')
+        cy.get('[data-el="table"] tbody tr').should('have.length', 1) // 1 row stating "No Invitations"
+        cy.get('[data-el="table"] tbody tr td').contains('No Invitations')
     })
 
     it('member cannot can invite or remove a user', () => {

From d1d93565e057c4563a9a38e6eeadff0481fbfc43 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 25 Jul 2024 15:09:25 +0100
Subject: [PATCH 3/4] Update notifications ui tests

---
 .../cypress/tests/notifications.spec.js       | 131 +++++++++---------
 1 file changed, 67 insertions(+), 64 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/notifications.spec.js b/test/e2e/frontend/cypress/tests/notifications.spec.js
index 9af1400a8c..15ef74eb57 100644
--- a/test/e2e/frontend/cypress/tests/notifications.spec.js
+++ b/test/e2e/frontend/cypress/tests/notifications.spec.js
@@ -7,54 +7,52 @@ describe('FlowForge - Notifications', () => {
                 cy.intercept('/api/*/user').as('getUser')
                 cy.intercept('/api/*/settings').as('getSettings')
                 cy.intercept('/api/*/user/teams').as('getTeams')
-                cy.intercept('/api/*/user/invitations', {
+                cy.intercept('/api/*/user/notifications', {
                     meta: {},
                     count: 2,
-                    invitations: [
+                    notifications: [
                         {
                             id: '1',
-                            role: 30,
+                            type: 'team-invite',
                             createdAt: new Date().setTime((new Date()).getTime() - 3600000),
-                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
-                            team: {
-                                id: 'gY9GQjDb2k',
-                                name: 'ATeam',
-                                slug: 'ateam'
-                            },
-                            invitor: {
-                                id: 'AJ1lQQjlqR',
-                                username: 'alice',
-                                name: 'Alice Skywalker'
-                            },
-                            invitee: {
-                                id: 'qMN5ng9xYv',
-                                username: 'bob',
-                                name: 'Bob'
+                            read: false,
+                            data: {
+                                invite: {
+                                    id: 'abcd1'
+                                },
+                                team: {
+                                    id: 'gY9GQjDb2k',
+                                    name: 'ATeam'
+                                },
+                                invitor: {
+                                    username: 'alice'
+                                },
+                                role: 30
                             }
                         },
                         {
                             id: '2',
-                            role: 30,
+                            type: 'team-invite',
                             createdAt: new Date().setTime((new Date()).getTime() - 3600000),
-                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
-                            team: {
-                                id: 'gY9GQjDb2k',
-                                name: 'BTeam',
-                                slug: 'bteam'
-                            },
-                            invitor: {
-                                id: 'AJ1lQQjlqR',
-                                username: 'bob',
-                                name: 'Bob Solo'
-                            },
-                            invitee: {
-                                id: 'qMN5ng9xYv',
-                                username: 'bob',
-                                name: 'Bob'
+                            read: false,
+                            data: {
+                                invite: {
+                                    id: 'abcd2'
+                                },
+                                team: {
+                                    id: 'gY9GQjDb2k',
+                                    name: 'BTeam'
+                                },
+                                invitor: {
+                                    username: 'bob'
+                                },
+                                role: 30
                             }
                         }
                     ]
-                }).as('getInvitations')
+                }).as('getNotifications')
+
+                cy.intercept('PUT', '/api/*/user/notifications/*', {}).as('markInvitationRead')
 
                 cy.intercept('/api/*/admin/stats').as('getAdminStats')
                 cy.intercept('/api/*/admin/license').as('getAdminLicense')
@@ -64,7 +62,7 @@ describe('FlowForge - Notifications', () => {
                 cy.wait('@getUser')
                 cy.wait('@getSettings')
                 cy.wait('@getTeams')
-                cy.wait('@getInvitations')
+                cy.wait('@getNotifications')
 
                 cy.get('[data-el="right-drawer"').should('not.be.visible')
 
@@ -81,13 +79,17 @@ describe('FlowForge - Notifications', () => {
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 2)
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation')
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Alice Skywalker" to join "ATeam".')
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Bob Solo" to join "BTeam".')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "alice" to join "ATeam".')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "bob" to join "BTeam".')
 
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
-
+                    cy.wait('@markInvitationRead')
                     cy.url().should('include', 'account/teams/invitations')
                 })
+
+                cy.get('[data-el="notifications-button"')
+                    .should('exist')
+                    .contains(1)
             })
 
             it('to users that are part of teams', () => {
@@ -96,44 +98,40 @@ describe('FlowForge - Notifications', () => {
                 cy.intercept('/api/*/user').as('getUser')
                 cy.intercept('/api/*/settings').as('getSettings')
                 cy.intercept('/api/*/user/teams').as('getTeams')
-                cy.intercept('/api/*/user/invitations', {
+                cy.intercept('/api/*/user/notifications', {
                     meta: {},
                     count: 1,
-                    invitations: [
+                    notifications: [
                         {
                             id: '1',
-                            role: 30,
+                            type: 'team-invite',
                             createdAt: new Date().setTime((new Date()).getTime() - 3600000),
-                            expiresAt: new Date().setTime((new Date()).getTime() + 3600000),
-                            team: {
-                                id: 'gY9GQjDb2k',
-                                name: 'Alice\'s team',
-                                slug: 'team-alice',
-                                avatar: '//www.gravatar.com/avatar/3f9a1fa9ff68277d3e9b5369250be8d9?d=identicon',
-                                links: {
-                                    self: 'http://localhost:3000/api/v1/teams/gY9GQjDb2k'
-                                }
-                            },
-                            invitor: {
-                                id: 'AJ1lQQjlqR',
-                                username: 'alice',
-                                name: 'Alice'
-                            },
-                            invitee: {
-                                id: 'qMN5ng9xYv',
-                                username: 'bob',
-                                name: 'Bob'
+                            read: false,
+                            data: {
+                                invite: {
+                                    id: 'abcd1'
+                                },
+                                team: {
+                                    id: 'gY9GQjDb2k',
+                                    name: 'Alice\'s team'
+                                },
+                                invitor: {
+                                    username: 'alice'
+                                },
+                                role: 30
                             }
                         }
                     ]
-                }).as('getInvitations')
+                }).as('getNotifications')
+
+                cy.intercept('PUT', '/api/*/user/notifications/*', {}).as('markInvitationRead')
 
                 cy.visit('/')
 
                 cy.wait('@getUser')
                 cy.wait('@getSettings')
                 cy.wait('@getTeams')
-                cy.wait('@getInvitations')
+                cy.wait('@getNotifications')
 
                 cy.get('[data-el="right-drawer"').should('not.be.visible')
 
@@ -149,13 +147,18 @@ describe('FlowForge - Notifications', () => {
                     cy.get('[data-el="notifications-drawer"]')
 
                     cy.get('[data-el="invitation-message"]').should('have.length', 1)
-                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "Alice" to join "Alice\'s team".')
+                    cy.get('[data-el="invitation-message"]').contains('You have been invited by "alice" to join "Alice\'s team".')
                     cy.get('[data-el="invitation-message"]').contains('1 hour ago')
 
                     cy.get('[data-el="invitation-message"]').contains('Team Invitation').click()
 
+                    cy.wait('@markInvitationRead')
+
                     cy.url().should('include', 'account/teams/invitations')
                 })
+                cy.get('[data-el="notifications-button"')
+                    .should('exist')
+                    .contains(1).should('not.exist')
             })
         })
     })

From dcb842f8074efe44da3ddc259045229d76f88265 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 25 Jul 2024 17:22:01 +0100
Subject: [PATCH 4/4] Fix ui tests

---
 .../cypress/tests/team/team-membership.spec.js   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/team/team-membership.spec.js b/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
index 5802393229..3a7f59fd09 100644
--- a/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
+++ b/test/e2e/frontend/cypress/tests/team/team-membership.spec.js
@@ -1,5 +1,5 @@
 describe('FlowForge - Team Membership', () => {
-    // let team // , project
+    let startingInviteCount
 
     beforeEach(() => {
         cy.intercept('/api/*/teams/*/invitations').as('getTeamsInvitations')
@@ -9,14 +9,19 @@ describe('FlowForge - Team Membership', () => {
 
     it('loads team members into the data table', () => {
         cy.visit('team/ateam/members/general')
-        cy.wait(['@getTeamsInvitations'])
-
+        cy.wait('@getTeamsInvitations')
         // starts off with alice and bob as members
         cy.get('[data-el="members-table"] tbody').find('tr').should('have.length', 2) // should be 2 members
 
         cy.visit('team/ateam/members/invitations')
         // starts off with one invitation already
-        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', 1)
+        cy.get('[data-el="invites-table"] tbody').find('tr').then(el => {
+            // This is tiresome. We might have a 'No Data Found' row. But I simply
+            // cannot find a way to filter them out. Cypress docs claim .filter is
+            // the opposite of .not - yet .filter supports :contains, but .not does not.
+            startingInviteCount = el.length - el.filter(':contains("No Data Found")').length
+            cy.log('STARTING WITH', startingInviteCount)
+        })
     })
 
     it('owner/admin can invite user', () => {
@@ -36,10 +41,11 @@ describe('FlowForge - Team Membership', () => {
     })
 
     it('loads invitations into the data table', () => {
+        cy.log('HERE WITH', startingInviteCount)
         cy.intercept('/api/*/teams/*/invitations').as('getTeamsInvitations')
         cy.visit('team/ateam/members/invitations')
         cy.wait('@getTeamsInvitations')
-        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', 2)
+        cy.get('[data-el="invites-table"] tbody').find('tr').should('have.length', startingInviteCount + 1)
     })
 
     it('user can accept a team invite', () => {