fix: Display proper conversation ID with click-to-open in SLA reports (#12570)

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue

@@ -27,6 +27,11 @@ const conversationLabels = computed(() => {
     ? props.conversation.labels.split(',').map(item => item.trim())
     : [];
 });
+
+const routerParams = computed(() => ({
+  name: 'inbox_conversation',
+  params: { conversation_id: props.conversationId },
+}));
 </script>
 
 <template>
@@ -36,9 +41,9 @@ const conversationLabels = computed(() => {
     <div
       class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-n-slate-12 rtl:text-right"
     >
-      <span class="text-n-slate-12">
+      <router-link :to="routerParams" class="text-n-slate-12 hover:underline">
-        {{ `#${conversationId} ` }}
+        {{ `#${conversationId}` }}
-      </span>
+      </router-link>
       <span class="text-n-slate-11">
         {{ $t('SLA_REPORTS.WITH') }}
       </span>

enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder

@@ -3,7 +3,7 @@ json.payload do
     json.applied_sla applied_sla.push_event_data
     json.conversation do
       conversation = applied_sla.conversation
-      json.id conversation.id
+      json.id conversation.display_id
       json.contact do
         json.name conversation.contact.name if conversation.contact
       end

spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb

@@ -152,7 +152,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
         expect(body['payload'].size).to eq(1)
         expect(body['payload'].first).to include('applied_sla')
-        expect(body['payload'].first['conversation']['id']).to eq(conversation2.id)
+        expect(body['payload'].first['conversation']['id']).to eq(conversation2.display_id)
         expect(body['meta']).to include('count' => 1)
       end