@gitlab/duo-ui 0.3.0 → 1.0.0

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue

@@ -1,9 +1,10 @@
 <script>
 import { nextTick } from 'vue';
-import { GlSkeletonLoader, GlModal, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlSkeletonLoader, GlModal, GlAlert, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
 import { contextItemValidator } from '../utils';
 import {
+  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   LANGUAGE_IDENTIFIER_DIFF,
   LANGUAGE_IDENTIFIER_PLAINTEXT,
@@ -13,6 +14,7 @@ import {
 export default {
   name: 'GlDuoChatContextItemDetailsModal',
   components: {
+    GlAlert,
     GlSkeletonLoader,
     GlModal,
   },
@@ -37,6 +39,11 @@ export default {
       validator: contextItemValidator,
     },
   },
+  data() {
+    return {
+      contentErrorIsVisible: false,
+    };
+  },
   computed: {
     isLoadingContent() {
       return this.contextItem.content === undefined;
@@ -60,15 +67,26 @@ export default {
         translate('GlDuoChatContextItemDetailsModal.title', 'Preview')
       );
     },
+    isDependencies() {
+      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY;
+    },
   },
   watch: {
     contextItem: {
       async handler(newVal, oldVal) {
-        const shouldFormat = newVal?.content !== oldVal?.content && 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?.content || newVal?.content === oldVal?.content;
+        if (isUnchangedOrEmptyContent) {
+          return;
+        }
+
+        await nextTick();
+        await this.hydrateContentWithGFM();
       },
       immediate: true,
     },
@@ -81,12 +99,28 @@ export default {
         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>
 
@@ -101,6 +135,27 @@ export default {
     @change="onModalVisibilityChange"
   >
     <gl-skeleton-loader v-if="isLoadingContent" />
+    <gl-alert
+      v-else-if="contentErrorIsVisible"
+      variant="danger"
+      :dismissible="false"
+      data-testid="content-error-alert"
+    >
+      {{ $options.CONTENT_ERROR_MESSAGE }}
+    </gl-alert>
+    <div v-else-if="isDependencies" data-testid="context-item-content">
+      <p>Project dependencies from {{ contextItem.metadata.secondaryText }}</p>
+      <div v-for="(matches, index) in parseDependencies()" :key="index">
+        <div v-for="(dependencies, language) in matches" :key="language">
+          <h3 class="gl-heading-4 gl-mb-2">{{ language }}</h3>
+          <ul class="gl-pl-6">
+            <li v-for="dependency in dependencies" :key="dependency" class="">
+              {{ dependency }}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
     <div v-else ref="content" data-testid="context-item-content">
       <pre
         v-safe-html="contextItem.content"

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.md

@@ -0,0 +1,35 @@
+Allows selecting and removing context items for the conversation.
+
+**Note:**
+Keyboard events don't work properly in this story (independently of the main DuoChat
+component)- test in the main `DuoChat` interactive story with the /include command.
+
+## AIContextItem type
+
+The component expects items with specific display properties:
+
+```typescript
+export type AIContextItem = {
+  id: string;
+  category: 'file' | 'snippet' | 'issue' | 'merge_request' | 'dependency';
+
+  content?: string; // some categories allow loading/displaying content in the details-modal
+
+  metadata: {
+    icon: string; // should be a valid gitlab-ui icon name
+    title: string;
+    secondaryText: string;
+    subTypeLabel: string;
+
+    // Additional properties some categories have to help differentiate results
+    project?: string;
+    repositoryName?: string;
+
+    // items may be disabled, e.g. if they belong to a non-Duo-enabled project
+    enabled: boolean;
+    disabledReasons?: string[];
+  };
+};
+```
+
+For the editor extensions, these types are defined [in the language server](https://gitlab.com/gitlab-org/editor-extensions/gitlab-lsp/blob/main/src/common/ai_context_management/index.ts)

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

@@ -1,7 +1,7 @@
 <script>
 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.vue';
 import { categoriesValidator, contextItemsValidator, wrapIndex } from '../utils';
 import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';

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

@@ -1,25 +1,18 @@
 <script>
-import { GlIcon, GlTruncate } from '@gitlab/ui';
+import { GlIcon, GlTruncate, GlBadge } from '@gitlab/ui';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 
 import {
   categoryValidator,
   contextItemValidator,
-  formatGitItemSecondaryText,
-  formatIssueId,
-  formatMergeRequestId,
   getContextItemIcon,
+  getContextItemSecondaryText,
+  getContextItemSource,
 } from '../utils';
-import {
-  CONTEXT_ITEM_CATEGORY_FILE,
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-} from '../constants';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
+  components: { GlBadge, GlTruncate, GlIcon, GlDuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -37,22 +30,14 @@ export default {
       return this.contextItem.metadata?.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);
+    },
   },
 };
 </script>
@@ -75,10 +60,17 @@ export default {
     </div>
     <div
       v-if="secondaryText"
-      class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
+      class="gl-align-items-center gl-mt-1 gl-flex gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
       data-testid="item-secondary-text"
     >
-      <gl-truncate :text="secondaryText" />
+      <gl-badge
+        v-if="itemSource"
+        variant="neutral"
+        class="gl-mr-1"
+        data-testid="context-item-source"
+        >{{ itemSource }}</gl-badge
+      >
+      <gl-truncate class="gl-min-w-0" position="middle" :text="secondaryText" />
     </div>
   </div>
 </template>

package/src/components/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_items_loading.vue

@@ -1,5 +1,5 @@
 <script>
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { translate } from '../../../../../utils/i18n';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItemsLoading',

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

@@ -1,24 +1,25 @@
 <script>
-import { GlAlert, GlIcon, GlPopover, GlTruncate } from '@gitlab/ui';
-import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlAlert, GlIcon, GlPopover, GlTruncate, GlBadge } from '@gitlab/ui';
+import { translate } from '../../../../../utils/i18n';
 
 import {
   CONTEXT_ITEM_CATEGORY_FILE,
   CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
 } from '../constants';
 import {
-  formatGitItemSecondaryText,
   formatIssueId,
   formatMergeRequestId,
   getContextItemIcon,
+  getContextItemSecondaryText,
+  getContextItemSource,
   getContextItemTypeLabel,
 } from '../utils';
 
 export default {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlBadge,
     GlTruncate,
     GlAlert,
     GlIcon,
@@ -76,11 +77,6 @@ export default {
     filePathArray() {
       return this.filePath?.split('/');
     },
-    gitDetails() {
-      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT
-        ? formatGitItemSecondaryText(this.contextItem)
-        : null;
-    },
     isEnabled() {
       return this.contextItem.metadata.enabled !== false;
     },
@@ -96,6 +92,12 @@ export default {
     itemTypeLabel() {
       return getContextItemTypeLabel(this.contextItem);
     },
+    secondaryText() {
+      return getContextItemSecondaryText(this.contextItem);
+    },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
+    },
   },
   methods: {
     translate,
@@ -118,21 +120,24 @@ export default {
         >
           {{ title }}
         </div>
-        <div v-if="itemTypeLabel" class="gl-font-normal gl-text-subtle">{{ itemTypeLabel }}</div>
+        <div v-if="itemTypeLabel" class="gl-flex gl-items-center gl-font-normal gl-text-subtle">
+          <gl-truncate :text="itemTypeLabel" class="gl-min-w-0" />
+        </div>
       </div>
     </template>
     <div>
-      <div v-if="filePath">
+      <div v-if="secondaryText" class="gl-flex gl-items-center">
+        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
+        <gl-badge v-if="itemSource" class="gl-mr-1">{{ itemSource }}</gl-badge>
+        <gl-truncate :text="secondaryText" class="gl-min-w-0" />
+      </div>
+      <div v-else-if="filePath">
         <gl-icon name="document" :size="12" variant="subtle" />
         <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
         <span v-for="(pathPart, index) in filePathArray" :key="pathPart" class="gl-break-all"
           >{{ pathPart }}{{ index + 1 < filePathArray.length ? '/' : '' }}</span
         >
       </div>
-      <div v-else-if="gitDetails" class="gl-flex gl-items-center" data-testid="git-details">
-        <gl-icon :name="iconName" :size="12" variant="subtle" class="gl-mr-1 gl-shrink-0" />
-        <gl-truncate :text="gitDetails" class="gl-min-w-0" />
-      </div>
       <div v-else>
         <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
         <span class="gl-break-all">{{ contextItem.metadata.project }}</span>

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

@@ -3,7 +3,11 @@ import uniqueId from 'lodash/uniqueId';
 import { GlIcon, GlToken, GlTruncate } from '@gitlab/ui';
 
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
-import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT } from '../constants';
+import {
+  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+} from '../constants';
 import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 
@@ -109,9 +113,11 @@ export default {
       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/src/components/chat/components/duo_chat_context/mock_context_data.js

@@ -1,8 +1,9 @@
 import {
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
   CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
   CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
 } from './constants';
 
 export const MOCK_CATEGORIES = [
@@ -10,6 +11,7 @@ export const MOCK_CATEGORIES = [
   { 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' },
+  { label: 'Dependencies', value: CONTEXT_ITEM_CATEGORY_DEPENDENCY, icon: 'package' },
 ];
 
 export function getMockCategory(categoryValue) {
@@ -37,6 +39,9 @@ export 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',
   },
@@ -48,6 +53,9 @@ export 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',
   },
@@ -60,6 +68,9 @@ const mockFiles = [
     metadata: {
       enabled: true,
       title: 'potato.ts',
+      secondaryText: '/src/plants/potato.ts',
+      subTypeLabel: 'Project file',
+      icon: 'document',
       project: 'example/garden',
       relativePath: '/src/plants/potato.ts',
     },
@@ -73,7 +84,9 @@ export 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,
   },
 };
@@ -85,7 +98,9 @@ export 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,
   },
 };
@@ -98,7 +113,9 @@ const mockIssues = [
     metadata: {
       enabled: true,
       title: 'Refactor plant growth rates',
-      project: 'example/garden',
+      secondaryText: 'example/garden#5678',
+      subTypeLabel: 'Issue',
+      icon: 'issues',
       iid: 5678,
     },
   },
@@ -111,7 +128,9 @@ export 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,
   },
 };
@@ -122,7 +141,9 @@ export 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,
   },
 };
@@ -136,7 +157,9 @@ const mockMergeRequests = [
       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,
     },
   },
@@ -149,6 +172,10 @@ export 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',
@@ -160,6 +187,10 @@ export 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',
@@ -174,6 +205,9 @@ const mockGitItems = [
     metadata: {
       enabled: true,
       title: 'Diff from default branch',
+      secondaryText: 'main',
+      subTypeLabel: 'Local Git repository diff',
+      icon: 'comparison',
       commitId: 'main',
       repositoryName: 'example/garden',
       gitType: 'diff',
@@ -186,6 +220,9 @@ const mockGitItems = [
     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',
@@ -197,6 +234,9 @@ const mockGitItems = [
     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',
@@ -204,8 +244,107 @@ const mockGitItems = [
   },
 ];
 
+export 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',
+  },
+};
+
+export 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',
+    },
+  },
+];
+
 export 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);