@gitlab/ui 91.4.0 → 91.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [91.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.5.0...v91.6.0) (2024-09-04)
+
+
+### Features
+
+* add initial duo chat context item menu component ([40635b0](https://gitlab.com/gitlab-org/gitlab-ui/commit/40635b0afbb33b099f48922a36498bd4b709df00))
+
+# [91.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.4.0...v91.5.0) (2024-09-04)
+
+
+### Features
+
+* **Alert:** Transparent border bottom ([30f1863](https://gitlab.com/gitlab-org/gitlab-ui/commit/30f1863f6921426ea4b907a3e0c74ed98b41e727))
+
 # [91.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.3.0...v91.4.0) (2024-09-02)
 
 

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

@@ -0,0 +1,162 @@
+import { translate } from '../../../../../../../utils/i18n';
+import GlCard from '../../../../../../base/card/card';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections';
+import { contextItemsValidator, categoriesValidator } from '../utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenu',
+  components: {
+    GlCard,
+    GlDuoChatContextItemSelections
+  },
+  props: {
+    /**
+     * Whether the menu is open.
+     */
+    open: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Array of selected context items.
+     */
+    selections: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator
+    },
+    /**
+     * Whether the menu is in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Error message to display, if any.
+     */
+    error: {
+      type: [String, null],
+      required: false,
+      default: null
+    },
+    /**
+     * Array of available categories for context items.
+     */
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator
+    },
+    /**
+     * Array of search results for context items.
+     */
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator
+    }
+  },
+  data() {
+    return {
+      selectedCategory: null
+    };
+  },
+  computed: {
+    showCategorySelection() {
+      return this.open && !this.selectedCategory;
+    }
+  },
+  watch: {
+    open(isOpen) {
+      if (!isOpen) {
+        this.resetSelection();
+      }
+    }
+  },
+  methods: {
+    selectCategory(category) {
+      this.selectedCategory = category;
+
+      /**
+       * Emitted when a search should be performed.
+       * @property {Object} filter
+       * @property {string} filter.category - The value of the selected category
+       * @property {string} filter.query - The search query
+       */
+      this.$emit('search', {
+        category: category.value,
+        query: ''
+      });
+    },
+    selectItem(item) {
+      if (!item.isEnabled) {
+        return;
+      }
+
+      /**
+       * Emitted when a context item is selected.
+       * @property {Object} item - The selected context item
+       */
+      this.$emit('select', this.results.find(result => result.id === item.id));
+
+      /**
+       * Emitted when the menu should be closed.
+       */
+      this.$emit('close');
+      this.resetSelection();
+    },
+    removeItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
+    },
+    resetSelection() {
+      this.selectedCategory = null;
+    }
+  },
+  i18n: {
+    selectedContextItemsTitle: translate('GlDuoChatContextItemMenu.selectedContextItemsTitle', 'Included references')
+  }
+};
+
+/* 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('ul',{attrs:{"data-testid":"context-menu-category-items"}},_vm._l((_vm.categories),function(category){return _c('li',{key:category.value,on:{"click":function($event){return _vm.selectCategory(category)}}},[_vm._v("\n        "+_vm._s(category.label)+"\n      ")])}),0):_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)]):_vm._e()],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_popover/duo_chat_context_item_popover.js

@@ -13,14 +13,23 @@ var script = {
     GlPopover
   },
   props: {
+    /**
+     * The context item to display in the popover.
+     */
     item: {
       type: Object,
       required: true
     },
+    /**
+     * The target element ID for the popover.
+     */
     target: {
       type: String,
       required: true
     },
+    /**
+     * The placement of the popover relative to the target.
+     */
     placement: {
       type: String,
       default: 'bottom',

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

@@ -3,6 +3,7 @@ import GlIcon from '../../../../../../base/icon/icon';
 import GlToken from '../../../../../../base/token/token';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
 import { CONTEXT_ITEM_TYPE_PROJECT_FILE, CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST } from '../constants';
+import { contextItemsValidator } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -13,17 +14,35 @@ var script = {
     GlToken
   },
   props: {
+    /**
+     * Array of selected context items.
+     */
     selections: {
       type: Array,
-      required: true
+      required: true,
+      validator: contextItemsValidator
     },
+    /**
+     * The title to display for the selections.
+     */
     title: {
       type: String,
       required: true
     },
+    /**
+     * Whether the selections should be collapsed by default.
+     */
     defaultCollapsed: {
       type: Boolean,
       required: true
+    },
+    /**
+     * Whether the selections can be removed.
+     */
+    removable: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -48,6 +67,13 @@ var script = {
     },
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
+    },
+    onRemoveItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
     }
   }
 };
@@ -56,7 +82,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',{staticClass:"gl-mb-3 gl-flex gl-flex-col"},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500",attrs:{"data-testid":"chat-context-selections-title"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(item){return _c('gl-token',{key:item.id,staticClass:"gl-mb-2 gl-mr-2",attrs:{"view-only":true,"variant":"default"}},[_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getIconName(item.type),"size":12}}),_vm._v("\n        "+_vm._s(item.metadata.name)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId),"placement":"bottom"}})],1)}),1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-mb-3 gl-flex gl-flex-col"},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-gray-500",attrs:{"data-testid":"chat-context-selections-title"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(item){return _c('gl-token',{key:item.id,staticClass:"gl-mb-2 gl-mr-2",attrs:{"view-only":!_vm.removable,"variant":"default"},on:{"close":function($event){return _vm.onRemoveItem(item)}}},[_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getIconName(item.type),"size":12}}),_vm._v("\n        "+_vm._s(item.metadata.name)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId),"placement":"bottom"}})],1)}),1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,3 +1,18 @@
+import { CONTEXT_ITEM_TYPE_PROJECT_FILE, CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST } from './constants';
+
+const MOCK_CATEGORIES = [{
+  label: 'Files',
+  value: CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  icon: 'document'
+}, {
+  label: 'Issues',
+  value: CONTEXT_ITEM_TYPE_ISSUE,
+  icon: 'issues'
+}, {
+  label: 'Merge Requests',
+  value: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  icon: 'merge-request'
+}];
 const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,
@@ -8,7 +23,7 @@ const MOCK_CONTEXT_ITEM_FILE = {
       relFilePath: 'src/plants/strawberry.ts'
     }
   },
-  type: 'project_file'
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
 };
 const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
   id: '323e4567-e89b-12d3-a456-426614174002',
@@ -20,7 +35,7 @@ const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
       relFilePath: '/src/VehicleFoo/motorbike.cs'
     }
   },
-  type: 'project_file'
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
 };
 const mockFiles = [MOCK_CONTEXT_ITEM_FILE, {
   id: '223e4567-e89b-12d3-a456-426614174001',
@@ -32,7 +47,7 @@ const mockFiles = [MOCK_CONTEXT_ITEM_FILE, {
       relFilePath: '/src/plants/potato.ts'
     }
   },
-  type: 'project_file'
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
 }, MOCK_CONTEXT_ITEM_FILE_DISABLED];
 const MOCK_CONTEXT_ITEM_ISSUE = {
   id: '423e4567-e89b-12d3-a456-426614174003',
@@ -44,20 +59,20 @@ const MOCK_CONTEXT_ITEM_ISSUE = {
       iid: 1234
     }
   },
-  type: 'issue'
+  type: CONTEXT_ITEM_TYPE_ISSUE
 };
 const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
   isEnabled: false,
   metadata: {
-    name: 'Fix vehicle colours',
+    name: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
     info: {
       project: 'example/vehicle',
       iid: 91011
     }
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'issue'
+  type: CONTEXT_ITEM_TYPE_ISSUE
 };
 const mockIssues = [MOCK_CONTEXT_ITEM_ISSUE, {
   id: '523e4567-e89b-12d3-a456-426614174004',
@@ -69,7 +84,7 @@ const mockIssues = [MOCK_CONTEXT_ITEM_ISSUE, {
       iid: 5678
     }
   },
-  type: 'issue'
+  type: CONTEXT_ITEM_TYPE_ISSUE
 }, MOCK_CONTEXT_ITEM_ISSUE_DISABLED];
 const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
   id: '623e4567-e89b-12d3-a456-426614174005',
@@ -81,7 +96,7 @@ const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
       iid: 1122
     }
   },
-  type: 'merge_request'
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
 };
 const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
@@ -94,7 +109,7 @@ const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     }
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'merge_request'
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
 };
 const mockMergeRequests = [MOCK_CONTEXT_ITEM_MERGE_REQUEST, {
   id: '723e4567-e89b-12d3-a456-426614174006',
@@ -107,7 +122,7 @@ const mockMergeRequests = [MOCK_CONTEXT_ITEM_MERGE_REQUEST, {
     }
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'merge_request'
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
 }, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED];
 const getMockContextItems = () => {
   const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
@@ -118,4 +133,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockContextItems };

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

@@ -0,0 +1,17 @@
+function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+function categoriesValidator(categories) {
+  return Array.isArray(categories) && categories.every(category => categoryValidator(category));
+}
+function disabledReasonsValidator(disabledReasons) {
+  return disabledReasons === undefined || Array.isArray(disabledReasons) && disabledReasons.every(reason => typeof reason === 'string');
+}
+function contextItemValidator(item) {
+  return Boolean(item && item.id && item.type && typeof item.isEnabled === 'boolean' && disabledReasonsValidator(item.disabledReasons));
+}
+function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every(item => contextItemValidator(item));
+}
+
+export { categoriesValidator, contextItemsValidator };