@gitlab/ui 101.16.0 → 102.1.0

package/dist/vendor/bootstrap-vue/src/components/button/button.js

@@ -20,12 +20,10 @@ const props = makePropsConfigurable(sortKeys({
   ...linkProps,
   block: makeProp(PROP_TYPE_BOOLEAN, false),
   disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  pill: makeProp(PROP_TYPE_BOOLEAN, false),
   // Tri-state: `true`, `false` or `null`
   // => On, off, not a toggle
   pressed: makeProp(PROP_TYPE_BOOLEAN, null),
   size: makeProp(PROP_TYPE_STRING),
-  squared: makeProp(PROP_TYPE_BOOLEAN, false),
   tag: makeProp(PROP_TYPE_STRING, 'button'),
   type: makeProp(PROP_TYPE_STRING, 'button'),
   variant: makeProp(PROP_TYPE_STRING, 'secondary')
@@ -60,8 +58,6 @@ const isNonStandardTag = props => !isLink(props) && !isButton(props);
 const computeClass = props => [`btn-${props.variant || 'secondary'}`, {
   [`btn-${props.size}`]: props.size,
   'btn-block': props.block,
-  'rounded-pill': props.pill,
-  'rounded-0': props.squared && !props.pill,
   disabled: props.disabled,
   active: props.pressed
 }];

package/dist/vendor/bootstrap-vue/src/components/collapse/collapse.js

@@ -1,6 +1,5 @@
 import { extend } from '../../vue';
 import { NAME_COLLAPSE } from '../../constants/components';
-import { CLASS_NAME_SHOW } from '../../constants/classes';
 import { EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../constants/events';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
 import { SLOT_NAME_DEFAULT } from '../../constants/slots';
@@ -15,7 +14,7 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot';
 import { BVCollapse } from './helpers/bv-collapse';
 
 // --- Constants ---
-
+const CLASS_NAME_SHOW = 'show';
 const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle');
 const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state');
 const ROOT_EVENT_NAME_ACCORDION = getRootEventName(NAME_COLLAPSE, 'accordion');

package/dist/vendor/bootstrap-vue/src/components/nav/nav.js

@@ -21,8 +21,7 @@ const props = makePropsConfigurable({
   pills: makeProp(PROP_TYPE_BOOLEAN, false),
   small: makeProp(PROP_TYPE_BOOLEAN, false),
   tabs: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'ul'),
-  vertical: makeProp(PROP_TYPE_BOOLEAN, false)
+  tag: makeProp(PROP_TYPE_STRING, 'ul')
 }, NAME_NAV);
 
 // --- Main component ---
@@ -41,7 +40,6 @@ const BNav = /*#__PURE__*/extend({
     const {
       tabs,
       pills,
-      vertical,
       align,
       cardHeader
     } = props;
@@ -50,12 +48,11 @@ const BNav = /*#__PURE__*/extend({
       class: {
         'nav-tabs': tabs,
         'nav-pills': pills && !tabs,
-        'card-header-tabs': !vertical && cardHeader && tabs,
-        'card-header-pills': !vertical && cardHeader && pills && !tabs,
-        'flex-column': vertical,
-        'nav-fill': !vertical && props.fill,
-        'nav-justified': !vertical && props.justified,
-        [computeJustifyContent(align)]: !vertical && align,
+        'card-header-tabs': cardHeader && tabs,
+        'card-header-pills': cardHeader && pills && !tabs,
+        'nav-fill': props.fill,
+        'nav-justified': props.justified,
+        [computeJustifyContent(align)]: align,
         small: props.small
       }
     }), children);

package/dist/vendor/bootstrap-vue/src/components/tabs/tabs.js

@@ -175,7 +175,6 @@ const props = makePropsConfigurable(sortKeys({
   // Only applied to the currently active `<b-tab>`
   // This prop is sniffed by the `<b-tab>` child
   activeTabClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  card: makeProp(PROP_TYPE_BOOLEAN, false),
   contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   // Synonym for 'bottom'
   end: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -215,13 +214,6 @@ const BTabs = /*#__PURE__*/extend({
     fade() {
       // This computed prop is sniffed by the tab child
       return !this.noFade;
-    },
-    localNavClass() {
-      const classes = [];
-      if (this.card && this.vertical) {
-        classes.push('card-header', 'h-100', 'border-bottom-0', 'rounded-0');
-      }
-      return [...classes, this.navClass];
     }
   },
   watch: {
@@ -489,7 +481,6 @@ const BTabs = /*#__PURE__*/extend({
   render(h) {
     const {
       align,
-      card,
       end,
       fill,
       firstTab,
@@ -501,8 +492,7 @@ const BTabs = /*#__PURE__*/extend({
       pills,
       previousTab,
       small,
-      tabs: $tabs,
-      vertical
+      tabs: $tabs
     } = this;
 
     // Currently active tab
@@ -553,7 +543,7 @@ const BTabs = /*#__PURE__*/extend({
       });
     });
     let $nav = h(BNav, {
-      class: this.localNavClass,
+      class: this.navClass,
       attrs: {
         role: 'tablist',
         id: this.safeId('_BV_tab_controls_')
@@ -564,35 +554,25 @@ const BTabs = /*#__PURE__*/extend({
         align,
         tabs: !noNavStyle && !pills,
         pills: !noNavStyle && pills,
-        vertical,
-        small,
-        cardHeader: card && !vertical
+        small
       },
       ref: 'nav'
     }, [this.normalizeSlot(SLOT_NAME_TABS_START) || h(), $buttons, this.normalizeSlot(SLOT_NAME_TABS_END) || h()]);
     $nav = h('div', {
-      class: [{
-        'card-header': card && !vertical && !end,
-        'card-footer': card && !vertical && end,
-        'col-auto': vertical
-      }, this.navWrapperClass],
+      class: this.navWrapperClass,
       key: 'bv-tabs-nav'
     }, [$nav]);
     const $children = this.normalizeSlot() || [];
     let $empty = h();
     if ($children.length === 0) {
       $empty = h('div', {
-        class: ['tab-pane', 'active', {
-          'card-body': card
-        }],
+        class: ['tab-pane', 'active'],
         key: 'bv-empty-tab'
       }, this.normalizeSlot(SLOT_NAME_EMPTY));
     }
     const $content = h('div', {
       staticClass: 'tab-content',
-      class: [{
-        col: vertical
-      }, this.contentClass],
+      class: this.contentClass,
       attrs: {
         id: this.safeId('_BV_tab_container_')
       },
@@ -603,10 +583,6 @@ const BTabs = /*#__PURE__*/extend({
     // Render final output
     return h(this.tag, {
       staticClass: 'tabs',
-      class: {
-        row: vertical,
-        'no-gutters': vertical && card
-      },
       attrs: {
         id: this.safeId()
       }

package/dist/vendor/bootstrap-vue/src/constants/env.js

@@ -9,7 +9,6 @@ const DOCUMENT = HAS_DOCUMENT_SUPPORT ? document : {};
 const NAVIGATOR = HAS_NAVIGATOR_SUPPORT ? navigator : {};
 const USER_AGENT = (NAVIGATOR.userAgent || '').toLowerCase();
 const IS_JSDOM = USER_AGENT.indexOf('jsdom') > 0;
-const IS_IE = /msie|trident/.test(USER_AGENT);
 
 // Determine if the browser supports the option passive for events
 const HAS_PASSIVE_EVENT_SUPPORT = (() => {
@@ -33,13 +32,5 @@ const HAS_PASSIVE_EVENT_SUPPORT = (() => {
   }
   return passiveEventSupported;
 })();
-const HAS_POINTER_EVENT_SUPPORT = IS_BROWSER && Boolean(WINDOW.PointerEvent || WINDOW.MSPointerEvent);
 
-/* istanbul ignore next: JSDOM only checks for 'IntersectionObserver' */
-const HAS_INTERACTION_OBSERVER_SUPPORT = IS_BROWSER && 'IntersectionObserver' in WINDOW && 'IntersectionObserverEntry' in WINDOW &&
-// Edge 15 and UC Browser lack support for `isIntersecting`
-// but we an use `intersectionRatio > 0` instead
-// 'isIntersecting' in window.IntersectionObserverEntry.prototype &&
-'intersectionRatio' in WINDOW.IntersectionObserverEntry.prototype;
-
-export { DOCUMENT, HAS_DOCUMENT_SUPPORT, HAS_INTERACTION_OBSERVER_SUPPORT, HAS_MUTATION_OBSERVER_SUPPORT, HAS_NAVIGATOR_SUPPORT, HAS_PASSIVE_EVENT_SUPPORT, HAS_POINTER_EVENT_SUPPORT, HAS_WINDOW_SUPPORT, IS_BROWSER, IS_IE, IS_JSDOM, NAVIGATOR, USER_AGENT, WINDOW };
+export { DOCUMENT, HAS_DOCUMENT_SUPPORT, HAS_MUTATION_OBSERVER_SUPPORT, HAS_NAVIGATOR_SUPPORT, HAS_PASSIVE_EVENT_SUPPORT, HAS_WINDOW_SUPPORT, IS_BROWSER, IS_JSDOM, NAVIGATOR, USER_AGENT, WINDOW };

package/dist/vendor/bootstrap-vue/src/constants/key-codes.js

@@ -4,9 +4,8 @@ const CODE_ENTER = 13;
 const CODE_ESC = 27;
 const CODE_HOME = 36;
 const CODE_LEFT = 37;
-const CODE_PAGEUP = 33;
 const CODE_RIGHT = 39;
 const CODE_SPACE = 32;
 const CODE_UP = 38;
 
-export { CODE_DOWN, CODE_END, CODE_ENTER, CODE_ESC, CODE_HOME, CODE_LEFT, CODE_PAGEUP, CODE_RIGHT, CODE_SPACE, CODE_UP };
+export { CODE_DOWN, CODE_END, CODE_ENTER, CODE_ESC, CODE_HOME, CODE_LEFT, CODE_RIGHT, CODE_SPACE, CODE_UP };

package/dist/vendor/bootstrap-vue/src/index.js

@@ -1,5 +1,3 @@
-import { installFactory } from './utils/plugins';
-import { componentsPlugin } from './components';
 export { BVConfigPlugin as BVConfig, BVConfigPlugin } from './bv-config';
 export { BVToastPlugin } from './components/toast/helpers/bv-toast';
 export { BBreadcrumb } from './components/breadcrumb/breadcrumb';
@@ -65,18 +63,10 @@ export { VBVisible } from './directives/visible/visible';
 
 const NAME = 'BootstrapVue';
 
-// --- BootstrapVue installer ---
-const install = /*#__PURE__*/installFactory({
-  plugins: {
-    componentsPlugin
-  }
-});
-
 // --- BootstrapVue plugin ---
 const BootstrapVue = {
-  install,
   NAME
 };
 
 export default BootstrapVue;
-export { BootstrapVue, NAME, install };
+export { BootstrapVue, NAME };

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check-group.js

@@ -1,5 +1,5 @@
 import { extend } from '../vue';
-import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../constants/props';
+import { PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_BOOLEAN } from '../constants/props';
 import { SLOT_NAME_FIRST } from '../constants/slots';
 import { htmlOrText } from '../utils/html';
 import { looseEqual } from '../utils/loose-equal';
@@ -38,10 +38,6 @@ const props = makePropsConfigurable(sortKeys({
   ...props$5,
   ...props$6,
   ariaInvalid: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  // Only applicable when rendered with button style
-  buttonVariant: makeProp(PROP_TYPE_STRING),
-  // Render as button style
-  buttons: makeProp(PROP_TYPE_BOOLEAN, false),
   stacked: makeProp(PROP_TYPE_BOOLEAN, false),
   validated: makeProp(PROP_TYPE_BOOLEAN, false)
 }), 'formRadioCheckGroups');
@@ -69,21 +65,11 @@ const formRadioCheckGroupMixin = extend({
     },
     groupClasses() {
       const {
-        inline,
-        size,
         validated
       } = this;
-      let classes = {
+      return {
         'was-validated': validated
       };
-      if (this.buttons) {
-        classes = [classes, 'btn-group-toggle', {
-          'btn-group': inline,
-          'btn-group-vertical': !inline,
-          [`btn-group-${size}`]: size
-        }];
-      }
-      return classes;
     }
   },
   watch: {

package/dist/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -37,10 +37,6 @@ const props = makePropsConfigurable(sortKeys({
   ...props$5,
   ariaLabel: makeProp(PROP_TYPE_STRING),
   ariaLabelledby: makeProp(PROP_TYPE_STRING),
-  // Only applicable in standalone mode (non group)
-  button: makeProp(PROP_TYPE_BOOLEAN, false),
-  // Only applicable when rendered with button style
-  buttonVariant: makeProp(PROP_TYPE_STRING),
   inline: makeProp(PROP_TYPE_BOOLEAN, false),
   value: makeProp(PROP_TYPE_ANY)
 }), 'formRadioCheckControls');
@@ -54,8 +50,7 @@ const formRadioCheckMixin = extend({
   props,
   data() {
     return {
-      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME],
-      hasFocus: false
+      localChecked: this.isGroup ? this.bvGroup[MODEL_PROP_NAME] : this[MODEL_PROP_NAME]
     };
   },
   computed: {
@@ -81,19 +76,9 @@ const formRadioCheckMixin = extend({
       // Is this check/radio a child of check-group or radio-group?
       return !!this.bvGroup;
     },
-    isBtnMode() {
-      // Support button style in single input mode
-      return this.isGroup ? this.bvGroup.buttons : this.button;
-    },
-    isPlain() {
-      return this.isBtnMode ? false : this.isGroup ? this.bvGroup.plain : this.plain;
-    },
-    isCustom() {
-      return this.isBtnMode ? false : !this.isPlain;
-    },
     isSwitch() {
       // Custom switch styling (checkboxes only)
-      return this.isBtnMode || this.isRadio || this.isPlain ? false : this.isGroup ? this.bvGroup.switches : this.switch;
+      return this.isRadio ? false : this.isGroup ? this.bvGroup.switches : this.switch;
     },
     isInline() {
       return this.isGroup ? this.bvGroup.inline : this.inline;
@@ -121,33 +106,6 @@ const formRadioCheckMixin = extend({
     computedState() {
       return this.isGroup ? this.bvGroup.computedState : isBoolean(this.state) ? this.state : null;
     },
-    computedButtonVariant() {
-      // Local variant preferred over group variant
-      const {
-        buttonVariant
-      } = this;
-      if (buttonVariant) {
-        return buttonVariant;
-      }
-      if (this.isGroup && this.bvGroup.buttonVariant) {
-        return this.bvGroup.buttonVariant;
-      }
-      return 'secondary';
-    },
-    buttonClasses() {
-      const {
-        computedSize
-      } = this;
-      return ['btn', `btn-${this.computedButtonVariant}`, {
-        [`btn-${computedSize}`]: computedSize,
-        // 'disabled' class makes "button" look disabled
-        disabled: this.isDisabled,
-        // 'active' class makes "button" look pressed
-        active: this.isChecked,
-        // Focus class makes button look focused
-        focus: this.hasFocus
-      }];
-    },
     computedAttrs() {
       const {
         isDisabled: disabled,
@@ -209,17 +167,6 @@ const formRadioCheckMixin = extend({
         }
       });
     },
-    handleFocus(event) {
-      // When in buttons mode, we need to add 'focus' class to label when input focused
-      // As it is the hidden input which has actual focus
-      if (event.target) {
-        if (event.type === 'focus') {
-          this.hasFocus = true;
-        } else if (event.type === 'blur') {
-          this.hasFocus = false;
-        }
-      }
-    },
     // Convenience methods for focusing the input
     focus() {
       if (!this.isDisabled) {
@@ -235,9 +182,6 @@ const formRadioCheckMixin = extend({
   render(h) {
     const {
       isRadio,
-      isBtnMode,
-      isPlain,
-      isCustom,
       isInline,
       isSwitch,
       computedSize,
@@ -245,12 +189,7 @@ const formRadioCheckMixin = extend({
     } = this;
     const $content = this.normalizeSlot();
     const $input = h('input', {
-      class: [{
-        'form-check-input': isPlain,
-        'custom-control-input': isCustom,
-        // https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
-        'position-static': isPlain && !$content
-      }, isBtnMode ? '' : this.stateClass],
+      class: ['custom-control-input', this.stateClass],
       directives: [{
         name: 'model',
         value: this.computedLocalChecked
@@ -261,55 +200,26 @@ const formRadioCheckMixin = extend({
         checked: this.isChecked
       },
       on: {
-        change: this.handleChange,
-        ...(isBtnMode ? {
-          focus: this.handleFocus,
-          blur: this.handleFocus
-        } : {})
+        change: this.handleChange
       },
       key: 'input',
       ref: 'input'
     });
-    if (isBtnMode) {
-      let $button = h('label', {
-        class: this.buttonClasses
-      }, [$input, $content]);
-      if (!this.isGroup) {
-        // Standalone button mode, so wrap in 'btn-group-toggle'
-        // and flag it as inline-block to mimic regular buttons
-        $button = h('div', {
-          class: ['btn-group-toggle', 'd-inline-block']
-        }, [$button]);
+    const $label = h('label', {
+      class: 'custom-control-label',
+      attrs: {
+        for: this.safeId()
       }
-      return $button;
-    }
-
-    // If no label content in plain mode we dont render the label
-    // See: https://github.com/bootstrap-vue/bootstrap-vue/issues/2911
-    let $label = h();
-    if (!(isPlain && !$content)) {
-      $label = h('label', {
-        class: {
-          'form-check-label': isPlain,
-          'custom-control-label': isCustom
-        },
-        attrs: {
-          for: this.safeId()
-        }
-      }, $content);
-    }
+    }, $content);
     return h('div', {
       class: [{
-        'form-check': isPlain,
-        'form-check-inline': isPlain && isInline,
-        'custom-control': isCustom,
-        'custom-control-inline': isCustom && isInline,
-        'custom-checkbox': isCustom && !isRadio && !isSwitch,
+        'custom-control-inline': isInline,
+        'custom-checkbox': !isRadio && !isSwitch,
         'custom-switch': isSwitch,
-        'custom-radio': isCustom && isRadio,
+        'custom-radio': isRadio,
         // Temporary until Bootstrap v4 supports sizing (most likely in V5)
-        [`b-custom-control-${computedSize}`]: computedSize && !isBtnMode
-      }, bvAttrs.class],
+        [`b-custom-control-${computedSize}`]: computedSize
+      }, 'custom-control', bvAttrs.class],
       style: bvAttrs.style
     }, [$input, $label]);
   }

package/dist/vendor/bootstrap-vue/src/utils/plugins.js

@@ -47,32 +47,6 @@ const installFactory = function () {
   return install;
 };
 
-/**
- * Plugin install factory function (no plugin config option).
- * @param {object} { components, directives }
- * @returns {function} plugin install function
- */
-const installFactoryNoConfig = function () {
-  let {
-    components,
-    directives,
-    plugins
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const install = Vue => {
-    if (install.installed) {
-      /* istanbul ignore next */
-      return;
-    }
-    install.installed = true;
-    checkMultipleVue(Vue);
-    registerComponents(Vue, components);
-    registerDirectives(Vue, directives);
-    registerPlugins(Vue, plugins);
-  };
-  install.installed = false;
-  return install;
-};
-
 /**
  * Plugin object factory function.
  * @param {object} { components, directives, plugins }
@@ -87,20 +61,6 @@ const pluginFactory = function () {
   };
 };
 
-/**
- * Plugin object factory function (no config option).
- * @param {object} { components, directives, plugins }
- * @returns {object} plugin install object
- */
-const pluginFactoryNoConfig = function () {
-  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let extend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return {
-    ...extend,
-    install: installFactoryNoConfig(options)
-  };
-};
-
 /**
  * Load a group of plugins.
  * @param {object} Vue
@@ -180,4 +140,4 @@ const vueUse = VuePlugin => {
   }
 };
 
-export { checkMultipleVue, installFactory, installFactoryNoConfig, pluginFactory, pluginFactoryNoConfig, registerComponent, registerComponents, registerDirective, registerDirectives, registerPlugins, vueUse };
+export { checkMultipleVue, installFactory, pluginFactory, registerComponent, registerComponents, registerDirective, registerDirectives, registerPlugins, vueUse };

package/package.json

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

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

@@ -1,3 +1,12 @@
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 export const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
 export const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
 export const CONTEXT_ITEM_CATEGORY_FILE = 'file';

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

@@ -1,4 +1,13 @@
 <script>
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 import { nextTick } from 'vue';
 import { contextItemValidator } from '../utils';
 import GlModal from '../../../../../../base/modal/modal.vue';
@@ -106,6 +115,9 @@ export default {
       if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
         return null;
       }
+      if (!this.contextItem.content) {
+        return null;
+      }
 
       try {
         return JSON.parse(this.contextItem.content);

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

@@ -1,3 +1,12 @@
+<!--
+This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+
+Please use the corresponding component in Duo-UI going forward.
+All future development and maintenance for Duo components should take place in Duo-UI.
+
+For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+-->
+
 Allows selecting and removing context items for the conversation.
 
 **Note:**
@@ -12,15 +21,15 @@ The component expects items with specific display properties:
 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;

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

@@ -1,4 +1,13 @@
 <script>
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 import debounce from 'lodash/debounce';
 import { translate } from '../../../../../../../utils/i18n';
 import GlCard from '../../../../../../base/card/card.vue';

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

@@ -1,4 +1,13 @@
 <script>
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';
 import { categoriesValidator } from '../utils';

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

@@ -1,4 +1,13 @@
 <script>
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
 import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlIcon from '../../../../../../base/icon/icon.vue';

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

@@ -1,4 +1,13 @@
 <script>
+/**
+ * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
+ *
+ * Please use the corresponding component in Duo-UI going forward.
+ * All future development and maintenance for Duo components should take place in Duo-UI.
+ *
+ * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
+ */
+
 import GlDropdownItem from '../../../../../../base/dropdown/dropdown_item.vue';
 import GlFormInput from '../../../../../../base/form/form_input/form_input.vue';
 import GlAlert from '../../../../../../base/alert/alert.vue';