@gitlab/ui 92.3.0 → 92.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [92.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.3.1...v92.4.0) (2024-09-16)
+
+
+### Features
+
+* **DuoWorkflowPanel:** Add Duo panel isExpanded prop ([5916cd1](https://gitlab.com/gitlab-org/gitlab-ui/commit/5916cd18ac361baab554b2b2a64cbdbb62cb59a6))
+
+## [92.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.3.0...v92.3.1) (2024-09-13)
+
+
+### Bug Fixes
+
+* update context-items-menu components with updated schema ([afff4cb](https://gitlab.com/gitlab-org/gitlab-ui/commit/afff4cbed8b0d1fea836938a7e6b6d22ee92981a))
+
 # [92.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.2.0...v92.3.0) (2024-09-12)
 
 

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

@@ -1,5 +1,5 @@
-const CONTEXT_ITEM_TYPE_ISSUE = 'issue';
-const CONTEXT_ITEM_TYPE_MERGE_REQUEST = 'merge_request';
-const CONTEXT_ITEM_TYPE_PROJECT_FILE = 'project_file';
+const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
+const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
+const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 
-export { CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST, CONTEXT_ITEM_TYPE_PROJECT_FILE };
+export { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST };

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

@@ -76,7 +76,7 @@ var script = {
       return this.open && !this.selectedCategory;
     },
     allResultsAreDisabled() {
-      return this.results.every(result => !result.isEnabled);
+      return this.results.every(result => !result.metadata.enabled);
     }
   },
   watch: {
@@ -89,7 +89,7 @@ var script = {
       this.debouncedSearch(query);
     },
     results(newResults) {
-      const firstEnabledIndex = newResults.findIndex(result => result.isEnabled);
+      const firstEnabledIndex = newResults.findIndex(result => result.metadata.enabled);
       this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
     }
   },
@@ -115,7 +115,7 @@ var script = {
       });
     }, SEARCH_DEBOUNCE_MS),
     selectItem(item) {
-      if (!item.isEnabled) {
+      if (!item.metadata.enabled) {
         return;
       }
 
@@ -207,7 +207,7 @@ var script = {
           // If we've looped through all items and found no enabled ones, keep the current index
           return;
         }
-      } while (!this.results[newIndex].isEnabled);
+      } while (!this.results[newIndex].metadata.enabled);
       this.activeIndex = newIndex;
     }
   },

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

@@ -1,7 +1,7 @@
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
 import GlIcon from '../../../../../../base/icon/icon';
 import { categoryValidator, contextItemValidator, formatMergeRequestId, formatIssueId } from '../utils';
-import { CONTEXT_ITEM_TYPE_MERGE_REQUEST, CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_PROJECT_FILE } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -25,16 +25,16 @@ var script = {
   computed: {
     title() {
       var _this$contextItem$met;
-      return ((_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : _this$contextItem$met.name) || '';
+      return ((_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : _this$contextItem$met.title) || '';
     },
     secondaryText() {
       switch (this.category.value) {
-        case CONTEXT_ITEM_TYPE_PROJECT_FILE:
-          return this.contextItem.metadata.info.relFilePath;
-        case CONTEXT_ITEM_TYPE_ISSUE:
-          return formatIssueId(this.contextItem.metadata.info.iid);
-        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
-          return formatMergeRequestId(this.contextItem.metadata.info.iid);
+        case CONTEXT_ITEM_CATEGORY_FILE:
+          return this.contextItem.metadata.relativePath;
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
+          return formatIssueId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+          return formatMergeRequestId(this.contextItem.metadata.iid);
         default:
           return '';
       }

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

@@ -83,12 +83,12 @@ var script = {
     },
     setActiveIndex(index) {
       var _this$results$index;
-      if ((_this$results$index = this.results[index]) !== null && _this$results$index !== void 0 && _this$results$index.isEnabled) {
+      if ((_this$results$index = this.results[index]) !== null && _this$results$index !== void 0 && _this$results$index.metadata.enabled) {
         this.$emit('active-index-change', index);
       }
     },
     isActiveItem(contextItem, index) {
-      return index === this.activeIndex && contextItem.isEnabled;
+      return index === this.activeIndex && contextItem.metadata.enabled;
     }
   },
   i18n: {
@@ -102,8 +102,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': _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)},"keyup":_vm.handleKeyUp}})],1)};
+          'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none':
+            !contextItem.metadata.enabled,
+        },attrs:{"id":("dropdown-item-" + index),"tabindex":!contextItem.metadata.enabled ? -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.metadata.enabled },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/duo_chat_context_item_popover/duo_chat_context_item_popover.js

@@ -1,7 +1,7 @@
 import GlPopover from '../../../../../../base/popover/popover';
 import GlIcon from '../../../../../../base/icon/icon';
 import { translate } from '../../../../../../../utils/i18n';
-import { CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST, CONTEXT_ITEM_TYPE_PROJECT_FILE } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
 import { formatMergeRequestId, formatIssueId } from '../utils';
 import GlAlert from '../../../../../../base/alert/alert';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -38,39 +38,38 @@ var script = {
     }
   },
   computed: {
-    itemInfo() {
-      var _this$contextItem$met;
-      return ((_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : _this$contextItem$met.info) || {};
-    },
     id() {
-      const isIssuable = this.contextItem.type === CONTEXT_ITEM_TYPE_ISSUE || this.contextItem.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
-      return isIssuable ? this.itemInfo.iid || '' : null;
+      const isIssuable = this.contextItem.category === CONTEXT_ITEM_CATEGORY_ISSUE || this.contextItem.category === CONTEXT_ITEM_CATEGORY_MERGE_REQUEST;
+      return isIssuable ? this.contextItem.metadata.iid : null;
     },
     formattedId() {
-      switch (this.contextItem.type) {
-        case CONTEXT_ITEM_TYPE_ISSUE:
+      switch (this.contextItem.category) {
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
           return formatIssueId(this.id);
-        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
           return formatMergeRequestId(this.id);
         default:
           return '';
       }
     },
+    title() {
+      return this.contextItem.metadata.title || '';
+    },
     filePath() {
-      return this.contextItem.type === CONTEXT_ITEM_TYPE_PROJECT_FILE ? this.itemInfo.relFilePath || '' : null;
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_FILE ? this.contextItem.metadata.relativePath || '' : null;
     },
     filePathArray() {
       var _this$filePath;
       return (_this$filePath = this.filePath) === null || _this$filePath === void 0 ? void 0 : _this$filePath.split('/');
     },
     isEnabled() {
-      return this.contextItem.isEnabled !== false;
+      return this.contextItem.metadata.enabled !== false;
     },
     disabledMessage() {
-      return Array.isArray(this.contextItem.disabledReasons) && this.contextItem.disabledReasons.length > 0 ? this.contextItem.disabledReasons.join(', ') : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
+      return Array.isArray(this.contextItem.metadata.disabledReasons) && this.contextItem.metadata.disabledReasons.length > 0 ? this.contextItem.metadata.disabledReasons.join(', ') : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
     iconName() {
-      switch (this.contextItem.type) {
+      switch (this.contextItem.category) {
         case 'merge_request':
           return 'merge-request';
         case 'issue':
@@ -80,7 +79,7 @@ var script = {
       }
     },
     itemTypeLabel() {
-      switch (this.contextItem.type) {
+      switch (this.contextItem.category) {
         case 'merge_request':
           return translate('DuoChatContextItemPopover.MergeRequest', 'Merge request');
         case 'issue':
@@ -99,7 +98,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('gl-popover',{attrs:{"target":_vm.target,"triggers":"hover focus","placement":_vm.placement,"title":_vm.contextItem.metadata.name,"custom-class":"gl-duo-chat-item-popover"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_c('div',{staticClass:"gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1",attrs:{"data-testid":"chat-context-popover-title"}},[_vm._v("\n        "+_vm._s(_vm.contextItem.metadata.name)+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-font-normal gl-text-subtle"},[_vm._v(_vm._s(_vm.itemTypeLabel))])])]},proxy:true}])},[_vm._v(" "),_c('div',[(_vm.filePath !== null)?_c('div',{staticClass:"gl-flex gl-flex-wrap gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":"document","size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.itemInfo.project))]),_vm._l((_vm.filePathArray),function(pathPart,index){return _c('span',{key:pathPart,staticClass:"gl-break-all"},[_vm._v(_vm._s(pathPart)+_vm._s(index + 1 < _vm.filePathArray.length ? '/' : ''))])})],2):_vm._e(),_vm._v(" "),(_vm.filePath === null)?_c('div',{staticClass:"gl-flex gl-flex-wrap gl-items-center gl-leading-1 gl-text-subtle"},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.itemInfo.project))]),(_vm.id !== null)?_c('span',[_vm._v(_vm._s(_vm.formattedId))]):_vm._e()],1):_vm._e(),_vm._v(" "),(!_vm.isEnabled)?_c('gl-alert',{staticClass:"gl-mb-1 gl-mt-3 gl-p-4 gl-text-sm",attrs:{"variant":"danger","data-testid":"chat-context-popover-disabled","dismissible":false,"show-icon":false}},[_vm._v("\n      "+_vm._s(_vm.disabledMessage)+"\n    ")]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-popover',{attrs:{"target":_vm.target,"triggers":"hover focus","placement":_vm.placement,"title":_vm.title,"custom-class":"gl-duo-chat-item-popover"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_c('div',{staticClass:"gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1",attrs:{"data-testid":"chat-context-popover-title"}},[_vm._v("\n        "+_vm._s(_vm.contextItem.metadata.title)+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-font-normal gl-text-subtle"},[_vm._v(_vm._s(_vm.itemTypeLabel))])])]},proxy:true}])},[_vm._v(" "),_c('div',[(_vm.filePath !== null)?_c('div',{staticClass:"gl-flex gl-flex-wrap gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":"document","size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),_vm._l((_vm.filePathArray),function(pathPart,index){return _c('span',{key:pathPart,staticClass:"gl-break-all"},[_vm._v(_vm._s(pathPart)+_vm._s(index + 1 < _vm.filePathArray.length ? '/' : ''))])})],2):_vm._e(),_vm._v(" "),(_vm.filePath === null)?_c('div',{staticClass:"gl-flex gl-flex-wrap gl-items-center gl-leading-1 gl-text-subtle"},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),(_vm.id !== null)?_c('span',[_vm._v(_vm._s(_vm.formattedId))]):_vm._e()],1):_vm._e(),_vm._v(" "),(!_vm.isEnabled)?_c('gl-alert',{staticClass:"gl-mb-1 gl-mt-3 gl-p-4 gl-text-sm",attrs:{"variant":"danger","data-testid":"chat-context-popover-disabled","dismissible":false,"show-icon":false}},[_vm._v("\n      "+_vm._s(_vm.disabledMessage)+"\n    ")]):_vm._e()],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -2,7 +2,7 @@ import uniqueId from 'lodash/uniqueId';
 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 { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from '../constants';
 import { contextItemsValidator } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -74,13 +74,13 @@ var script = {
     }
   },
   methods: {
-    getIconName(type) {
+    getIconName(category) {
       const iconMap = {
-        [CONTEXT_ITEM_TYPE_PROJECT_FILE]: 'document',
-        [CONTEXT_ITEM_TYPE_ISSUE]: 'issues',
-        [CONTEXT_ITEM_TYPE_MERGE_REQUEST]: 'merge-request'
+        [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
+        [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
+        [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request'
       };
-      return iconMap[type] || 'document';
+      return iconMap[category] || 'document';
     },
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
@@ -99,7 +99,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-flex gl-flex-col",class:_vm.variantClasses},[_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-inherit",attrs:{"data-testid":"chat-context-selections-title","type":"button"},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",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"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:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"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-flex gl-flex-col",class:_vm.variantClasses},[_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-inherit",attrs:{"data-testid":"chat-context-selections-title","type":"button"},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",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"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.category),"size":12}}),_vm._v("\n        "+_vm._s(item.metadata.title)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"placement":"bottom"}})],1)}),1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,16 +1,16 @@
-import { CONTEXT_ITEM_TYPE_PROJECT_FILE, CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST } from './constants';
+import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
 
 const MOCK_CATEGORIES = [{
   label: 'Files',
-  value: CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  value: CONTEXT_ITEM_CATEGORY_FILE,
   icon: 'document'
 }, {
   label: 'Issues',
-  value: CONTEXT_ITEM_TYPE_ISSUE,
+  value: CONTEXT_ITEM_CATEGORY_ISSUE,
   icon: 'issues'
 }, {
   label: 'Merge Requests',
-  value: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   icon: 'merge-request'
 }];
 function getMockCategory(categoryValue) {
@@ -18,121 +18,103 @@ function getMockCategory(categoryValue) {
 }
 const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_FILE,
   metadata: {
-    name: 'strawberry.ts',
-    info: {
-      project: 'example/garden',
-      relFilePath: 'src/plants/strawberry.ts'
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
+    enabled: true,
+    title: 'strawberry.ts',
+    project: 'example/garden',
+    relativePath: 'src/plants/strawberry.ts'
+  }
 };
 const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
   id: '323e4567-e89b-12d3-a456-426614174002',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_FILE,
   metadata: {
-    name: 'motorbike.cs',
-    info: {
-      project: 'example/vehicles',
-      relFilePath: '/src/VehicleFoo/motorbike.cs'
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
+    enabled: false,
+    title: 'motorbike.cs',
+    project: 'example/vehicles',
+    relativePath: '/src/VehicleFoo/motorbike.cs'
+  }
 };
 const mockFiles = [MOCK_CONTEXT_ITEM_FILE, {
   id: '223e4567-e89b-12d3-a456-426614174001',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_FILE,
   metadata: {
-    name: 'potato.ts',
-    info: {
-      project: 'example/garden',
-      relFilePath: '/src/plants/potato.ts'
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_PROJECT_FILE
+    enabled: true,
+    title: 'potato.ts',
+    project: 'example/garden',
+    relativePath: '/src/plants/potato.ts'
+  }
 }, MOCK_CONTEXT_ITEM_FILE_DISABLED];
 const MOCK_CONTEXT_ITEM_ISSUE = {
   id: '423e4567-e89b-12d3-a456-426614174003',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
   metadata: {
-    name: 'Implement watering schedule',
-    info: {
-      project: 'example/garden',
-      iid: 1234
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_ISSUE
+    enabled: true,
+    title: 'Implement watering schedule',
+    project: 'example/garden',
+    iid: 1234
+  }
 };
 const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
   metadata: {
-    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: CONTEXT_ITEM_TYPE_ISSUE
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: `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`,
+    project: 'example/vehicle',
+    iid: 91011
+  }
 };
 const mockIssues = [MOCK_CONTEXT_ITEM_ISSUE, {
   id: '523e4567-e89b-12d3-a456-426614174004',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
   metadata: {
-    name: 'Refactor plant growth rates',
-    info: {
-      project: 'example/garden',
-      iid: 5678
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_ISSUE
+    enabled: true,
+    title: 'Refactor plant growth rates',
+    project: 'example/garden',
+    iid: 5678
+  }
 }, MOCK_CONTEXT_ITEM_ISSUE_DISABLED];
 const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
   id: '623e4567-e89b-12d3-a456-426614174005',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   metadata: {
-    name: 'Improve database performance',
-    info: {
-      project: 'example/garden',
-      iid: 1122
-    }
-  },
-  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
+    enabled: true,
+    title: 'Improve database performance',
+    project: 'example/garden',
+    iid: 1122
+  }
 };
 const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   metadata: {
-    name: 'Fix broken layout at small viewports',
-    info: {
-      project: 'example/vehicle',
-      iid: 5566
-    }
-  },
-  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: 'Fix broken layout at small viewports',
+    project: 'example/vehicle',
+    iid: 5566
+  }
 };
 const mockMergeRequests = [MOCK_CONTEXT_ITEM_MERGE_REQUEST, {
   id: '723e4567-e89b-12d3-a456-426614174006',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   metadata: {
-    name: 'Add vehicle registration details',
-    info: {
-      project: 'example/vehicle',
-      iid: 3344
-    }
-  },
-  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: 'Add vehicle registration details',
+    project: 'example/vehicle',
+    iid: 3344
+  }
 }, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED];
 const getMockContextItems = () => {
   const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
 
   // put disabled items in the back
-  const disabledItems = allItems.filter(item => !item.isEnabled);
-  const enabledItems = allItems.filter(item => item.isEnabled);
+  const disabledItems = allItems.filter(item => !item.metadata.enabled);
+  const enabledItems = allItems.filter(item => item.metadata.enabled);
   return [...enabledItems, ...disabledItems];
 };
 

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

@@ -8,7 +8,7 @@ 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));
+  return Boolean(item && item.id && item.category && item.metadata && typeof item.metadata === 'object' && typeof item.metadata.enabled === 'boolean' && disabledReasonsValidator(item.metadata.disabledReasons));
 }
 function contextItemsValidator(items) {
   return Array.isArray(items) && items.every(item => contextItemValidator(item));

package/dist/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.js

@@ -39,13 +39,16 @@ var script = {
       type: String,
       required: false,
       default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse')
+    },
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  data() {
-    return {
-      expanded: true
-    };
-  },
   computed: {
     buttonIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
@@ -53,11 +56,6 @@ var script = {
     buttonTitle() {
       return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
     }
-  },
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    }
   }
 };
 
@@ -65,7 +63,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',[_c('div',{staticClass:"gl-flex gl-flex-nowrap gl-items-center"},[(_vm.headerIcon)?_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":_vm.headerIcon,"size":24}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-grow gl-items-baseline"},[_c('h2',{staticClass:"gl-mb-0"},[_vm._t("title")],2),_vm._v(" "),_c('small',{staticClass:"gl-ml-3"},[_vm._t("subtitle")],2)]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"category":"tertiary","icon":_vm.buttonIcon,"title":_vm.buttonTitle,"aria-label":_vm.buttonTitle},on:{"click":_vm.toggleExpanded}})],1),_vm._v(" "),_c('gl-collapse',{attrs:{"visible":_vm.expanded}},[_c('div',{staticClass:"gl-ml-7 gl-mt-4 gl-flex-grow"},[_vm._t("content")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-flex gl-flex-nowrap gl-items-center"},[(_vm.headerIcon)?_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":_vm.headerIcon,"size":24}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-grow gl-items-baseline"},[_c('h2',{staticClass:"gl-mb-0"},[_vm._t("title")],2),_vm._v(" "),_c('small',{staticClass:"gl-ml-3"},[_vm._t("subtitle")],2)]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"category":"tertiary","icon":_vm.buttonIcon,"title":_vm.buttonTitle,"aria-label":_vm.buttonTitle},on:{"click":function($event){return _vm.$emit('toggle-panel')}}})],1),_vm._v(" "),_c('gl-collapse',{attrs:{"visible":_vm.expanded}},[_c('div',{staticClass:"gl-ml-7 gl-mt-4 gl-flex-grow"},[_vm._t("content")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "92.3.0",
+  "version": "92.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,8 +113,8 @@
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "20.2.1",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "6.2.1",
-    "@gitlab/svgs": "3.114.0",
+    "@gitlab/stylelint-config": "6.2.2",
+    "@gitlab/svgs": "3.115.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

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

@@ -1,3 +1,3 @@
-export const CONTEXT_ITEM_TYPE_ISSUE = 'issue';
-export const CONTEXT_ITEM_TYPE_MERGE_REQUEST = 'merge_request';
-export const CONTEXT_ITEM_TYPE_PROJECT_FILE = 'project_file';
+export const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
+export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
+export const CONTEXT_ITEM_CATEGORY_FILE = 'file';

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

@@ -77,7 +77,7 @@ export default {
       return this.open && !this.selectedCategory;
     },
     allResultsAreDisabled() {
-      return this.results.every((result) => !result.isEnabled);
+      return this.results.every((result) => !result.metadata.enabled);
     },
   },
   watch: {
@@ -90,7 +90,7 @@ export default {
       this.debouncedSearch(query);
     },
     results(newResults) {
-      const firstEnabledIndex = newResults.findIndex((result) => result.isEnabled);
+      const firstEnabledIndex = newResults.findIndex((result) => result.metadata.enabled);
       this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
     },
   },
@@ -117,7 +117,7 @@ export default {
       });
     }, SEARCH_DEBOUNCE_MS),
     selectItem(item) {
-      if (!item.isEnabled) {
+      if (!item.metadata.enabled) {
         return;
       }
 
@@ -214,7 +214,7 @@ export default {
           // If we've looped through all items and found no enabled ones, keep the current index
           return;
         }
-      } while (!this.results[newIndex].isEnabled);
+      } while (!this.results[newIndex].metadata.enabled);
 
       this.activeIndex = newIndex;
     },

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

@@ -8,9 +8,9 @@ import {
   formatMergeRequestId,
 } from '../utils';
 import {
-  CONTEXT_ITEM_TYPE_ISSUE,
-  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
-  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
 
 export default {
@@ -30,16 +30,16 @@ export default {
   },
   computed: {
     title() {
-      return this.contextItem.metadata?.name || '';
+      return this.contextItem.metadata?.title || '';
     },
     secondaryText() {
       switch (this.category.value) {
-        case CONTEXT_ITEM_TYPE_PROJECT_FILE:
-          return this.contextItem.metadata.info.relFilePath;
-        case CONTEXT_ITEM_TYPE_ISSUE:
-          return formatIssueId(this.contextItem.metadata.info.iid);
-        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
-          return formatMergeRequestId(this.contextItem.metadata.info.iid);
+        case CONTEXT_ITEM_CATEGORY_FILE:
+          return this.contextItem.metadata.relativePath;
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
+          return formatIssueId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+          return formatMergeRequestId(this.contextItem.metadata.iid);
         default:
           return '';
       }

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

@@ -87,12 +87,12 @@ export default {
       this.$emit('keyup', e);
     },
     setActiveIndex(index) {
-      if (this.results[index]?.isEnabled) {
+      if (this.results[index]?.metadata.enabled) {
         this.$emit('active-index-change', index);
       }
     },
     isActiveItem(contextItem, index) {
-      return index === this.activeIndex && contextItem.isEnabled;
+      return index === this.activeIndex && contextItem.metadata.enabled;
     },
   },
   i18n: {
@@ -127,9 +127,10 @@ export default {
           :key="contextItem.id"
           :class="{
             'active-command': isActiveItem(contextItem, index),
-            'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none': !contextItem.isEnabled,
+            'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none':
+              !contextItem.metadata.enabled,
           }"
-          :tabindex="!contextItem.isEnabled ? -1 : undefined"
+          :tabindex="!contextItem.metadata.enabled ? -1 : undefined"
           class="duo-chat-context-search-result-item"
           data-testid="search-result-item"
           @click="selectItem(contextItem)"
@@ -138,7 +139,7 @@ export default {
             <gl-duo-chat-context-item-menu-search-item
               :context-item="contextItem"
               :category="category"
-              :class="{ 'gl-text-secondary': !contextItem.isEnabled }"
+              :class="{ 'gl-text-secondary': !contextItem.metadata.enabled }"
               data-testid="search-result-item-details"
             />
           </div>

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

@@ -3,9 +3,9 @@ import GlPopover from '../../../../../../base/popover/popover.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import { translate } from '../../../../../../../utils/i18n';
 import {
-  CONTEXT_ITEM_TYPE_ISSUE,
-  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
-  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
 import { formatIssueId, formatMergeRequestId } from '../utils';
 import GlAlert from '../../../../../../base/alert/alert.vue';
@@ -42,44 +42,44 @@ export default {
     },
   },
   computed: {
-    itemInfo() {
-      return this.contextItem.metadata?.info || {};
-    },
     id() {
       const isIssuable =
-        this.contextItem.type === CONTEXT_ITEM_TYPE_ISSUE ||
-        this.contextItem.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
-      return isIssuable ? this.itemInfo.iid || '' : null;
+        this.contextItem.category === CONTEXT_ITEM_CATEGORY_ISSUE ||
+        this.contextItem.category === CONTEXT_ITEM_CATEGORY_MERGE_REQUEST;
+      return isIssuable ? this.contextItem.metadata.iid : null;
     },
     formattedId() {
-      switch (this.contextItem.type) {
-        case CONTEXT_ITEM_TYPE_ISSUE:
+      switch (this.contextItem.category) {
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
           return formatIssueId(this.id);
-        case CONTEXT_ITEM_TYPE_MERGE_REQUEST:
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
           return formatMergeRequestId(this.id);
         default:
           return '';
       }
     },
+    title() {
+      return this.contextItem.metadata.title || '';
+    },
     filePath() {
-      return this.contextItem.type === CONTEXT_ITEM_TYPE_PROJECT_FILE
-        ? this.itemInfo.relFilePath || ''
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_FILE
+        ? this.contextItem.metadata.relativePath || ''
         : null;
     },
     filePathArray() {
       return this.filePath?.split('/');
     },
     isEnabled() {
-      return this.contextItem.isEnabled !== false;
+      return this.contextItem.metadata.enabled !== false;
     },
     disabledMessage() {
-      return Array.isArray(this.contextItem.disabledReasons) &&
-        this.contextItem.disabledReasons.length > 0
-        ? this.contextItem.disabledReasons.join(', ')
+      return Array.isArray(this.contextItem.metadata.disabledReasons) &&
+        this.contextItem.metadata.disabledReasons.length > 0
+        ? this.contextItem.metadata.disabledReasons.join(', ')
         : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
     },
     iconName() {
-      switch (this.contextItem.type) {
+      switch (this.contextItem.category) {
         case 'merge_request':
           return 'merge-request';
         case 'issue':
@@ -89,7 +89,7 @@ export default {
       }
     },
     itemTypeLabel() {
-      switch (this.contextItem.type) {
+      switch (this.contextItem.category) {
         case 'merge_request':
           return translate('DuoChatContextItemPopover.MergeRequest', 'Merge request');
         case 'issue':
@@ -109,7 +109,7 @@ export default {
     :target="target"
     triggers="hover focus"
     :placement="placement"
-    :title="contextItem.metadata.name"
+    :title="title"
     custom-class="gl-duo-chat-item-popover"
   >
     <template #title>
@@ -118,7 +118,7 @@ export default {
           class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
           data-testid="chat-context-popover-title"
         >
-          {{ contextItem.metadata.name }}
+          {{ contextItem.metadata.title }}
         </div>
         <div class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
       </div>
@@ -126,7 +126,7 @@ export default {
     <div>
       <div v-if="filePath !== null" class="gl-flex gl-flex-wrap gl-items-center">
         <gl-icon name="document" :size="12" variant="subtle" class="gl-mr-1" />
-        <span>{{ itemInfo.project }}</span
+        <span>{{ contextItem.metadata.project }}</span
         ><span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
@@ -138,7 +138,7 @@ export default {
       >
         <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1" />
 
-        <span>{{ itemInfo.project }}</span
+        <span>{{ contextItem.metadata.project }}</span
         ><span v-if="id !== null">{{ formattedId }}</span>
       </div>
       <gl-alert

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

@@ -4,9 +4,9 @@ import GlIcon from '../../../../../../base/icon/icon.vue';
 import GlToken from '../../../../../../base/token/token.vue';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 import {
-  CONTEXT_ITEM_TYPE_ISSUE,
-  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
-  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_FILE,
 } from '../constants';
 import { contextItemsValidator } from '../utils';
 
@@ -78,13 +78,13 @@ export default {
     },
   },
   methods: {
-    getIconName(type) {
+    getIconName(category) {
       const iconMap = {
-        [CONTEXT_ITEM_TYPE_PROJECT_FILE]: 'document',
-        [CONTEXT_ITEM_TYPE_ISSUE]: 'issues',
-        [CONTEXT_ITEM_TYPE_MERGE_REQUEST]: 'merge-request',
+        [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
+        [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
+        [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
       };
-      return iconMap[type] || 'document';
+      return iconMap[category] || 'document';
     },
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
@@ -127,8 +127,8 @@ export default {
         @close="onRemoveItem(item)"
       >
         <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
-          <gl-icon :name="getIconName(item.type)" :size="12" class="gl-mr-1" />
-          {{ item.metadata.name }}
+          <gl-icon :name="getIconName(item.category)" :size="12" class="gl-mr-1" />
+          {{ item.metadata.title }}
         </div>
         <gl-duo-chat-context-item-popover
           :context-item="item"

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

@@ -1,13 +1,13 @@
 import {
-  CONTEXT_ITEM_TYPE_ISSUE,
-  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
-  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_FILE,
 } from './constants';
 
 export 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' },
+  { label: 'Files', value: CONTEXT_ITEM_CATEGORY_FILE, icon: 'document' },
+  { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
+  { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
 ];
 
 export function getMockCategory(categoryValue) {
@@ -16,129 +16,112 @@ export function getMockCategory(categoryValue) {
 
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_FILE,
   metadata: {
-    name: 'strawberry.ts',
-    info: {
-      project: 'example/garden',
-      relFilePath: 'src/plants/strawberry.ts',
-    },
+    enabled: true,
+    title: 'strawberry.ts',
+    project: 'example/garden',
+    relativePath: 'src/plants/strawberry.ts',
   },
-  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 
 export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
   id: '323e4567-e89b-12d3-a456-426614174002',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_FILE,
   metadata: {
-    name: 'motorbike.cs',
-    info: {
-      project: 'example/vehicles',
-      relFilePath: '/src/VehicleFoo/motorbike.cs',
-    },
+    enabled: false,
+    title: 'motorbike.cs',
+    project: 'example/vehicles',
+    relativePath: '/src/VehicleFoo/motorbike.cs',
   },
-  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 const mockFiles = [
   MOCK_CONTEXT_ITEM_FILE,
   {
     id: '223e4567-e89b-12d3-a456-426614174001',
-    isEnabled: true,
+    category: CONTEXT_ITEM_CATEGORY_FILE,
     metadata: {
-      name: 'potato.ts',
-      info: {
-        project: 'example/garden',
-        relFilePath: '/src/plants/potato.ts',
-      },
+      enabled: true,
+      title: 'potato.ts',
+      project: 'example/garden',
+      relativePath: '/src/plants/potato.ts',
     },
-    type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
   },
   MOCK_CONTEXT_ITEM_FILE_DISABLED,
 ];
 
 export const MOCK_CONTEXT_ITEM_ISSUE = {
   id: '423e4567-e89b-12d3-a456-426614174003',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
   metadata: {
-    name: 'Implement watering schedule',
-    info: {
-      project: 'example/garden',
-      iid: 1234,
-    },
+    enabled: true,
+    title: 'Implement watering schedule',
+    project: 'example/garden',
+    iid: 1234,
   },
-  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+
   metadata: {
-    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,
-    },
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: `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`,
+    project: 'example/vehicle',
+    iid: 91011,
   },
-  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 
 const mockIssues = [
   MOCK_CONTEXT_ITEM_ISSUE,
   {
     id: '523e4567-e89b-12d3-a456-426614174004',
-    isEnabled: true,
+    category: CONTEXT_ITEM_CATEGORY_ISSUE,
     metadata: {
-      name: 'Refactor plant growth rates',
-      info: {
-        project: 'example/garden',
-        iid: 5678,
-      },
+      enabled: true,
+      title: 'Refactor plant growth rates',
+      project: 'example/garden',
+      iid: 5678,
     },
-    type: CONTEXT_ITEM_TYPE_ISSUE,
   },
   MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
 ];
 
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
   id: '623e4567-e89b-12d3-a456-426614174005',
-  isEnabled: true,
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   metadata: {
-    name: 'Improve database performance',
-    info: {
-      project: 'example/garden',
-      iid: 1122,
-    },
+    enabled: true,
+    title: 'Improve database performance',
+    project: 'example/garden',
+    iid: 1122,
   },
-  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
-  isEnabled: false,
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   metadata: {
-    name: 'Fix broken layout at small viewports',
-    info: {
-      project: 'example/vehicle',
-      iid: 5566,
-    },
+    enabled: false,
+    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+    title: 'Fix broken layout at small viewports',
+    project: 'example/vehicle',
+    iid: 5566,
   },
-  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 
 const mockMergeRequests = [
   MOCK_CONTEXT_ITEM_MERGE_REQUEST,
   {
     id: '723e4567-e89b-12d3-a456-426614174006',
-    isEnabled: false,
+    category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
     metadata: {
-      name: 'Add vehicle registration details',
-      info: {
-        project: 'example/vehicle',
-        iid: 3344,
-      },
+      enabled: false,
+      disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+      title: 'Add vehicle registration details',
+      project: 'example/vehicle',
+      iid: 3344,
     },
-    disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-    type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   },
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];
@@ -147,7 +130,7 @@ export const getMockContextItems = () => {
   const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
 
   // put disabled items in the back
-  const disabledItems = allItems.filter((item) => !item.isEnabled);
-  const enabledItems = allItems.filter((item) => item.isEnabled);
+  const disabledItems = allItems.filter((item) => !item.metadata.enabled);
+  const enabledItems = allItems.filter((item) => item.metadata.enabled);
   return [...enabledItems, ...disabledItems];
 };

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

@@ -18,9 +18,11 @@ export function contextItemValidator(item) {
   return Boolean(
     item &&
       item.id &&
-      item.type &&
-      typeof item.isEnabled === 'boolean' &&
-      disabledReasonsValidator(item.disabledReasons)
+      item.category &&
+      item.metadata &&
+      typeof item.metadata === 'object' &&
+      typeof item.metadata.enabled === 'boolean' &&
+      disabledReasonsValidator(item.metadata.disabledReasons)
   );
 }
 

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.md

@@ -5,13 +5,17 @@ and WebUI.
 
 To use this component, import it and fill out the available slots:
 
-* `title`: the main title for the panel
-* `subtitle`: the small text adjacent to the title
-* `content`: the content of the panel, hidden away when the collapse is toggled
+- `title`: the main title for the panel
+- `subtitle`: the small text adjacent to the title
+- `content`: the content of the panel, hidden away when the collapse is toggled
 
 Also provide an icon via the `headerIcon` prop. This icon is displayed adjacent
 to the title.
 
+You can pass `expanded` prop set to `false` if you need a section to be
+collapsed by default. You can also listen to `toggle-panel` event to know
+when the expanded state changed.
+
 Translations for the title of the single button can be provided either via the
 props `expandButtonTitle` and `collapseTitleButton` or via the translation
 configuration:

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -34,9 +34,14 @@ export default {
       required: false,
       default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse'),
     },
-  },
-  data() {
-    return { expanded: true };
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     buttonIcon() {
@@ -46,11 +51,6 @@ export default {
       return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
     },
   },
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-  },
 };
 </script>
 <template>
@@ -74,7 +74,7 @@ export default {
         :icon="buttonIcon"
         :title="buttonTitle"
         :aria-label="buttonTitle"
-        @click="toggleExpanded"
+        @click="$emit('toggle-panel')"
       />
     </div>
     <gl-collapse :visible="expanded">