Merge pull request #11511 from owncloud/renovate/vue-monorepo

chore(deps): update vue monorepo to v3.5.0

package.json

@@ -52,8 +52,8 @@
     "@vitejs/plugin-vue": "5.1.3",
     "@vitest/coverage-v8": "2.0.3",
     "@vitest/web-worker": "2.0.5",
-    "@vue/compiler-dom": "3.4.38",
-    "@vue/compiler-sfc": "3.4.38",
+    "@vue/compiler-dom": "3.5.4",
+    "@vue/compiler-sfc": "3.5.4",
     "@vue/test-utils": "2.4.5",
     "browserslist-to-esbuild": "^2.0.0",
     "browserslist-useragent-regexp": "^4.0.0",
@@ -87,7 +87,7 @@
     "vitest": "2.0.5",
     "vue-demi": "0.14.10",
     "vue-tsc": "2.0.24",
-    "vue": "3.4.38",
+    "vue": "3.5.4",
     "vue3-gettext": "2.4.0"
   },
   "engines": {

packages/design-system/package.json

@@ -116,7 +116,7 @@
     "lodash-es": "4.17.21",
     "luxon": "3.5.0",
     "vue-router": "4.2.5",
-    "vue": "3.4.38",
+    "vue": "3.5.4",
     "vue3-gettext": "2.4.0"
   },
   "engines": {

packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, unref, watch } from 'vue'
+import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
@@ -36,7 +36,7 @@ export default defineComponent({
     const { $gettext, $ngettext } = useGettext()
     const userSettingsStore = useUserSettingsStore()
 
-    const selectedOptions = ref<Group[]>([])
+    const selectedOptions: Ref<Group[]> = ref([])
     const changeSelectedGroupOption = (options: Group[]) => {
       selectedOptions.value = options
     }

packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, unref, watch } from 'vue'
+import { defineComponent, PropType, Ref, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/graph/generated'
 import GroupSelect from './GroupSelect.vue'
@@ -36,7 +36,7 @@ export default defineComponent({
     const { $gettext, $ngettext } = useGettext()
     const userSettingsStore = useUserSettingsStore()
 
-    const selectedOptions = ref<Group[]>([])
+    const selectedOptions: Ref<Group[]> = ref([])
     const changeSelectedGroupOption = (options: Group[]) => {
       selectedOptions.value = options
     }

packages/web-app-files/tests/unit/components/AppBar/CreateAndUpload.spec.ts

@@ -14,7 +14,7 @@ import {
 import { eventBus, UppyResource } from '@ownclouders/web-pkg'
 import { defaultPlugins, shallowMount, defaultComponentMocks } from 'web-test-helpers'
 import { RouteLocation } from 'vue-router'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { OcButton } from 'design-system/src/components'
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
@@ -197,11 +197,9 @@ function getWrapper({
   const { requestExtensions } = useExtensionRegistry()
   vi.mocked(requestExtensions).mockReturnValue([])
 
-  vi.mocked(useFileActionsCreateNewFile).mockReturnValue(
-    mock<ReturnType<typeof useFileActionsCreateNewFile>>({
-      actions: ref(createActions)
-    })
-  )
+  const useFileActionsCreateNewFileMock = mock<ReturnType<typeof useFileActionsCreateNewFile>>()
+  useFileActionsCreateNewFileMock.actions = computed(() => createActions)
+  vi.mocked(useFileActionsCreateNewFile).mockReturnValue(useFileActionsCreateNewFileMock)
 
   const pasteActionHandler = vi.fn()
   vi.mocked(useFileActionsPaste).mockReturnValue(

packages/web-app-files/tests/unit/components/Spaces/SpaceContextActions.spec.ts

@@ -32,7 +32,9 @@ describe('SpaceContextActions', () => {
 })
 
 function getWrapper(space: SpaceResource) {
-  const mocks = defaultComponentMocks({ currentRoute: mock<RouteLocation>({ path: '/files' }) })
+  const mocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ path: '/files', name: '' })
+  })
   mocks.$previewService.getSupportedMimeTypes.mockReturnValue([])
   return {
     wrapper: mount(SpaceContextActions, {

packages/web-app-files/tests/unit/search/sdk.spec.ts

@@ -2,7 +2,7 @@ import { SDKSearch } from '../../../src/search'
 import { RouteLocation, Router } from 'vue-router'
 import { mock } from 'vitest-mock-extended'
 import { ref } from 'vue'
-import { createTestingPinia } from 'web-test-helpers/src'
+import { createTestingPinia, writable } from 'web-test-helpers/src'
 import { ConfigStore, useCapabilityStore } from '@ownclouders/web-pkg'
 
 const getStore = (reports: string[] = []) => {
@@ -25,11 +25,12 @@ describe('SDKProvider', () => {
         { route: 'search-provider-list' },
         { route: 'bar', available: true }
       ].forEach((v) => {
+        const router = mock<Router>()
+        writable(router).currentRoute = ref(mock<RouteLocation>({ name: v.route }))
+
         const search = new SDKSearch(
           getStore(['search-files']),
-          mock<Router>({
-            currentRoute: ref(mock<RouteLocation>({ name: v.route }))
-          }),
+          router,
           vi.fn(),
           mock<ConfigStore>()
         )

packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts

@@ -317,7 +317,7 @@ function getMountedWrapper({
   props?: PartialComponentProps<typeof GenericSpace>
   files?: Resource[]
   loading?: boolean
-  currentRoute?: Partial<RouteLocation>
+  currentRoute?: { name?: string; path?: string }
   currentFolder?: Resource
   runningOnEos?: boolean
   space?: SpaceResource

packages/web-app-files/tests/unit/views/spaces/Projects.spec.ts

@@ -92,8 +92,6 @@ describe('Projects view', () => {
       const spaces = spacesResources
       const { wrapper } = getMountedWrapper({ spaces })
       await wrapper.vm.loadResourcesTask.last
-      // "space" is undefined for "space-context-actions", seems to be a bug because it's definitely not
-      // {{ space }} -> undefined, {{ space.id }} -> "1"
       expect(wrapper.html()).toMatchSnapshot()
       expect(wrapper.find('.no-content-message').exists()).toBeFalsy()
       expect(wrapper.find('.spaces-list').exists()).toBeTruthy()

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -30,7 +30,7 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <div class="resource-table" selected-ids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" is-side-bar-open="false" view-size="NaN"></div>
+        <div class="resource-table" selected-ids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="name" sort-dir="asc" header-position="0" is-side-bar-open="false" view-size="1"></div>
       </div>
     </div>
   </div>

packages/web-pkg/package.json

@@ -58,7 +58,7 @@
     "@uppy/tus": "^3.1.0",
     "@uppy/utils": "^5.3.0",
     "@uppy/xhr-upload": "^3.0.1",
-    "@vue/shared": "3.4.38",
+    "@vue/shared": "3.5.4",
     "@vueuse/core": "^11.0.0",
     "axios": "1.7.7",
     "deepmerge": "^4.2.2",

packages/web-pkg/src/components/PortalTarget.vue

@@ -15,7 +15,7 @@ export default defineComponent({
     ...PortalTargetVue.props
   },
   setup(props) {
-    const properties = computed(() => props)
+    const properties = computed<typeof PortalTargetVue.props>(() => props)
     onMounted(() => {
       eventBus.publish(PortalTargetEventTopics.mounted, props)
     })

packages/web-pkg/tests/unit/components/AppBar/AppBar.spec.ts

@@ -70,7 +70,7 @@ describe('AppBar component', () => {
           [],
           {},
           { breadcrumbs: [breadcrumbItems[0]] },
-          mock<RouteLocation>(),
+          mock<RouteLocation>({ name: '' }),
           true
         )
         expect(wrapper.find(selectors.ocBreadcrumbStub).exists()).toBeFalsy()

packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts

@@ -16,7 +16,7 @@ import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDr
 import { eventBus } from '../../../../src/services/eventBus'
 import { SideBarEventTopics } from '../../../../src/composables/sideBar'
 import { mock } from 'vitest-mock-extended'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { Identity } from '@ownclouders/web-client/graph/generated'
 import { describe } from 'vitest'
 import { useFileActionsRename } from '../../../../src/composables/actions/files'
@@ -645,11 +645,11 @@ function getMountedWrapper({
     canBeOpenedWithSecureView: () => canBeOpenedWithSecureView
   })
 
-  vi.mocked(useFileActionsRename).mockReturnValue(
-    mock<ReturnType<typeof useFileActionsRename>>({
-      actions: ref([mock<FileAction>({ isVisible: () => hasRenameAction })])
-    })
-  )
+  const useFileActionsRenameMock = mock<ReturnType<typeof useFileActionsRename>>()
+  useFileActionsRenameMock.actions = computed(() => [
+    mock<FileAction>({ isVisible: () => hasRenameAction })
+  ])
+  vi.mocked(useFileActionsRename).mockReturnValue(useFileActionsRenameMock)
 
   return {
     wrapper: mount(ResourceTable, {

packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts

@@ -8,7 +8,6 @@ import {
 } from 'web-test-helpers'
 import { queryItemAsString } from '../../../../src/composables/appDefaults'
 import { mock } from 'vitest-mock-extended'
-import { unref } from 'vue'
 
 vi.mock('../../../../src/composables/appDefaults', () => ({
   appDefaults: vi.fn(),
@@ -41,11 +40,13 @@ describe('ItemFilterInline', () => {
   describe('route query', () => {
     it('sets the active option as query param', async () => {
       const { wrapper, mocks } = getWrapper({ props: { filterOptions } })
-      const currentRouteQuery = unref(mocks.$router.currentRoute).query
       expect(mocks.$router.push).not.toHaveBeenCalled()
       await wrapper.find(selectors.filterOption).trigger('click')
-      expect(currentRouteQuery[wrapper.vm.queryParam]).toBeDefined()
-      expect(mocks.$router.push).toHaveBeenCalled()
+      expect(mocks.$router.push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({ [wrapper.vm.queryParam]: 'filter1' })
+        })
+      )
     })
     it('sets the active optin initially when given via query param', async () => {
       const initialQuery = filterOptions[1].name

packages/web-pkg/tests/unit/components/ItemFilter.spec.ts

@@ -7,7 +7,6 @@ import {
 } from 'web-test-helpers'
 import { queryItemAsString } from '../../../src/composables/appDefaults'
 import { OcCheckbox } from 'design-system/src/components'
-import { unref } from 'vue'
 
 vi.mock('../../../src/composables/appDefaults')
 
@@ -115,11 +114,13 @@ describe('ItemFilter', () => {
     it('sets the selected item as route query param', async () => {
       const { wrapper, mocks } = getWrapper()
       const item = wrapper.findAll(selectors.filterListItem).at(0)
-      const currentRouteQuery = unref(mocks.$router.currentRoute).query
       expect(mocks.$router.push).not.toHaveBeenCalled()
       await item.trigger('click')
-      expect(currentRouteQuery[wrapper.vm.queryParam]).toBeDefined()
-      expect(mocks.$router.push).toHaveBeenCalled()
+      expect(mocks.$router.push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({ [wrapper.vm.queryParam]: '1' })
+        })
+      )
     })
     it('sets the selected items initially when given via query param', () => {
       const { wrapper } = getWrapper({ initialQuery: '1' })

packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts

@@ -1,7 +1,6 @@
 import ItemFilterToggle from '../../../src/components/ItemFilterToggle.vue'
 import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers'
 import { queryItemAsString } from '../../../src/composables/appDefaults'
-import { unref } from 'vue'
 
 vi.mock('../../../src/composables/appDefaults', () => ({
   appDefaults: vi.fn(),
@@ -27,11 +26,13 @@ describe('ItemFilterToggle', () => {
   describe('route query', () => {
     it('sets the active state as query param', async () => {
       const { wrapper, mocks } = getWrapper()
-      const currentRouteQuery = unref(mocks.$router.currentRoute).query
       expect(mocks.$router.push).not.toHaveBeenCalled()
       await wrapper.find(selectors.filterBtn).trigger('click')
-      expect(currentRouteQuery[wrapper.vm.queryParam]).toBeDefined()
-      expect(mocks.$router.push).toHaveBeenCalled()
+      expect(mocks.$router.push).toHaveBeenCalledWith(
+        expect.objectContaining({
+          query: expect.objectContaining({ [wrapper.vm.queryParam]: 'true' })
+        })
+      )
     })
     it('sets the active state initially when given via query param', () => {
       const { wrapper } = getWrapper({ initialQuery: 'true' })

packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts

@@ -228,11 +228,9 @@ function createWrapper({
   const { requestExtensions } = useExtensionRegistry()
   vi.mocked(requestExtensions).mockReturnValue([])
 
-  vi.mocked(useSelectedResources).mockReturnValue(
-    mock<ReturnType<typeof useSelectedResources>>({
-      selectedResources: item ? ref([item]) : ref([])
-    })
-  )
+  const useSelectedResourcesMock = mock<ReturnType<typeof useSelectedResources>>()
+  useSelectedResourcesMock.selectedResources = item ? ref([item]) : ref([])
+  vi.mocked(useSelectedResources).mockReturnValue(useSelectedResourcesMock)
 
   const mocks = defaultComponentMocks({
     currentRoute: mock<RouteLocation>({ name: currentRouteName })

packages/web-runtime/package.json

@@ -41,7 +41,7 @@
     "uuid": "10.0.0",
     "vue-concurrency": "5.0.1",
     "vue-router": "4.2.5",
-    "vue": "3.4.38",
+    "vue": "3.5.4",
     "vue3-gettext": "2.4.0",
     "webdav": "5.7.1",
     "xml-js": "^1.6.11",

packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts

@@ -1,7 +1,7 @@
 import ResolvePublicLink from '../../../src/pages/resolvePublicLink.vue'
 import { defaultPlugins, defaultComponentMocks, shallowMount } from 'web-test-helpers'
 import { mockDeep } from 'vitest-mock-extended'
-import { CapabilityStore, ClientService, useRouteParam } from '@ownclouders/web-pkg'
+import { CapabilityStore, ClientService, useRouteParam, useRouteQuery } from '@ownclouders/web-pkg'
 import { DavHttpError, SpaceResource } from '@ownclouders/web-client'
 import { authService } from '../../../src/services/auth'
 import { ref } from 'vue'
@@ -10,7 +10,8 @@ vi.mock('../../../src/services/auth')
 
 vi.mock('@ownclouders/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  useRouteParam: vi.fn()
+  useRouteParam: vi.fn(),
+  useRouteQuery: vi.fn()
 }))
 
 const selectors = {
@@ -105,6 +106,7 @@ function getWrapper({
   } satisfies Partial<CapabilityStore['capabilities']>
 
   vi.mocked(useRouteParam).mockReturnValue(ref('token'))
+  vi.mocked(useRouteQuery).mockReturnValue(ref('redirectUrl'))
 
   return {
     mocks,

packages/web-test-helpers/src/defaultPlugins.ts

@@ -58,22 +58,22 @@ export const defaultPlugins = ({
           tag: { type: String, default: 'a' },
           to: { type: [String, Object], default: '' }
         },
-        render() {
-          let path = this.$props.to
+        setup(props) {
+          let path = props.to
 
           if (!!path && typeof path !== 'string') {
-            path = this.$props.to.path || this.$props.to.name
+            path = props.to.path || props.to.name
 
-            if (this.$props.to.params) {
-              path += '/' + Object.values(this.$props.to.params).join('/')
+            if (props.to.params) {
+              path += '/' + Object.values(props.to.params).join('/')
             }
 
-            if (this.$props.to.query) {
-              path += '?' + Object.values(this.$props.to.query).join('&')
+            if (props.to.query) {
+              path += '?' + Object.values(props.to.query).join('&')
             }
           }
 
-          return h(this.tag, { attrs: { href: path } }, this.$slots.default)
+          return () => h(props.tag, { attrs: { href: path } })
         }
       })
     }

packages/web-test-helpers/src/mocks/defaultComponentMocks.ts

@@ -9,18 +9,29 @@ import {
 } from '../../../web-pkg/src/'
 import { Router, RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router'
 import { ref } from 'vue'
+import { writable } from '../helpers'
 
 export interface ComponentMocksOptions {
   currentRoute?: RouteLocationNormalizedLoaded
 }
 
 export const defaultComponentMocks = ({ currentRoute = undefined }: ComponentMocksOptions = {}) => {
-  const $router = mockDeep<Router>({ ...(currentRoute && { currentRoute: ref(currentRoute) }) })
+  const $router = mock<Router>()
+  if (currentRoute) {
+    writable($router).currentRoute = ref(currentRoute)
+  } else {
+    writable($router).currentRoute = ref(
+      mock<RouteLocationNormalizedLoaded>({ name: '', path: '' })
+    )
+  }
+
   $router.resolve.mockImplementation(
     (to: RouteLocationRaw) => ({ href: (to as any).name, location: { path: '' } }) as any
   )
   const $route = $router.currentRoute.value
   $route.path = $route.path || '/'
+  $route.meta = $route.meta || {}
+  $route.meta.title = $route.meta.title || ''
 
   return {
     $router,