Merge pull request #2588 from opencloud-eu/fix/ractive-components

fix: prevent components from being proxied in Vue's reactivity system

Author: JammingBen

packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts

@@ -1,5 +1,5 @@
 import { useModals, UserAction } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import CreateGroupModal from '../../../components/Groups/CreateGroupModal.vue'
 
@@ -17,7 +17,7 @@ export const useGroupActionsCreateGroup = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create group'),
-          customComponent: CreateGroupModal
+          customComponent: markRaw(CreateGroupModal)
         })
       }
     }

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> })
           userCount: resources.length.toString()
         }
       ),
-      customComponent: AddToGroupsModal,
+      customComponent: markRaw(AddToGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts

@@ -1,5 +1,5 @@
 import { useModals, useCapabilityStore } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction } from '@opencloud-eu/web-pkg'
 import CreateUserModal from '../../../components/Users/CreateUserModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsCreateUser = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create user'),
-          customComponent: CreateUserModal
+          customComponent: markRaw(CreateUserModal)
         })
       }
     }

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts

@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import LoginModal from '../../../components/Users/LoginModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsEditLogin = () => {
           userCount: resources.length.toString()
         }
       ),
-      customComponent: LoginModal,
+      customComponent: markRaw(LoginModal),
       customComponentAttrs: () => ({
         users: resources
       })

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts

@@ -1,4 +1,4 @@
-import { computed, toRaw } from 'vue'
+import { computed, markRaw, toRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   QuotaModal,
@@ -53,7 +53,7 @@ export const useUserActionsEditQuota = () => {
 
     dispatchModal({
       title: getModalTitle({ resources }),
-      customComponent: QuotaModal,
+      customComponent: markRaw(QuotaModal),
       customComponentAttrs: () => ({
         spaces: getUserDrives({ resources }),
         resourceType: 'user',

packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts

@@ -1,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           userCount: resources.length.toString()
         }
       ),
-      customComponent: RemoveFromGroupsModal,
+      customComponent: markRaw(RemoveFromGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)

packages/web-app-contacts/src/extensions.ts

@@ -9,7 +9,7 @@ import {
   useUserStore,
   Extension
 } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import AddressBooksList from './components/AddressBooksList.vue'
 import { useGettext } from 'vue3-gettext'
@@ -48,14 +48,14 @@ export const extensions = (appInfo: ApplicationInformation) => {
     id: `app.${appInfo.id}.sidebar-nav.main-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.main`],
     type: 'customComponent',
-    content: AddressBooksList
+    content: markRaw(AddressBooksList)
   }
 
   const bottomNavExtension: CustomComponentExtension = {
     id: `app.${appInfo.id}.sidebar-nav.bottom-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.bottom`],
     type: 'customComponent',
-    content: AccountsSwitch
+    content: markRaw(AccountsSwitch)
   }
 
   return computed<Extension[]>(() => {

packages/web-app-external/src/App.vue

@@ -39,6 +39,7 @@
 import { stringify } from 'qs'
 import {
   computed,
+  markRaw,
   unref,
   nextTick,
   ref,
@@ -280,7 +281,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
             name: resource.name,
             format: message.Values.format
           }),
-          customComponent: FileNameModal,
+          customComponent: markRaw(FileNameModal),
           customComponentAttrs: () => ({
             space,
             resource,
@@ -298,7 +299,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
 
       dispatchModal({
         title: $gettext('Save »%{name}« with new name', { name: resource.name }),
-        customComponent: FileNameModal,
+        customComponent: markRaw(FileNameModal),
         customComponentAttrs: () => ({
           space,
           resource,
@@ -346,7 +347,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Insert graphic'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -374,7 +375,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
           callback === 'Action_CompareDocuments'
             ? $gettext('Select document to compare')
             : $gettext('Insert file'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -401,7 +402,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Pick a file to link'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -51,7 +51,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, Ref, unref, useTemplateRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  markRaw,
+  PropType,
+  Ref,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { DateTime } from 'luxon'
 import { ContextualHelperDataListItem, uniqueId } from '@opencloud-eu/design-system/helpers'
 import { OcDrop, OcInfoDrop } from '@opencloud-eu/design-system/components'
@@ -237,7 +246,7 @@ export default defineComponent({
       this.dispatchModal({
         title: this.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: currentDate.isValid ? currentDate : null,
           minDate: DateTime.now()

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue

@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { defineComponent, customRef, PropType, unref, watch } from 'vue'
+import { defineComponent, customRef, markRaw, PropType, unref, watch } from 'vue'
 import { useModals, DatePickerModal } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
@@ -89,7 +89,7 @@ export default defineComponent({
       dispatchModal({
         title: language.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: unref(dateCurrent),
           minDate: DateTime.now()