diff --git a/changelog/unreleased/change-context-route-name-in-query b/changelog/unreleased/change-context-route-name-in-query new file mode 100644 index 00000000000..afa4483d309 --- /dev/null +++ b/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 diff --git a/packages/web-app-draw-io/src/index.js b/packages/web-app-draw-io/src/index.js index 96e059c72db..57d1654b3f0 100644 --- a/packages/web-app-draw-io/src/index.js +++ b/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, diff --git a/packages/web-app-external/src/index.js b/packages/web-app-external/src/index.js index 5ec3615c1ff..b9a231b5e34 100644 --- a/packages/web-app-external/src/index.js +++ b/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, diff --git a/packages/web-app-files/src/mixins/fileActions.js b/packages/web-app-files/src/mixins/fileActions.js index 549d9e758d4..74cae09e27b 100644 --- a/packages/web-app-files/src/mixins/fileActions.js +++ b/packages/web-app-files/src/mixins/fileActions.js @@ -123,8 +123,7 @@ export default { params: { filePath, fileId, - mode, - contextRouteName: this.$route.name + mode }, query: routeToContextQuery(route) } diff --git a/packages/web-app-markdown-editor/src/index.js b/packages/web-app-markdown-editor/src/index.js index f5f03597983..3fc81a5b369 100644 --- a/packages/web-app-markdown-editor/src/index.js +++ b/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: { diff --git a/packages/web-app-media-viewer/src/index.js b/packages/web-app-media-viewer/src/index.js index 9317f046982..70d5d17e0d4 100644 --- a/packages/web-app-media-viewer/src/index.js +++ b/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: { diff --git a/packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts b/packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts index d266752d5fe..93606584a9a 100644 --- a/packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts +++ b/packages/web-pkg/src/composables/appDefaults/useAppDefaults.ts @@ -1,5 +1,5 @@ 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' @@ -7,7 +7,8 @@ import { FileContext } from './types' import { useAppNavigation, AppNavigationResult, - contextQueryToFileContextProps + contextQueryToFileContextProps, + contextRouteNameKey } from './useAppNavigation' import { useAppConfig, AppConfigResult } from './useAppConfig' import { useAppFileHandling, AppFileHandlingResult } from './useAppFileHandling' @@ -33,14 +34,11 @@ 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(() => { @@ -48,9 +46,17 @@ export function useAppDefaults(options: AppDefaultsOptions): AppDefaultsResult { }) 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) } }) diff --git a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts b/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts index f3c2d078b13..d1d051badf0 100644 --- a/packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts +++ b/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) => { const router = options.router diff --git a/packages/web-runtime/src/router/index.js b/packages/web-runtime/src/router/index.js index 658b1cf189a..43f4df3b55f 100644 --- a/packages/web-runtime/src/router/index.js +++ b/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 }