fix: display_id to id mapping not handled (#12426)

The frontend filtering didn't handle the `id` to `display_id` mapping of
conversations. This PR fixes it

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -103,6 +103,12 @@ const validationError = computed(() => {
   );
 });
 
+const inputFieldType = computed(() => {
+  if (inputType.value === 'date') return 'date';
+  if (inputType.value === 'number') return 'number';
+  return 'text';
+});
+
 const resetModelOnAttributeKeyChange = newAttributeKey => {
   /**
    * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -182,7 +188,7 @@ defineExpose({ validate });
         <Input
           v-else
           v-model="values"
-          :type="inputType === 'date' ? 'date' : 'text'"
+          :type="inputFieldType"
           class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />

app/javascript/dashboard/components-next/filter/provider.js

@@ -164,8 +164,8 @@ export function useConversationFilterContext() {
       value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
       attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
       label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
-      inputType: 'plainText',
+      inputType: 'number',
-      datatype: 'number',
+      dataType: 'number',
       filterOperators: containmentOperators.value,
       attributeModel: 'standard',
     },
@@ -179,7 +179,7 @@ export function useConversationFilterContext() {
         id: campaign.id,
         name: campaign.title,
       })),
-      datatype: 'number',
+      dataType: 'number',
       filterOperators: presenceOperators.value,
       attributeModel: 'standard',
     },

app/javascript/dashboard/components-next/input/Input.vue

@@ -55,7 +55,12 @@ const inputOutlineClass = computed(() => {
 });
 
 const handleInput = event => {
-  emit('update:modelValue', event.target.value);
+  let value = event.target.value;
+  // Convert to number if type is number and value is not empty
+  if (props.type === 'number' && value !== '') {
+    value = Number(value);
+  }
+  emit('update:modelValue', value);
   emit('input', event);
 };
 
@@ -114,7 +119,7 @@ onMounted(() => {
           ? max
           : undefined
       "
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"

app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js

@@ -64,11 +64,13 @@ const getValueFromConversation = (conversation, attributeKey) => {
   switch (attributeKey) {
     case 'status':
     case 'priority':
-    case 'display_id':
     case 'labels':
     case 'created_at':
     case 'last_activity_at':
       return conversation[attributeKey];
+    case 'display_id':
+      // Frontend uses 'id' but backend expects 'display_id'
+      return conversation.display_id || conversation.id;
     case 'assignee_id':
       return conversation.meta?.assignee?.id;
     case 'inbox_id':

app/javascript/dashboard/store/modules/conversations/helpers/specs/filterHelpers.spec.js

@@ -247,7 +247,7 @@ describe('filterHelpers', () => {
 
     // Text search tests - display_id
     it('should match conversation with equal_to operator for display_id', () => {
-      const conversation = { display_id: '12345' };
+      const conversation = { id: '12345' };
       const filters = [
         {
           attribute_key: 'display_id',
@@ -260,7 +260,7 @@ describe('filterHelpers', () => {
     });
 
     it('should match conversation with contains operator for display_id', () => {
-      const conversation = { display_id: '12345' };
+      const conversation = { id: '12345' };
       const filters = [
         {
           attribute_key: 'display_id',
@@ -273,7 +273,7 @@ describe('filterHelpers', () => {
     });
 
     it('should not match conversation with does_not_contain operator for display_id', () => {
-      const conversation = { display_id: '12345' };
+      const conversation = { id: '12345' };
       const filters = [
         {
           attribute_key: 'display_id',
@@ -286,7 +286,7 @@ describe('filterHelpers', () => {
     });
 
     it('should match conversation with does_not_contain operator when value is not present', () => {
-      const conversation = { display_id: '12345' };
+      const conversation = { id: '12345' };
       const filters = [
         {
           attribute_key: 'display_id',
@@ -989,7 +989,7 @@ describe('filterHelpers', () => {
 
     it('should handle empty string values in conversation', () => {
       const conversation = {
-        display_id: '',
+        id: '',
       };
       const filters = [
         {