Follow-up 3010997dd12c3cac9068e7a6cb26e525ae4b2063 - Feature: Desktop view - Implement displaying of links section in ticket detail view.

Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Florian Liebe <fl@zammad.com>
Co-authored-by: Tobias Schäfer <ts@zammad.com>

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

@@ -71,7 +71,7 @@ describe('Ticket detail view links', () => {
         __typename: 'LinkAddPayload',
         link: {
           __typename: 'Link',
-          target: {
+          item: {
             __typename: 'Ticket',
             id: convertToGraphQLId('Ticket', '1111'),
             title: 'Foo Car',
@@ -90,7 +90,7 @@ describe('Ticket detail view links', () => {
       linkList: [
         {
           __typename: 'Link',
-          target: {
+          item: {
             __typename: 'Ticket',
             id: convertToGraphQLId('Ticket', '1111'),
             title: 'Foo Car',

app/frontend/apps/desktop/pages/ticket/components/TicketLinksFlyout.vue

@@ -50,7 +50,7 @@ const linkFormSchema = [
       {
         name: 'targetTicketId',
         type: 'ticket',
-        label: __('Target ticket'),
+        label: __('Link ticket'),
         exceptTicketInternalId: sourceTicket.value.internalId,
         options: formListTargetTicketOptions,
         required: true,
@@ -90,8 +90,9 @@ const addLink = async (
     useLinkAddMutation({
       variables: {
         input: {
-          sourceId: sourceTicket.value.id,
-          targetId: formData.targetTicketId,
+          // Don't ask me why, but the sourceId and targetId are swapped to be consistent with the old UI.
+          sourceId: formData.targetTicketId,
+          targetId: sourceTicket.value.id,
           type: formData.linkType,
         },
       },
@@ -114,9 +115,7 @@ const addLink = async (
         })
 
         const newIdPresent = existingLinks?.linkList?.find((link) => {
-          return (
-            link.target.id === newLink.target.id && link.type === newLink.type
-          )
+          return link.item.id === newLink.item.id && link.type === newLink.type
         })
         if (newIdPresent) return
 

app/frontend/apps/desktop/pages/ticket/components/TicketSidebar/TicketSidebarInformation/TicketSidebarInformationContent/TicketLinks.vue

@@ -49,8 +49,9 @@ const deleteLink = async (targetId: string, type: string) => {
     useLinkRemoveMutation({
       variables: {
         input: {
-          sourceId: ticketReactive.value.id,
-          targetId,
+          // Don't ask me why, but the sourceId and targetId are swapped to be consistent with the old UI.
+          sourceId: targetId,
+          targetId: ticketReactive.value.id,
           type: type as EnumLinkType,
         },
       },
@@ -70,7 +71,7 @@ const deleteLink = async (targetId: string, type: string) => {
           query: LinkListDocument,
           data: {
             linkList: existingLinks?.linkList?.filter(
-              (link) => !(link.target.id === targetId && link.type === type),
+              (link) => !(link.item.id === targetId && link.type === type),
             ),
           },
           variables,
@@ -127,12 +128,12 @@ const openLinkFlyout = () => {
 
           <div
             v-for="link in type.links"
-            :key="link.target.id"
+            :key="link.item.id"
             class="group/link relative flex items-center"
           >
             <CommonTicketLabel
               class="h-12 items-center"
-              :ticket="link.target as TicketById"
+              :ticket="link.item as TicketById"
               :classes="{ indicator: 'mt-0', label: 'mt-0 line-clamp-1' }"
             />
             <CommonButton
@@ -143,7 +144,7 @@ const openLinkFlyout = () => {
               icon="x-lg"
               size="small"
               variant="remove"
-              @click.stop="confirmDeleteLink(link.target.id, link.type)"
+              @click.stop="confirmDeleteLink(link.item.id, link.type)"
             />
           </div>
 

app/frontend/apps/desktop/pages/ticket/components/TicketSidebar/TicketSidebarInformation/__tests__/TicketLinks.spec.ts

@@ -54,7 +54,7 @@ describe('TicketLinks', () => {
     mockLinkListQuery({
       linkList: [
         {
-          target: {
+          item: {
             __typename: 'Ticket',
             id: 'gid://zammad/Ticket/2',
             title: 'Ticket 2',
@@ -67,7 +67,7 @@ describe('TicketLinks', () => {
           type: EnumLinkType.Child,
         },
         {
-          target: {
+          item: {
             __typename: 'Ticket',
             id: 'gid://zammad/Ticket/3',
             title: 'Ticket 3',
@@ -80,7 +80,7 @@ describe('TicketLinks', () => {
           type: EnumLinkType.Child,
         },
         {
-          target: {
+          item: {
             __typename: 'Ticket',
             id: 'gid://zammad/Ticket/4',
             title: 'Ticket 4',
@@ -121,7 +121,7 @@ describe('TicketLinks', () => {
       linkUpdates: {
         links: [
           {
-            target: {
+            item: {
               __typename: 'Ticket',
               id: 'gid://zammad/Ticket/5',
               title: 'Ticket 5',

app/frontend/apps/desktop/pages/ticket/components/__tests__/TicketLinksFlyout.spec.ts

@@ -40,7 +40,7 @@ describe('TicketLinksFlyout', () => {
       wrapper.getByRole('heading', { name: 'Link Tickets', level: 2 }),
     ).toBeInTheDocument()
 
-    expect(wrapper.getByLabelText('Target ticket')).toBeInTheDocument()
+    expect(wrapper.getByLabelText('Link ticket')).toBeInTheDocument()
     expect(wrapper.getByLabelText('Link type')).toBeInTheDocument()
 
     expect(

app/frontend/apps/desktop/pages/ticket/composables/__tests__/useObjectLinks.spec.ts

@@ -18,7 +18,7 @@ describe('useObjectLinks', () => {
       mockLinkListQuery({
         linkList: [
           {
-            target: {
+            item: {
               __typename: 'Ticket',
               id: 'gid://zammad/Ticket/2',
               title: 'Ticket 2',
@@ -26,7 +26,7 @@ describe('useObjectLinks', () => {
             type: EnumLinkType.Child,
           },
           {
-            target: {
+            item: {
               __typename: 'Ticket',
               id: 'gid://zammad/Ticket/3',
               title: 'Ticket 3',
@@ -34,7 +34,7 @@ describe('useObjectLinks', () => {
             type: EnumLinkType.Child,
           },
           {
-            target: {
+            item: {
               __typename: 'Ticket',
               id: 'gid://zammad/Ticket/4',
               title: 'Ticket 4',
@@ -59,7 +59,7 @@ describe('useObjectLinks', () => {
           links: [
             {
               __typename: 'Link',
-              target: expect.objectContaining({
+              item: expect.objectContaining({
                 id: 'gid://zammad/Ticket/4',
                 title: 'Ticket 4',
               }),
@@ -74,7 +74,7 @@ describe('useObjectLinks', () => {
           links: [
             {
               __typename: 'Link',
-              target: expect.objectContaining({
+              item: expect.objectContaining({
                 id: 'gid://zammad/Ticket/2',
                 title: 'Ticket 2',
               }),
@@ -82,7 +82,7 @@ describe('useObjectLinks', () => {
             },
             {
               __typename: 'Link',
-              target: expect.objectContaining({
+              item: expect.objectContaining({
                 id: 'gid://zammad/Ticket/3',
                 title: 'Ticket 3',
               }),

app/frontend/apps/desktop/pages/ticket/composables/useObjectLinks.ts

@@ -24,9 +24,11 @@ export const useObjectLinks = (
 ) => {
   const { linkTypes } = useObjectLinkTypes()
 
+  const objectId = computed(() => object.value?.id)
+
   const linkListQuery = new QueryHandler(
     useLinkListQuery(() => ({
-      objectId: object.value?.id,
+      objectId: objectId.value,
       targetType,
     })),
   )
@@ -40,7 +42,7 @@ export const useObjectLinks = (
   >(() => ({
     document: LinkUpdatesDocument,
     variables: {
-      objectId: object.value?.id,
+      objectId: objectId.value,
       targetType,
     },
     updateQuery: (prev, { subscriptionData }) => {

app/frontend/apps/desktop/pages/ticket/graphql/mutations/linkAdd.api.ts

@@ -10,7 +10,7 @@ export const LinkAddDocument = gql`
   linkAdd(input: $input) {
     link {
       type
-      target {
+      item {
         ... on Ticket {
           id
           internalId

app/frontend/apps/desktop/pages/ticket/graphql/mutations/linkAdd.graphql

@@ -2,7 +2,7 @@ mutation linkAdd($input: LinkInput!) {
   linkAdd(input: $input) {
     link {
       type
-      target {
+      item {
         ... on Ticket {
           id
           internalId

app/frontend/apps/desktop/pages/ticket/graphql/queries/linkList.api.ts

@@ -9,7 +9,7 @@ export const LinkListDocument = gql`
     query linkList($objectId: ID!, $targetType: String!) {
   linkList(objectId: $objectId, targetType: $targetType) {
     type
-    target {
+    item {
       ... on Ticket {
         id
         internalId