@gitlab/duo-ui 0.4.0 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0](https://gitlab.com/gitlab-org/duo-ui/compare/v0.4.0...v1.0.0) (2024-11-12)
+
+
+### Features
+
+* refactor translation mechanism ([e28fc10](https://gitlab.com/gitlab-org/duo-ui/commit/e28fc108870446555a9a75bd71f0b0e2cf6d8198))
+* Update Duo Components to match GitLab UI v101.16.0 ([58c6bf9](https://gitlab.com/gitlab-org/duo-ui/commit/58c6bf91c1b237485d29717ecad581319d83ad64))
+
+
+### BREAKING CHANGES
+
+* Synced Duo components with GitLab UI v101.16.0
+see: https://gitlab.com/gitlab-org/gitlab-ui/-/releases/v101.16.0
+
 # [0.4.0](https://gitlab.com/gitlab-org/duo-ui/compare/v0.3.0...v0.4.0) (2024-11-07)
 
 

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

@@ -2,10 +2,11 @@ const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
 const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
+const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
 const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
 const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
 const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
 const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
 const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';
 
-export { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };
+export { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

package/dist/components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.js

@@ -1,13 +1,14 @@
 import { nextTick } from 'vue';
-import { GlSkeletonLoader, GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlAlert, GlSkeletonLoader, GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
 import { contextItemValidator } from '../utils';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT, CONTEXT_ITEM_CATEGORY_DEPENDENCY } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlDuoChatContextItemDetailsModal',
   components: {
+    GlAlert,
     GlSkeletonLoader,
     GlModal
   },
@@ -32,6 +33,11 @@ var script = {
       validator: contextItemValidator
     }
   },
+  data() {
+    return {
+      contentErrorIsVisible: false
+    };
+  },
   computed: {
     isLoadingContent() {
       return this.contextItem.content === undefined;
@@ -50,16 +56,25 @@ var script = {
     title() {
       var _this$contextItem$met4, _this$contextItem$met5;
       return ((_this$contextItem$met4 = this.contextItem.metadata) === null || _this$contextItem$met4 === void 0 ? void 0 : _this$contextItem$met4.title) || ((_this$contextItem$met5 = this.contextItem.metadata) === null || _this$contextItem$met5 === void 0 ? void 0 : _this$contextItem$met5.relativePath) || translate('GlDuoChatContextItemDetailsModal.title', 'Preview');
+    },
+    isDependencies() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY;
     }
   },
   watch: {
     contextItem: {
       async handler(newVal, oldVal) {
-        const shouldFormat = (newVal === null || newVal === void 0 ? void 0 : newVal.content) !== (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content) && (newVal === null || newVal === void 0 ? void 0 : newVal.content);
-        if (shouldFormat) {
-          await nextTick();
-          await this.hydrateContentWithGFM();
+        // Dependency items contain structured data as content, not code/markdown.
+        // So skip running this content through GFM, we'll parse and render it here in the component.
+        if (newVal.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
+          return;
         }
+        const isUnchangedOrEmptyContent = !(newVal !== null && newVal !== void 0 && newVal.content) || (newVal === null || newVal === void 0 ? void 0 : newVal.content) === (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content);
+        if (isUnchangedOrEmptyContent) {
+          return;
+        }
+        await nextTick();
+        await this.hydrateContentWithGFM();
       },
       immediate: true
     }
@@ -71,19 +86,31 @@ var script = {
         this.renderGFM(this.$refs.content);
       }
     },
+    parseDependencies() {
+      if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
+        return null;
+      }
+      try {
+        return JSON.parse(this.contextItem.content);
+      } catch (error) {
+        this.contentErrorIsVisible = true;
+        return {};
+      }
+    },
     onModalVisibilityChange(isVisible) {
       if (!isVisible) {
         this.$emit('close');
       }
     }
-  }
+  },
+  CONTENT_ERROR_MESSAGE: translate('GlDuoChatContextItemDetailsModal.contentErrorMessage', 'Item content could not be displayed.')
 };
 
 /* 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-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):(_vm.contentErrorIsVisible)?_c('gl-alert',{attrs:{"variant":"danger","dismissible":false,"data-testid":"content-error-alert"}},[_vm._v("\n    "+_vm._s(_vm.$options.CONTENT_ERROR_MESSAGE)+"\n  ")]):(_vm.isDependencies)?_c('div',{attrs:{"data-testid":"context-item-content"}},[_c('p',[_vm._v("Project dependencies from "+_vm._s(_vm.contextItem.metadata.secondaryText))]),_vm._v(" "),_vm._l((_vm.parseDependencies()),function(matches,index){return _c('div',{key:index},_vm._l((matches),function(dependencies,language){return _c('div',{key:language},[_c('h3',{staticClass:"gl-heading-4 gl-mb-2"},[_vm._v(_vm._s(language))]),_vm._v(" "),_c('ul',{staticClass:"gl-pl-6"},_vm._l((dependencies),function(dependency){return _c('li',{key:dependency},[_vm._v("\n            "+_vm._s(dependency)+"\n          ")])}),0)])}),0)})],2):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,6 @@
 import debounce from 'lodash/debounce';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
 import { GlCard } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
 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';

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

@@ -1,12 +1,12 @@
-import { GlTruncate, GlIcon } from '@gitlab/ui';
+import { GlBadge, GlTruncate, GlIcon } from '@gitlab/ui';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
-import { categoryValidator, contextItemValidator, formatGitItemSecondaryText, formatMergeRequestId, formatIssueId, getContextItemIcon } from '../utils';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import { categoryValidator, contextItemValidator, getContextItemSecondaryText, getContextItemIcon, getContextItemSource } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlDuoChatContextItemMenuSearchItem',
   components: {
+    GlBadge,
     GlTruncate,
     GlIcon,
     GlDuoChatContextItemPopover
@@ -29,21 +29,13 @@ var script = {
       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_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);
-        case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
-          return formatGitItemSecondaryText(this.contextItem);
-        default:
-          return '';
-      }
+      return getContextItemSecondaryText(this.contextItem);
     },
     icon() {
       return getContextItemIcon(this.contextItem, this.category);
+    },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
     }
   }
 };
@@ -52,7 +44,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"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-2 gl-shrink-0",attrs:{"name":_vm.icon,"data-testid":"category-icon"}}),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.title,"data-testid":"item-title"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary",attrs:{"id":("info-icon-" + (_vm.contextItem.id)),"name":"information-o","size":12}}),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":_vm.contextItem,"target":("info-icon-" + (_vm.contextItem.id)),"placement":"left"}})],1),_vm._v(" "),(_vm.secondaryText)?_c('div',{staticClass:"gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary",attrs:{"data-testid":"item-secondary-text"}},[_c('gl-truncate',{attrs:{"text":_vm.secondaryText}})],1):_vm._e()])};
+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"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-2 gl-shrink-0",attrs:{"name":_vm.icon,"data-testid":"category-icon"}}),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.title,"data-testid":"item-title"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary",attrs:{"id":("info-icon-" + (_vm.contextItem.id)),"name":"information-o","size":12}}),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":_vm.contextItem,"target":("info-icon-" + (_vm.contextItem.id)),"placement":"left"}})],1),_vm._v(" "),(_vm.secondaryText)?_c('div',{staticClass:"gl-align-items-center gl-mt-1 gl-flex gl-shrink-0 gl-whitespace-nowrap gl-text-secondary",attrs:{"data-testid":"item-secondary-text"}},[(_vm.itemSource)?_c('gl-badge',{staticClass:"gl-mr-1",attrs:{"variant":"neutral","data-testid":"context-item-source"}},[_vm._v(_vm._s(_vm.itemSource))]):_vm._e(),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"position":"middle","text":_vm.secondaryText}})],1):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,4 +1,4 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.js

@@ -1,12 +1,13 @@
-import { GlTruncate, GlAlert, GlIcon, GlPopover } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
-import { CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT } from '../constants';
-import { formatMergeRequestId, formatIssueId, formatGitItemSecondaryText, getContextItemIcon, getContextItemTypeLabel } from '../utils';
+import { GlBadge, GlTruncate, GlAlert, GlIcon, GlPopover } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
+import { CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import { formatMergeRequestId, formatIssueId, getContextItemIcon, getContextItemTypeLabel, getContextItemSecondaryText, getContextItemSource } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlBadge,
     GlTruncate,
     GlAlert,
     GlIcon,
@@ -61,9 +62,6 @@ var script = {
       var _this$filePath;
       return (_this$filePath = this.filePath) === null || _this$filePath === void 0 ? void 0 : _this$filePath.split('/');
     },
-    gitDetails() {
-      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT ? formatGitItemSecondaryText(this.contextItem) : null;
-    },
     isEnabled() {
       return this.contextItem.metadata.enabled !== false;
     },
@@ -75,6 +73,12 @@ var script = {
     },
     itemTypeLabel() {
       return getContextItemTypeLabel(this.contextItem);
+    },
+    secondaryText() {
+      return getContextItemSecondaryText(this.contextItem);
+    },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
     }
   },
   methods: {
@@ -86,7 +90,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.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.title)+"\n      ")]),_vm._v(" "),(_vm.itemTypeLabel)?_c('div',{staticClass:"gl-font-normal gl-text-subtle"},[_vm._v(_vm._s(_vm.itemTypeLabel))]):_vm._e()])]},proxy:true}])},[_vm._v(" "),_c('div',[(_vm.filePath)?_c('div',[_c('gl-icon',{attrs:{"name":"document","size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),_vm._v(" "),_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.gitDetails)?_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"data-testid":"git-details"}},[_c('gl-icon',{staticClass:"gl-mr-1 gl-shrink-0",attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.gitDetails}})],1):_c('div',[(_vm.iconName)?_c('gl-icon',{attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),_vm._v(" "),(_vm.id)?_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.formattedId))]):_vm._e()],1),_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.title)+"\n      ")]),_vm._v(" "),(_vm.itemTypeLabel)?_c('div',{staticClass:"gl-flex gl-items-center gl-font-normal gl-text-subtle"},[_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.itemTypeLabel}})],1):_vm._e()])]},proxy:true}])},[_vm._v(" "),_c('div',[(_vm.secondaryText)?_c('div',{staticClass:"gl-flex gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-1 gl-shrink-0",attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}),_vm._v(" "),(_vm.itemSource)?_c('gl-badge',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.itemSource))]):_vm._e(),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.secondaryText}})],1):(_vm.filePath)?_c('div',[_c('gl-icon',{attrs:{"name":"document","size":12,"variant":"subtle"}}),_vm._v(" "),_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),_vm._v(" "),_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):_c('div',[(_vm.iconName)?_c('gl-icon',{attrs:{"name":_vm.iconName,"size":12,"variant":"subtle"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.contextItem.metadata.project))]),_vm._v(" "),(_vm.id)?_c('span',{staticClass:"gl-break-all"},[_vm._v(_vm._s(_vm.formattedId))]):_vm._e()],1),_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/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
 import { GlTruncate, GlIcon, GlToken } from '@gitlab/ui';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
-import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY } from '../constants';
 import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -106,7 +106,7 @@ var script = {
       this.previewContextItemId = contextItem.id;
     },
     canOpen(contextItem) {
-      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(contextItem.category);
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_DEPENDENCY].includes(contextItem.category);
     },
     onClosePreview() {
       this.previewContextItemId = null;

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

@@ -1,4 +1,4 @@
-import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
+import { CONTEXT_ITEM_CATEGORY_DEPENDENCY, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
 
 const MOCK_CATEGORIES = [{
   label: 'Files',
@@ -16,6 +16,10 @@ const MOCK_CATEGORIES = [{
   label: 'Merge Requests',
   value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   icon: 'merge-request'
+}, {
+  label: 'Dependencies',
+  value: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  icon: 'package'
 }];
 function getMockCategory(categoryValue) {
   return MOCK_CATEGORIES.find(cat => cat.value === categoryValue);
@@ -39,6 +43,9 @@ const MOCK_CONTEXT_ITEM_FILE = {
   metadata: {
     enabled: true,
     title: 'strawberry.ts',
+    secondaryText: 'src/plants/strawberry.ts',
+    subTypeLabel: 'Project file',
+    icon: 'document',
     project: 'example/garden',
     relativePath: 'src/plants/strawberry.ts'
   }
@@ -49,6 +56,9 @@ const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
   metadata: {
     enabled: false,
     title: 'motorbike.cs',
+    secondaryText: '/src/VehicleFoo/motorbike.cs',
+    subTypeLabel: 'Project file',
+    icon: 'document',
     project: 'example/vehicles',
     relativePath: '/src/VehicleFoo/motorbike.cs'
   }
@@ -59,6 +69,9 @@ const mockFiles = [MOCK_CONTEXT_ITEM_FILE, {
   metadata: {
     enabled: true,
     title: 'potato.ts',
+    secondaryText: '/src/plants/potato.ts',
+    subTypeLabel: 'Project file',
+    icon: 'document',
     project: 'example/garden',
     relativePath: '/src/plants/potato.ts'
   }
@@ -69,7 +82,9 @@ const MOCK_CONTEXT_ITEM_ISSUE = {
   metadata: {
     enabled: true,
     title: 'Implement watering schedule',
-    project: 'example/garden',
+    secondaryText: 'example/garden#1234',
+    subTypeLabel: 'Issue',
+    icon: 'issues',
     iid: 1234
   }
 };
@@ -80,7 +95,9 @@ const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
     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',
+    secondaryText: 'example/vehicle#91011',
+    subTypeLabel: 'Issue',
+    icon: 'issues',
     iid: 91011
   }
 };
@@ -90,7 +107,9 @@ const mockIssues = [MOCK_CONTEXT_ITEM_ISSUE, {
   metadata: {
     enabled: true,
     title: 'Refactor plant growth rates',
-    project: 'example/garden',
+    secondaryText: 'example/garden#5678',
+    subTypeLabel: 'Issue',
+    icon: 'issues',
     iid: 5678
   }
 }, MOCK_CONTEXT_ITEM_ISSUE_DISABLED];
@@ -100,7 +119,9 @@ const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
   metadata: {
     enabled: true,
     title: 'Improve database performance',
-    project: 'example/garden',
+    secondaryText: 'example/garden!1122',
+    subTypeLabel: 'Merge request',
+    icon: 'merge-request',
     iid: 1122
   }
 };
@@ -111,7 +132,9 @@ const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     enabled: false,
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
     title: 'Fix broken layout at small viewports',
-    project: 'example/vehicle',
+    secondaryText: 'example/vehicle!5566',
+    subTypeLabel: 'Merge request',
+    icon: 'merge-request',
     iid: 5566
   }
 };
@@ -122,7 +145,9 @@ const mockMergeRequests = [MOCK_CONTEXT_ITEM_MERGE_REQUEST, {
     enabled: false,
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
     title: 'Add vehicle registration details',
-    project: 'example/vehicle',
+    secondaryText: 'example/vehicle!3344',
+    subTypeLabel: 'Merge request',
+    icon: 'merge-request',
     iid: 3344
   }
 }, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED];
@@ -132,6 +157,10 @@ const MOCK_CONTEXT_ITEM_GIT_DIFF = {
   metadata: {
     enabled: true,
     title: 'Current working changes',
+    secondaryText: 'main',
+    subType: 'local_git',
+    subTypeLabel: 'Local Git repository diff',
+    icon: 'comparison',
     commitId: 'main',
     repositoryName: 'example/garden',
     gitType: 'diff'
@@ -143,6 +172,10 @@ const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
   metadata: {
     enabled: true,
     title: 'fix: some bug fix commit',
+    secondaryText: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    subType: 'local_git',
+    subTypeLabel: 'Local Git repository commit',
+    icon: 'commit',
     commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
     repositoryName: 'example/garden',
     gitType: 'commit'
@@ -154,6 +187,9 @@ const mockGitItems = [MOCK_CONTEXT_ITEM_GIT_DIFF, {
   metadata: {
     enabled: true,
     title: 'Diff from default branch',
+    secondaryText: 'main',
+    subTypeLabel: 'Local Git repository diff',
+    icon: 'comparison',
     commitId: 'main',
     repositoryName: 'example/garden',
     gitType: 'diff'
@@ -164,6 +200,9 @@ const mockGitItems = [MOCK_CONTEXT_ITEM_GIT_DIFF, {
   metadata: {
     enabled: true,
     title: 'feat: add cool new feature',
+    secondaryText: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+    subTypeLabel: 'Local Git repository commit',
+    icon: 'commit',
     commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
     repositoryName: 'example/garden',
     gitType: 'commit'
@@ -174,13 +213,83 @@ const mockGitItems = [MOCK_CONTEXT_ITEM_GIT_DIFF, {
   metadata: {
     enabled: true,
     title: 'fix: stop foo from bar when baz because customers ding',
+    secondaryText: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+    subTypeLabel: 'Local Git repository commit',
+    icon: 'commit',
     commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
     repositoryName: 'example/garden',
     gitType: 'commit'
   }
 }];
+const MOCK_CONTEXT_ITEM_DEPENDENCY = {
+  id: '823e4567-e89b-12d3-a456-426614174007',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['@types/node@16.11.7', '@vue/compiler-sfc@3.2.37', 'typescript@4.5.5', 'vue@3.2.37']
+  }]),
+  metadata: {
+    enabled: true,
+    title: 'example/garden',
+    secondaryText: 'package.json',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/garden'
+  }
+};
+const MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED = {
+  id: '923e4567-e89b-12d3-a456-426614174008',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['@types/node@16.11.7', '@vue/compiler-sfc@3.2.37', 'typescript@4.5.5', 'vue@3.2.37'],
+    csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0']
+  }]),
+  metadata: {
+    enabled: false,
+    disabledReasons: ['Dependencies are not available for this project', 'Access restricted'],
+    title: 'example/vehicle',
+    secondaryText: 'package.json, vehicle.csproj',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/vehicle'
+  }
+};
+const mockDependencies = [MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, {
+  id: 'b23e4567-e89b-12d3-a456-426614174010',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    python: ['django@3.2.9', 'djangorestframework@3.12.4', 'psycopg2@2.9.2', 'celery@5.2.1'],
+    csharp: ['newtonsoft.json@13.0.1', 'microsoft.net.test.sdk@16.11.0']
+  }]),
+  metadata: {
+    enabled: true,
+    title: 'example/backend',
+    secondaryText: 'requirements.txt, some.backend.csproj',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/backend'
+  }
+}, {
+  id: 'c23e4567-e89b-12d3-a456-426614174011',
+  category: CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  content: JSON.stringify([{
+    javascript: ['jquery@3.5.1', 'backbone@1.4.0', 'underscore@1.13.1', 'moment@2.29.1']
+  }]),
+  metadata: {
+    enabled: false,
+    disabledReasons: ['Project is archived'],
+    title: 'example/legacy',
+    secondaryText: 'bower.json',
+    icon: 'package',
+    subType: 'dependency',
+    subTypeLabel: 'Project dependencies',
+    project: 'example/legacy'
+  }
+}];
 const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests, ...mockDependencies];
 
   // put disabled items in the back
   const disabledItems = allItems.filter(item => !item.metadata.enabled);
@@ -188,4 +297,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_DEPENDENCY, MOCK_CONTEXT_ITEM_DEPENDENCY_DISABLED, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };

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

@@ -1,4 +1,4 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_LOCAL_GIT_COMMIT, CONTEXT_ITEM_LOCAL_GIT_DIFF, CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST } from './constants';
 
 function categoryValidator(category) {
@@ -24,6 +24,9 @@ function formatMergeRequestId(iid) {
   if (!iid) return '';
   return `!${iid}`;
 }
+function getContextItemSource(contextItem) {
+  return contextItem.metadata.repositoryName || contextItem.metadata.project || null;
+}
 function getGitItemIcon(contextItem) {
   const iconMap = {
     [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
@@ -42,6 +45,9 @@ function getContextItemIcon(contextItem) {
   let category = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     icon: null
   };
+  if (contextItem.metadata.icon) {
+    return contextItem.metadata.icon;
+  }
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     const gitIcon = getGitItemIcon(contextItem);
     if (gitIcon) return gitIcon;
@@ -58,6 +64,9 @@ function getContextItemIcon(contextItem) {
   return iconMap[contextItem.category] || null;
 }
 function getContextItemTypeLabel(contextItem) {
+  if (contextItem.metadata.subTypeLabel) {
+    return contextItem.metadata.subTypeLabel;
+  }
   if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
     switch (contextItem.metadata.gitType) {
       case CONTEXT_ITEM_LOCAL_GIT_DIFF:
@@ -91,6 +100,23 @@ function formatGitItemSecondaryText(contextItem) {
   const separator = commitId ? ' - ' : '';
   return `${repositoryName}${separator}${commitId || ''}`;
 }
+function getContextItemSecondaryText(contextItem) {
+  if (contextItem.metadata.secondaryText) {
+    return contextItem.metadata.secondaryText;
+  }
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return contextItem.metadata.relativePath;
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return formatIssueId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return formatMergeRequestId(contextItem.metadata.iid);
+    case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+      return formatGitItemSecondaryText(contextItem);
+    default:
+      return '';
+  }
+}
 
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
@@ -103,4 +129,4 @@ function wrapIndex(currentIndex, step, totalLength) {
   return (currentIndex + step + totalLength) % totalLength;
 }
 
-export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator, formatGitItemSecondaryText, formatIssueId, formatMergeRequestId, getContextItemIcon, getContextItemTypeLabel, wrapIndex };
+export { categoriesValidator, categoryValidator, contextItemValidator, contextItemsValidator, formatGitItemSecondaryText, formatIssueId, formatMergeRequestId, getContextItemIcon, getContextItemSecondaryText, getContextItemSource, getContextItemTypeLabel, wrapIndex };

package/dist/components/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -1,4 +1,4 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../utils/i18n';
 import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/chat/components/duo_chat_loader/duo_chat_loader.js

@@ -1,5 +1,5 @@
-import { translate } from '@gitlab/ui/dist/utils/i18n';
 import { GlSprintf } from '@gitlab/ui';
+import { translate } from '../../../../utils/i18n';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';