Maintenance: Desktop view - Hide priority icons behind the feature flag.

app/assets/javascripts/app/controllers/ticket_overview/table.coffee

@@ -277,7 +277,7 @@ class App.TicketOverviewTable extends App.Controller
         number:
           [ callbackLinkToTicket, callbackTicketTitleAdd ]
 
-      if App.Config.get('ui_ticket_overview_priority_icon') == true
+      if App.Config.get('ui_ticket_priority_icons') == true
         callbackHeader = [ callbackIconHeader, callbackIconPriorityHeader ]
         callbackAttributes.icon_priority = [ callbackIconPriority ]
 

app/assets/javascripts/app/controllers/ticket_priority.coffee

@@ -38,10 +38,10 @@ class TicketPriority extends App.ControllerSubContent
   formHandler: (params, attribute, attributes, classname, form, ui) ->
     form.find('[data-attribute-name="ui_icon"]').show()
 
-    return if App.Config.get('ui_ticket_overview_priority_icon') and form.find('[name="ui_color"]').val()
+    return if App.Config.get('ui_ticket_priority_icons') and form.find('[name="ui_color"]').val()
 
     # Hide the "highlight icon" selection in case:
-    #   - `ui_ticket_overview_priority_icon` setting is disabled
+    #   - `ui_ticket_priority_icons` setting is disabled
     #   - `ui_color` form field is not set
     form.find('[data-attribute-name="ui_icon"]').hide()
 

app/assets/javascripts/app/controllers/widget/ticket_list.coffee

@@ -104,7 +104,7 @@ class App.TicketList extends App.Controller
       number:
         [ callbackLinkToTicket, callbackTicketTitleAdd ]
 
-    if App.Config.get('ui_ticket_overview_priority_icon') == true
+    if App.Config.get('ui_ticket_priority_icons') == true
       callbackHeader = [ callbackIconHeader, callbackIconPriorityHeader ]
       callbackAttributes.icon_priority = [ callbackIconPriority ]
 

app/frontend/apps/desktop/components/CommonTicketPriorityIndicator/CommonTicketPriorityIndicator.vue

@@ -1,14 +1,19 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
+import { useApplicationStore } from '#shared/stores/application.ts'
+
 import type { TicketPriority } from './types.ts'
 
 export interface Props {
   priority?: TicketPriority
 }
 
+const { config } = storeToRefs(useApplicationStore())
+
 const props = defineProps<Props>()
 
 const badgeVariant = computed(() => {
@@ -35,8 +40,19 @@ const badgeIcon = computed(() => {
 </script>
 
 <template>
-  <CommonBadge :variant="badgeVariant" class="uppercase">
-    <CommonIcon size="xs" :name="badgeIcon" class="ltr:mr-1.5 rtl:ml-1.5" />
+  <CommonBadge
+    :variant="badgeVariant"
+    class="uppercase"
+    role="status"
+    aria-live="polite"
+  >
+    <CommonIcon
+      v-if="config.ui_ticket_priority_icons"
+      size="xs"
+      :name="badgeIcon"
+      class="ltr:mr-1.5 rtl:ml-1.5"
+      decorative
+    />
     {{ $t(priority?.name) }}
   </CommonBadge>
 </template>

app/frontend/apps/desktop/components/CommonTicketPriorityIndicator/__tests__/CommonTicketPriorityIndicator.spec.ts

@@ -1,6 +1,10 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { renderComponent } from '#tests/support/components/index.ts'
+import { mockApplicationConfig } from '#tests/support/mock-applicationConfig.ts'
+
+import { getConfigUpdatesSubscriptionHandler } from '#shared/graphql/subscriptions/configUpdates.mocks.ts'
+import { useApplicationStore } from '#shared/stores/application.ts'
 
 import CommonTicketPriorityIndicator from '../CommonTicketPriorityIndicator.vue'
 
@@ -50,4 +54,70 @@ describe('CommonTicketPriorityIndicator.vue', () => {
 
     expect(view.getByText('2 normal')).toHaveClass('common-badge-warning')
   })
+
+  it('supports accessibility features', () => {
+    const view = renderCommonTicketPriorityIndicator({
+      priority: {
+        defaultCreate: true,
+        name: '2 normal',
+        uiColor: null,
+      },
+    })
+
+    const status = view.getByRole('status')
+
+    expect(status).toHaveAttribute('aria-live', 'polite')
+    expect(status).toHaveTextContent('2 normal')
+  })
+
+  it('supports rendering priority icons', async () => {
+    mockApplicationConfig({
+      ui_ticket_priority_icons: true,
+    })
+
+    const view = renderCommonTicketPriorityIndicator({
+      priority: {
+        defaultCreate: true,
+        name: '2 normal',
+        uiColor: null,
+      },
+    })
+
+    expect(view.getByIconName('priority-normal')).toBeInTheDocument()
+
+    await view.rerender({
+      priority: {
+        defaultCreate: false,
+        name: '3 high',
+        uiColor: 'high-priority',
+      },
+    })
+
+    expect(view.getByIconName('priority-high')).toBeInTheDocument()
+
+    await view.rerender({
+      priority: {
+        defaultCreate: false,
+        name: '1 low',
+        uiColor: 'low-priority',
+      },
+    })
+
+    expect(view.getByIconName('priority-low')).toBeInTheDocument()
+
+    const { initializeConfigUpdateSubscription } = useApplicationStore()
+
+    initializeConfigUpdateSubscription()
+
+    await getConfigUpdatesSubscriptionHandler().trigger({
+      configUpdates: {
+        setting: {
+          key: 'ui_ticket_priority_icons',
+          value: false,
+        },
+      },
+    })
+
+    expect(view.queryByIconName('priority-low')).not.toBeInTheDocument()
+  })
 })

app/frontend/shared/types/config.ts

@@ -94,8 +94,8 @@ export interface ConfigList {
   ui_ticket_create_available_types: ('phone-in' | 'phone-out' | 'email-out')[]
   ui_ticket_create_default_type: 'phone-in' | 'phone-out' | 'email-out'
   ui_ticket_create_notes: unknown
-  ui_ticket_overview_priority_icon?: boolean | null
   ui_ticket_overview_ticket_limit: number
+  ui_ticket_priority_icons?: boolean | null
   ui_ticket_zoom_article_delete_timeframe: number
   ui_ticket_zoom_article_email_full_quote?: boolean | null
   ui_ticket_zoom_article_email_full_quote_header?: boolean | null

db/migrate/20190409000001_setting_ticket_overview_priority_icon_and_color.rb

@@ -2,6 +2,9 @@
 
 class SettingTicketOverviewPriorityIconAndColor < ActiveRecord::Migration[5.1]
   def change
+    # return if it's a new setup
+    return if !Setting.exists?(name: 'system_init_done')
+
     Setting.create_if_not_exists(
       title:       'Priority Icons in Overviews',
       name:        'ui_ticket_overview_priority_icon',

db/migrate/20240718192329_rename_ticket_overview_priority_icon_setting.rb

@@ -0,0 +1,35 @@
+# Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+class RenameTicketOverviewPriorityIconSetting < ActiveRecord::Migration[7.0]
+  def change
+    # return if it's a new setup
+    return if !Setting.exists?(name: 'system_init_done')
+
+    setting = Setting.find_by name: 'ui_ticket_overview_priority_icon'
+    return if setting.blank?
+
+    setting.update!(
+      title:       'Ticket Priority Icons',
+      name:        'ui_ticket_priority_icons',
+      area:        'UI::Ticket::Priority',
+      description: 'Enables display of ticket priority icons in UI.',
+      options:     {
+        form: [
+          {
+            display:   '',
+            null:      true,
+            name:      'ui_ticket_priority_icons',
+            tag:       'boolean',
+            translate: true,
+            options:   {
+              true  => 'yes',
+              false => 'no',
+            },
+          },
+        ],
+      },
+    )
+  rescue => e
+    Rails.logger.error e
+  end
+end

db/seeds/settings.rb

@@ -970,16 +970,16 @@ Setting.create_if_not_exists(
 )
 
 Setting.create_if_not_exists(
-  title:       __('Priority Icons in Overviews'),
-  name:        'ui_ticket_overview_priority_icon',
-  area:        'UI::TicketOverview::PriorityIcons',
-  description: __('Enables priority icons in ticket overviews.'),
+  title:       __('Ticket Priority Icons'),
+  name:        'ui_ticket_priority_icons',
+  area:        'UI::Ticket::Priority',
+  description: __('Enables display of ticket priority icons in UI.'),
   options:     {
     form: [
       {
         display:   '',
         null:      true,
-        name:      'ui_ticket_overview_priority_icon',
+        name:      'ui_ticket_priority_icons',
         tag:       'boolean',
         translate: true,
         options:   {

i18n/zammad.pot

@@ -5356,12 +5356,12 @@ msgstr ""
 msgid "Enables console logging."
 msgstr ""
 
-#: db/seeds/settings.rb:796
-msgid "Enables preview of attachments."
+#: db/seeds/settings.rb:976
+msgid "Enables display of ticket priority icons in UI."
 msgstr ""
 
-#: db/seeds/settings.rb:976
-msgid "Enables priority icons in ticket overviews."
+#: db/seeds/settings.rb:796
+msgid "Enables preview of attachments."
 msgstr ""
 
 #: db/seeds/settings.rb:1277
@@ -10717,10 +10717,6 @@ msgstr ""
 msgid "Priority"
 msgstr ""
 
-#: db/seeds/settings.rb:973
-msgid "Priority Icons in Overviews"
-msgstr ""
-
 #: db/seeds/settings.rb:1945
 msgid "Private key (PEM)"
 msgstr ""
@@ -14865,6 +14861,10 @@ msgstr ""
 msgid "Ticket Priority"
 msgstr ""
 
+#: db/seeds/settings.rb:973
+msgid "Ticket Priority Icons"
+msgstr ""
+
 #: app/assets/javascripts/app/models/sla.coffee:7
 msgid "Ticket Selector"
 msgstr ""