[stable28] fix(RoomSelector): reduce bundle size, fix redirecting from sidebar

src/collections.js

@@ -41,8 +41,10 @@ import Vue from 'vue'
 				container.id = 'spreed-room-select'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
+
 				const RoomSelector = () => import('./components/RoomSelector.vue')
 				const ComponentVM = new Vue({
+					el: container,
 					render: h => h(RoomSelector, {
 						props: {
 							// Even if it is used from Talk the Collections menu is
@@ -52,14 +54,14 @@ import Vue from 'vue'
 						},
 					}),
 				})
-				ComponentVM.$mount(container)
+
 				ComponentVM.$root.$on('close', () => {
 					ComponentVM.$el.remove()
 					ComponentVM.$destroy()
 					reject(new Error('User cancelled resource selection'))
 				})
-				ComponentVM.$root.$on('select', (id) => {
-					resolve(id)
+				ComponentVM.$root.$on('select', ({ token }) => {
+					resolve(token)
 					ComponentVM.$el.remove()
 					ComponentVM.$destroy()
 				})

src/components/LeftSidebar/OpenConversationsList/OpenConversationsList.vue

@@ -67,7 +67,7 @@ export default {
 			this.modal = false
 		},
 
-		openConversation(token) {
+		openConversation({ token }) {
 			this.$router.push({ name: 'conversation', params: { token } })
 				.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			this.closeModal()

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageForwarder.vue

@@ -59,6 +59,7 @@
 import Check from 'vue-material-design-icons/Check.vue'
 
 import { showError } from '@nextcloud/dialogs'
+import { generateUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
@@ -92,6 +93,7 @@ export default {
 	data() {
 		return {
 			selectedConversationToken: null,
+			selectedConversationName: null,
 			showForwardedConfirmation: false,
 			forwardedMessageID: '',
 		}
@@ -109,16 +111,12 @@ export default {
 		dialogSubtitle() {
 			return t('spreed', 'Choose a conversation to forward the selected message.')
 		},
-
-		selectedConversationName() {
-			return this.$store.getters?.conversation(this.selectedConversationToken).displayName
-		},
-
 	},
 
 	methods: {
-		async setSelectedConversationToken(token) {
-			this.selectedConversationToken = token
+		async setSelectedConversationToken(conversation) {
+			this.selectedConversationToken = conversation.token
+			this.selectedConversationName = conversation.displayName
 			try {
 				const response = await this.$store.dispatch('forwardMessage', {
 					targetToken: this.selectedConversationToken,
@@ -133,17 +131,28 @@ export default {
 		},
 
 		openConversation() {
+			const isTalkApp = IS_DESKTOP || window.location.pathname.includes('/apps/spreed') || window.location.pathname.includes('/call/')
+
+			if (!isTalkApp) {
+				// Native redirect to Talk from Files sidebar
+				const url = generateUrl('/call/{token}#message_{messageId}', {
+					token: this.selectedConversationToken,
+					messageId: this.forwardedMessageID,
+				})
+				window.open(url, '_blank').focus()
+			} else {
+				this.$router.push({
+					name: 'conversation',
+					hash: `#message_${this.forwardedMessageID}`,
+					params: {
+						token: `${this.selectedConversationToken}`,
+					},
+				}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
+			}
 
-			this.$router.push({
-				name: 'conversation',
-				hash: `#message_${this.forwardedMessageID}`,
-				params: {
-					token: `${this.selectedConversationToken}`,
-				},
-			})
-				.catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			this.showForwardedConfirmation = false
 			this.forwardedMessageID = ''
+			this.$emit('close')
 		},
 
 		handleClose() {

src/components/RoomSelector.spec.js

@@ -134,7 +134,7 @@ describe('RoomSelector.vue', () => {
 		await list.at(1).trigger('click')
 		await wrapper.findComponent(NcButton).vm.$emit('click')
 
-		expect(eventHandler).toHaveBeenCalledWith('token-3')
+		expect(eventHandler).toHaveBeenCalledWith(conversations[1])
 	})
 
 	test('emits close event', async () => {

src/components/RoomSelector.vue

@@ -44,8 +44,8 @@
 					<ul v-if="!loading && availableRooms.length > 0">
 						<li v-for="room in availableRooms"
 							:key="room.token"
-							:class="{selected: selectedRoom === room.token }"
-							@click="selectedRoom=room.token">
+							:class="{selected: selectedRoom?.token === room.token }"
+							@click="selectedRoom = room">
 							<ConversationIcon :item="room" :hide-favorite="false" />
 							<span>{{ room.displayName }}</span>
 						</li>

src/deck.js

@@ -28,35 +28,30 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath, generateUrl } from '@nextcloud/router'
 
-import RoomSelector from './components/RoomSelector.vue'
-
-import { fetchConversation } from './services/conversationsService.js'
 import { postRichObjectToConversation } from './services/messagesService.js'
 
 import '@nextcloud/dialogs/style.css'
 
 (function(OC, OCA, t, n) {
 	/**
 	 * @param {object} card The card object given by the deck app
-	 * @param {string} token The conversation to post to
+	 * @param {object} conversation The conversation object given by the RoomSelector
+	 * @param {string} conversation.token The conversation token
+	 * @param {string} conversation.displayName The conversation display name
 	 */
-	async function postCardToRoom(card, token) {
+	async function postCardToRoom(card, { token, displayName }) {
 		try {
-			const [responsePostCard, responseGetConversation] = await Promise.allSettled([
-				postRichObjectToConversation(token, {
-					objectType: 'deck-card',
-					objectId: card.id,
-					metaData: JSON.stringify(card),
-				}),
-				fetchConversation(token),
-			])
-
-			const messageId = responsePostCard.value.data.ocs.data.id
-			const conversation = responseGetConversation.value.data.ocs.data.displayName
+			const response = await postRichObjectToConversation(token, {
+				objectType: 'deck-card',
+				objectId: card.id,
+				metaData: JSON.stringify(card),
+			})
+
+			const messageId = response.data.ocs.data.id
 			const targetUrl = generateUrl('/call/{token}#message_{messageId}', { token, messageId })
 
 			showSuccess(t('spreed', 'Deck card has been posted to {conversation}')
-				.replace(/\{conversation}/g, `<a target="_blank" class="external" href="${targetUrl}">${escapeHtml(conversation)} ↗</a>`),
+				.replace(/\{conversation}/g, `<a target="_blank" class="external" href="${targetUrl}">${escapeHtml(displayName)} ↗</a>`),
 			{
 				isHTML: true,
 			})
@@ -87,24 +82,26 @@ import '@nextcloud/dialogs/style.css'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
 
-				const ComponentVM = Vue.extend(RoomSelector)
-				const vm = new ComponentVM({
+				const RoomSelector = () => import('./components/RoomSelector.vue')
+				const vm = new Vue({
 					el: container,
-					propsData: {
-						dialogTitle: t('spreed', 'Post to conversation'),
-						showPostableOnly: true,
-					},
+					render: h => h(RoomSelector, {
+						props: {
+							dialogTitle: t('spreed', 'Post to conversation'),
+							showPostableOnly: true,
+						},
+					}),
 				})
 
 				vm.$root.$on('close', () => {
 					vm.$el.remove()
 					vm.$destroy()
 				})
-				vm.$root.$on('select', (token) => {
+				vm.$root.$on('select', (conversation) => {
 					vm.$el.remove()
 					vm.$destroy()
 
-					postCardToRoom(card, token)
+					postCardToRoom(card, conversation)
 				})
 			},
 		})

src/maps.js

@@ -20,26 +20,26 @@
  *
  */
 
+import escapeHtml from 'escape-html'
 import Vue from 'vue'
 
 import { getRequestToken } from '@nextcloud/auth'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath, generateUrl } from '@nextcloud/router'
 
-import RoomSelector from './components/RoomSelector.vue'
-
 import { postRichObjectToConversation } from './services/messagesService.js'
 
 import '@nextcloud/dialogs/style.css'
 
 (function(OC, OCA, t, n) {
 	/**
 	 * @param {object} location Geo location object
-	 * @param {string} token Conversation token to be posted to
-	 * @return {Promise<void>}
+	 * @param {object} conversation The conversation object given by the RoomSelector
+	 * @param {string} conversation.token The conversation token
+	 * @param {string} conversation.displayName The conversation display name
 	 */
-	async function postLocationToRoom(location, token) {
+	async function postLocationToRoom(location, { token, displayName }) {
 		try {
 			const response = await postRichObjectToConversation(token, {
 				objectType: 'geo-location',
@@ -48,9 +48,10 @@ import '@nextcloud/dialogs/style.css'
 			})
 			const messageId = response.data.ocs.data.id
 			const targetUrl = generateUrl('/call/{token}#message_{messageId}', { token, messageId })
-			showSuccess(t('spreed', 'Location has been posted to the selected <a href="{link}">conversation</a>', {
-				link: targetUrl,
-			}), {
+
+			showSuccess(t('spreed', 'Location has been posted to {conversation}')
+				.replace(/\{conversation}/g, `<a target="_blank" class="external" href="${targetUrl}">${escapeHtml(displayName)} ↗</a>`),
+			{
 				isHTML: true,
 			})
 		} catch (exception) {
@@ -80,24 +81,26 @@ import '@nextcloud/dialogs/style.css'
 				const body = document.getElementById('body-user')
 				body.appendChild(container)
 
-				const ComponentVM = Vue.extend(RoomSelector)
-				const vm = new ComponentVM({
+				const RoomSelector = () => import('./components/RoomSelector.vue')
+				const vm = new Vue({
 					el: container,
-					propsData: {
-						dialogTitle: t('spreed', 'Share to conversation'),
-						showPostableOnly: true,
-					},
+					render: h => h(RoomSelector, {
+						props: {
+							dialogTitle: t('spreed', 'Share to conversation'),
+							showPostableOnly: true,
+						},
+					}),
 				})
 
 				vm.$root.$on('close', () => {
 					vm.$el.remove()
 					vm.$destroy()
 				})
-				vm.$root.$on('select', (token) => {
+				vm.$root.$on('select', (conversation) => {
 					vm.$el.remove()
 					vm.$destroy()
 
-					postLocationToRoom(location, token)
+					postLocationToRoom(location, conversation)
 				})
 			},
 		})