Stop encoding sidebar path

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

Author: skjnldsv

cypress/e2e/mixins/oddname.js

@@ -26,13 +26,13 @@ import { randHash } from '../../utils/'
 /**
  * Make a name aimed to break the viewer in case of escaping errors
  *
- * @param {String} realName
- * @returns {String} a name for the file to be uploaded as
+ * @param {string} realName the file original name
+ * @return {string} a name for the file to be uploaded as
  */
 function naughtyFileName(realName) {
 	const ext = realName.split('.').pop()
 	return (
-		'~⛰️ shot of a ${big} mountain`, '
+		'~⛰️ shot of a $[big} mountain`, '
 		+ "realy #1's "
 		+ '" #_+="%2520%27%22%60%25%21%23 was this called '
 		+ realName
@@ -50,7 +50,7 @@ Cypress.on('fail', (error, runnable) => {
 	throw error // throw error to have test still fail
 })
 
-export default function(file, type) {
+export default function(file, type, sidebar = false) {
 	const placedName = naughtyFileName(file)
 
 	// We'll escape all the characters in the name to match it with css
@@ -62,7 +62,7 @@ export default function(file, type) {
 	const folderName
 		= 'Nextcloud "%27%22%60%25%21%23" >`⛰️<' + file + "><` e*'rocks!#?#%~"
 
-	describe(`Open ${file} in viewer with a naughty name`, function() {
+	describe(`Open ${file} in viewer with a naughty name ${sidebar ? 'with sidebar' : ''}`, function() {
 		before(function() {
 			// fail fast
 			if (failsLeft < 0) {
@@ -119,6 +119,24 @@ export default function(file, type) {
 		it('See the menu icon and title on the viewer header', menuOk)
 		it('Does not see navigation arrows', arrowsOK)
 
+		if (sidebar) {
+			it('Open the sidebar', function() {
+				// open the menu
+				cy.get('body > .viewer .modal-header button.action-item__menutoggle').click()
+				// open the sidebar
+				cy.get('.action-button__icon.icon-menu-sidebar').click()
+				cy.get('aside.app-sidebar').should('be.visible')
+				// we hide the sidebar button if opened
+				cy.get('.action-button__icon.icon-menu-sidebar').should('not.exist')
+				// check the sidebar is opened for the correct file
+				cy.get('aside.app-sidebar .app-sidebar-header .app-sidebar-header__maintitle').should('contain', placedName)
+				// check we do not have a preview
+				cy.get('aside.app-sidebar .app-sidebar-header').should('have.class', 'app-sidebar-header--with-figure')
+				cy.get('aside.app-sidebar .app-sidebar-header').should('have.class', 'app-sidebar-header--compact')
+				cy.get('aside.app-sidebar .app-sidebar-header .app-sidebar-header__figure').should('have.attr', 'style').should('contain', 'core/filetypes')
+			})
+		}
+
 		it('Share the folder with a share link and access the share link', function() {
 			cy.createLinkShare(folderName).then((token) => {
 				cy.logout()

cypress/e2e/oddname/oddname-sidebar.cy.js

@@ -0,0 +1,3 @@
+import runTest from '../mixins/oddname.js'
+
+runTest('image.png', 'image/png', true)

src/mixins/PreviewUrl.js

@@ -20,9 +20,10 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { encodePath } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
 import { getToken, isPublic } from '../utils/davUtils.js'
-import { encodeFilePath, getDavPath } from '../utils/fileUtils.js'
+import { getDavPath } from '../utils/fileUtils.js'
 
 export default {
 	computed: {
@@ -73,7 +74,7 @@ export default {
 			if (hasPreview) {
 				// TODO: find a nicer standard way of doing this?
 				if (isPublic()) {
-					return generateUrl(`/apps/files_sharing/publicpreview/${getToken()}?file=${encodeFilePath(filename)}&${searchParams}`)
+					return generateUrl(`/apps/files_sharing/publicpreview/${getToken()}?file=${encodePath(filename)}&${searchParams}`)
 				}
 				return generateUrl(`/core/preview?${searchParams}`)
 			}

src/utils/fileUtils.js

@@ -19,30 +19,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { dirname } from '@nextcloud/paths'
+import { dirname, encodePath } from '@nextcloud/paths'
 import { generateUrl } from '@nextcloud/router'
 import camelcase from 'camelcase'
 
 import { getRootPath, getToken, getUserRoot, isPublic } from './davUtils.js'
 import { isNumber } from './numberUtil.js'
 
-/**
- * Get an url encoded path
- *
- * @param {string} path the full path
- * @return {string} url encoded file path
- */
-const encodeFilePath = function(path) {
-	const pathSections = (path.startsWith('/') ? path : `/${path}`).split('/')
-	let relativePath = ''
-	pathSections.forEach((section) => {
-		if (section !== '') {
-			relativePath += '/' + encodeURIComponent(section)
-		}
-	})
-	return relativePath
-}
-
 /**
  * Extract dir and name from file path
  *
@@ -151,7 +134,7 @@ const getDavPath = function({ filename, basename, source = '' }) {
 	if (filename.startsWith(prefixUser)) {
 		filename = filename.slice(prefixUser.length)
 	}
-	return getRootPath() + encodeFilePath(filename)
+	return getRootPath() + encodePath(filename)
 }
 
-export { encodeFilePath, extractFilePaths, sortCompare, genFileInfo, getDavPath }
+export { extractFilePaths, sortCompare, genFileInfo, getDavPath }

src/views/Viewer.vue

@@ -284,7 +284,8 @@ export default {
 			return this.Sidebar && this.Sidebar.file
 		},
 		sidebarOpenFilePath() {
-			return this.currentFile?.davPath?.split(getUserRoot())[1]
+			const relativePath = this.currentFile?.davPath?.split(getUserRoot())[1]
+			return relativePath?.split('/')?.map(decodeURIComponent)?.join('/')
 		},
 
 		/**