@gitlab/ui 104.2.0 → 105.0.0

package/dist/components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.js

@@ -1,246 +0,0 @@
-import GlDuoWorkflowPanel from '../duo_workflow_panel/duo_workflow_panel';
-import GlButton from '../../../../../base/button/button';
-import GlFormGroup from '../../../../../base/form/form_group/form_group';
-import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
-import GlFormInput from '../../../../../base/form/form_input/form_input';
-import { translate } from '../../../../../../utils/i18n';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/**
- * 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.
- */
-var script = {
-  name: 'GlDuoWorkflowPrompt',
-  components: {
-    GlDuoWorkflowPanel,
-    GlButton,
-    GlFormGroup,
-    GlFormInput,
-    GlFormTextarea
-  },
-  props: {
-    /**
-     * The prompt the user has entered
-     */
-    prompt: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * The image to run the workflow in
-     */
-    image: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * The text for the title of the panel
-     */
-    title: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.title', 'Goal')
-    },
-    /**
-     * The summary of the ongoing workflow plan
-     */
-    summary: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Whether or not the panel is loading
-     */
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * The label of the prompt text area
-     *
-     * See `GlFormGroup` for text placement.
-     */
-    promptLabel: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.promptLabel', 'Description')
-    },
-    /**
-     * The label description of the prompt text area
-     *
-     * See `GlFormGroup` for text placement.
-     */
-    promptLabelDescription: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.promptLabelDescription', 'What would you like to do and how.')
-    },
-    /**
-     * The description of the prompt text area
-     *
-     * See `GlFormGroup` for text placement.
-     */
-    promptDescription: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.promptDescription', 'Be specific and include any requirements.')
-    },
-    /**
-     * The HTML ID of the textarea for the prompt
-     */
-    promptId: {
-      type: String,
-      required: false,
-      default: 'duo-workflow-prompt'
-    },
-    /**
-     * The label of the image input
-     */
-    imageLabel: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.imageLabel', 'Image')
-    },
-    /**
-     * The label description of the image input
-     *
-     * See `GlFormGroup` for text placement.
-     */
-    imageLabelDescription: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.imageLabelDescription', 'The container image to run the workflow in.')
-    },
-    /**
-     * The description of the image input
-     *
-     * See `GlFormGroup` for text placement.
-     */
-    imageDescription: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.imageDescription', 'It should have any tools necessary for the workflow installed.')
-    },
-    /**
-     * The ID of the image input
-     */
-    imageId: {
-      type: String,
-      required: false,
-      default: 'duo-workflow-image'
-    },
-    /**
-     * The text for the confirmation button. This button emits a `confirm` event.
-     */
-    confirmButtonText: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.confirmButtonText', 'Generate plan')
-    },
-    /**
-     * The text for the cancellation button. This button emits a `cancel` event.
-     */
-    cancelButtonText: {
-      type: String,
-      required: false,
-      default: translate('GlDuoWorkflowPrompt.cancelButtonText', 'Cancel')
-    },
-    /**
-     * The text used as the title and aria-label for the button when the collapse is collapsed
-     *
-     * See `GlDuoWorkflowPanel`
-     */
-    expandPanelButtonTitle: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * The text used as the title and aria-label for the button when the collapse is expanded
-     *
-     * See `GlDuoWorkflowPanel`
-     */
-    collapsePanelButtonTitle: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  },
-  methods: {
-    emitChange(prompt) {
-      /**
-       * Notify listeners about prompt change
-       * @param {string} prompt The newly entered prompt
-       */
-      this.$emit('update:prompt', prompt);
-    },
-    emitImage(image) {
-      /**
-       * Notify listeners about image change
-       * @param {string} image The newly entered image
-       */
-      this.$emit('update:image', image);
-    },
-    clickConfirm(event) {
-      /**
-       * Notify listeners about prompt submission
-       * @param {*} event A click event
-       */
-      this.$emit('confirm', event);
-    },
-    clickCancel(event) {
-      /**
-       * Notify listeners about prompt submission cancellation.
-       * @param {*} event A click event
-       */
-      this.$emit('cancel', event);
-    }
-  }
-};
-
-/* 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('gl-duo-workflow-panel',{attrs:{"header-icon":"issue-type-objective","expand-panel-button-title":_vm.expandPanelButtonTitle,"collapse-panel-button-title":_vm.collapsePanelButtonTitle},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._v(_vm._s(_vm.title))]},proxy:true},{key:"subtitle",fn:function(){return [_vm._v(_vm._s(_vm.summary))]},proxy:true},{key:"content",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.promptLabel,"label-for":_vm.promptId,"label-description":_vm.promptLabelDescription,"description":_vm.promptDescription}},[_c('gl-form-textarea',{attrs:{"id":_vm.promptId,"value":_vm.prompt,"disable":_vm.loading,"no-resize":false},on:{"input":_vm.emitChange}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.imageLabel,"label-for":_vm.imageId,"label-description":_vm.imageLabelDescription,"description":_vm.imageDescription}},[_c('gl-form-input',{attrs:{"id":_vm.imageId,"value":_vm.image,"disable":_vm.loading},on:{"input":_vm.emitImage}})],1),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-gap-3"},[_c('gl-button',{attrs:{"variant":"confirm","data-test-id":"duo-workflow-prompt-confirm","loading":_vm.loading},on:{"click":_vm.clickConfirm}},[_vm._v(_vm._s(_vm.confirmButtonText))]),_vm._v(" "),_c('gl-button',{attrs:{"data-test-id":"duo-workflow-prompt-cancel"},on:{"click":_vm.clickCancel}},[_vm._v(_vm._s(_vm.cancelButtonText))])],1)]},proxy:true}])})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

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

@@ -1,21 +0,0 @@
-/**
- * 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';
-export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
-export const CONTEXT_ITEM_CATEGORY_DEPENDENCY = 'dependency';
-
-export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
-export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
-
-export const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
-export const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
-export const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';

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

@@ -1,182 +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 { nextTick } from 'vue';
-import { contextItemValidator } from '../utils';
-import GlModal from '../../../../../../base/modal/modal.vue';
-import { SafeHtmlDirective as SafeHtml } from '../../../../../../../directives/safe_html/safe_html';
-import GlSkeletonLoader from '../../../../../../base/skeleton_loader/skeleton_loader.vue';
-import { translate } from '../../../../../../../utils/i18n';
-import {
-  CONTEXT_ITEM_CATEGORY_DEPENDENCY,
-  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
-  LANGUAGE_IDENTIFIER_DIFF,
-  LANGUAGE_IDENTIFIER_PLAINTEXT,
-  LANGUAGE_IDENTIFIER_PREFIX,
-} from '../constants';
-import GlAlert from '../../../../../../base/alert/alert.vue';
-
-export default {
-  name: 'GlDuoChatContextItemDetailsModal',
-  components: {
-    GlAlert,
-    GlSkeletonLoader,
-    GlModal,
-  },
-  directives: {
-    SafeHtml,
-  },
-  inject: {
-    renderGFM: {
-      from: 'renderGFM',
-      default: () => (element) => {
-        element.classList.add('duo-chat-markdown', 'duo-chat-compact-markdown');
-      },
-    },
-  },
-  props: {
-    /**
-     * Context items to preview. If it has no `content`, the loading state will be displayed.
-     */
-    contextItem: {
-      type: Object,
-      required: true,
-      validator: contextItemValidator,
-    },
-  },
-  data() {
-    return {
-      contentErrorIsVisible: false,
-    };
-  },
-  computed: {
-    isLoadingContent() {
-      return this.contextItem.content === undefined;
-    },
-    languageIdentifierClass() {
-      if (this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
-        return LANGUAGE_IDENTIFIER_DIFF;
-      }
-
-      const fileExtension = this.contextItem.metadata?.relativePath?.split('.').at(-1);
-      if (fileExtension && fileExtension !== this.contextItem.metadata?.relativePath) {
-        return `${LANGUAGE_IDENTIFIER_PREFIX}${fileExtension}`;
-      }
-
-      return LANGUAGE_IDENTIFIER_PLAINTEXT;
-    },
-    title() {
-      return (
-        this.contextItem.metadata?.title ||
-        this.contextItem.metadata?.relativePath ||
-        translate('GlDuoChatContextItemDetailsModal.title', 'Preview')
-      );
-    },
-    isDependencies() {
-      return this.contextItem.category === CONTEXT_ITEM_CATEGORY_DEPENDENCY;
-    },
-  },
-  watch: {
-    contextItem: {
-      async handler(newVal, oldVal) {
-        // 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,
-    },
-  },
-  methods: {
-    async hydrateContentWithGFM() {
-      await nextTick();
-
-      if (this.$refs.content) {
-        this.renderGFM(this.$refs.content);
-      }
-    },
-    parseDependencies() {
-      if (this.contextItem.category !== CONTEXT_ITEM_CATEGORY_DEPENDENCY) {
-        return null;
-      }
-      if (!this.contextItem.content) {
-        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>
-
-<template>
-  <gl-modal
-    modal-id="context-item-details-modal"
-    :title="title"
-    :visible="true"
-    :scrollable="true"
-    hide-footer
-    size="lg"
-    @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"
-        class="code js-syntax-highlight gl-p-3"
-        :class="languageIdentifierClass"
-      ></pre>
-    </div>
-  </gl-modal>
-</template>

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

@@ -1,44 +0,0 @@
-<!--
-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:**
-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)