@gitlab/ui 104.2.0 → 105.0.0

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

@@ -1,288 +0,0 @@
-<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';
-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';
-import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
-
-const SEARCH_DEBOUNCE_MS = 30;
-
-export default {
-  name: 'GlDuoChatContextItemMenu',
-  components: {
-    GlCard,
-    GlDuoChatContextItemMenuCategoryItems,
-    GlDuoChatContextItemMenuSearchItems,
-    GlDuoChatContextItemSelections,
-  },
-  props: {
-    /**
-     * Whether the menu is open.
-     */
-    open: {
-      type: Boolean,
-      required: true,
-    },
-    /**
-     * Array of selected context items.
-     */
-    selections: {
-      type: Array,
-      required: true,
-      validator: contextItemsValidator,
-    },
-    /**
-     * Whether the menu is in a loading state.
-     */
-    loading: {
-      type: Boolean,
-      required: true,
-    },
-    /**
-     * Error message to display, if any.
-     */
-    error: {
-      type: [String, null],
-      required: false,
-      default: null,
-    },
-    /**
-     * Array of available categories for context items.
-     */
-    categories: {
-      type: Array,
-      required: true,
-      validator: categoriesValidator,
-    },
-    /**
-     * Array of search results for context items.
-     */
-    results: {
-      type: Array,
-      required: true,
-      validator: contextItemsValidator,
-    },
-  },
-  data() {
-    return {
-      selectedCategory: null,
-      searchQuery: '',
-      activeIndex: 0,
-    };
-  },
-  computed: {
-    showCategorySelection() {
-      return this.open && !this.selectedCategory;
-    },
-    allResultsAreDisabled() {
-      return this.results.every((result) => !result.metadata.enabled);
-    },
-  },
-  watch: {
-    open(isOpen) {
-      if (!isOpen) {
-        this.resetSelection();
-      }
-    },
-    searchQuery(query) {
-      this.debouncedSearch(query);
-    },
-    results(newResults) {
-      const firstEnabledIndex = newResults.findIndex((result) => result.metadata.enabled);
-      this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
-    },
-  },
-  methods: {
-    selectCategory(category) {
-      this.searchQuery = '';
-      this.selectedCategory = category;
-
-      this.$emit('search', {
-        category: category.value,
-        query: '',
-      });
-    },
-    debouncedSearch: debounce(function search(query) {
-      /**
-       * Emitted when a search should be performed.
-       * @property {Object} filter
-       * @property {string} filter.category - The value of the selected category
-       * @property {string} filter.query - The search query
-       */
-      this.$emit('search', {
-        category: this.selectedCategory.value,
-        query,
-      });
-    }, SEARCH_DEBOUNCE_MS),
-    selectItem(item) {
-      if (!item.metadata.enabled) {
-        return;
-      }
-
-      /**
-       * Emitted when a context item is selected.
-       * @property {Object} item - The selected context item
-       */
-      this.$emit(
-        'select',
-        this.results.find((result) => result.id === item.id)
-      );
-
-      /**
-       * Emitted when the menu should be closed.
-       */
-      this.$emit('close');
-      this.resetSelection();
-    },
-    removeItem(item) {
-      /**
-       * Emitted when a context item should be removed.
-       * @property {Object} item - The context item to be removed
-       */
-      this.$emit('remove', item);
-    },
-    resetSelection() {
-      this.selectedCategory = null;
-      this.searchQuery = '';
-      this.activeIndex = 0;
-    },
-    async scrollActiveItemIntoView() {
-      await this.$nextTick();
-
-      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
-      if (activeItem) {
-        activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
-      }
-    },
-    handleKeyUp(e) {
-      switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowUp':
-          e.preventDefault();
-          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
-          this.scrollActiveItemIntoView();
-          break;
-        case 'Enter':
-          e.preventDefault();
-          if (this.showCategorySelection) {
-            this.selectCategory(this.categories[this.activeIndex]);
-            return;
-          }
-          if (!this.results.length) {
-            return;
-          }
-          this.selectItem(this.results[this.activeIndex]);
-          break;
-        case 'Escape':
-          e.preventDefault();
-          if (this.showCategorySelection) {
-            this.$emit('close');
-            return;
-          }
-
-          this.selectedCategory = null;
-
-          /**
-           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
-           */
-          this.$emit('focus-prompt');
-          break;
-        default:
-          break;
-      }
-    },
-    moveActiveIndex(step) {
-      if (this.showCategorySelection) {
-        // Categories cannot be disabled, so just loop to the next/prev one
-        this.activeIndex = wrapIndex(this.activeIndex, step, this.categories.length);
-        return;
-      }
-
-      // Return early if there are no results or all results are disabled
-      if (!this.results.length || this.allResultsAreDisabled) {
-        return;
-      }
-
-      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
-      let newIndex = this.activeIndex;
-      do {
-        newIndex = wrapIndex(newIndex, step, this.results.length);
-
-        if (newIndex === this.activeIndex) {
-          // If we've looped through all items and found no enabled ones, keep the current index
-          return;
-        }
-      } while (!this.results[newIndex].metadata.enabled);
-
-      this.activeIndex = newIndex;
-    },
-    onGetContextItemContent(contextItem) {
-      /**
-       * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
-       * The fully hydrated context item should be updated in the context item selections.
-       * @param {*} event An event containing the context item to hydrate
-       */
-      this.$emit('get-context-item-content', { contextItem });
-    },
-  },
-  i18n: {
-    selectedContextItemsTitle: translate(
-      'GlDuoChatContextItemMenu.selectedContextItemsTitle',
-      'Included references'
-    ),
-  },
-};
-</script>
-
-<template>
-  <div>
-    <gl-duo-chat-context-item-selections
-      v-if="selections.length"
-      :selections="selections"
-      :categories="categories"
-      :removable="true"
-      :title="$options.i18n.selectedContextItemsTitle"
-      :default-collapsed="false"
-      class="gl-mb-3"
-      @remove="removeItem"
-      @get-content="onGetContextItemContent"
-    />
-    <gl-card
-      v-if="open"
-      class="slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md"
-      body-class="!gl-p-2"
-      data-testid="context-item-menu"
-    >
-      <gl-duo-chat-context-item-menu-category-items
-        v-if="showCategorySelection"
-        :active-index="activeIndex"
-        :categories="categories"
-        @select="selectCategory"
-        @active-index-change="activeIndex = $event"
-      />
-      <gl-duo-chat-context-item-menu-search-items
-        v-else
-        v-model="searchQuery"
-        :active-index="activeIndex"
-        :category="selectedCategory"
-        :loading="loading"
-        :error="error"
-        :results="results"
-        @select="selectItem"
-        @keyup="handleKeyUp"
-        @active-index-change="activeIndex = $event"
-      />
-    </gl-card>
-  </div>
-</template>

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

@@ -1,54 +0,0 @@
-<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';
-
-export default {
-  name: 'GlDuoChatContextItemMenuCategoryItems',
-  components: { GlIcon, GlDropdownItem },
-  props: {
-    categories: {
-      type: Array,
-      required: true,
-      validator: categoriesValidator,
-    },
-    activeIndex: {
-      type: Number,
-      required: true,
-    },
-  },
-  methods: {
-    selectCategory(category) {
-      this.$emit('select', category);
-    },
-    setActiveIndex(index) {
-      this.$emit('active-index-change', index);
-    },
-  },
-};
-</script>
-<template>
-  <ul class="gl-mb-0 gl-list-none gl-pl-0">
-    <gl-dropdown-item
-      v-for="(category, index) in categories"
-      :key="category.value"
-      :class="{ 'active-command': index === activeIndex }"
-      data-testid="category-item"
-      @click="selectCategory(category)"
-    >
-      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
-        <gl-icon :name="category.icon" class="gl-mr-2" />
-        {{ category.label }}
-      </div>
-    </gl-dropdown-item>
-  </ul>
-</template>

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

@@ -1,86 +0,0 @@
-<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';
-import {
-  categoryValidator,
-  contextItemValidator,
-  getContextItemIcon,
-  getContextItemSecondaryText,
-  getContextItemSource,
-} from '../utils';
-import GlBadge from '../../../../../../base/badge/badge.vue';
-
-export default {
-  name: 'GlDuoChatContextItemMenuSearchItem',
-  components: { GlBadge, GlTruncate, GlIcon, GlDuoChatContextItemPopover },
-  props: {
-    category: {
-      type: Object,
-      required: true,
-      validator: categoryValidator,
-    },
-    contextItem: {
-      type: Object,
-      required: true,
-      validator: contextItemValidator,
-    },
-  },
-  computed: {
-    title() {
-      return this.contextItem.metadata?.title || '';
-    },
-    secondaryText() {
-      return getContextItemSecondaryText(this.contextItem);
-    },
-    icon() {
-      return getContextItemIcon(this.contextItem, this.category);
-    },
-    itemSource() {
-      return getContextItemSource(this.contextItem);
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-flex gl-flex-col">
-    <div class="gl-flex gl-items-center">
-      <gl-icon :name="icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
-      <gl-truncate :text="title" class="gl-min-w-0" data-testid="item-title" />
-      <gl-icon
-        :id="`info-icon-${contextItem.id}`"
-        name="information-o"
-        class="gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary"
-        :size="12"
-      />
-      <gl-duo-chat-context-item-popover
-        :context-item="contextItem"
-        :target="`info-icon-${contextItem.id}`"
-        placement="left"
-      />
-    </div>
-    <div
-      v-if="secondaryText"
-      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-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_menu/duo_chat_context_item_menu_search_items.vue

@@ -1,168 +0,0 @@
-<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';
-import { sprintf, translate } from '../../../../../../../utils/i18n';
-import { categoryValidator, contextItemsValidator } from '../utils';
-import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
-import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
-
-export default {
-  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) {
-      if (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>
-<template>
-  <div>
-    <div class="gl-max-h-31 gl-overflow-y-scroll">
-      <gl-duo-chat-context-item-menu-search-items-loading v-if="loading" :rows="numLoadingItems" />
-      <gl-alert
-        v-else-if="error"
-        variant="danger"
-        :dismissible="false"
-        class="gl-m-3"
-        data-testid="search-results-error"
-      >
-        {{ error }}
-      </gl-alert>
-      <div
-        v-else-if="showEmptyState"
-        class="gl-rounded-base gl-p-3 gl-text-center gl-text-secondary"
-        data-testid="search-results-empty-state"
-      >
-        {{ $options.i18n.emptyStateMessage }}
-      </div>
-      <ul v-else class="gl-mb-1 gl-list-none gl-flex-row gl-pl-0">
-        <gl-dropdown-item
-          v-for="(contextItem, index) in results"
-          :id="`dropdown-item-${index}`"
-          :key="contextItem.id"
-          :class="{
-            'active-command': isActiveItem(contextItem, index),
-            'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none':
-              !contextItem.metadata.enabled,
-          }"
-          :tabindex="!contextItem.metadata.enabled ? -1 : undefined"
-          class="duo-chat-context-search-result-item"
-          data-testid="search-result-item"
-          @click="selectItem(contextItem)"
-        >
-          <div @mouseenter="setActiveIndex(index)">
-            <gl-duo-chat-context-item-menu-search-item
-              :context-item="contextItem"
-              :category="category"
-              :class="{ 'gl-text-secondary': !contextItem.metadata.enabled }"
-              data-testid="search-result-item-details"
-            />
-          </div>
-        </gl-dropdown-item>
-      </ul>
-    </div>
-    <gl-form-input
-      ref="contextMenuSearchInput"
-      :value="searchQuery"
-      :placeholder="searchInputPlaceholder"
-      autofocus
-      data-testid="context-menu-search-input"
-      @input="$emit('update:searchQuery', $event)"
-      @keyup="handleKeyUp"
-    />
-  </div>
-</template>

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

@@ -1,43 +0,0 @@
-<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 { translate } from '../../../../../../../utils/i18n';
-
-export default {
-  name: 'GlDuoChatContextItemMenuSearchItemsLoading',
-  props: {
-    rows: {
-      type: Number,
-      required: true,
-    },
-  },
-  i18n: {
-    loadingMessage: translate('GlDuoChatContextItemMenu.loadingMessage', 'Loading...'),
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div
-      v-for="index in rows"
-      :key="index"
-      class="gl-mx-3 gl-mb-4 gl-pt-3"
-      data-testid="search-results-loading"
-    >
-      <div class="gl-mb-2 gl-flex">
-        <div class="gl-animate-skeleton-loader gl-mr-3 gl-h-5 gl-w-5 gl-rounded-base"></div>
-        <div class="gl-animate-skeleton-loader gl-h-5 gl-grow gl-rounded-base"></div>
-      </div>
-      <div class="gl-animate-skeleton-loader gl-h-4 gl-w-1/2 gl-rounded-base"></div>
-    </div>
-    <span class="gl-sr-only">{{ $options.i18n.loadingMessage }}</span>
-  </div>
-</template>