Merge pull request #5894 from owncloud/router-patch-global

refactor(vue router patch): apply router patch globally

changelog/unreleased/bugfix-router-clean-path

@@ -0,0 +1,9 @@
+Bugfix: Clean router path handling
+
+This patch was already introduced earlier for the files application only.
+In the meantime we found out that this is also needed on different places across the ecosystem.
+
+We've refactored the way how the patch gets applied to the routes: It is now possible to set an individual route's `meta.patchCleanPath` to true.
+
+https://github.com/owncloud/web/pull/5894
+https://github.com/owncloud/web/issues/4595#issuecomment-938587035

packages/web-app-files/src/index.js

@@ -83,39 +83,6 @@ const navItems = [
 const translations = translationsJson
 const quickActions = quickActionsImport
 
-// type: patch
-// temporary patch till we have upgraded web to the latest vue router which make this obsolete
-// this takes care that routes like 'foo/bar/baz' which by default would be converted to 'foo%2Fbar%2Fbaz' stay as they are
-// should immediately go away and be removed after finalizing the update
-const patchRouter = (router) => {
-  // for now we only need the patch on following routes, if needed on more just extend
-  // - files-personal: https://github.com/owncloud/web/issues/1883
-  // - files-personal: https://github.com/owncloud/web/issues/4595
-  // - files-public-list
-  // - files-location-picker
-  const activateForRoutes = ['files-personal', 'files-public-list', 'files-location-picker']
-  const bindMatcher = router.match.bind(router)
-  const cleanPath = (route) =>
-    [
-      ['%2F', '/'],
-      ['//', '/']
-    ].reduce((path, rule) => path.replaceAll(rule[0], rule[1]), route || '')
-
-  router.match = (raw, current, redirectFrom) => {
-    const bindMatch = bindMatcher(raw, current, redirectFrom)
-
-    if (!activateForRoutes.includes(bindMatch.name)) {
-      return bindMatch
-    }
-
-    return {
-      ...bindMatch,
-      path: cleanPath(bindMatch.path),
-      fullPath: cleanPath(bindMatch.fullPath)
-    }
-  }
-}
-
 export default {
   appInfo,
   store,
@@ -124,7 +91,6 @@ export default {
   quickActions,
   translations,
   ready({ router: runtimeRouter, store: runtimeStore }) {
-    patchRouter(runtimeRouter)
     Registry.filterSearch = new FilterSearch(runtimeStore, runtimeRouter)
     Registry.sdkSearch = new SDKSearch(runtimeStore, runtimeRouter)
 

packages/web-app-files/src/routes.js

@@ -35,7 +35,8 @@ export default [
         component: Personal,
         meta: {
           hasBulkActions: true,
-          title: $gettext('All files')
+          title: $gettext('All files'),
+          patchCleanPath: true
         }
       },
       {
@@ -108,7 +109,8 @@ export default [
         meta: {
           auth: false,
           hasBulkActions: true,
-          title: $gettext('Public files')
+          title: $gettext('Public files'),
+          patchCleanPath: true
         }
       }
     ]
@@ -141,7 +143,8 @@ export default [
     },
     meta: {
       verbose: true,
-      auth: false
+      auth: false,
+      patchCleanPath: true
     }
   },
   {

packages/web-app-media-viewer/src/App.vue

@@ -211,8 +211,7 @@ export default {
 
     // keep a local history for this component
     window.addEventListener('popstate', this.handleLocalHistoryEvent)
-
-    const filePath = this.$route.params.filePath
+    const filePath = `/${this.$route.params.filePath.split('/').filter(Boolean).join('/')}`
     await this.$_loader_loadItems(filePath)
     this.setCurrentFile(filePath)
   },

packages/web-app-media-viewer/src/index.js

@@ -4,12 +4,12 @@ import App from './App.vue'
 
 const routes = [
   {
-    path: '/:contextRouteName/:filePath',
+    path: '/:contextRouteName/:filePath*',
     components: {
       app: App
     },
     name: 'media',
-    meta: { auth: false }
+    meta: { auth: false, patchCleanPath: true }
   }
 ]
 

packages/web-runtime/src/router/index.js

@@ -1,3 +1,4 @@
+import get from 'lodash-es/get.js'
 import Vue from 'vue'
 import Router from 'vue-router'
 import LoginPage from '../pages/login.vue'
@@ -93,4 +94,35 @@ router.beforeEach(function (to, from, next) {
   }
 })
 
-export default router
+// type: patch
+// temporary patch till we have upgraded web to the latest vue router which make this obsolete
+// this takes care that routes like 'foo/bar/baz' which by default would be converted to 'foo%2Fbar%2Fbaz' stay as they are
+// should immediately go away and be removed after finalizing the update
+// to apply the patch to a route add meta.patchCleanPath = true to it
+// to patch needs to be enabled on a route level, to do so add meta.patchCleanPath = true property to the route
+const patchRouter = (router) => {
+  const bindMatcher = router.match.bind(router)
+  const cleanPath = (route) =>
+    [
+      ['%2F', '/'],
+      ['//', '/']
+    ].reduce((path, rule) => path.replaceAll(rule[0], rule[1]), route || '')
+
+  router.match = (raw, current, redirectFrom) => {
+    const bindMatch = bindMatcher(raw, current, redirectFrom)
+
+    if (!get(bindMatch, 'meta.patchCleanPath', false)) {
+      return bindMatch
+    }
+
+    return {
+      ...bindMatch,
+      path: cleanPath(bindMatch.path),
+      fullPath: cleanPath(bindMatch.fullPath)
+    }
+  }
+
+  return router
+}
+
+export default patchRouter(router)