@gitlab/ui 104.1.2 → 105.0.0

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

@@ -1,170 +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 GlAlert from '../../../../../../base/alert/alert.vue';
-import GlIcon from '../../../../../../base/icon/icon.vue';
-import GlPopover from '../../../../../../base/popover/popover.vue';
-import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
-import { translate } from '../../../../../../../utils/i18n';
-import {
-  CONTEXT_ITEM_CATEGORY_FILE,
-  CONTEXT_ITEM_CATEGORY_ISSUE,
-  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
-} from '../constants';
-import {
-  formatIssueId,
-  formatMergeRequestId,
-  getContextItemIcon,
-  getContextItemSecondaryText,
-  getContextItemSource,
-  getContextItemTypeLabel,
-} from '../utils';
-import GlBadge from '../../../../../../base/badge/badge.vue';
-
-export default {
-  name: 'DuoChatContextItemPopover',
-  components: {
-    GlBadge,
-    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() {
-      return this.filePath?.split('/');
-    },
-    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);
-    },
-    secondaryText() {
-      return getContextItemSecondaryText(this.contextItem);
-    },
-    itemSource() {
-      return getContextItemSource(this.contextItem);
-    },
-  },
-  methods: {
-    translate,
-  },
-};
-</script>
-<template>
-  <gl-popover
-    :target="target"
-    triggers="hover focus"
-    :placement="placement"
-    :title="title"
-    custom-class="gl-duo-chat-item-popover"
-  >
-    <template #title>
-      <div>
-        <div
-          class="gl-heading-3 gl-mb-1 gl-mt-2 gl-leading-1"
-          data-testid="chat-context-popover-title"
-        >
-          {{ title }}
-        </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="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>
-        <gl-icon v-if="iconName" :name="iconName" :size="12" variant="subtle" />
-        <span class="gl-break-all">{{ contextItem.metadata.project }}</span>
-        <span v-if="id" class="gl-break-all">{{ formattedId }}</span>
-      </div>
-      <gl-alert
-        v-if="!isEnabled"
-        variant="danger"
-        class="gl-mb-1 gl-mt-3 gl-p-4 gl-text-sm"
-        data-testid="chat-context-popover-disabled"
-        :dismissible="false"
-        :show-icon="false"
-      >
-        {{ disabledMessage }}
-      </gl-alert>
-    </div>
-  </gl-popover>
-</template>

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

@@ -1,196 +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 uniqueId from 'lodash/uniqueId';
-import GlIcon from '../../../../../../base/icon/icon.vue';
-import GlToken from '../../../../../../base/token/token.vue';
-import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
-import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
-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';
-
-export default {
-  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,
-        CONTEXT_ITEM_CATEGORY_DEPENDENCY,
-      ].includes(contextItem.category);
-    },
-    onClosePreview() {
-      this.previewContextItemId = null;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="gl-flex gl-flex-col" :class="variantClasses">
-    <button
-      class="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"
-      data-testid="chat-context-selections-title"
-      type="button"
-      @click="toggleCollapse"
-    >
-      <gl-icon :name="collapseIconName" data-testid="chat-context-collapse-icon" /> {{ title }}
-    </button>
-
-    <div
-      v-show="!isCollapsed"
-      class="gl-mt-1 gl-flex gl-grow gl-flex-wrap"
-      data-testid="chat-context-tokens-wrapper"
-    >
-      <gl-token
-        v-for="item in selections"
-        :id="`context-item-${item.id}-${selectionsId}-token`"
-        :key="item.id"
-        :view-only="!removable"
-        variant="default"
-        class="gl-mb-2 gl-mr-2 gl-max-w-full"
-        :class="tokenVariantClasses"
-        :tabindex="canOpen(item) ? 0 : -1"
-        :role="canOpen(item) ? 'button' : undefined"
-        @click="onOpenItem($event, item)"
-        @keydown.enter="onOpenItem($event, item)"
-        @keydown.space.prevent="onOpenItem($event, item)"
-        @close="onRemoveItem(item)"
-      >
-        <div
-          :id="`context-item-${item.id}-${selectionsId}`"
-          class="gl-flex gl-min-w-0 gl-items-center"
-        >
-          <gl-icon
-            v-if="getContextItemIcon(item)"
-            :name="getContextItemIcon(item)"
-            :size="12"
-            class="gl-mr-1"
-          />
-          <gl-truncate :text="item.metadata.title" position="middle" />
-        </div>
-        <gl-duo-chat-context-item-popover
-          :context-item="item"
-          :target="`context-item-${item.id}-${selectionsId}-token`"
-          placement="bottom"
-          @show-git-diff="onOpenItem(item)"
-        />
-      </gl-token>
-    </div>
-    <gl-duo-chat-context-item-details-modal
-      v-if="contextItemPreview"
-      :context-item="contextItemPreview"
-      @close="onClosePreview"
-    />
-  </div>
-</template>