[Bug] Remove toggle_typing API call for channels except Facebook (#211)

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

@@ -1,17 +1,23 @@
 <template>
-  <div>
-  <ul class="vertical dropdown menu canned" id="canned-list"  v-bind:style="{ top: getTopPadding() + 'rem'}">
+  <ul
+    v-if="cannedMessages.length"
+    id="canned-list"
+    class="vertical dropdown menu canned"
+    :style="{ top: getTopPadding() + 'rem' }"
+  >
     <li
       v-for="(item, index) in cannedMessages"
       :id="`canned-${index}`"
-      :class="{'active': index === selectedIndex}"
-      v-on:click="onListItemSelection(index)"
-      v-on:mouseover="onHover(index)"
+      :key="item.short_code"
+      :class="{ active: index === selectedIndex }"
+      @click="onListItemSelection(index)"
+      @mouseover="onHover(index)"
     >
-      <a><strong>{{item.short_code}}</strong> - {{item.content}}</a>
+      <a class="text-truncate">
+        <strong>{{ item.short_code }}</strong> - {{ item.content }}
+      </a>
     </li>
   </ul>
-</div>
 </template>
 
 <script>
@@ -30,9 +36,11 @@ export default {
     }),
   },
   mounted() {
-    /* eslint-disable no-confusing-arrow */
     document.addEventListener('keydown', this.keyListener);
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keyListener);
+  },
   methods: {
     getTopPadding() {
       if (this.cannedMessages.length <= 4) {
@@ -41,10 +49,10 @@ export default {
       return -14;
     },
     isUp(e) {
-      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80);  // UP, Ctrl-P
+      return e.keyCode === 38 || (e.ctrlKey && e.keyCode === 80); // UP, Ctrl-P
     },
     isDown(e) {
-      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78);  // DOWN, Ctrl-N
+      return e.keyCode === 40 || (e.ctrlKey && e.keyCode === 78); // DOWN, Ctrl-N
     },
     isEnter(e) {
       return e.keyCode === 13;
@@ -67,7 +75,8 @@ export default {
       if (this.isEnter(e)) {
         this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
       }
-      this.$el.querySelector('#canned-list').scrollTop = 34 * this.selectedIndex;
+      this.$el.querySelector('#canned-list').scrollTop =
+        34 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;
@@ -77,8 +86,13 @@ export default {
       this.onClick(this.cannedMessages[this.selectedIndex].content);
     },
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.keyListener);
-  },
 };
 </script>
+
+<style lang="scss" scoped>
+.text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>