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 || !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
  }