@gitlab/ui 91.5.0 → 91.6.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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)
 
 

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 };

package/package.json

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

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

@@ -0,0 +1,168 @@
+<script>
+import { translate } from '../../../../../../../utils/i18n';
+import GlCard from '../../../../../../base/card/card.vue';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import { categoriesValidator, contextItemsValidator } from '../utils';
+
+export default {
+  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>
+
+<template>
+  <div>
+    <gl-duo-chat-context-item-selections
+      v-if="selections.length"
+      :selections="selections"
+      :removable="true"
+      :title="$options.i18n.selectedContextItemsTitle"
+      :default-collapsed="false"
+      class="gl-mb-3"
+      @remove="removeItem"
+    />
+    <gl-card
+      v-if="open"
+      class="slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md"
+      body-class="!gl-p-2"
+      data-testid="context-item-menu"
+    >
+      <ul v-if="showCategorySelection" data-testid="context-menu-category-items">
+        <!-- Placeholder for GlDuoChatContextItemMenuCategoryItems component coming in a future iteration -->
+        <li v-for="category of categories" :key="category.value" @click="selectCategory(category)">
+          {{ category.label }}
+        </li>
+      </ul>
+      <div v-else data-testid="context-menu-search-items">
+        <!-- Placeholder for GlDuoChatContextItemMenuSearchItem component coming in a future iteration -->
+        <template v-if="loading">Loading...</template>
+        <template v-else-if="error">Error: {{ error }}</template>
+        <ul v-else>
+          <li v-for="result of results" :key="result.id" @click="selectItem(result)">
+            {{ result.metadata.name }} {{ result.isEnabled ? '' : '(disabled)' }}
+          </li>
+        </ul>
+      </div>
+    </gl-card>
+  </div>
+</template>

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

@@ -18,14 +18,23 @@ export default {
     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/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -8,6 +8,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
+import { contextItemsValidator } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
@@ -17,18 +18,36 @@ export default {
     GlToken,
   },
   props: {
+    /**
+     * Array of selected context items.
+     */
     selections: {
       type: Array,
       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() {
     return {
@@ -53,6 +72,13 @@ export default {
     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);
+    },
   },
 };
 </script>
@@ -75,9 +101,10 @@ export default {
       <gl-token
         v-for="item in selections"
         :key="item.id"
-        :view-only="true"
+        :view-only="!removable"
         variant="default"
         class="gl-mb-2 gl-mr-2"
+        @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" />

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

@@ -1,3 +1,15 @@
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_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' },
+];
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,
@@ -8,7 +20,7 @@ export const MOCK_CONTEXT_ITEM_FILE = {
       relFilePath: 'src/plants/strawberry.ts',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 
 export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
@@ -21,7 +33,7 @@ export 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,
@@ -35,7 +47,7 @@ const mockFiles = [
         relFilePath: '/src/plants/potato.ts',
       },
     },
-    type: 'project_file',
+    type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
   },
   MOCK_CONTEXT_ITEM_FILE_DISABLED,
 ];
@@ -50,20 +62,20 @@ export const MOCK_CONTEXT_ITEM_ISSUE = {
       iid: 1234,
     },
   },
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 export 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 = [
@@ -78,7 +90,7 @@ const mockIssues = [
         iid: 5678,
       },
     },
-    type: 'issue',
+    type: CONTEXT_ITEM_TYPE_ISSUE,
   },
   MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
 ];
@@ -93,7 +105,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
       iid: 1122,
     },
   },
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
@@ -106,7 +118,7 @@ export 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 = [
@@ -122,7 +134,7 @@ const mockMergeRequests = [
       },
     },
     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,
 ];

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

@@ -0,0 +1,29 @@
+function categoryValidator(category) {
+  return Boolean(category && category.value && category.label && category.icon);
+}
+
+export 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)
+  );
+}
+
+export function contextItemsValidator(items) {
+  return Array.isArray(items) && items.every((item) => contextItemValidator(item));
+}

package/translations.js

@@ -8,6 +8,7 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDuoChatContextItemMenu.selectedContextItemsTitle': 'Included references',
   'GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage': null,
   'GlDuoChatMessage.SelectedContextItemsTitleUserMessage': null,
   'GlDuoWorkflowPanel.collapseButtonTitle': 'Collapse',