Feature: Mobile - Add reply article action

.rubocop/default.yml

@@ -355,6 +355,10 @@ Layout/MultilineMethodCallIndentation:
 Lint/UnusedMethodArgument:
   AllowUnusedKeywordArguments: true
 
+Naming/PredicateName:
+  Exclude:
+    - "app/graphql/gql/types/**/*"
+
 RSpec/DescribeMethod:
   # We want to be able to split tests into subfolders, where several cases are grouped together.
   Description: 'Checks that the second argument to the top level describe is the tested method name.'

app/frontend/apps/mobile/pages/ticket/__tests__/mocks/detail-view.ts

@@ -85,6 +85,11 @@ export const defaultTicket = () =>
         __typename: 'Group',
         id: convertToGraphQLId('Group', 1),
         name: 'Users',
+        emailAddress: {
+          __typename: 'EmailAddress',
+          name: 'zammad',
+          emailAddress: 'zammad@example.com',
+        },
       },
       priority: {
         __typename: 'TicketPriority',

app/frontend/apps/mobile/pages/ticket/composable/useTicketArticleContext.ts

@@ -6,13 +6,19 @@ import { computed, nextTick, ref, shallowRef } from 'vue'
 import type { TicketArticle, TicketById } from '@shared/entities/ticket/types'
 import { createArticleActions } from '@shared/entities/ticket-article/action/plugins'
 import type { TicketArticlePerformOptions } from '@shared/entities/ticket-article/action/plugins/types'
-import type { EditorContentType } from '@shared/components/Form/fields/FieldEditor/types'
+import type {
+  EditorContentType,
+  FieldEditorContext,
+} from '@shared/components/Form/fields/FieldEditor/types'
+import { getArticleSelection } from '@shared/entities/ticket-article/composables/getArticleSelection'
+import type { SelectionData } from '@shared/utils/selection'
+import type { FormKitNode } from '@formkit/core'
 import { useTicketInformation } from './useTicketInformation'
 
 export const useTicketArticleContext = () => {
   const articleForContext = shallowRef<TicketArticle>()
   const ticketForContext = shallowRef<TicketById>()
-  const selectionRange = ref<Range>()
+  const selectionData = ref<SelectionData>()
   const metadataDialog = useDialog({
     name: 'article-metadata',
     component: () =>
@@ -34,14 +40,18 @@ export const useTicketArticleContext = () => {
 
   const openReplyDialog: TicketArticlePerformOptions['openReplyDialog'] =
     async (values = {}) => {
-      const formNode = form.value?.formNode
-      if (!formNode) return
+      const formNode = form.value?.formNode as FormKitNode
 
       await showArticleReplyDialog()
 
       const { articleType, ...otherOptions } = values
 
-      formNode.find('articleType')?.input(articleType, false)
+      const typeNode = formNode.find('articleType', 'name')
+      if (formNode.context) {
+        Object.assign(formNode.context, { _open: true })
+      }
+
+      typeNode?.input(articleType, false)
       // trigger new fields that depend on the articleType
       await nextTick()
 
@@ -56,6 +66,20 @@ export const useTicketArticleContext = () => {
           node.emit('prop:options', options)
         }
       }
+
+      formNode.emit('article-reply-open', articleType)
+
+      const context = formNode.find('body', 'name')?.context as
+        | FieldEditorContext
+        | undefined
+
+      context?.focus()
+
+      nextTick(() => {
+        if (formNode.context) {
+          Object.assign(formNode.context, { _open: false })
+        }
+      })
     }
 
   const getNewArticleBody = (type: EditorContentType): string => {
@@ -87,7 +111,7 @@ export const useTicketArticleContext = () => {
         link,
         onAction: () =>
           perform(ticket, article, {
-            selection: selectionRange.value,
+            selection: selectionData.value,
             openReplyDialog,
             getNewArticleBody,
           }),
@@ -129,11 +153,10 @@ export const useTicketArticleContext = () => {
     articleForContext.value = article
     ticketForContext.value = ticket
     try {
-      // TODO: only put range, if it's inside the article
       // can throw RangeError
-      selectionRange.value = window.getSelection()?.getRangeAt(0)
+      selectionData.value = getArticleSelection(article.internalId)
     } catch {
-      selectionRange.value = undefined
+      selectionData.value = undefined
     }
   }
 

app/frontend/apps/mobile/pages/ticket/composable/useTicketEdit.ts

@@ -20,6 +20,7 @@ interface ArticleFormValues {
   body: string
   internal: boolean
   cc?: string[]
+  subtype?: string
   inReplyTo?: string
   to?: string[]
   subject?: string
@@ -81,6 +82,7 @@ export const useTicketEdit = (
       cc: article.cc,
       to: article.to,
       subject: article.subject,
+      subtype: article.subtype,
       inReplyTo: article.inReplyTo,
       contentType,
       attachments: attachments.length ? { files, formId } : null,

app/frontend/apps/mobile/pages/ticket/composable/useTicketEditForm.ts

@@ -13,6 +13,8 @@ import type {
   ChangedField,
   ReactiveFormSchemData,
 } from '@shared/components/Form/types'
+import type { FieldEditorContext } from '@shared/components/Form/fields/FieldEditor/types'
+import type { FormKitNode } from '@formkit/core'
 
 export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
   const ticketArticleTypes = computed(() => {
@@ -66,6 +68,11 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
         type: 'hidden',
         name: 'inReplyTo',
       },
+      {
+        if: '$fns.includes($currentArticleType.attributes, "subtype")',
+        type: 'hidden',
+        name: 'subtype',
+      },
       {
         name: 'articleType',
         label: __('Article Type'),
@@ -132,7 +139,7 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
         triggerFormUpdater: false,
       },
       {
-        if: '$fns.includes($currentArticleType.attributes, "security")',
+        if: '$smimeIntegration === true && $fns.includes($currentArticleType.attributes, "security")',
         name: 'security',
         label: __('Security'),
         type: 'security',
@@ -189,7 +196,7 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
     },
   ]
 
-  const articleTypeHandler = () => {
+  const articleTypeChangeHandler = () => {
     const executeHandler = (
       execution: FormHandlerExecution,
       schemaData: ReactiveFormSchemData,
@@ -215,11 +222,19 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
       schemaData,
       changedField,
     ) => {
-      if (!executeHandler(execution, schemaData, changedField) || !ticket.value)
+      if (
+        !executeHandler(execution, schemaData, changedField) ||
+        !ticket.value ||
+        !formNode
+      )
         return
+      const body = formNode.find('body', 'name')
+      const context = {
+        body: body?.context as unknown as FieldEditorContext,
+      }
 
       if (changedField?.newValue !== changedField?.oldValue) {
-        currentArticleType.value?.onDeselected?.(ticket.value)
+        currentArticleType.value?.onDeselected?.(ticket.value, context)
       }
 
       const newType = ticketArticleTypes.value.find(
@@ -228,10 +243,12 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
 
       if (!newType) return
 
-      newType.onSelected?.(ticket.value)
+      if (!formNode.context?._open) {
+        newType.onSelected?.(ticket.value, context)
+      }
       currentArticleType.value = newType
 
-      formNode?.find('internal')?.input(newType.internal, false)
+      formNode.find('internal')?.input(newType.internal, false)
     }
 
     return {
@@ -243,9 +260,27 @@ export const useTicketEditForm = (ticket: Ref<TicketById | undefined>) => {
     }
   }
 
+  const articleTypeSelectHandler = (formNode: FormKitNode) => {
+    // this is called only when user replied to an article, but the type inside form did not change
+    // (because dialog was opened before, and type was changed then, but we still need to trigger select, because visually it's what happens)
+    formNode.on('article-reply-open', ({ payload }) => {
+      if (!payload || !ticket.value) return
+      const articleType = ticketArticleTypes.value.find(
+        (type) => type.value === payload,
+      )
+      if (!articleType) return
+      const body = formNode.find('body', 'name') as FormKitNode
+      const context = {
+        body: body.context as unknown as FieldEditorContext,
+      }
+      articleType.onOpened?.(ticket.value, context)
+    })
+  }
+
   return {
     ticketEditSchema,
     currentArticleType,
-    articleTypeHandler,
+    articleTypeHandler: articleTypeChangeHandler,
+    articleTypeSelectHandler,
   }
 }

app/frontend/apps/mobile/pages/ticket/graphql/fragments/ticketArticleAttributes.api.ts

@@ -10,6 +10,7 @@ export const TicketArticleAttributesFragmentDoc = gql`
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   messageId
@@ -18,6 +19,7 @@ export const TicketArticleAttributesFragmentDoc = gql`
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   cc {
@@ -25,6 +27,7 @@ export const TicketArticleAttributesFragmentDoc = gql`
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   subject
@@ -33,6 +36,7 @@ export const TicketArticleAttributesFragmentDoc = gql`
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   messageId
@@ -51,11 +55,16 @@ export const TicketArticleAttributesFragmentDoc = gql`
   bodyWithUrls
   internal
   createdAt
+  originBy {
+    id
+    fullname
+  }
   createdBy {
     id
     fullname
     firstname
     lastname
+    email
     authorizations {
       provider
       uid

app/frontend/apps/mobile/pages/ticket/graphql/fragments/ticketArticleAttributes.graphql

@@ -6,6 +6,7 @@ fragment ticketArticleAttributes on TicketArticle {
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   messageId
@@ -14,6 +15,7 @@ fragment ticketArticleAttributes on TicketArticle {
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   cc {
@@ -21,6 +23,7 @@ fragment ticketArticleAttributes on TicketArticle {
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   subject
@@ -29,6 +32,7 @@ fragment ticketArticleAttributes on TicketArticle {
     parsed {
       name
       emailAddress
+      isSystemAddress
     }
   }
   messageId
@@ -47,11 +51,16 @@ fragment ticketArticleAttributes on TicketArticle {
   bodyWithUrls
   internal
   createdAt
+  originBy {
+    id
+    fullname
+  }
   createdBy {
     id
     fullname
     firstname
     lastname
+    email
     authorizations {
       provider
       uid

app/frontend/apps/mobile/pages/ticket/graphql/fragments/ticketAttributes.api.ts

@@ -24,6 +24,7 @@ export const TicketAttributesFragmentDoc = gql`
     lastname
     fullname
     image
+    email
     organization {
       id
       internalId
@@ -53,6 +54,10 @@ export const TicketAttributesFragmentDoc = gql`
   group {
     id
     name
+    emailAddress {
+      name
+      emailAddress
+    }
   }
   priority {
     id

app/frontend/apps/mobile/pages/ticket/graphql/fragments/ticketAttributes.graphql

@@ -19,6 +19,7 @@ fragment ticketAttributes on Ticket {
     lastname
     fullname
     image
+    email
     organization {
       id
       internalId
@@ -48,6 +49,10 @@ fragment ticketAttributes on Ticket {
   group {
     id
     name
+    emailAddress {
+      name
+      emailAddress
+    }
   }
   priority {
     id

app/frontend/apps/mobile/pages/ticket/views/TicketDetailView.vue

@@ -22,6 +22,7 @@ import {
 } from '@shared/components/CommonNotifications'
 import useConfirmation from '@mobile/components/CommonConfirmation/composable'
 import { convertToGraphQLId } from '@shared/graphql/utils'
+import { useApplicationStore } from '@shared/stores/application'
 import { useTicketEdit } from '../composable/useTicketEdit'
 import { TICKET_INFORMATION_SYMBOL } from '../composable/useTicketInformation'
 import { useTicketQuery } from '../graphql/queries/ticket.api'
@@ -85,8 +86,12 @@ const {
   openArticleReplyDialog,
 } = useTicketArticleReply(ticket, form)
 
-const { currentArticleType, ticketEditSchema, articleTypeHandler } =
-  useTicketEditForm(ticket)
+const {
+  currentArticleType,
+  ticketEditSchema,
+  articleTypeHandler,
+  articleTypeSelectHandler,
+} = useTicketEditForm(ticket)
 
 const { notify } = useNotifications()
 
@@ -168,8 +173,15 @@ onBeforeRouteLeave(async () => {
   return confirmed
 })
 
+const application = useApplicationStore()
+
+const smimeIntegration = computed(
+  () => (application.config.smime_integration as boolean) ?? false,
+)
+
 const ticketEditSchemaData = reactive({
   formLocation,
+  smimeIntegration,
   newTicketArticleRequested,
   newTicketArticlePresent,
   currentArticleType,
@@ -193,6 +205,7 @@ const ticketEditSchemaData = reactive({
         :schema="ticketEditSchema"
         :flatten-form-groups="['ticket']"
         :handlers="[articleTypeHandler()]"
+        :form-kit-plugins="[articleTypeSelectHandler]"
         :schema-data="ticketEditSchemaData"
         :initial-values="initialTicketValue"
         :initial-entity-object="ticket"