Encode dav path segments for direct preview

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

package-lock.json

@@ -4307,6 +4307,15 @@
 				}
 			}
 		},
+		"@nextcloud/paths": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/@nextcloud/paths/-/paths-2.0.0.tgz",
+			"integrity": "sha512-JhrZM8Cz/X6+Q98PinkCua4W2UPROpkVFXq7S3Zzm/JmHEe6bH7zzHfK6VS7twxpXwWIkjLkH/K0MUuLpY9/8g==",
+			"dev": true,
+			"requires": {
+				"core-js": "^3.6.4"
+			}
+		},
 		"@nextcloud/router": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.0.0.tgz",
@@ -5489,7 +5498,8 @@
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
 					"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-					"dev": true
+					"dev": true,
+					"optional": true
 				},
 				"fs-extra": {
 					"version": "7.0.1",
@@ -5632,6 +5642,7 @@
 					"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
 					"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
 					"dev": true,
+					"optional": true,
 					"requires": {
 						"chalk": "^4.1.0",
 						"hash-sum": "^2.0.0",
@@ -5643,6 +5654,7 @@
 							"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
 							"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"ansi-styles": "^4.1.0",
 								"supports-color": "^7.1.0"
@@ -5652,13 +5664,15 @@
 							"version": "4.0.0",
 							"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 							"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-							"dev": true
+							"dev": true,
+							"optional": true
 						},
 						"loader-utils": {
 							"version": "2.0.0",
 							"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
 							"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"big.js": "^5.2.2",
 								"emojis-list": "^3.0.0",
@@ -5670,6 +5684,7 @@
 							"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 							"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 							"dev": true,
+							"optional": true,
 							"requires": {
 								"has-flag": "^4.0.0"
 							}
@@ -15810,12 +15825,18 @@
 			"integrity": "sha512-GItjPWV4O53CNRPxdRegjEpZUM2ZV1mun2gVM/tLr3Nc2WzchgjAEzHjLxWomdW7kRv0sFJNS20udYJ2wEX76Q==",
 			"requires": {
 				"@nextcloud/axios": "^1.5.0",
+				"@nextcloud/browserslist-config": "^1.0.0",
 				"@nextcloud/router": "^1.2.0",
 				"@nextcloud/vue": "^3.1.2",
 				"lodash": "^4.17.20",
 				"vue": "^2.6.12"
 			},
 			"dependencies": {
+				"@nextcloud/browserslist-config": {
+					"version": "1.0.0",
+					"resolved": "https://registry.npmjs.org/@nextcloud/browserslist-config/-/browserslist-config-1.0.0.tgz",
+					"integrity": "sha512-f+sKpdLZXkODV+OY39K1M+Spmd4RgxmtEXmNn4Bviv4R7uBFHXuw+JX9ZdfDeOryfHjJ/TRQxQEp0GMpBwZFUw=="
+				},
 				"@nextcloud/router": {
 					"version": "1.2.0",
 					"resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-1.2.0.tgz",

package.json

@@ -27,6 +27,7 @@
 		"@nextcloud/initial-state": "^1.2.0",
 		"@nextcloud/l10n": "^1.4.1",
 		"@nextcloud/moment": "^1.1.1",
+		"@nextcloud/paths": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^3.9.0",
 		"@nextcloud/vue-dashboard": "^1.1.0",

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js

@@ -221,8 +221,8 @@ describe('FilePreview.vue', () => {
 		describe('gif rendering', () => {
 			beforeEach(() => {
 				propsData.mimetype = 'image/gif'
-				propsData.name = 'test.gif'
-				propsData.path = 'path/to/test.gif'
+				propsData.name = 'test %20.gif'
+				propsData.path = 'path/to/test %20.gif'
 
 				loadState.mockImplementation((app, key) => {
 					if (app === 'core' && key === 'capabilities') {
@@ -252,12 +252,12 @@ describe('FilePreview.vue', () => {
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
-					.toBe(generateRemoteUrl('dav/files/current-user-id/path/to/test.gif'))
+					.toBe(generateRemoteUrl('dav/files/current-user-id') + '/path/to/test%20%2520.gif')
 			})
 
 			test('directly renders small GIF files (absolute path)', async() => {
 				propsData.size = 128
-				propsData.path = '/path/to/test.gif'
+				propsData.path = '/path/to/test %20.gif'
 
 				const wrapper = shallowMount(FilePreview, {
 					localVue,
@@ -269,7 +269,7 @@ describe('FilePreview.vue', () => {
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
-					.toBe(generateRemoteUrl('dav/files/current-user-id/path/to/test.gif'))
+					.toBe(generateRemoteUrl('dav/files/current-user-id') + '/path/to/test%20%2520.gif')
 			})
 
 			test('directly renders small GIF files for guests', async() => {
@@ -287,7 +287,7 @@ describe('FilePreview.vue', () => {
 
 				expect(wrapper.element.tagName).toBe('A')
 				expect(wrapper.find('img').attributes('src'))
-					.toBe(propsData.link + '/download/test.gif')
+					.toBe(propsData.link + '/download/test%20%2520.gif')
 			})
 
 			test('renders static preview for big GIF files', async() => {

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -77,6 +77,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Close from 'vue-material-design-icons/Close'
 import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline'
 import { getCapabilities } from '@nextcloud/capabilities'
+import { encodePath } from '@nextcloud/paths'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -289,10 +290,10 @@ export default {
 				// return direct image
 				if (userId === null) {
 					// guest mode, use public link download URL
-					return this.link + '/download/' + this.name
+					return this.link + '/download/' + encodePath(this.name)
 				} else {
 					// use direct DAV URL
-					return generateRemoteUrl(`dav/files/${userId}`) + this.internalAbsolutePath
+					return generateRemoteUrl(`dav/files/${userId}`) + encodePath(this.internalAbsolutePath)
 				}
 			}