@gitlab/ui 91.9.0 → 91.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [91.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.10.0...v91.11.0) (2024-09-05)
+
+
+### Features
+
+* **Tailwind:** use border default design token for border classes ([642bc1c](https://gitlab.com/gitlab-org/gitlab-ui/commit/642bc1c3776402cd30d84452374805811d2246bb))
+
+# [91.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.9.0...v91.10.0) (2024-09-05)
+
+
+### Features
+
+* add duo chat context menu search ([6ac53de](https://gitlab.com/gitlab-org/gitlab-ui/commit/6ac53dee88bcd395b85bacd68ebde35ae56149ff))
+
 # [91.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.8.0...v91.9.0) (2024-09-04)
 
 

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

@@ -1,15 +1,19 @@
+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 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';
 
+const SEARCH_DEBOUNCE_MS = 30;
 var script = {
   name: 'GlDuoChatContextItemMenu',
   components: {
     GlCard,
     GlDuoChatContextItemMenuCategoryItems,
+    GlDuoChatContextItemMenuSearchItems,
     GlDuoChatContextItemSelections
   },
   props: {
@@ -63,6 +67,7 @@ var script = {
   data() {
     return {
       activeIndex: 0,
+      searchQuery: '',
       selectedCategory: null
     };
   },
@@ -76,12 +81,16 @@ var script = {
       if (!isOpen) {
         this.resetSelection();
       }
+    },
+    searchQuery(query) {
+      this.debouncedSearch(query);
     }
   },
   methods: {
     selectCategory(category) {
-      this.selectedCategory = category;
       this.activeIndex = 0;
+      this.searchQuery = '';
+      this.selectedCategory = category;
 
       /**
        * Emitted when a search should be performed.
@@ -118,6 +127,12 @@ 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.activeIndex = 0;
@@ -132,7 +147,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('div',{attrs:{"data-testid":"context-menu-search-items"}},[(_vm.loading)?[_vm._v("Loading...")]:(_vm.error)?[_vm._v("Error: "+_vm._s(_vm.error))]:_c('ul',_vm._l((_vm.results),function(result){return _c('li',{key:result.id,on:{"click":function($event){return _vm.selectItem(result)}}},[_vm._v("\n          "+_vm._s(result.metadata.name)+" "+_vm._s(result.isEnabled ? '' : '(disabled)')+"\n        ")])}),0)],2)],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,"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

@@ -0,0 +1,127 @@
+import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item';
+import GlFormInput from '../../../../../../base/form/form_input/form_input';
+import GlAlert from '../../../../../../base/alert/alert';
+import { sprintf, translate } from '../../../../../../../utils/i18n';
+import { categoryValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenuSearchItems',
+  components: {
+    GlAlert,
+    GlFormInput,
+    GlDropdownItem,
+    GlDuoChatContextItemMenuSearchItemsLoading
+  },
+  model: {
+    prop: 'searchQuery',
+    event: 'update:searchQuery'
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      required: true
+    },
+    searchQuery: {
+      type: String,
+      required: true
+    },
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator
+    },
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    error: {
+      type: [String, null],
+      required: false,
+      default: null
+    },
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator
+    }
+  },
+  data() {
+    return {
+      userInitiatedSearch: false,
+      numLoadingItems: 3
+    };
+  },
+  computed: {
+    showEmptyState() {
+      return Boolean(this.userInitiatedSearch && !this.loading && !this.error && !this.results.length);
+    },
+    searchInputPlaceholder() {
+      return sprintf(translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'), {
+        categoryLabel: this.category.label.toLowerCase()
+      });
+    }
+  },
+  watch: {
+    searchQuery() {
+      this.userInitiatedSearch = true;
+    },
+    results(results) {
+      this.numLoadingItems = Math.max(1, results.length);
+    }
+  },
+  methods: {
+    selectItem(item) {
+      this.$emit('select', item);
+      this.userInitiatedSearch = false;
+    },
+    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);
+      }
+    }
+  },
+  i18n: {
+    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found')
+  }
+};
+
+/* 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',[_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(item,index){return _c('gl-dropdown-item',{key:item.id,staticClass:"duo-chat-context-search-result-item",class:[{ 'active-command': index === _vm.activeIndex, disabled: !item.isEnabled }],attrs:{"id":("dropdown-item-" + index),"tabindex":!item.isEnabled ? -1 : undefined,"data-testid":"search-result-item"},on:{"click":function($event){return _vm.selectItem(item)}}},[_c('div',{on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('div',{attrs:{"data-testid":"search-result-item-details"}},[_vm._v("\n            "+_vm._s(item.metadata.name)+" "+_vm._s(item.isEnabled ? '' : '(disabled)')+"\n          ")])])])}),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)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -0,0 +1,53 @@
+import { translate } from '../../../../../../../utils/i18n';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenuSearchItemsLoading',
+  props: {
+    rows: {
+      type: Number,
+      required: true
+    }
+  },
+  i18n: {
+    loadingMessage: translate('GlDuoChatContextItemMenu.loadingMessage', 'Loading...')
+  }
+};
+
+/* 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._l((_vm.rows),function(index){return _c('div',{key:index,staticClass:"gl-mx-3 gl-mb-4 gl-pt-3",attrs:{"data-testid":"search-results-loading"}},[_vm._m(0,true),_vm._v(" "),_c('div',{staticClass:"gl-animate-skeleton-loader gl-h-4 gl-w-1/2 gl-rounded-base"})])}),_vm._v(" "),_c('span',{staticClass:"sr-only"},[_vm._v(_vm._s(_vm.$options.i18n.loadingMessage))])],2)};
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mb-2 gl-flex"},[_c('div',{staticClass:"gl-animate-skeleton-loader gl-mr-3 gl-h-5 gl-w-5 gl-rounded-base"}),_vm._v(" "),_c('div',{staticClass:"gl-animate-skeleton-loader gl-h-5 gl-grow gl-rounded-base"})])}];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

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

@@ -14,4 +14,4 @@ function contextItemsValidator(items) {
   return Array.isArray(items) && items.every(item => contextItemValidator(item));
 }
 
-export { categoriesValidator, contextItemsValidator };
+export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator };