@gitlab/ui 91.14.0 → 91.15.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [91.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.14.0...v91.15.0) (2024-09-10)
+
+
+### Features
+
+* add duo chat context menu keyboard interactions ([a031d8c](https://gitlab.com/gitlab-org/gitlab-ui/commit/a031d8c823757e7a22138c3bdc7de9ff24c25da9))
+
 # [91.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.13.0...v91.14.0) (2024-09-10)
 
 

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.js

@@ -1,8 +1,8 @@
 import debounce from 'lodash/debounce';
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card';
-import { contextItemsValidator, categoriesValidator } from '../utils';
 import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections';
+import { contextItemsValidator, categoriesValidator, wrapIndex } from '../utils';
 import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items';
 import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -66,14 +66,17 @@ var script = {
   },
   data() {
     return {
-      activeIndex: 0,
+      selectedCategory: null,
       searchQuery: '',
-      selectedCategory: null
+      activeIndex: 0
     };
   },
   computed: {
     showCategorySelection() {
       return this.open && !this.selectedCategory;
+    },
+    allResultsAreDisabled() {
+      return this.results.every(result => !result.isEnabled);
     }
   },
   watch: {
@@ -84,14 +87,22 @@ var script = {
     },
     searchQuery(query) {
       this.debouncedSearch(query);
+    },
+    results(newResults) {
+      const firstEnabledIndex = newResults.findIndex(result => result.isEnabled);
+      this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
     }
   },
   methods: {
     selectCategory(category) {
-      this.activeIndex = 0;
       this.searchQuery = '';
       this.selectedCategory = category;
-
+      this.$emit('search', {
+        category: category.value,
+        query: ''
+      });
+    },
+    debouncedSearch: debounce(function search(query) {
       /**
        * Emitted when a search should be performed.
        * @property {Object} filter
@@ -99,10 +110,10 @@ var script = {
        * @property {string} filter.query - The search query
        */
       this.$emit('search', {
-        category: category.value,
-        query: ''
+        category: this.selectedCategory.value,
+        query
       });
-    },
+    }, SEARCH_DEBOUNCE_MS),
     selectItem(item) {
       if (!item.isEnabled) {
         return;
@@ -127,15 +138,72 @@ var script = {
        */
       this.$emit('remove', item);
     },
-    debouncedSearch: debounce(function search(query) {
-      this.$emit('search', {
-        category: this.selectedCategory.value,
-        query
-      });
-    }, SEARCH_DEBOUNCE_MS),
     resetSelection() {
       this.selectedCategory = null;
+      this.searchQuery = '';
       this.activeIndex = 0;
+    },
+    async scrollActiveItemIntoView() {
+      await this.$nextTick();
+      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      }
+    },
+    handleKeyUp(e) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
+          this.scrollActiveItemIntoView();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.selectCategory(this.categories[this.activeIndex]);
+            return;
+          }
+          if (!this.results.length) {
+            return;
+          }
+          this.selectItem(this.results[this.activeIndex]);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.$emit('close');
+            return;
+          }
+          this.selectedCategory = null;
+          break;
+      }
+    },
+    moveActiveIndex(step) {
+      if (this.showCategorySelection) {
+        // Categories cannot be disabled, so just loop to the next/prev one
+        this.activeIndex = wrapIndex(this.activeIndex, step, this.categories.length);
+        return;
+      }
+
+      // Return early if there are no results or all results are disabled
+      if (!this.results.length || this.allResultsAreDisabled) {
+        return;
+      }
+
+      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
+      let newIndex = this.activeIndex;
+      do {
+        newIndex = wrapIndex(newIndex, step, this.results.length);
+        if (newIndex === this.activeIndex) {
+          // If we've looped through all items and found no enabled ones, keep the current index
+          return;
+        }
+      } while (!this.results[newIndex].isEnabled);
+      this.activeIndex = newIndex;
     }
   },
   i18n: {
@@ -147,7 +215,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.selections.length)?_c('gl-duo-chat-context-item-selections',{staticClass:"gl-mb-3",attrs:{"selections":_vm.selections,"removable":true,"title":_vm.$options.i18n.selectedContextItemsTitle,"default-collapsed":false},on:{"remove":_vm.removeItem}}):_vm._e(),_vm._v(" "),(_vm.open)?_c('gl-card',{staticClass:"slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2","data-testid":"context-item-menu"}},[(_vm.showCategorySelection)?_c('gl-duo-chat-context-item-menu-category-items',{attrs:{"active-index":_vm.activeIndex,"categories":_vm.categories},on:{"select":_vm.selectCategory,"active-index-change":function($event){_vm.activeIndex = $event;}}}):_c('gl-duo-chat-context-item-menu-search-items',{attrs:{"active-index":_vm.activeIndex,"category":_vm.selectedCategory,"loading":_vm.loading,"error":_vm.error,"results":_vm.results},on:{"select":_vm.selectItem,"active-index-change":function($event){_vm.activeIndex = $event;}},model:{value:(_vm.searchQuery),callback:function ($$v) {_vm.searchQuery=$$v;},expression:"searchQuery"}})],1):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.selections.length)?_c('gl-duo-chat-context-item-selections',{staticClass:"gl-mb-3",attrs:{"selections":_vm.selections,"removable":true,"title":_vm.$options.i18n.selectedContextItemsTitle,"default-collapsed":false},on:{"remove":_vm.removeItem}}):_vm._e(),_vm._v(" "),(_vm.open)?_c('gl-card',{staticClass:"slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2","data-testid":"context-item-menu"}},[(_vm.showCategorySelection)?_c('gl-duo-chat-context-item-menu-category-items',{attrs:{"active-index":_vm.activeIndex,"categories":_vm.categories},on:{"select":_vm.selectCategory,"active-index-change":function($event){_vm.activeIndex = $event;}}}):_c('gl-duo-chat-context-item-menu-search-items',{attrs:{"active-index":_vm.activeIndex,"category":_vm.selectedCategory,"loading":_vm.loading,"error":_vm.error,"results":_vm.results},on:{"select":_vm.selectItem,"keyup":_vm.handleKeyUp,"active-index-change":function($event){_vm.activeIndex = $event;}},model:{value:(_vm.searchQuery),callback:function ($$v) {_vm.searchQuery=$$v;},expression:"searchQuery"}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.js

@@ -78,11 +78,17 @@ var script = {
       this.$emit('select', contextItem);
       this.userInitiatedSearch = false;
     },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
     setActiveIndex(index) {
       var _this$results$index;
       if ((_this$results$index = this.results[index]) !== null && _this$results$index !== void 0 && _this$results$index.isEnabled) {
         this.$emit('active-index-change', index);
       }
+    },
+    isActiveItem(contextItem, index) {
+      return index === this.activeIndex && contextItem.isEnabled;
     }
   },
   i18n: {
@@ -95,9 +101,9 @@ const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-max-h-31 gl-overflow-y-scroll"},[(_vm.loading)?_c('gl-duo-chat-context-item-menu-search-items-loading',{attrs:{"rows":_vm.numLoadingItems}}):(_vm.error)?_c('gl-alert',{staticClass:"gl-m-3",attrs:{"variant":"danger","dismissible":false,"data-testid":"search-results-error"}},[_vm._v("\n      "+_vm._s(_vm.error)+"\n    ")]):(_vm.showEmptyState)?_c('div',{staticClass:"gl-rounded-base gl-p-3 gl-text-center gl-text-secondary",attrs:{"data-testid":"search-results-empty-state"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.emptyStateMessage)+"\n    ")]):_c('ul',{staticClass:"gl-mb-1 gl-list-none gl-flex-row gl-pl-0"},_vm._l((_vm.results),function(contextItem,index){return _c('gl-dropdown-item',{key:contextItem.id,staticClass:"duo-chat-context-search-result-item",class:{
-          'active-command': index === _vm.activeIndex,
+          'active-command': _vm.isActiveItem(contextItem, index),
           'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none': !contextItem.isEnabled,
-        },attrs:{"id":("dropdown-item-" + index),"tabindex":!contextItem.isEnabled ? -1 : undefined,"data-testid":"search-result-item"},on:{"click":function($event){return _vm.selectItem(contextItem)}}},[_c('div',{on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-duo-chat-context-item-menu-search-item',{class:{ 'gl-text-secondary': !contextItem.isEnabled },attrs:{"context-item":contextItem,"category":_vm.category,"data-testid":"search-result-item-details"}})],1)])}),1)],1),_vm._v(" "),_c('gl-form-input',{ref:"contextMenuSearchInput",attrs:{"value":_vm.searchQuery,"placeholder":_vm.searchInputPlaceholder,"autofocus":"","data-testid":"context-menu-search-input"},on:{"input":function($event){return _vm.$emit('update:searchQuery', $event)}}})],1)};
+        },attrs:{"id":("dropdown-item-" + index),"tabindex":!contextItem.isEnabled ? -1 : undefined,"data-testid":"search-result-item"},on:{"click":function($event){return _vm.selectItem(contextItem)}}},[_c('div',{on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-duo-chat-context-item-menu-search-item',{class:{ 'gl-text-secondary': !contextItem.isEnabled },attrs:{"context-item":contextItem,"category":_vm.category,"data-testid":"search-result-item-details"}})],1)])}),1)],1),_vm._v(" "),_c('gl-form-input',{ref:"contextMenuSearchInput",attrs:{"value":_vm.searchQuery,"placeholder":_vm.searchInputPlaceholder,"autofocus":"","data-testid":"context-menu-search-input"},on:{"input":function($event){return _vm.$emit('update:searchQuery', $event)},"keyup":_vm.handleKeyUp}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -22,4 +22,15 @@ function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
-export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator, formatIssueId, formatMergeRequestId };
+/**
+ * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
+ * @param {number} currentIndex - The starting index.
+ * @param {number} step - The number of steps to move (positive or negative).
+ * @param {number} totalLength - The total number of items in the range.
+ * @returns {number} The new index.
+ */
+function wrapIndex(currentIndex, step, totalLength) {
+  return (currentIndex + step + totalLength) % totalLength;
+}
+
+export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator, formatIssueId, formatMergeRequestId, wrapIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.14.0",
+  "version": "91.15.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -2,8 +2,8 @@
 import debounce from 'lodash/debounce';
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';
-import { categoriesValidator, contextItemsValidator } from '../utils';
 import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import { categoriesValidator, contextItemsValidator, wrapIndex } from '../utils';
 import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
 import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
 
@@ -67,15 +67,18 @@ export default {
   },
   data() {
     return {
-      activeIndex: 0,
-      searchQuery: '',
       selectedCategory: null,
+      searchQuery: '',
+      activeIndex: 0,
     };
   },
   computed: {
     showCategorySelection() {
       return this.open && !this.selectedCategory;
     },
+    allResultsAreDisabled() {
+      return this.results.every((result) => !result.isEnabled);
+    },
   },
   watch: {
     open(isOpen) {
@@ -86,13 +89,22 @@ export default {
     searchQuery(query) {
       this.debouncedSearch(query);
     },
+    results(newResults) {
+      const firstEnabledIndex = newResults.findIndex((result) => result.isEnabled);
+      this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+    },
   },
   methods: {
     selectCategory(category) {
-      this.activeIndex = 0;
       this.searchQuery = '';
       this.selectedCategory = category;
 
+      this.$emit('search', {
+        category: category.value,
+        query: '',
+      });
+    },
+    debouncedSearch: debounce(function search(query) {
       /**
        * Emitted when a search should be performed.
        * @property {Object} filter
@@ -100,10 +112,10 @@ export default {
        * @property {string} filter.query - The search query
        */
       this.$emit('search', {
-        category: category.value,
-        query: '',
+        category: this.selectedCategory.value,
+        query,
       });
-    },
+    }, SEARCH_DEBOUNCE_MS),
     selectItem(item) {
       if (!item.isEnabled) {
         return;
@@ -131,16 +143,76 @@ export default {
        */
       this.$emit('remove', item);
     },
-    debouncedSearch: debounce(function search(query) {
-      this.$emit('search', {
-        category: this.selectedCategory.value,
-        query,
-      });
-    }, SEARCH_DEBOUNCE_MS),
     resetSelection() {
       this.selectedCategory = null;
+      this.searchQuery = '';
       this.activeIndex = 0;
     },
+    async scrollActiveItemIntoView() {
+      await this.$nextTick();
+
+      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+      }
+    },
+    handleKeyUp(e) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
+          this.scrollActiveItemIntoView();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.selectCategory(this.categories[this.activeIndex]);
+            return;
+          }
+          if (!this.results.length) {
+            return;
+          }
+          this.selectItem(this.results[this.activeIndex]);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.$emit('close');
+            return;
+          }
+
+          this.selectedCategory = null;
+          break;
+        default:
+          break;
+      }
+    },
+    moveActiveIndex(step) {
+      if (this.showCategorySelection) {
+        // Categories cannot be disabled, so just loop to the next/prev one
+        this.activeIndex = wrapIndex(this.activeIndex, step, this.categories.length);
+        return;
+      }
+
+      // Return early if there are no results or all results are disabled
+      if (!this.results.length || this.allResultsAreDisabled) {
+        return;
+      }
+
+      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
+      let newIndex = this.activeIndex;
+      do {
+        newIndex = wrapIndex(newIndex, step, this.results.length);
+
+        if (newIndex === this.activeIndex) {
+          // If we've looped through all items and found no enabled ones, keep the current index
+          return;
+        }
+      } while (!this.results[newIndex].isEnabled);
+
+      this.activeIndex = newIndex;
+    },
   },
   i18n: {
     selectedContextItemsTitle: translate(
@@ -184,6 +256,7 @@ export default {
         :error="error"
         :results="results"
         @select="selectItem"
+        @keyup="handleKeyUp"
         @active-index-change="activeIndex = $event"
       />
     </gl-card>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items.vue

@@ -83,11 +83,17 @@ export default {
       this.$emit('select', contextItem);
       this.userInitiatedSearch = false;
     },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
     setActiveIndex(index) {
       if (this.results[index]?.isEnabled) {
         this.$emit('active-index-change', index);
       }
     },
+    isActiveItem(contextItem, index) {
+      return index === this.activeIndex && contextItem.isEnabled;
+    },
   },
   i18n: {
     emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found'),
@@ -120,7 +126,7 @@ export default {
           :id="`dropdown-item-${index}`"
           :key="contextItem.id"
           :class="{
-            'active-command': index === activeIndex,
+            'active-command': isActiveItem(contextItem, index),
             'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none': !contextItem.isEnabled,
           }"
           :tabindex="!contextItem.isEnabled ? -1 : undefined"
@@ -146,6 +152,7 @@ export default {
       autofocus
       data-testid="context-menu-search-input"
       @input="$emit('update:searchQuery', $event)"
+      @keyup="handleKeyUp"
     />
   </div>
 </template>

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -39,3 +39,14 @@ export function formatMergeRequestId(iid) {
 
   return `!${iid}`;
 }
+
+/**
+ * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
+ * @param {number} currentIndex - The starting index.
+ * @param {number} step - The number of steps to move (positive or negative).
+ * @param {number} totalLength - The total number of items in the range.
+ * @returns {number} The new index.
+ */
+export function wrapIndex(currentIndex, step, totalLength) {
+  return (currentIndex + step + totalLength) % totalLength;
+}