[full-ci] Vue3: Update vue-router

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-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-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/fileSideBars.ts

@@ -18,7 +18,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/router/deprecated.ts

@@ -1,4 +1,4 @@
-import VueRouter, { RouteConfig, Route, Location, RouteMeta } from 'vue-router'
+import { RouteConfig, Route, Location, RouteMeta, Router } from 'vue-router'
 import { createLocationSpaces } from './spaces'
 import { createLocationShares } from './shares'
 import { createLocationCommon } from './common'
@@ -100,7 +100,7 @@ export const buildRoutes = (): RouteConfig[] =>
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
   const [first, ...rest] = comparatives.map((c) => {

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

@@ -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',

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

@@ -32,7 +32,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         }
       },
       {
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         name: locationSpacesGeneric.name,
         component: components.Spaces.DriveResolver,
         meta: {

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

@@ -18,7 +18,7 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
     children: [
       {
         name: locationTrashGeneric.name,
-        path: ':driveAliasAndItem*',
+        path: ':driveAliasAndItem(.*)?',
         component: components.Spaces.DriveResolver,
         meta: {
           authContext: 'user',

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

@@ -1,8 +1,10 @@
-import VueRouter, { Location } from 'vue-router'
+import { Location } from 'vue-router'
+import { Router } from 'web-pkg/src/types/router'
 import merge from 'lodash-es/merge'
+import { unref } from 'vue'
 
 export interface ActiveRouteDirectorFunc<T extends string> {
-  (router: VueRouter, ...comparatives: T[]): boolean
+  (router: Router, ...comparatives: T[]): boolean
 }
 
 /**
@@ -13,16 +15,19 @@ export interface ActiveRouteDirectorFunc<T extends string> {
  * @param comparatives
  */
 export const isLocationActive = (
-  router: VueRouter,
+  router: Router,
   ...comparatives: [Location, ...Location[]]
 ): boolean => {
-  const { href: currentHref } = router.resolve(router.currentRoute)
+  // FIXME: router.resolve cleans the path, we don't need it, if we can rely on
+  // router.currentRoute to not have slashs encoded for paths
+  const { href: currentHref } = router.resolve(unref(router.currentRoute))
   return comparatives
     .map((comparative) => {
       const { href: comparativeHref } = router.resolve({
         ...comparative
         // ...(comparative.name && { name: resolveRouteName(comparative.name) })
       })
+
       /**
        * Href might be '/' or '#/' if router is not able to resolve the proper path.
        * This happens if the we don't pass a param which is defined in the route configuration, for example:
@@ -47,7 +52,7 @@ export const isLocationActive = (
 export const isLocationActiveDirector = <T extends string>(
   ...defaultComparatives: [Location, ...Location[]]
 ): ActiveRouteDirectorFunc<T> => {
-  return (router: VueRouter, ...comparatives: T[]): boolean => {
+  return (router: Router, ...comparatives: T[]): boolean => {
     if (!comparatives.length) {
       return isLocationActive(router, ...defaultComparatives)
     }

packages/web-app-files/src/search/sdk/index.ts

@@ -3,7 +3,7 @@ import Preview from './preview'
 import List from './list'
 import { EventBus } from 'web-pkg/src/services/eventBus'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 
 function $gettext(msg) {
   return msg
@@ -14,9 +14,9 @@ export default class Provider extends EventBus implements SearchProvider {
   public readonly previewSearch: SearchPreview
   public readonly listSearch: SearchList
   private readonly store: Store<any>
-  private readonly router: VueRouter
+  private readonly router: Router
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     super()
 
     this.id = 'files.sdk'

packages/web-app-files/src/search/sdk/preview.ts

@@ -3,8 +3,8 @@ import PreviewComponent from '../../components/Search/Preview.vue'
 import { clientService } from 'web-pkg/src/services'
 import { buildResource } from 'web-client/src/helpers'
 import { Cache } from 'web-pkg/src/helpers/cache'
-import { Component } from 'vue'
-import VueRouter from 'vue-router'
+import { Component, unref } from 'vue'
+import { Router } from 'vue-router'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
 
@@ -13,10 +13,10 @@ export const previewSearchLimit = 8
 export default class Preview implements SearchPreview {
   public readonly component: Component
   private readonly cache: Cache<string, SearchResult>
-  private readonly router: VueRouter
+  private readonly router: Router
   private readonly store: Store<any>
 
-  constructor(store: Store<any>, router: VueRouter) {
+  constructor(store: Store<any>, router: Router) {
     this.component = PreviewComponent
     this.router = router
     this.store = store
@@ -63,6 +63,6 @@ export default class Preview implements SearchPreview {
   }
 
   public get available(): boolean {
-    return this.router.currentRoute.name !== 'search-provider-list'
+    return unref(this.router.currentRoute).name !== 'search-provider-list'
   }
 }

packages/web-app-files/src/services/folder/loaderSpace.ts

@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { isLocationPublicActive, isLocationSpacesActive } from '../../router'
 import {
@@ -97,7 +97,7 @@ export class FolderLoaderSpace implements FolderLoader {
         console.error(error)
 
         if (error.statusCode === 401) {
-          return authService.handleAuthError(router.currentRoute)
+          return authService.handleAuthError(unref(router.currentRoute))
         }
       }
     }).restartable()

packages/web-app-files/src/services/folder/loaderTrashbin.ts

@@ -1,5 +1,5 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
-import Router from 'vue-router'
+import { Router } from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { DavProperties } from 'web-client/src/webdav/constants'
 import { isLocationTrashActive } from '../../router'

packages/web-app-files/src/views/FilesDrop.vue

@@ -40,7 +40,7 @@ import { DavProperties, DavProperty } from 'web-client/src/webdav/constants'
 import { createLocationPublic } from '../router'
 
 import ResourceUpload from '../components/AppBar/Upload/ResourceUpload.vue'
-import { defineComponent, getCurrentInstance, onMounted } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted, unref } from 'vue'
 import { useUpload } from 'web-runtime/src/composables/upload'
 import * as uuid from 'uuid'
 import { usePublicLinkPassword, useStore } from 'web-pkg/src/composables'
@@ -152,7 +152,7 @@ export default defineComponent({
         .catch((error) => {
           // likely missing password, redirect to public link password prompt
           if (error.statusCode === 401) {
-            return this.$authService.handleAuthError(this.$router.currentRoute)
+            return this.$authService.handleAuthError(unref(this.$router.currentRoute))
           }
           console.error(error)
           this.errorMessage = error

packages/web-app-files/tests/unit/components/Search/List.spec.ts

@@ -1,5 +1,4 @@
 import { describe } from '@jest/globals'
-// import VueRouter from 'vue-router'
 // import List from 'web-app-files/src/components/Search/List.vue'
 //
 // const stubs = {
@@ -98,7 +97,6 @@ describe('List component', () => {
 //       }
 //     },
 //     store: createStore(files),
-//     router: new VueRouter(),
 //     stubs,
 //     mock: {
 //       webdav: {

packages/web-app-files/tests/unit/router/utils.spec.ts

@@ -3,61 +3,61 @@ import {
   isLocationActiveDirector,
   createLocation
 } from '../../../src/router/utils'
-import VueRouter from 'vue-router'
+import { RouteLocation, Router } from 'vue-router'
+import { mock } from 'jest-mock-extended'
+import { ref } from 'vue'
 
 describe('utils', () => {
   describe('isLocationActive', () => {
     it('returns true if one location is active', () => {
-      const fakeRouter = {
-        currentRoute: { name: 'foo' },
-        resolve: (r) => ({ href: r.name })
-      }
+      const fakeRouter = mock<Router>({
+        currentRoute: ref({ name: 'foo' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
+      })
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' })).toBe(true)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' })).toBe(true)
+      expect(isLocationActive(fakeRouter, { name: 'foo' }, { name: 'bar' })).toBe(true)
     })
 
     it('returns false if all locations inactive', () => {
-      const fakeRouter = {
-        currentRoute: { name: 'foo' },
-        resolve: (r) => ({ href: r.name })
-      }
+      const fakeRouter = mock<Router>({
+        currentRoute: ref({ name: 'foo' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
+      })
 
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' })).toBe(false)
-      expect(isLocationActive(fakeRouter as VueRouter, { name: 'bar' }, { name: 'baz' })).toBe(
-        false
-      )
+      expect(isLocationActive(fakeRouter, { name: 'bar' })).toBe(false)
+      expect(isLocationActive(fakeRouter, { name: 'bar' }, { name: 'baz' })).toBe(false)
     })
   })
 
   describe('isLocationActiveDirector', () => {
     test('director can be created and be used to check active locations', () => {
-      const fakeRouter = {
-        currentRoute: { name: 'unknown' },
-        resolve: (r) => ({ href: r.name })
-      }
+      const fakeRouter = mock<Router>({
+        currentRoute: ref({ name: 'unknown' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
+      })
 
       const isFilesLocationActive = isLocationActiveDirector(
         { name: 'foo' },
         { name: 'bar' },
         { name: 'baz' }
       )
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(false)
+      expect(isFilesLocationActive(fakeRouter)).toBe(false)
 
-      fakeRouter.currentRoute.name = 'bar'
+      fakeRouter.currentRoute.value.name = 'bar'
 
-      expect(isFilesLocationActive(fakeRouter as VueRouter)).toBe(true)
-      expect(isFilesLocationActive(fakeRouter as VueRouter, 'foo', 'bar')).toBe(true)
+      expect(isFilesLocationActive(fakeRouter)).toBe(true)
+      expect(isFilesLocationActive(fakeRouter, 'foo', 'bar')).toBe(true)
     })
 
     test('director closure only allows to check known locations and throws if unknown', () => {
-      const fakeRouter = {
-        currentRoute: { name: 'baz' },
-        resolve: (r) => ({ href: r.name })
-      }
+      const fakeRouter = mock<Router>({
+        currentRoute: ref({ name: 'baz' }),
+        resolve: (r: any) => mock<RouteLocation & { href: string }>({ href: r.name })
+      })
 
       const isFilesLocationActive = isLocationActiveDirector({ name: 'foo' }, { name: 'bar' })
-      expect(() => isFilesLocationActive(fakeRouter as VueRouter, 'unknown')).toThrow()
+      expect(() => isFilesLocationActive(fakeRouter, 'unknown')).toThrow()
     })
   })