@gitlab/ui 101.2.0 → 101.3.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -1,6 +1,5 @@
 /**
- * Automatically generated
- * Do not edit directly
+ * Do not edit directly, this file was auto-generated.
  */
 
 $gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);

package/dist/tokens/tailwind/tokens.cjs

@@ -1,6 +1,5 @@
 /**
- * Automatically generated
- * Do not edit directly
+ * Do not edit directly, this file was auto-generated.
  */
 
 const baseColors = {

package/dist/tokens/tokens_story.js

@@ -54,7 +54,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',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.$value),style:(_vm.getStyle(token.$value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.$value))]),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.$value))?_c('gl-color-contrast',{attrs:{"foreground":token.$value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/tokens_table.js

@@ -84,23 +84,21 @@ var script = {
       return value;
     },
     getValueLabel(token) {
-      const {
-        value
-      } = token.original;
+      const value = token.original.$value;
       if (this.isAliasObject(value)) {
         return this.getAliasValueName(value[this.selectedMode]);
       }
       if (this.isAliasValue(value)) {
         return this.getAliasValueName(value);
       }
-      return token.value;
+      return token.$value;
     },
     transformTokenToTableColumns(token) {
       return {
         id: token.path.filter(Boolean).join('-'),
         name: this.formatTokenName(this.selectedPlatform, token),
         type: token.$type,
-        value: token.value,
+        value: token.$value,
         valueLabel: this.getValueLabel(token),
         deprecated: token.deprecated,
         description: token.comment
@@ -110,7 +108,7 @@ var script = {
       const tokensArray = [];
       Object.keys(tokens).forEach(key => {
         const token = tokens[key];
-        if (token.value) {
+        if (token.$value) {
           tokensArray.push(this.transformTokenToTableColumns(token));
         } else {
           tokensArray.push(...this.transformTokensToTableRows(token));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "101.2.0",
+  "version": "101.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "prebuild": "run-s build-tokens build-migration-script",
     "prepare": "run-s build-tokens",
     "copy-fonts": "make copy-fonts",
-    "build-tokens": "node ./bin/build_tokens.js",
+    "build-tokens": "node ./bin/build_tokens.mjs",
     "build-migration-script": "esbuild --bundle --platform=node --target=esnext --outfile=bin/migrate_custom_utils_to_tw.bundled.mjs --format=esm --banner:js=\"import { createRequire as __gl__createRequire } from 'node:module'; const require = __gl__createRequire(import.meta.url);\" bin/migrate_custom_utils_to_tw.mjs",
     "clean": "rm -r dist storybook",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
@@ -71,7 +71,6 @@
     "markdownlint:fix": "yarn markdownlint --fix",
     "lint": "run-p prettier eslint stylelint markdownlint",
     "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
-    "generate:component": "plop",
     "translations:collect": "make translations.js",
     "tailwind-config-viewer:start": "tailwind-config-viewer -o",
     "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
@@ -158,7 +157,6 @@
     "glob": "10.3.3",
     "globby": "^11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "inquirer-select-directory": "^1.2.0",
     "jest": "^29.7.0",
     "jest-circus": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
@@ -171,7 +169,6 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.48.1",
     "playwright-core": "^1.48.1",
-    "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
@@ -191,7 +188,7 @@
     "start-server-and-test": "^1.10.6",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^3.8.0",
+    "style-dictionary": "^4.1.4",
     "stylelint": "16.8.1",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.4",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -110,6 +110,15 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   &-content {
     @apply gl-flex;
     @apply gl-justify-center;
+
+    a {
+      @apply gl-text-inherit;
+      @apply gl-underline;
+    }
+
+    p:last-of-type {
+      @apply gl-mb-0;
+    }
   }
 
   &-icon {

package/src/components/base/card/card.scss

@@ -1,11 +1,11 @@
 .gl-card {
-  background-color: var(--gl-background-color-default);
+  @apply gl-bg-subtle;
   @apply gl-border-solid;
   @apply gl-rounded-base;
   @apply gl-flex;
   @apply gl-flex-col;
   @apply gl-break-words;
-  position: relative;
+  @apply gl-relative;
   @apply gl-text-base;
 }
 
@@ -13,20 +13,21 @@
 .gl-card-header,
 .gl-card-footer {
   @apply gl-border-1;
-  border-color: var(--gl-border-color-default);
+  @apply gl-border-section;
 }
 
 .gl-card-header,
 .gl-card-body,
 .gl-card-footer {
-  @apply gl-p-5;
+  @apply gl-px-5;
+  @apply gl-py-4;
 }
 
 .gl-card-header {
   @apply gl-border-b-solid;
   border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
   border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
-  color: var(--gl-text-color-heading);
+  @apply gl-text-heading;
 }
 
 .gl-card-footer {
@@ -37,10 +38,10 @@
 
 .gl-card-header,
 .gl-card-footer {
-  background-color: var(--gl-background-color-subtle);
+  @apply gl-bg-section;
 }
 
 .gl-card-body,
 .gl-card-footer {
-  color: var(--gl-text-color-default);
+  @apply gl-text-default;
 }

package/src/components/experimental/duo/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 GlDuoChat
+component)- test in the main `GlDuoChat` 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/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.vue

@@ -5,21 +5,15 @@ import GlIcon from '../../../../../../base/icon/icon.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';
+import GlBadge from '../../../../../../base/badge/badge.vue';
 
 export default {
   name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
+  components: { GlBadge, GlTruncate, GlIcon, GlDuoChatContextItemPopover },
   props: {
     category: {
       type: Object,
@@ -37,22 +31,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 +61,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/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_popover/duo_chat_context_item_popover.vue

@@ -7,20 +7,22 @@ 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';
+import GlBadge from '../../../../../../base/badge/badge.vue';
 
 export default {
   name: 'DuoChatContextItemPopover',
   components: {
+    GlBadge,
     GlTruncate,
     GlAlert,
     GlIcon,
@@ -78,11 +80,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;
     },
@@ -98,6 +95,12 @@ export default {
     itemTypeLabel() {
       return getContextItemTypeLabel(this.contextItem);
     },
+    secondaryText() {
+      return getContextItemSecondaryText(this.contextItem);
+    },
+    itemSource() {
+      return getContextItemSource(this.contextItem);
+    },
   },
   methods: {
     translate,
@@ -120,21 +123,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/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -37,6 +37,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 +51,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 +66,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 +82,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 +96,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 +111,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 +126,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 +139,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 +155,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 +170,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 +185,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 +203,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 +218,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 +232,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',

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

@@ -52,6 +52,10 @@ export function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
+export function getContextItemSource(contextItem) {
+  return contextItem.metadata.repositoryName || contextItem.metadata.project || null;
+}
+
 function getGitItemIcon(contextItem) {
   const iconMap = {
     [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
@@ -65,6 +69,10 @@ function getGitItemIcon(contextItem) {
  * Gets the icon name for a given contextItem.
  */
 export function getContextItemIcon(contextItem, category = { 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;
@@ -85,6 +93,10 @@ export function getContextItemIcon(contextItem, category = { icon: null }) {
 }
 
 export 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:
@@ -117,6 +129,25 @@ export function formatGitItemSecondaryText(contextItem) {
   return `${repositoryName}${separator}${commitId || ''}`;
 }
 
+export 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.
  * @param {number} currentIndex - The starting index.