Feature: Mobile - align usage of common ticket indicator.

app/frontend/apps/mobile/components/CommonSectionPopup/types.ts

@@ -1,6 +1,6 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import type { ButtonVariant } from "@shared/components/Form/fields/FieldButton/types"
+import type { ButtonVariant } from '@shared/components/Form/fields/FieldButton/types'
 
 export interface PopupItem {
   label: string

app/frontend/apps/mobile/components/CommonSelect/CommonSelectItem.vue

@@ -57,7 +57,7 @@ const label = computed(() => {
     />
     <CommonTicketStateIndicator
       v-if="option.status"
-      :status="option.status"
+      :color-code="option.status"
       :label="option.label || String(option.value)"
       :class="{
         'opacity-30': option.disabled,

app/frontend/apps/mobile/components/CommonTicketStateList/CommonTicketStateList.vue

@@ -42,7 +42,7 @@ const getTicketsLink = (stateIds: number[]) => {
     </CommonSectionMenuLink>
     <CommonSectionMenuLink
       :icon="{
-        name: 'mobile-check-circle-outline',
+        name: 'mobile-check-circle-no',
         size: 'base',
         class: 'text-green',
         decorative: true,

app/frontend/apps/mobile/components/Ticket/TicketItem.story.vue

@@ -2,6 +2,7 @@
 
 <script setup lang="ts">
 import { TicketState } from '@shared/entities/ticket/types'
+import { EnumTicketStateColorCode } from '@shared/graphql/types'
 import TicketItem from './TicketItem.vue'
 
 const ticket = {
@@ -13,6 +14,7 @@ const ticket = {
   owner: {
     fullname: 'Jane Doe',
   },
+  stateColorCode: EnumTicketStateColorCode.Open,
 }
 </script>
 

app/frontend/apps/mobile/components/Ticket/TicketItem.vue

@@ -27,8 +27,10 @@ const customer = computed(() => {
 <template>
   <div class="flex cursor-pointer ltr:pr-3 rtl:pl-3">
     <div class="flex w-14 items-center justify-center">
-      <!-- TODO label? -->
-      <CommonTicketStateIndicator :status="entity.state.name" label="" />
+      <CommonTicketStateIndicator
+        :color-code="entity.stateColorCode"
+        :label="entity.state.name"
+      />
     </div>
     <div
       class="flex flex-1 items-center gap-1 overflow-hidden border-b border-white/10 py-3 text-gray-100 ltr:pr-2 rtl:pl-2"

app/frontend/apps/mobile/components/Ticket/__tests__/TicketItem.spec.ts

@@ -5,6 +5,7 @@ vi.setSystemTime(now)
 
 import { renderComponent } from '@tests/support/components'
 import { TicketState } from '@shared/entities/ticket/types'
+import { EnumTicketStateColorCode } from '@shared/graphql/types'
 import type { TicketItemData } from '../types'
 import TicketItem from '../TicketItem.vue'
 
@@ -29,10 +30,11 @@ describe('ticket item display', () => {
         fullname: 'Jane Doe',
       },
       priority: {
-        name: 'high',
+        name: '3 high',
         uiColor: 'high-priority',
         defaultCreate: false,
       },
+      stateColorCode: EnumTicketStateColorCode.Open,
     }
 
     const view = renderComponent(TicketItem, {
@@ -43,21 +45,22 @@ describe('ticket item display', () => {
       router: true,
     })
 
-    // TODO alt removed from img, maybe return? remove if error
-    // expect(view.getByAltText(TicketState.Open)).toBeInTheDocument()
+    expect(view.getByRole('group')).toHaveClass('text-yellow')
+    expect(view.getByIconName('mobile-check-circle-no')).toHaveAccessibleName(
+      '(state: open)',
+    )
+
     expect(view.getByText('#12345 · John Doe')).toBeInTheDocument()
-    // expect(view.getByText('·')).toBeInTheDocument()
-    // expect(view.getByText('John Doe')).toBeInTheDocument()
     expect(view.getByText('test ticket')).toBeInTheDocument()
 
     expect(
       view.getByText('edited 10 hours ago by Jane Doe'),
     ).toBeInTheDocument()
 
-    const priority = view.getByText('HIGH')
+    const priority = view.getByText('3 high')
 
     expect(priority).toBeInTheDocument()
-    expect(priority).toHaveClass('u-high-priority-color')
+    expect(priority).toHaveClasses(['bg-red-dark', 'text-red-bright'])
   })
 
   it('renders when something is missing', () => {
@@ -67,6 +70,7 @@ describe('ticket item display', () => {
       internalId: 1,
       state: { name: TicketState.Open },
       title: 'test ticket',
+      stateColorCode: EnumTicketStateColorCode.Open,
     }
 
     const view = renderComponent(TicketItem, {
@@ -77,12 +81,16 @@ describe('ticket item display', () => {
       router: true,
     })
 
+    expect(view.getByRole('group')).toHaveClass('text-yellow')
+    expect(view.getByIconName('mobile-check-circle-no')).toHaveAccessibleName(
+      '(state: open)',
+    )
+
     expect(view.getByText('#12345')).toBeInTheDocument()
     expect(view.queryByText(/·/)).not.toBeInTheDocument()
     expect(view.getByText('test ticket')).toBeInTheDocument()
 
     expect(view.queryByTestId('stringUpdated')).not.toBeInTheDocument()
-
-    expect(view.queryByText('HIGH')).not.toBeInTheDocument()
+    expect(view.queryByText('3 high')).not.toBeInTheDocument()
   })
 })

app/frontend/apps/mobile/components/Ticket/types.ts

@@ -1,6 +1,7 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
 import type { TicketState } from '@shared/entities/ticket/types'
+import type { EnumTicketStateColorCode } from '@shared/graphql/types'
 
 export interface TicketItemData {
   id: string
@@ -23,4 +24,5 @@ export interface TicketItemData {
     id: string
     fullname?: Maybe<string>
   }
+  stateColorCode: EnumTicketStateColorCode
 }

app/frontend/apps/mobile/pages/search/graphql/queries/searchOverview.api.ts

@@ -31,6 +31,7 @@ export const SearchDocument = gql`
         id
         fullname
       }
+      stateColorCode
     }
     ... on User {
       id

app/frontend/apps/mobile/pages/search/graphql/queries/searchOverview.graphql

@@ -27,6 +27,7 @@ query search(
         id
         fullname
       }
+      stateColorCode
     }
     ... on User {
       id

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

@@ -1,11 +1,12 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import type {
-  TicketArticlesQuery,
-  TicketLiveUserDeletePayload,
-  TicketLiveUserUpsertPayload,
-  TicketQuery,
-  PolicyTicket,
+import {
+  type TicketArticlesQuery,
+  type TicketLiveUserDeletePayload,
+  type TicketLiveUserUpsertPayload,
+  type TicketQuery,
+  type PolicyTicket,
+  EnumTicketStateColorCode,
 } from '@shared/graphql/types'
 import { TicketState } from '@shared/entities/ticket/types'
 import type { TicketView } from '@shared/entities/ticket/types'
@@ -115,6 +116,7 @@ export const defaultTicket = (policies: Partial<PolicyTicket> = {}) => {
         defaultCreate: false,
       },
       objectAttributeValues: [],
+      stateColorCode: EnumTicketStateColorCode.Open,
     },
   })
 }