Merge pull request #8215 from owncloud/vue3-vue-router

[full-ci] Vue3: Update vue-router

package.json

@@ -46,7 +46,8 @@
     "caf": "*",
     "portal-vue": "*",
     "uuid": "*",
-    "vue-demi": "*"
+    "vue-demi": "*",
+    "vue-router": "*"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-default">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -18,7 +18,7 @@ exports[`OcBreadcrumb displays all items 1`] = `
       <!--v-if-->
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -38,13 +38,13 @@ exports[`OcBreadcrumb displays all items 1`] = `
     <oc-drop-stub dropid="oc-drop-2" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">Deep</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
           <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">First folder</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
         </li>
       </ol>
     </oc-drop-stub>
@@ -56,7 +56,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
 <nav class="oc-breadcrumb oc-breadcrumb-lead">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>First folder</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -70,7 +70,7 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
       <!--v-if-->
     </li>
     <li class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
-      <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">
+      <router-link-stub tag="a" to="[object Object]">
         <span>Deep</span>
       </router-link-stub>
       <oc-icon-stub accessiblelabel="" class="oc-mx-xs" color="var(--oc-color-text-default)" filltype="line" name="arrow-right-s" size="medium" type="span" variation="passive"></oc-icon-stub>
@@ -90,13 +90,13 @@ exports[`OcBreadcrumb sets correct variation 1`] = `
     <oc-drop-stub dropid="oc-drop-1" mode="click" paddingsize="medium" position="bottom-start" toggle="">
       <ol>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">Deep</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">Deep</router-link-stub>
         </li>
         <li>
           <oc-button-stub appearance="raw" gapsize="medium" justifycontent="left" size="medium" submit="button" type="button" variation="passive">Subfolder</oc-button-stub>
         </li>
         <li>
-          <router-link-stub ariacurrentvalue="page" event="click" tag="a" to="[object Object]">First folder</router-link-stub>
+          <router-link-stub tag="a" to="[object Object]">First folder</router-link-stub>
         </li>
       </ol>
     </oc-drop-stub>

packages/design-system/src/directives/OcTooltip.ts

@@ -47,14 +47,14 @@ export const destroy = (_tippy) => {
   }
 }
 
-const initOrUpdate = (el, { value = {} }: any, { elm }) => {
+const initOrUpdate = (el, { value = {} }: any) => {
   if (Object.prototype.toString.call(value) !== '[object Object]') {
     value = { content: value }
   }
 
-  if (value.content !== 0 && !value.content) {
-    destroy(elm.tooltip)
-    elm.tooltip = null
+  if ((value.content !== 0 && !value.content) || value.content === '') {
+    destroy(el.tooltip)
+    el.tooltip = null
     return
   }
 
@@ -69,20 +69,20 @@ const initOrUpdate = (el, { value = {} }: any, { elm }) => {
     value
   ])
 
-  if (!elm.tooltip) {
-    elm.tooltip = tippy(el, {
+  if (!el.tooltip) {
+    el.tooltip = tippy(el, {
       ...props,
       plugins: [hideOnEsc, ariaHidden]
     })
     return
   }
 
-  elm.tooltip.setProps(props)
+  el.tooltip.setProps(props)
 }
 
 export default {
   name: 'OcTooltip',
   beforeMount: initOrUpdate,
   updated: initOrUpdate,
-  unmounted: (el, binding, { elm }) => destroy(elm.tooltip)
+  unmounted: (el, binding) => destroy(el.tooltip)
 }

packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts

@@ -4,10 +4,12 @@ import {
   defaultComponentMocks,
   defaultPlugins,
   defaultStoreMockOptions,
+  RouteLocation,
   shallowMount
 } from 'web-test-helpers'
 import { eventBus } from 'web-pkg'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
+import { mock } from 'jest-mock-extended'
 
 const stubSelectors = {
   ocBreadcrumb: 'oc-breadcrumb-stub',
@@ -135,7 +137,7 @@ function getWrapper({ propsData = {} } = {}) {
         mocks: {
           ...defaultComponentMocks({
             gettext: false,
-            currentRoute: { query: { app: 'admin-settings' } }
+            currentRoute: mock<RouteLocation>({ query: { app: 'admin-settings' } })
           })
         }
       }

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

@@ -4,7 +4,7 @@ import App from './App.vue'
 const routes = [
   {
     name: 'draw-io',
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     meta: {
       authContext: 'hybrid',

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

@@ -10,7 +10,7 @@ const appInfo = {
 const routes = [
   {
     name: 'apps',
-    path: '/:driveAliasAndItem*',
+    path: '/:driveAliasAndItem(.*)?',
     component: App,
     meta: {
       authContext: 'hybrid',

packages/web-app-external/tests/unit/app.spec.ts

@@ -10,6 +10,7 @@ import { FileContext, useAppDefaults } from 'web-pkg/src/composables/appDefaults
 import { useAppDefaultsMock } from 'web-test-helpers/src/mocks/useAppDefaultsMock'
 import { ref } from 'vue'
 import { mock } from 'jest-mock-extended'
+import { RouteLocation } from 'web-test-helpers'
 
 jest.mock('web-pkg/src/composables/appDefaults', () => {
   const { queryItemAsString } = jest.requireActual('web-pkg/src/composables/appDefaults')
@@ -145,7 +146,7 @@ function createShallowMountWrapper(makeRequest = jest.fn().mockResolvedValue({ s
         mocks: {
           ...defaultComponentMocks({
             gettext: false,
-            currentRoute: { query: { app: 'exampleApp' } }
+            currentRoute: mock<RouteLocation>({ query: { app: 'exampleApp' } })
           })
         }
       }

packages/web-app-files/package.json

@@ -25,7 +25,7 @@
     "uuid": "^9.0.0",
     "vue-concurrency": "4.0.0",
     "vue-gettext": "2.1.12",
-    "vue-router": "3.6.5",
+    "vue-router": "4.1.6",
     "vuex": "4.1.0",
     "web-app-files": "workspace:*",
     "web-app-search": "workspace:*",

packages/web-app-files/src/composables/upload/useUploadHelpers.ts

@@ -1,4 +1,4 @@
-import { Route } from 'vue-router'
+import { RouteLocation } from 'vue-router'
 import { UppyResource } from 'web-runtime/src/composables/upload'
 import { useRoute } from 'web-pkg/src/composables'
 import { ComputedRef, Ref, unref } from 'vue'
@@ -20,7 +20,7 @@ interface UploadHelpersResult {
 
 interface inputFileOptions {
   uppyService: UppyService
-  route: Ref<Route>
+  route: Ref<RouteLocation>
   space: Ref<SpaceResource>
   currentFolder: Ref<string>
   currentFolderId?: Ref<string | number>
@@ -108,7 +108,7 @@ const inputFilesToUppyFiles = ({
           uploadId: uuid.v4(),
           topLevelFolderId,
           // route data
-          routeName: name,
+          routeName: name as string,
           routeDriveAliasAndItem: (params as any)?.driveAliasAndItem || '',
           routeShareId: (query as any)?.shareId || ''
         }

packages/web-app-files/src/fileSideBars.ts

@@ -19,7 +19,7 @@ import { spaceRoleEditor, spaceRoleManager } from 'web-client/src/helpers/share'
 import { Panel } from '../../web-pkg/src/components/sideBar'
 
 import { Resource, User } from 'web-client'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 
 function $gettext(msg: string): string {
   return msg

packages/web-app-files/src/helpers/breadcrumbs.ts

@@ -1,16 +1,16 @@
 import { eventBus } from 'web-pkg/src/services/eventBus'
-import { Location } from 'vue-router'
+import { RouteLocation } from 'vue-router'
 import omit from 'lodash-es/omit'
 
 export interface BreadcrumbItem {
   text: string
-  to?: Location
+  to?: RouteLocation
   allowContextActions?: boolean
   onClick?: () => void
 }
 
 export const breadcrumbsFromPath = (
-  currentRoute: Location,
+  currentRoute: RouteLocation,
   resourcePath: string
 ): BreadcrumbItem[] => {
   const pathSplit = (p = '') => p.split('/').filter(Boolean)

packages/web-app-files/src/router/common.ts

@@ -1,10 +1,10 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, $gettext, isLocationActiveDirector } from './utils'
 
 type commonTypes = 'files-common-favorites' | 'files-common-search'
 
-export const createLocationCommon = (name: commonTypes, location = {}): Location =>
+export const createLocationCommon = (name: commonTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationFavorites = createLocationCommon('files-common-favorites')
@@ -15,7 +15,7 @@ export const isLocationCommonActive = isLocationActiveDirector<commonTypes>(
   locationSearch
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/search',
     component: components.App,

packages/web-app-files/src/router/deprecated.ts

@@ -1,4 +1,11 @@
-import VueRouter, { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import {
+  RouteRecordRaw,
+  RouteLocationNamedRaw,
+  RouteMeta,
+  Router,
+  RouteLocationPathRaw,
+  RouteLocationRaw
+} from 'vue-router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -16,8 +23,8 @@ import { urlJoin } from 'web-client/src/utils'
 const deprecatedRedirect = (routeConfig: {
   path: string
   meta?: RouteMeta
-  redirect: (to: Route) => Location
-}): RouteConfig => {
+  redirect: (to: RouteLocationRaw) => Partial<RouteLocationPathRaw & RouteLocationNamedRaw>
+}): RouteRecordRaw => {
   return {
     meta: { ...routeConfig.meta, authContext: 'anonymous' }, // authContext belongs to the redirect target, not to the redirect itself.
     path: routeConfig.path,
@@ -26,7 +33,7 @@ const deprecatedRedirect = (routeConfig: {
 
       console.warn(
         `route "${routeConfig.path}" is deprecated, use "${
-          location.path || location.name
+          String(location.path) || String(location.name)
         }" instead.`
       )
 
@@ -39,7 +46,7 @@ const deprecatedRedirect = (routeConfig: {
  * listed routes only exist to keep backwards compatibility intact,
  * all routes written in  a flat syntax to keep them readable.
  */
-export const buildRoutes = (): RouteConfig[] =>
+export const buildRoutes = (): RouteLocationNamedRaw[] =>
   [
     {
       path: '/list',
@@ -50,7 +57,7 @@ export const buildRoutes = (): RouteConfig[] =>
         })
     },
     {
-      path: '/list/all/:item*',
+      path: '/list/all/:item(.*)',
       redirect: (to) =>
         createLocationSpaces('files-spaces-generic', {
           ...to,
@@ -81,7 +88,7 @@ export const buildRoutes = (): RouteConfig[] =>
       redirect: (to) => createLocationTrash('files-trash-generic', to)
     },
     {
-      path: '/public/list/:item*',
+      path: '/public/list/:item(.*)',
       redirect: (to) => createLocationPublic('files-public-link', to)
     },
     {
@@ -100,8 +107,8 @@ export const buildRoutes = (): RouteConfig[] =>
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
-  ...comparatives: [Location, ...Location[]]
+  router: Router,
+  ...comparatives: [RouteLocationNamedRaw, ...RouteLocationNamedRaw[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {
     const newName = {

packages/web-app-files/src/router/index.ts

@@ -1,4 +1,4 @@
-import { RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw } from 'vue-router'
 
 import {
   buildRoutes as buildCommonRoutes,
@@ -30,11 +30,12 @@ import {
 import type { ActiveRouteDirectorFunc } from './utils'
 
 const ROOT_ROUTE = {
+  name: 'root',
   path: '/',
   redirect: (to) => createLocationSpaces('files-spaces-generic', to)
 }
 
-const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+const buildRoutes = (components: RouteComponents): RouteLocationNamedRaw[] => [
   ROOT_ROUTE,
   ...buildCommonRoutes(components),
   ...buildSharesRoutes(components),

packages/web-app-files/src/router/public.ts

@@ -1,10 +1,10 @@
 import { RouteComponents } from './router'
-import { Location, RouteConfig } from 'vue-router'
+import { RouteLocationNamedRaw, RouteRecordRaw } from 'vue-router'
 import { createLocation, isLocationActiveDirector, $gettext } from './utils'
 
 type shareTypes = 'files-public-link' | 'files-public-upload'
 
-export const createLocationPublic = (name: shareTypes, location = {}): Location =>
+export const createLocationPublic = (name: shareTypes, location = {}): RouteLocationNamedRaw =>
   createLocation(name, location)
 
 export const locationPublicLink = createLocationPublic('files-public-link')
@@ -15,7 +15,7 @@ export const isLocationPublicActive = isLocationActiveDirector<shareTypes>(
   locationPublicUpload
 )
 
-export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
+export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
   {
     path: '/link',
     component: components.App,
@@ -25,7 +25,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
     children: [
       {
         name: locationPublicLink.name,
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'publicLink',