Maintenance: Desktop View - Disable article details on double click.

Co-authored-by: Benjamin Scharf <bs@zammad.com>
Co-authored-by: Dusan Vuckovic <dv@zammad.com>

app/frontend/apps/desktop/pages/ticket/__tests__/ticket-detail-view.spec.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { within } from '@testing-library/vue'
-import { expect } from 'vitest'
+import { beforeEach, expect } from 'vitest'
 
 import createArticle from '#tests/graphql/factories/TicketArticle.ts'
 import { getTestRouter } from '#tests/support/components/renderComponent.ts'
@@ -111,7 +111,6 @@ describe('Ticket detail view', () => {
       mockTicketQuery({
         ticket: createDummyTicket(),
       })
-
       const testArticle = createDummyArticle({
         bodyWithUrls: 'foobar',
       })
@@ -148,8 +147,15 @@ describe('Ticket detail view', () => {
         await view.findByLabelText('Article meta information'),
       ).toBeInTheDocument()
 
+      vi.useFakeTimers()
+
       await view.events.click(view.getByTestId('article-bubble-body-1'))
 
+      // NB: Click handler has a built-in timeout (200ms) in order to catch double click behavior.
+      //   Advance the timer manually so we speed up the test a bit.
+      await vi.runAllTimersAsync()
+      vi.useRealTimers()
+
       expect(
         view.queryByLabelText('Article meta information'),
       ).not.toBeInTheDocument()

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleBubble/__tests__/useBubbleHeader.spec.ts

@@ -1,9 +1,11 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
+import { waitFor } from '@testing-library/vue'
+
 import { useBubbleHeader } from '#desktop/pages/ticket/components/TicketDetailView/ArticleBubble/useBubbleHeader.ts'
 
 describe('useBubbleHeader', () => {
-  it('should toggle showMetaInformation', () => {
+  it('should toggle showMetaInformation', async () => {
     const { showMetaInformation, toggleHeader } = useBubbleHeader()
 
     expect(showMetaInformation.value).toBe(false)
@@ -17,11 +19,11 @@ describe('useBubbleHeader', () => {
 
     toggleHeader(event)
 
-    expect(showMetaInformation.value).toBe(true)
+    await waitFor(() => expect(showMetaInformation.value).toBe(true))
 
     toggleHeader(event)
 
-    expect(showMetaInformation.value).toBe(false)
+    await waitFor(() => expect(showMetaInformation.value).toBe(false))
   })
 
   it.each(['a', 'button', 'button>span'])(

app/frontend/apps/desktop/pages/ticket/components/TicketDetailView/ArticleBubble/useBubbleHeader.ts

@@ -1,5 +1,6 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
+import { useTimeout } from '@vueuse/core'
 import { ref } from 'vue'
 
 export const useBubbleHeader = () => {
@@ -27,14 +28,25 @@ export const useBubbleHeader = () => {
     return true
   }
 
-  const toggleHeader = (event: MouseEvent) => {
+  const { start, stop } = useTimeout(200, {
+    controls: true,
+    callback: () => {
+      showMetaInformation.value = !showMetaInformation.value
+    },
+    immediate: false,
+  })
+
+  const toggleHeader = async (event: MouseEvent) => {
+    stop()
+
     if (
+      event.detail === 2 || // Double-click
       isInteractiveTarget(event.target as HTMLElement) ||
       hasSelectionRange(event.target as HTMLElement)
     )
       return
 
-    showMetaInformation.value = !showMetaInformation.value
+    start()
   }
 
   return {