@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,137 @@
+import { GlAlert, GlDropdownItem, GlFormInput } from '@gitlab/ui';
+import { sprintf, translate } from '@gitlab/ui/dist/utils/i18n';
+import { categoryValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenuSearchItems',
+  components: {
+    GlAlert,
+    GlDropdownItem,
+    GlDuoChatContextItemMenuSearchItem,
+    GlDuoChatContextItemMenuSearchItemsLoading,
+    GlFormInput
+  },
+  model: {
+    prop: 'searchQuery',
+    event: 'update:searchQuery'
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      required: true
+    },
+    searchQuery: {
+      type: String,
+      required: true
+    },
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator
+    },
+    loading: {
+      type: Boolean,
+      required: true
+    },
+    error: {
+      type: [String, null],
+      required: false,
+      default: null
+    },
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator
+    }
+  },
+  data() {
+    return {
+      userInitiatedSearch: false,
+      numLoadingItems: 3
+    };
+  },
+  computed: {
+    showEmptyState() {
+      return Boolean(this.userInitiatedSearch && !this.loading && !this.error && !this.results.length);
+    },
+    searchInputPlaceholder() {
+      return sprintf(translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'), {
+        categoryLabel: this.category.label.toLowerCase()
+      });
+    }
+  },
+  watch: {
+    searchQuery() {
+      this.userInitiatedSearch = true;
+    },
+    results(results) {
+      this.numLoadingItems = Math.max(1, results.length);
+    }
+  },
+  methods: {
+    selectItem(contextItem) {
+      this.$emit('select', contextItem);
+      this.userInitiatedSearch = false;
+    },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
+    setActiveIndex(index) {
+      var _this$results$index;
+      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.metadata.enabled;
+    }
+  },
+  i18n: {
+    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found')
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-max-h-31 gl-overflow-y-scroll"},[(_vm.loading)?_c('gl-duo-chat-context-item-menu-search-items-loading',{attrs:{"rows":_vm.numLoadingItems}}):(_vm.error)?_c('gl-alert',{staticClass:"gl-m-3",attrs:{"variant":"danger","dismissible":false,"data-testid":"search-results-error"}},[_vm._v("\n      "+_vm._s(_vm.error)+"\n    ")]):(_vm.showEmptyState)?_c('div',{staticClass:"gl-rounded-base gl-p-3 gl-text-center gl-text-secondary",attrs:{"data-testid":"search-results-empty-state"}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.emptyStateMessage)+"\n    ")]):_c('ul',{staticClass:"gl-mb-1 gl-list-none gl-flex-row gl-pl-0"},_vm._l((_vm.results),function(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.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 */
+  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/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.js

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

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

@@ -0,0 +1,121 @@
+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 __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'DuoChatContextItemPopover',
+  components: {
+    GlTruncate,
+    GlAlert,
+    GlIcon,
+    GlPopover
+  },
+  props: {
+    /**
+     * The context contextItem to display in the popover.
+     */
+    contextItem: {
+      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',
+      required: false
+    }
+  },
+  computed: {
+    id() {
+      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.category) {
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
+          return formatIssueId(this.id);
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+          return formatMergeRequestId(this.id);
+        default:
+          return '';
+      }
+    },
+    title() {
+      return this.contextItem.metadata.title || '';
+    },
+    filePath() {
+      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('/');
+    },
+    gitDetails() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT ? formatGitItemSecondaryText(this.contextItem) : null;
+    },
+    isEnabled() {
+      return this.contextItem.metadata.enabled !== false;
+    },
+    disabledMessage() {
+      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() {
+      return getContextItemIcon(this.contextItem);
+    },
+    itemTypeLabel() {
+      return getContextItemTypeLabel(this.contextItem);
+    }
+  },
+  methods: {
+    translate
+  }
+};
+
+/* 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_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/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -0,0 +1,153 @@
+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 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';
+
+var script = {
+  name: 'GlDuoChatContextItemSelections',
+  components: {
+    GlTruncate,
+    GlDuoChatContextItemDetailsModal,
+    GlIcon,
+    GlDuoChatContextItemPopover,
+    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
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: 'assistant'
+    }
+  },
+  data() {
+    return {
+      isCollapsed: this.defaultCollapsed,
+      selectionsId: uniqueId(),
+      previewContextItemId: null
+    };
+  },
+  computed: {
+    collapseIconName() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+    variantClasses() {
+      if (this.variant === 'user') {
+        return 'gl-mb-0 gl-mt-2 gl-text-blue-700';
+      }
+      return 'gl-mb-2 gl-text-gray-500';
+    },
+    tokenVariantClasses() {
+      if (this.variant === 'user') {
+        return 'gl-bg-blue-50 gl-text-blue-600';
+      }
+      return '';
+    },
+    contextItemPreview() {
+      return this.selections.find(item => item.id === this.previewContextItemId);
+    }
+  },
+  methods: {
+    getContextItemIcon,
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    onRemoveItem(contextItem) {
+      /**
+       * Emitted when a context contextItem should be removed.
+       * @property {Object} item - The context contextItem to be removed
+       */
+      this.$emit('remove', contextItem);
+    },
+    onOpenItem(event, contextItem) {
+      const isKeypressOnCloseButton = event.type === 'keydown' && event.target !== event.currentTarget;
+      if (isKeypressOnCloseButton) {
+        // don't respond to events triggered by the gl-token children (e.g. the close button)
+        return;
+      }
+      if (!this.canOpen(contextItem)) {
+        return;
+      }
+      if (!contextItem.content) {
+        this.$emit('get-content', contextItem);
+      }
+      this.previewContextItemId = contextItem.id;
+    },
+    canOpen(contextItem) {
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(contextItem.category);
+    },
+    onClosePreview() {
+      this.previewContextItemId = null;
+    }
+  }
+};
+
+/* 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 gl-max-w-full",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"view-only":!_vm.removable,"variant":"default","tabindex":_vm.canOpen(item) ? 0 : -1,"role":_vm.canOpen(item) ? 'button' : undefined},on:{"click":function($event){return _vm.onOpenItem($event, item)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onOpenItem($event, item)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();return _vm.onOpenItem($event, item)}],"close":function($event){return _vm.onRemoveItem(item)}}},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[(_vm.getContextItemIcon(item))?_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getContextItemIcon(item),"size":12}}):_vm._e(),_vm._v(" "),_c('gl-truncate',{attrs:{"text":item.metadata.title,"position":"middle"}})],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"placement":"bottom"},on:{"show-git-diff":function($event){return _vm.onOpenItem(item)}}})],1)}),1),_vm._v(" "),(_vm.contextItemPreview)?_c('gl-duo-chat-context-item-details-modal',{attrs:{"context-item":_vm.contextItemPreview},on:{"close":_vm.onClosePreview}}):_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/chat/components/duo_chat_context/mock_context_data.js

@@ -0,0 +1,191 @@
+import { 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',
+  value: CONTEXT_ITEM_CATEGORY_FILE,
+  icon: 'document'
+}, {
+  label: 'Local Git',
+  value: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  icon: 'git'
+}, {
+  label: 'Issues',
+  value: CONTEXT_ITEM_CATEGORY_ISSUE,
+  icon: 'issues'
+}, {
+  label: 'Merge Requests',
+  value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  icon: 'merge-request'
+}];
+function getMockCategory(categoryValue) {
+  return MOCK_CATEGORIES.find(cat => cat.value === categoryValue);
+}
+const MOCK_CONTEXT_FILE_CONTENT = `export function waterPlants() {
+    console.log('sprinkle');
+}`;
+const MOCK_CONTEXT_FILE_DIFF_CONTENT = `diff --git a/src/plants/strawberry.ts b/src/plants/strawberry.ts
+index 1234567..8901234 100644
+--- a/src/plants/strawberry.ts
++++ b/src/plants/strawberry.ts
+@@ -1,4 +1,4 @@
+ export const strawberry = {
+   name: 'Strawberry',
+-  waterNeeds: 'moderate',
++  waterNeeds: 'high',
+ };`;
+const MOCK_CONTEXT_ITEM_FILE = {
+  id: '123e4567-e89b-12d3-a456-426614174000',
+  category: CONTEXT_ITEM_CATEGORY_FILE,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_FILE,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_FILE,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+  metadata: {
+    enabled: true,
+    title: 'Implement watering schedule',
+    project: 'example/garden',
+    iid: 1234
+  }
+};
+const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
+  id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_ISSUE,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  metadata: {
+    enabled: true,
+    title: 'Improve database performance',
+    project: 'example/garden',
+    iid: 1122
+  }
+};
+const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
+  id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  metadata: {
+    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',
+  category: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  metadata: {
+    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 MOCK_CONTEXT_ITEM_GIT_DIFF = {
+  id: '6d88b466-0c38-48d6-b271-deda47f97cee',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'Current working changes',
+    commitId: 'main',
+    repositoryName: 'example/garden',
+    gitType: 'diff'
+  }
+};
+const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
+  id: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'fix: some bug fix commit',
+    commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    repositoryName: 'example/garden',
+    gitType: 'commit'
+  }
+};
+const mockGitItems = [MOCK_CONTEXT_ITEM_GIT_DIFF, {
+  id: 'diff-example/garden',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'Diff from default branch',
+    commitId: 'main',
+    repositoryName: 'example/garden',
+    gitType: 'diff'
+  }
+}, MOCK_CONTEXT_ITEM_GIT_COMMIT, {
+  id: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'feat: add cool new feature',
+    commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+    repositoryName: 'example/garden',
+    gitType: 'commit'
+  }
+}, {
+  id: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'fix: stop foo from bar when baz because customers ding',
+    commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+    repositoryName: 'example/garden',
+    gitType: 'commit'
+  }
+}];
+const getMockContextItems = () => {
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
+
+  // put disabled items in the back
+  const disabledItems = allItems.filter(item => !item.metadata.enabled);
+  const enabledItems = allItems.filter(item => item.metadata.enabled);
+  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 };