Merge pull request #12464 from nextcloud/backport/12340/stable29

[stable29] fix(federation): use a value from response header to count invites

src/components/LeftSidebar/InvitationHandler.vue

@@ -30,7 +30,7 @@
 			<p class="inbox__disclaimer">
 				{{ t('spreed', 'Join conversations from remote Nextcloud servers') }}
 			</p>
-			<ul class="inbox__list">
+			<ul v-if="invitationsLoadedCount" class="inbox__list">
 				<li v-for="(item, id) in invitations"
 					:key="`invitation_${id}`"
 					class="inbox__item">
@@ -67,15 +67,27 @@
 					</NcButton>
 				</li>
 			</ul>
+			<NcEmptyContent v-else class="inbox__placeholder">
+				<template #icon>
+					<NcLoadingIcon v-if="isLoading" />
+					<WebIcon v-else />
+				</template>
+
+				<template #description>
+					<p>{{ isLoading ? t('spreed', 'Loading …') : t('spreed', 'No pending invitations') }}</p>
+				</template>
+			</NcEmptyContent>
 		</div>
 	</NcModal>
 </template>
 
 <script>
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
+import WebIcon from 'vue-material-design-icons/Web.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
@@ -90,6 +102,7 @@ export default {
 	name: 'InvitationHandler',
 
 	components: {
+		NcEmptyContent,
 		NcRichText,
 		ConversationIcon,
 		NcButton,
@@ -98,6 +111,7 @@ export default {
 		// Icons
 		CancelIcon,
 		CheckIcon,
+		WebIcon,
 	},
 
 	setup() {
@@ -109,6 +123,7 @@ export default {
 	data() {
 		return {
 			modal: false,
+			isLoading: true,
 		}
 	},
 
@@ -125,13 +140,21 @@ export default {
 			}
 			return invitations
 		},
+
+		invitationsLoadedCount() {
+			return Object.keys(this.invitations).length
+		}
 	},
 
 	expose: ['showModal'],
 
 	methods: {
-		showModal() {
+		async showModal() {
 			this.modal = true
+
+			this.isLoading = true
+			await this.federationStore.getShares()
+			this.isLoading = false
 		},
 
 		closeModal() {
@@ -152,7 +175,7 @@ export default {
 		},
 
 		checkIfNoMoreInvitations() {
-			if (Object.keys(this.invitations).length === 0) {
+			if (this.invitationsLoadedCount === 0) {
 				this.closeModal()
 			}
 		},
@@ -188,6 +211,11 @@ export default {
 		color: var(--color-text-maxcontrast)
 	}
 
+	& > &__placeholder {
+		margin: 20px 0;
+		padding: 0;
+	}
+
 	&__list {
 		display: flex;
 		flex-direction: column;

src/components/LeftSidebar/LeftSidebar.vue

@@ -550,7 +550,7 @@ export default {
 
 		pendingInvitationsCount() {
 			return isFederationEnabled
-				? Object.keys(this.federationStore.pendingShares).length
+				? this.federationStore.pendingSharesCount
 				: 0
 		},
 
@@ -609,10 +609,6 @@ export default {
 			this.refreshTimer = window.setInterval(() => {
 				this.fetchConversations()
 			}, 30000)
-
-			if (isFederationEnabled) {
-				this.federationStore.getShares()
-			}
 		})
 
 		talkBroadcastChannel.addEventListener('message', (event) => {

src/store/conversationsStore.js

@@ -72,6 +72,7 @@ import {
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 import { useBreakoutRoomsStore } from '../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
+import { useFederationStore } from '../stores/federation.ts'
 import { useReactionsStore } from '../stores/reactions.js'
 import { useTalkHashStore } from '../stores/talkHash.js'
 
@@ -866,6 +867,7 @@ const actions = {
 
 	async fetchConversations({ dispatch }, { modifiedSince }) {
 		const talkHashStore = useTalkHashStore()
+		const federationStore = useFederationStore()
 		try {
 			talkHashStore.clearMaintenanceMode()
 			modifiedSince = modifiedSince || 0
@@ -881,6 +883,7 @@ const actions = {
 
 			const response = await fetchConversations(options)
 			talkHashStore.updateTalkVersionHash(response)
+			federationStore.updatePendingSharesCount(response.headers['x-nextcloud-talk-federation-invites'])
 
 			dispatch('patchConversations', {
 				conversations: response.data.ocs.data,

src/store/conversationsStore.spec.js

@@ -542,13 +542,7 @@ describe('conversationsStore', () => {
 			// add conversation that should be removed
 			store.dispatch('addConversation', testConversation)
 
-			const response = {
-				data: {
-					ocs: {
-						data: testConversations,
-					},
-				},
-			}
+			const response = generateOCSResponse({ payload: testConversations })
 
 			fetchConversations.mockResolvedValue(response)
 
@@ -590,13 +584,7 @@ describe('conversationsStore', () => {
 			}
 			const modifiedSince = 1675209600 // 2023-02-01T00:00:00.000Z
 
-			const response = {
-				data: {
-					ocs: {
-						data: [newConversation1, newConversation2],
-					},
-				},
-			}
+			const response = generateOCSResponse({ payload: [newConversation1, newConversation2] })
 
 			fetchConversations.mockResolvedValue(response)
 

src/stores/__tests__/federation.spec.js

@@ -117,6 +117,24 @@ describe('federationStore', () => {
 		expect(getShares).toHaveBeenCalled()
 		expect(federationStore.pendingShares).toMatchObject({ [invites[0].id]: invites[0] })
 		expect(federationStore.acceptedShares).toMatchObject({ [invites[1].id]: invites[1] })
+		expect(federationStore.pendingSharesCount).toBe(1)
+	})
+
+	it('processes a response from server and remove outdated invites', async () => {
+		// Arrange
+		const response = generateOCSResponse({ payload: invites })
+		getShares.mockResolvedValueOnce(response)
+		await federationStore.getShares()
+
+		// Act: load empty response from server
+		const responseEmpty = generateOCSResponse({ payload: [] })
+		getShares.mockResolvedValueOnce(responseEmpty)
+		await federationStore.getShares()
+
+		// Assert
+		expect(federationStore.pendingShares).toStrictEqual({})
+		expect(federationStore.acceptedShares).toStrictEqual({})
+		expect(federationStore.pendingSharesCount).toBe(0)
 	})
 
 	it('handles error in server request for getShares', async () => {
@@ -131,6 +149,7 @@ describe('federationStore', () => {
 		// Assert: store hasn't changed
 		expect(federationStore.pendingShares).toStrictEqual({})
 		expect(federationStore.acceptedShares).toStrictEqual({})
+		expect(federationStore.pendingSharesCount).toBe(0)
 	})
 
 	it('updates invites in the store after receiving a notification', async () => {
@@ -148,6 +167,7 @@ describe('federationStore', () => {
 			[notifications[1].objectId]: { id: notifications[1].objectId },
 		})
 		expect(federationStore.acceptedShares).toMatchObject({ [invites[1].id]: invites[1] })
+		expect(federationStore.pendingSharesCount).toBe(2)
 	})
 
 	it('accepts invitation and modify store', async () => {
@@ -174,6 +194,7 @@ describe('federationStore', () => {
 			[invites[0].id]: { ...invites[0], state: 1 },
 			[invites[1].id]: invites[1],
 		})
+		expect(federationStore.pendingSharesCount).toBe(0)
 	})
 
 	it('skip already accepted invitations', async () => {
@@ -224,6 +245,7 @@ describe('federationStore', () => {
 		expect(rejectShare).toHaveBeenCalledWith(invites[0].id)
 		expect(federationStore.pendingShares).toStrictEqual({})
 		expect(federationStore.acceptedShares).toMatchObject({ [invites[1].id]: invites[1] })
+		expect(federationStore.pendingSharesCount).toBe(1)
 	})
 
 	it('skip already rejected invitations', async () => {

src/stores/federation.ts

@@ -33,11 +33,13 @@ import type { Conversation, FederationInvite, NotificationInvite } from '../type
 type State = {
 	pendingShares: Record<string, FederationInvite & { loading?: 'accept' | 'reject' }>,
 	acceptedShares: Record<string, FederationInvite>,
+	pendingSharesCount: number,
 }
 export const useFederationStore = defineStore('federation', {
 	state: (): State => ({
 		pendingShares: {},
 		acceptedShares: {},
+		pendingSharesCount: 0,
 	}),
 
 	actions: {
@@ -47,13 +49,18 @@ export const useFederationStore = defineStore('federation', {
 		async getShares() {
 			try {
 				const response = await getShares()
+				const acceptedShares: State['acceptedShares'] = {}
+				const pendingShares: State['pendingShares'] = {}
 				response.data.ocs.data.forEach(item => {
 					if (item.state === FEDERATION.STATE.ACCEPTED) {
-						Vue.set(this.acceptedShares, item.id, item)
+						acceptedShares[item.id] = item
 					} else {
-						Vue.set(this.pendingShares, item.id, item)
+						pendingShares[item.id] = item
 					}
 				})
+				Vue.set(this, 'acceptedShares', acceptedShares)
+				Vue.set(this, 'pendingShares', pendingShares)
+				this.updatePendingSharesCount(Object.keys(this.pendingShares).length)
 			} catch (error) {
 				console.error(error)
 			}
@@ -84,6 +91,7 @@ export const useFederationStore = defineStore('federation', {
 				inviterDisplayName: name,
 			}
 			Vue.set(this.pendingShares, invitation.id, invitation)
+			this.updatePendingSharesCount(Object.keys(this.pendingShares).length)
 		},
 
 		/**
@@ -118,10 +126,16 @@ export const useFederationStore = defineStore('federation', {
 				Vue.set(this.pendingShares[id], 'loading', 'accept')
 				const response = await acceptShare(id)
 				this.markInvitationAccepted(id, response.data.ocs.data)
+				this.updatePendingSharesCount(Object.keys(this.pendingShares).length)
 				return response.data.ocs.data
 			} catch (error) {
 				console.error(error)
 				showError(t('spreed', 'An error occurred while accepting an invitation'))
+				// Dismiss the loading state, refresh the list
+				await this.getShares()
+				if (this.pendingShares[id]) {
+					Vue.delete(this.pendingShares[id], 'loading')
+				}
 			}
 		},
 
@@ -137,11 +151,26 @@ export const useFederationStore = defineStore('federation', {
 			try {
 				Vue.set(this.pendingShares[id], 'loading', 'reject')
 				await rejectShare(id)
+				this.updatePendingSharesCount(Object.keys(this.pendingShares).length)
 				Vue.delete(this.pendingShares, id)
 			} catch (error) {
 				console.error(error)
 				showError(t('spreed', 'An error occurred while rejecting an invitation'))
+				// Dismiss the loading state, refresh the list
+				await this.getShares()
+				if (this.pendingShares[id]) {
+					Vue.delete(this.pendingShares[id], 'loading')
+				}
 			}
 		},
+
+		/**
+		 * Update pending shares count.
+		 *
+		 * @param value amount of pending shares
+		 */
+		updatePendingSharesCount(value?: string|number) {
+			Vue.set(this, 'pendingSharesCount', value ? +value : 0)
+		},
 	},
 })