Remove contextRouteName from app params and add it to the query instead

changelog/unreleased/change-context-route-name-in-query

@@ -0,0 +1,8 @@
+Change: App context route to query instead of params
+
+We've moved app context information (where you get redirected
+when you close an app) into the query instead of a regular
+param. This relocates this information further to the back
+of the url where it's less confusing for users.
+
+https://github.com/owncloud/web/pull/6622

packages/web-app-draw-io/src/index.js

@@ -4,7 +4,7 @@ import App from './App.vue'
 const routes = [
   {
     name: 'draw-io',
-    path: '/:contextRouteName/:filePath*',
+    path: '/:filePath*',
     component: App,
     meta: {
       auth: false,

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

@@ -15,7 +15,7 @@ const appInfo = {
 const routes = [
   {
     name: 'apps',
-    path: '/:contextRouteName/:fileId/:appName?',
+    path: '/:fileId/:appName?',
     component: App,
     meta: {
       auth: false,

packages/web-app-files/src/mixins/fileActions.js

@@ -124,7 +124,6 @@ export default {
           filePath,
           fileId,
           mode,
-          contextRouteName: this.$route.name
         },
         query: routeToContextQuery(route)
       }

packages/web-app-markdown-editor/src/index.js

@@ -3,7 +3,7 @@ import translations from '../l10n/translations'
 
 const routes = [
   {
-    path: '/:contextRouteName/:filePath*',
+    path: '/:filePath*',
     component: App,
     name: 'markdown-editor',
     meta: {

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

@@ -8,7 +8,7 @@ function $gettext(msg) {
 
 const routes = [
   {
-    path: '/:contextRouteName/:filePath*',
+    path: '/:filePath*',
     component: App,
     name: 'media',
     meta: {

packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts

@@ -1,13 +1,14 @@
 import { computed, unref, Ref } from '@vue/composition-api'
-import { useRouter } from '../router'
+import { useRouter, useRoute } from '../router'
 import { useStore } from '../store'
 import { ClientService, clientService as defaultClientService } from '../../services'
 
 import { FileContext } from './types'
 import {
   useAppNavigation,
   AppNavigationResult,
-  contextQueryToFileContextProps
+  contextQueryToFileContextProps,
+  contextRouteNameKey
 } from './useAppNavigation'
 import { useAppConfig, AppConfigResult } from './useAppConfig'
 import { useAppFileHandling, AppFileHandlingResult } from './useAppFileHandling'
@@ -33,24 +34,29 @@ type AppDefaultsResult = AppConfigResult &
 export function useAppDefaults(options: AppDefaultsOptions): AppDefaultsResult {
   const router = useRouter()
   const store = useStore()
+  const currentRoute = useRoute()
   const clientService = options.clientService || defaultClientService
 
-  const currentRoute = computed(() => {
-    return router.currentRoute
-  })
-
   const isPublicLinkContext = computed(() => {
-    return unref(currentRoute).params.contextRouteName === 'files-public-files'
+    return unref(currentRoute).query[contextRouteNameKey] === 'files-public-files'
   })
 
   const publicLinkPassword = computed(() => {
     return store.getters['Files/publicLinkPassword']
   })
 
   const currentFileContext = computed((): FileContext => {
+    const queryItemAsString = (queryItem: string | string[]) => {
+      if (Array.isArray(queryItem)) {
+        return queryItem[0]
+      }
+
+      return queryItem
+    }
+
     return {
       path: `/${unref(currentRoute).params.filePath.split('/').filter(Boolean).join('/')}`,
-      routeName: unref(currentRoute).params.contextRouteName,
+      routeName: queryItemAsString(unref(currentRoute).query[contextRouteNameKey]),
       ...contextQueryToFileContextProps(unref(currentRoute).query)
     }
   })

packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts

@@ -15,6 +15,7 @@ export interface AppNavigationResult {
   closeApp(): void
 }
 
+export const contextRouteNameKey = 'contextRouteName'
 const contextRouteParamsKey = 'contextRouteParams'
 const contextRouteQueryKey = 'contextRouteQuery'
 
@@ -36,19 +37,29 @@ export const routeToContextQuery = (location: Location): LocationQuery => {
   }
 
   return {
+    [contextRouteNameKey]: location.name,
     [contextRouteParamsKey]: params,
     [contextRouteQueryKey]: contextQuery
   } as any
 }
 export const contextQueryToFileContextProps = (
   query: LocationQuery
-): { routeParams: LocationParams; routeQuery: LocationQuery } => {
+): { routeName: string, routeParams: LocationParams; routeQuery: LocationQuery } => {
   return {
+    routeName: queryItemAsString(query[contextRouteNameKey]),
     routeParams: query[contextRouteParamsKey] as any,
     routeQuery: query[contextRouteQueryKey] as any
   }
 }
 
+const queryItemAsString = (queryItem: string | string[]) => {
+  if (Array.isArray(queryItem)) {
+    return queryItem[0]
+  }
+
+  return queryItem
+}
+
 export function useAppNavigation(options: AppNavigationOptions): AppNavigationResult {
   const navigateToContext = (context: MaybeRef<FileContext>) => {
     const router = options.router

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

@@ -175,11 +175,12 @@ const isAuthRequired = (router, to) => {
    * The contextRouteName in routes is used to give applications additional context where the new route was triggered from.
    * This means that the new route needs to fulfill both its own auth requirements and the auth requirements from the context route.
    */
-  if (!to.params?.contextRouteName) {
+  const contextRouteNameKey = 'contextRouteName'
+  if (!to.query?[contextRouteNameKey]) {
     return false
   }
 
-  const contextRoute = router.getRoutes().find((r) => r.name === to.params.contextRouteName)
+  const contextRoute = router.getRoutes().find((r) => r.name === to.query[contextRouteNameKey])
   if (contextRoute) {
     return contextRoute.meta?.auth !== false
   }