feat: show external error in message as tooltip (#6701)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -68,6 +68,7 @@
           :id="data.id"
           :sender="data.sender"
           :story-sender="storySender"
+          :external-error="externalError"
           :story-id="storyId"
           :is-a-tweet="isATweet"
           :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -261,6 +262,9 @@ export default {
     contentAttributes() {
       return this.data.content_attributes || {};
     },
+    externalError() {
+      return this.contentAttributes.external_error || null;
+    },
     sender() {
       return this.data.sender || {};
     },
@@ -351,7 +355,7 @@ export default {
         return false;
       }
       if (this.isFailed) {
-        return this.$t(`CONVERSATION.SEND_FAILED`);
+        return this.externalError ? '' : this.$t(`CONVERSATION.SEND_FAILED`);
       }
       return false;
     },

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -9,6 +9,14 @@
     >
       {{ readableTime }}
     </span>
+    <span v-if="externalError" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="externalError"
+        icon="error-circle"
+        class="action--icon"
+        size="14"
+      />
+    </span>
     <span v-if="showReadIndicator" class="read-indicator-wrap">
       <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
@@ -98,6 +106,10 @@ export default {
       type: String,
       default: '',
     },
+    externalError: {
+      type: String,
+      default: '',
+    },
     storyId: {
       type: String,
       default: '',