fix: Clicking on contact attributes doesn't do anything if contact attributes list is empty (#9257)

* fix: Clicking on contact attributes doesn't do anything if contact attributes list is empty

* Update app/javascript/dashboard/i18n/locale/en/conversation.json

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

* Update app/javascript/dashboard/i18n/locale/en/contact.json

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -48,7 +48,8 @@
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Custom Attributes",
       "CONTACT_LABELS": "Contact Labels",
-      "PREVIOUS_CONVERSATIONS": "Previous Conversations"
+      "PREVIOUS_CONVERSATIONS": "Previous Conversations",
+      "NO_RECORDS_FOUND": "No attributes found"
     }
   },
   "EDIT_CONTACT": {

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -280,6 +280,7 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "Create attribute",
+    "NO_RECORDS_FOUND": "No attributes found",
     "UPDATE": {
       "SUCCESS": "Attribute updated successfully",
       "ERROR": "Unable to update attribute. Please try again later"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-1/4 bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative"
+    class="relative w-1/4 h-full overflow-y-auto text-sm bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50"
     :class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
   >
     <contact-info
@@ -40,6 +40,9 @@
                 attribute-class="conversation--attribute"
                 attribute-from="contact_panel"
                 :custom-attributes="contact.custom_attributes"
+                :empty-state-message="
+                  $t('CONTACT_PANEL.SIDEBAR_SECTIONS.NO_RECORDS_FOUND')
+                "
                 class="even"
               />
             </accordion-item>

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 border-l rtl:border-l-0 rtl:border-r contact--panel overflow-y-auto"
+    class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
   >
     <contact-info
       :contact="contact"
@@ -89,6 +89,9 @@
                 class="even"
                 attribute-from="conversation_contact_panel"
                 :contact-id="contact.id"
+                :empty-state-message="
+                  $t('CONVERSATION_CUSTOM_ATTRIBUTES.NO_RECORDS_FOUND')
+                "
               />
             </accordion-item>
           </div>

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue

@@ -17,6 +17,12 @@
       @delete="onDelete"
       @copy="onCopy"
     />
+    <p
+      v-if="!displayedAttributes.length && emptyStateMessage"
+      class="p-3 text-center"
+    >
+      {{ emptyStateMessage }}
+    </p>
     <!-- Show more and show less buttons show it if the filteredAttributes length is greater than 5 -->
     <div v-if="filteredAttributes.length > 5" class="flex px-2 py-2">
       <woot-button
@@ -59,6 +65,10 @@ export default {
       type: String,
       required: true,
     },
+    emptyStateMessage: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {