feat: Update the design of mentions with thumbnail (#5551)

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -20,7 +20,9 @@
 </template>
 
 <script>
+import mentionSelectionKeyboardMixin from './mentionSelectionKeyboardMixin';
 export default {
+  mixins: [mentionSelectionKeyboardMixin],
   props: {
     items: {
       type: Array,
@@ -39,56 +41,25 @@ export default {
       }
     },
   },
-  mounted() {
-    document.addEventListener('keydown', this.keyListener);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.keyListener);
-  },
   methods: {
     getTopPadding() {
       if (this.items.length <= 4) {
-        return -(this.items.length * 2.8 + 1.7);
+        return -(this.items.length * 2.9 + 1.7);
       }
       return -14;
     },
-    isUp(e) {
-      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
-    },
-    isEnter(e) {
-      return e.keyCode === 13;
-    },
-    keyListener(e) {
-      if (this.isUp(e)) {
-        if (!this.selectedIndex) {
-          this.selectedIndex = this.items.length - 1;
-        } else {
-          this.selectedIndex -= 1;
-        }
-      }
-      if (this.isDown(e)) {
-        if (this.selectedIndex === this.items.length - 1) {
-          this.selectedIndex = 0;
-        } else {
-          this.selectedIndex += 1;
-        }
-      }
-      if (this.isEnter(e)) {
-        this.onMentionSelect();
-      }
-      this.$el.scrollTop = 28 * this.selectedIndex;
+    handleKeyboardEvent(e) {
+      this.processKeyDownEvent(e);
+      this.$el.scrollTop = 29 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;
     },
     onListItemSelection(index) {
       this.selectedIndex = index;
-      this.onMentionSelect();
+      this.onSelect();
     },
-    onMentionSelect() {
+    onSelect() {
       this.$emit('mention-select', this.items[this.selectedIndex]);
     },
   },

app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js

@@ -0,0 +1,39 @@
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+
+export default {
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardEvent);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardEvent);
+  },
+  methods: {
+    moveSelectionUp() {
+      if (!this.selectedIndex) {
+        this.selectedIndex = this.items.length - 1;
+      } else {
+        this.selectedIndex -= 1;
+      }
+    },
+    moveSelectionDown() {
+      if (this.selectedIndex === this.items.length - 1) {
+        this.selectedIndex = 0;
+      } else {
+        this.selectedIndex += 1;
+      }
+    },
+    processKeyDownEvent(e) {
+      const keyPattern = buildHotKeys(e);
+      if (['arrowup', 'ctrl+p'].includes(keyPattern)) {
+        this.moveSelectionUp();
+        e.preventDefault();
+      } else if (['arrowdown', 'ctrl+n'].includes(keyPattern)) {
+        this.moveSelectionDown();
+        e.preventDefault();
+      } else if (keyPattern === 'enter') {
+        this.onSelect();
+        e.preventDefault();
+      }
+    },
+  },
+};

app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js

@@ -0,0 +1,64 @@
+import mentionSelectionKeyboardMixin from '../mentionSelectionKeyboardMixin';
+import { shallowMount } from '@vue/test-utils';
+
+const buildComponent = ({ data = {}, methods = {} }) => ({
+  render() {},
+  data() {
+    return data;
+  },
+  methods,
+  mixins: [mentionSelectionKeyboardMixin],
+});
+
+describe('mentionSelectionKeyboardMixin', () => {
+  test('register listeners', () => {
+    jest.spyOn(document, 'addEventListener');
+    const Component = buildComponent({});
+    shallowMount(Component);
+    // undefined expected as the method is not defined in the component
+    expect(document.addEventListener).toHaveBeenCalledWith(
+      'keydown',
+      undefined
+    );
+  });
+
+  test('processKeyDownEvent updates index on arrow up', () => {
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      ctrlKey: true,
+      key: 'p',
+      preventDefault: jest.fn(),
+    });
+    expect(wrapper.vm.selectedIndex).toBe(2);
+  });
+
+  test('processKeyDownEvent updates index on arrow down', () => {
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      key: 'ArrowDown',
+      preventDefault: jest.fn(),
+    });
+    expect(wrapper.vm.selectedIndex).toBe(1);
+  });
+
+  test('processKeyDownEvent calls select methods on Enter Key', () => {
+    const onSelectMockFn = jest.fn();
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+      methods: { onSelect: () => onSelectMockFn('enterKey pressed') },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      key: 'Enter',
+      preventDefault: jest.fn(),
+    });
+    expect(onSelectMockFn).toHaveBeenCalledWith('enterKey pressed');
+    wrapper.vm.onSelect();
+  });
+});