Maintenance: Update Vue packages

Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Florian Liebe <fl@zammad.com>

app/frontend/apps/desktop/pages/guided-setup/stores/systemSetupInfo.ts

@@ -23,13 +23,13 @@ export const useSystemSetupInfoStore = defineStore('systemSetupInfo', () => {
     {},
   )
 
-  const setSystemSetupInfo = async () => {
-    const systemSetupInfoQuery = new QueryHandler(
-      useSystemSetupInfoLazyQuery({
-        fetchPolicy: 'network-only',
-      }),
-    )
+  const systemSetupInfoQuery = new QueryHandler(
+    useSystemSetupInfoLazyQuery({
+      fetchPolicy: 'network-only',
+    }),
+  )
 
+  const setSystemSetupInfo = async () => {
     const systemSetupInfoResult = await systemSetupInfoQuery.query()
     const newSystemSetupInfo = systemSetupInfoResult.data?.systemSetupInfo
 

app/frontend/apps/desktop/pages/personal-setting/views/PersonalSettingCalendar.vue

@@ -310,7 +310,6 @@ const tabs = [
       />
 
       <FormKit
-        :key="alarmLocalValue"
         v-model="alarmLocalValue"
         type="toggle"
         :label="__('Add alarm to pending reminder and escalated tickets')"

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleMeta/useArticleMeta.ts

@@ -1,6 +1,6 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
-import { computed, type ComputedRef, toValue } from 'vue'
+import { computed, type Ref } from 'vue'
 
 import CommonDateTime from '#shared/components/CommonDateTime/CommonDateTime.vue'
 import type { TicketArticle } from '#shared/entities/ticket/types.ts'
@@ -9,8 +9,6 @@ import { lookupArticlePlugin } from '#desktop/pages/ticket/components/TicketDeta
 import ArticleMetaFieldAddress from '#desktop/pages/ticket/components/TicketDetailView/ArticleMeta/ArticleMetaAddress.vue'
 import type { ChannelMetaField } from '#desktop/pages/ticket/components/TicketDetailView/ArticleMeta/types.ts'
 
-import type { MaybeRefOrGetter } from '@vueuse/core'
-
 const getNestedProperty = (article: TicketArticle, nestedKeys: string[]) => {
   return nestedKeys.reduce((accumulator, currentKey) => {
     if (accumulator && typeof accumulator === 'object') {
@@ -22,7 +20,7 @@ const getNestedProperty = (article: TicketArticle, nestedKeys: string[]) => {
 
 const addNewFields = (
   fields: ChannelMetaField[],
-  article: ComputedRef<TicketArticle>,
+  article: Ref<TicketArticle>,
 ) => {
   const plugin = lookupArticlePlugin(article.value.type?.name as string)
   if (!plugin?.additionalFields?.length) return fields
@@ -32,7 +30,7 @@ const addNewFields = (
 
     const fieldValue = getNestedProperty(article.value, nestedKeys)
 
-    if (field.show !== undefined && !field.show?.(article.value)) return fields
+    if (field.show !== undefined && !field.show?.(article)) return fields
 
     if (fieldValue)
       fields.push({
@@ -47,11 +45,7 @@ const addNewFields = (
   return fields
 }
 
-export const useArticleMeta = (
-  ticketArticle: MaybeRefOrGetter<TicketArticle>,
-) => {
-  const article = computed(() => toValue(ticketArticle))
-
+export const useArticleMeta = (article: Ref<TicketArticle>) => {
   const links = computed(() => article.value.preferences?.links || [])
 
   const fields = computed(() => {

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/TicketDetailTopBar/TicketInformation.vue

@@ -75,7 +75,6 @@ const { updateTitle } = useTicketEditTitle(computed(() => props.ticket))
           block
           :disabled="!ticket.policy.update"
           :value="ticket.title"
-          :parent="$refs.parentContainer as HTMLElement"
           :classes="{
             label: hideDetails
               ? 'dark:text-white font-medium line-clamp-1'

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/article-type/types.ts

@@ -1,13 +1,13 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 import type { TicketArticle } from '#shared/entities/ticket/types.ts'
 
-import type { Component } from 'vue'
+import type { Component, Ref } from 'vue'
 
 export interface ChannelField {
   name: string
   label: string
   order: number
-  show?: (article: TicketArticle) => boolean
+  show?: (article: Ref<TicketArticle>) => boolean
   icon?: string
   component?: Component
 }

app/frontend/shared/components/Form/Form.vue

@@ -16,6 +16,7 @@ import {
   markRaw,
   useSlots,
   onBeforeUnmount,
+  effectScope,
 } from 'vue'
 
 import { NotificationTypes } from '#shared/components/CommonNotifications/types.ts'
@@ -1252,7 +1253,12 @@ const handleFormUpdaterAutosaveNotification = () => {
   })
 }
 
-onBeforeUnmount(cleanupFormUpdaterAutosaveNotification)
+const formUpdaterScope = effectScope()
+
+onBeforeUnmount(() => {
+  if (formUpdaterScope.active) formUpdaterScope.stop()
+  cleanupFormUpdaterAutosaveNotification()
+})
 
 const initializeFormSchema = () => {
   buildStaticSchema()
@@ -1270,18 +1276,20 @@ const initializeFormSchema = () => {
       relationFields,
     })
 
-    formUpdaterQueryHandler = new QueryHandler(
-      useFormUpdaterQuery(
-        formUpdaterVariables as Ref<FormUpdaterQueryVariables>,
-        {
-          // TODO: we can try it like that to improve a little bit the loading situation, but could
-          // lead to an flickering when something changes from server perspective...
-          // fetchPolicy: 'cache-and-network',
-          // nextFetchPolicy: 'no-cache',
-          fetchPolicy: 'no-cache',
-        },
-      ),
-    )
+    formUpdaterScope.run(() => {
+      formUpdaterQueryHandler = new QueryHandler(
+        useFormUpdaterQuery(
+          formUpdaterVariables as Ref<FormUpdaterQueryVariables>,
+          {
+            // TODO: we can try it like that to improve a little bit the loading situation, but could
+            // lead to an flickering when something changes from server perspective...
+            // fetchPolicy: 'cache-and-network',
+            // nextFetchPolicy: 'no-cache',
+            fetchPolicy: 'no-cache',
+          },
+        ),
+      )
+    })
 
     handleFormUpdaterAutosaveNotification()
 

app/frontend/shared/composables/useArticleSecurity.ts

@@ -1,6 +1,6 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
-import { computed, toValue } from 'vue'
+import { computed, type Ref } from 'vue'
 
 import {
   NotificationTypes,
@@ -12,13 +12,7 @@ import { useTicketArticleRetrySecurityProcessMutation } from '#shared/entities/t
 import { i18n } from '#shared/i18n/index.ts'
 import { MutationHandler } from '#shared/server/apollo/handler/index.ts'
 
-import type { MaybeRefOrGetter } from '@vueuse/core'
-
-export const useArticleSecurity = (
-  ticketArticle: MaybeRefOrGetter<TicketArticle>,
-) => {
-  const article = computed(() => toValue(ticketArticle))
-
+export const useArticleSecurity = (article: Ref<TicketArticle>) => {
   const { notify } = useNotifications()
 
   const signingSuccess = computed(

app/frontend/shared/entities/object-attributes/composables/__tests__/useObjectAttributeFormData.spec.ts

@@ -1,6 +1,7 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { createPinia, setActivePinia } from 'pinia'
+import { effectScope } from 'vue'
 
 import { mockGraphQLApi } from '#tests/support/mock-graphql-api.ts'
 import { waitForTimeout } from '#tests/support/utils.ts'
@@ -30,29 +31,33 @@ const getObjectAttributeLookup = async () => {
   return attributesLookup
 }
 
+const scope = effectScope()
+
 describe('useObjectAttributeFormFields', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
 
   it('check for correct internal values and additional object attribute values', async () => {
-    const objectAttributesLookup = await getObjectAttributeLookup()
+    await scope.run(async () => {
+      const objectAttributesLookup = await getObjectAttributeLookup()
+
+      const { internalObjectAttributeValues, additionalObjectAttributeValues } =
+        useObjectAttributeFormData(objectAttributesLookup.value, {
+          formId: '123456',
+          name: 'Example',
+          textarea: 'some example',
+        })
 
-    const { internalObjectAttributeValues, additionalObjectAttributeValues } =
-      useObjectAttributeFormData(objectAttributesLookup.value, {
-        formId: '123456',
+      expect(internalObjectAttributeValues).toEqual({
         name: 'Example',
-        textarea: 'some example',
       })
-
-    expect(internalObjectAttributeValues).toEqual({
-      name: 'Example',
+      expect(additionalObjectAttributeValues).toEqual([
+        {
+          name: 'textarea',
+          value: 'some example',
+        },
+      ])
     })
-    expect(additionalObjectAttributeValues).toEqual([
-      {
-        name: 'textarea',
-        value: 'some example',
-      },
-    ])
   })
 })

app/frontend/shared/entities/object-attributes/composables/__tests__/useObjectManagerAttributes.spec.ts

@@ -1,6 +1,7 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { createPinia, setActivePinia } from 'pinia'
+import { effectScope } from 'vue'
 
 import { mockGraphQLApi } from '#tests/support/mock-graphql-api.ts'
 import { waitForTimeout } from '#tests/support/utils.ts'
@@ -27,60 +28,68 @@ const getMeta = async () => {
   return meta
 }
 
+const scope = effectScope()
+
 describe('Object Manager Frontend Attributes Store', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
 
   it('is filled for Organization', async () => {
-    const meta = await getMeta()
+    await scope.run(async () => {
+      const meta = await getMeta()
 
-    expect(meta.attributes).not.toBe(undefined)
+      expect(meta.attributes).not.toBe(undefined)
+    })
   })
 
   it('contains screens', async () => {
-    const meta = await getMeta()
-
-    expect(meta.screens.value).toEqual({
-      view: [
-        'name',
-        'shared',
-        'domain_assignment',
-        'domain',
-        'note',
-        'active',
-        'test',
-        'textarea',
-      ],
-      edit: [
-        'name',
-        'shared',
-        'domain_assignment',
-        'domain',
-        'note',
-        'active',
-        'test',
-        'textarea',
-      ],
+    await scope.run(async () => {
+      const meta = await getMeta()
+
+      expect(meta.screens.value).toEqual({
+        view: [
+          'name',
+          'shared',
+          'domain_assignment',
+          'domain',
+          'note',
+          'active',
+          'test',
+          'textarea',
+        ],
+        edit: [
+          'name',
+          'shared',
+          'domain_assignment',
+          'domain',
+          'note',
+          'active',
+          'test',
+          'textarea',
+        ],
+      })
     })
   })
 
   it('provides a fancy lookup of all attributes', async () => {
-    const meta = await getMeta()
-
-    expect(meta.attributesLookup.value.get('name')).toEqual({
-      __typename: 'ObjectManagerFrontendAttribute',
-      name: 'name',
-      display: 'Name',
-      dataType: 'input',
-      isInternal: true,
-      dataOption: {
-        type: 'text',
-        maxlength: 150,
-        null: false,
-        item_class: 'formGroup--halfSize',
-      },
-      screens: {},
+    await scope.run(async () => {
+      const meta = await getMeta()
+
+      expect(meta.attributesLookup.value.get('name')).toEqual({
+        __typename: 'ObjectManagerFrontendAttribute',
+        name: 'name',
+        display: 'Name',
+        dataType: 'input',
+        isInternal: true,
+        dataOption: {
+          type: 'text',
+          maxlength: 150,
+          null: false,
+          item_class: 'formGroup--halfSize',
+        },
+        screens: {},
+      })
     })
   })
 })

app/frontend/shared/entities/ticket-article/composables/useArticleDataHandler.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { noop } from 'lodash-es'
-import { computed, type ComputedRef, nextTick, type Ref, toValue } from 'vue'
+import { computed, type ComputedRef, nextTick, type Ref } from 'vue'
 
 import { useTicketArticlesQuery } from '#shared/entities/ticket/graphql/queries/ticket/articles.api.ts'
 import { TicketArticleUpdatesDocument } from '#shared/entities/ticket/graphql/subscriptions/ticketArticlesUpdates.api.ts'
@@ -14,8 +14,6 @@ import type {
 import { getApolloClient } from '#shared/server/apollo/client.ts'
 import { QueryHandler } from '#shared/server/apollo/handler/index.ts'
 
-import type { MaybeRefOrGetter } from '@vueuse/core'
-
 export interface AddArticleCallbackArgs {
   updates: TicketArticleUpdatesSubscription['ticketArticleUpdates']
   previousArticlesEdges: TicketArticlesQuery['articles']['edges']
@@ -27,24 +25,22 @@ export interface AddArticleCallbackArgs {
 }
 
 export const useArticleDataHandler = (
-  ticketId: MaybeRefOrGetter<string>,
+  ticketId: Ref<string>,
   options: {
     pageSize: number
-    firstArticlesCount?: MaybeRefOrGetter<number>
+    firstArticlesCount?: Ref<number>
     onAddArticleCallback?: (args: AddArticleCallbackArgs) => void
   } = {
     pageSize: 20,
-    firstArticlesCount: 5,
   },
 ) => {
-  const graphqlTicketId = computed(() => toValue(ticketId))
-
-  const firstArticlesCount = computed(() =>
-    options.firstArticlesCount ? toValue(options.firstArticlesCount) : 5,
+  const firstArticlesCount = computed(
+    () => options.firstArticlesCount?.value || 5,
   )
+
   const articlesQuery = new QueryHandler(
     useTicketArticlesQuery(() => ({
-      ticketId: graphqlTicketId.value,
+      ticketId: ticketId.value,
       pageSize: options.pageSize || 20,
       firstArticlesCount: firstArticlesCount.value,
     })),
@@ -64,7 +60,7 @@ export const useArticleDataHandler = (
 
   const refetchArticlesQuery = (pageSize: Maybe<number>) => {
     articlesQuery.refetch({
-      ticketId: graphqlTicketId.value,
+      ticketId: ticketId.value,
       pageSize,
     })
   }
@@ -90,7 +86,7 @@ export const useArticleDataHandler = (
   >(() => ({
     document: TicketArticleUpdatesDocument,
     variables: {
-      ticketId: graphqlTicketId.value,
+      ticketId: ticketId.value,
     },
     onError: noop,
     updateQuery(previous, { subscriptionData }) {