From 05bdfa0698d8fc5117e995958044fa29dfef0b68 Mon Sep 17 00:00:00 2001
From: Elwyn Benson <ebenson@gitlab.com>
Date: Tue, 3 Sep 2024 15:07:23 +1200
Subject: [PATCH] feat: add improved duo chat context menu category items

- format category items nicer
- add functionality for active item
---
 .../duo_chat_context_item_menu.spec.js        | 21 +++----
 .../duo_chat_context_item_menu.vue            | 20 ++++---
 ...t_context_item_menu_category_items.spec.js | 57 +++++++++++++++++++
 ..._chat_context_item_menu_category_items.vue | 45 +++++++++++++++
 4 files changed, 122 insertions(+), 21 deletions(-)
 create mode 100644 src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js
 create mode 100644 src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue

diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js
index a3098bed4b..5079c3a2d2 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.spec.js
@@ -6,6 +6,7 @@ import {
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
 import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
 import GlDuoChatContextItemMenu from './duo_chat_context_item_menu.vue';
 
 jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
@@ -32,7 +33,7 @@ describe('GlDuoChatContextItemMenu', () => {
 
   const findMenu = () => findByTestId('context-item-menu');
   const findContextItemSelections = () => wrapper.findComponent(GlDuoChatContextItemSelections);
-  const findCategoryItems = () => findByTestId('context-menu-category-items');
+  const findCategoryItems = () => wrapper.findComponent(GlDuoChatContextItemMenuCategoryItems);
   const findResultItems = () => findByTestId('context-menu-search-items');
 
   describe('context item selection', () => {
@@ -81,18 +82,10 @@ describe('GlDuoChatContextItemMenu', () => {
       });
 
       it('shows categories', () => {
-        expect(findCategoryItems().exists()).toBe(true);
-      });
-
-      it('selects the category when clicked', async () => {
-        await findCategoryItems().find('li').trigger('click');
-
-        expect(wrapper.emitted('search').at(0)).toEqual([
-          {
-            category: MOCK_CATEGORIES[0].value,
-            query: '',
-          },
-        ]);
+        expect(findCategoryItems().props()).toEqual({
+          activeIndex: 0,
+          categories: MOCK_CATEGORIES,
+        });
       });
     });
 
@@ -116,7 +109,7 @@ describe('GlDuoChatContextItemMenu', () => {
           results,
         });
 
-        return findCategoryItems().find('li', { text: category.label }).trigger('click');
+        return findCategoryItems().vm.$emit('select', category);
       });
 
       it('shows search result items', () => {
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue
index 282b79ca62..197a314b8c 100644
--- a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue
@@ -1,13 +1,15 @@
 <script>
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';
-import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import { categoriesValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
 
 export default {
   name: 'GlDuoChatContextItemMenu',
   components: {
     GlCard,
+    GlDuoChatContextItemMenuCategoryItems,
     GlDuoChatContextItemSelections,
   },
   props: {
@@ -60,6 +62,7 @@ export default {
   },
   data() {
     return {
+      activeIndex: 0,
       selectedCategory: null,
     };
   },
@@ -78,6 +81,7 @@ export default {
   methods: {
     selectCategory(category) {
       this.selectedCategory = category;
+      this.activeIndex = 0;
 
       /**
        * Emitted when a search should be performed.
@@ -119,6 +123,7 @@ export default {
     },
     resetSelection() {
       this.selectedCategory = null;
+      this.activeIndex = 0;
     },
   },
   i18n: {
@@ -147,12 +152,13 @@ export default {
       body-class="!gl-p-2"
       data-testid="context-item-menu"
     >
-      <ul v-if="showCategorySelection" data-testid="context-menu-category-items">
-        <!-- Placeholder for GlDuoChatContextItemMenuCategoryItems component coming in a future iteration -->
-        <li v-for="category of categories" :key="category.value" @click="selectCategory(category)">
-          {{ category.label }}
-        </li>
-      </ul>
+      <gl-duo-chat-context-item-menu-category-items
+        v-if="showCategorySelection"
+        :active-index="activeIndex"
+        :categories="categories"
+        @select="selectCategory"
+        @active-index-change="activeIndex = $event"
+      />
       <div v-else data-testid="context-menu-search-items">
         <!-- Placeholder for GlDuoChatContextItemMenuSearchItem component coming in a future iteration -->
         <template v-if="loading">Loading...</template>
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js
new file mode 100644
index 0000000000..b24d31a7a9
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { MOCK_CATEGORIES } from '../mock_context_data';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+
+describe('GlDuoChatContextItemMenuCategoryItems', () => {
+  let wrapper;
+
+  const createWrapper = () => {
+    wrapper = shallowMount(GlDuoChatContextItemMenuCategoryItems, {
+      propsData: {
+        categories: MOCK_CATEGORIES,
+        activeIndex: 0,
+      },
+    });
+  };
+
+  const findActiveItem = () => wrapper.find('.active-command');
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+
+  beforeEach(() => createWrapper());
+
+  it('selects the category when clicked', async () => {
+    await findActiveItem().vm.$emit('click');
+
+    expect(wrapper.emitted('select').at(0)).toEqual([MOCK_CATEGORIES.at(0)]);
+  });
+
+  it('updates active index when hovering over item', () => {
+    findDropdownItems().wrappers.at(1).find('div').trigger('mouseenter');
+
+    expect(wrapper.emitted('active-index-change').at(0)).toEqual([1]);
+  });
+
+  it('renders the category details', () => {
+    const dropdownItems = findDropdownItems();
+
+    expect(dropdownItems).toHaveLength(MOCK_CATEGORIES.length);
+
+    dropdownItems.wrappers.forEach((dropdownItem, index) => {
+      const expectedCategory = MOCK_CATEGORIES.at(index);
+      expect(dropdownItem.text()).toEqual(expectedCategory.label);
+      expect(dropdownItem.findComponent(GlIcon).props('name')).toEqual(expectedCategory.icon);
+    });
+  });
+
+  it('marks the correct category as active', async () => {
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(0).label);
+
+    await wrapper.setProps({ activeIndex: 1 });
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(1).label);
+
+    await wrapper.setProps({ activeIndex: 2 });
+    expect(findActiveItem().text()).toBe(MOCK_CATEGORIES.at(2).label);
+  });
+});
diff --git a/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue
new file mode 100644
index 0000000000..145b5afa0b
--- /dev/null
+++ b/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.vue
@@ -0,0 +1,45 @@
+<script>
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
+import GlIcon from '../../../../../../base/icon/icon.vue';
+import { categoriesValidator } from '../utils';
+
+export default {
+  name: 'GlDuoChatContextItemMenuCategoryItems',
+  components: { GlIcon, GlDropdownItem },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.$emit('select', category);
+    },
+    setActiveIndex(index) {
+      this.$emit('active-index-change', index);
+    },
+  },
+};
+</script>
+<template>
+  <ul class="gl-mb-0 gl-list-none gl-pl-0">
+    <gl-dropdown-item
+      v-for="(category, index) in categories"
+      :key="category.value"
+      :class="{ 'active-command': index === activeIndex }"
+      data-testid="category-item"
+      @click="selectCategory(category)"
+    >
+      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
+        <gl-icon :name="category.icon" class="gl-mr-2" />
+        {{ category.label }}
+      </div>
+    </gl-dropdown-item>
+  </ul>
+</template>
-- 
GitLab