@gitlab/ui 104.2.0 → 105.0.0

package/src/components/experimental/duo/chat/markdown_renderer.js

@@ -1,29 +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.
- */
-
-// eslint-disable-next-line no-restricted-imports
-import { Marked } from 'marked';
-import markedBidi from 'marked-bidi';
-
-const duoMarked = new Marked([
-  {
-    async: false,
-    breaks: false,
-    gfm: false,
-  },
-  markedBidi(),
-]);
-
-export function renderDuoChatMarkdownPreview(md) {
-  try {
-    return md ? duoMarked.parse(md.toString()) : '';
-  } catch {
-    return md;
-  }
-}

package/src/components/experimental/duo/chat/mock_data.js

@@ -1,187 +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.
- */
-
-import { setStoryTimeout } from '../../../../utils/test_utils';
-import {
-  DOCUMENTATION_SOURCE_TYPES,
-  MESSAGE_MODEL_ROLES,
-  CHAT_CLEAR_MESSAGE,
-  CHAT_RESET_MESSAGE,
-  CHAT_INCLUDE_MESSAGE,
-} from './constants';
-import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
-
-const MOCK_SOURCES = [
-  {
-    title: 'GitLab Handbook',
-    source_type: DOCUMENTATION_SOURCE_TYPES.HANDBOOK.value,
-    source_url: '/handbook/',
-  },
-  {
-    stage: 'Mock Stage',
-    group: 'Mock Group',
-    source_type: DOCUMENTATION_SOURCE_TYPES.DOC.value,
-    source_url: '/company/team/',
-  },
-  {
-    date: '2023-04-21',
-    author: 'Test User',
-    source_type: DOCUMENTATION_SOURCE_TYPES.BLOG.value,
-    source_url: '/blog/',
-  },
-];
-
-export const MOCK_RESPONSE_MESSAGE = {
-  id: '123',
-  content:
-    'Here is a simple JavaScript function to sum two numbers:\n\n  ```js\n  function sum(a, b) {\n    return a + b;\n  }\n  ```\n  \n  To use it:\n  \n  ```js\n  const result = sum(5, 3); // result = 8\n  ```\n  \n  This function takes two number parameters, a and b. It returns the sum of adding them together.\n',
-  contentHtml:
-    '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
-  role: MESSAGE_MODEL_ROLES.assistant,
-  extras: {
-    sources: MOCK_SOURCES,
-    contextItems: getMockContextItems().slice(0, 2),
-  },
-  requestId: '987',
-  errors: [],
-  timestamp: '2021-04-21T12:00:00.000Z',
-};
-
-export const generateSeparateChunks = (n) => {
-  const res = [];
-  for (let i = 1; i <= n; i += 1) {
-    res.push({
-      chunkId: i,
-      content: `chunk #${i}`,
-      role: MESSAGE_MODEL_ROLES.assistant,
-      requestId: '987',
-      errors: [],
-      timestamp: '2021-04-21T12:00:00.000Z',
-    });
-  }
-  return res;
-};
-
-export const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
-  id: '123',
-  content: `To change your password in GitLab:
-
-  1. Log in to your GitLab account.
-  2. Select your avatar in the top right corner and choose Edit profile.
-  3. On the left sidebar, select Password.
-  4. Enter your current password in the Current password field.
-  5. Enter your new password in the New password and Password confirmation fields.
-  6. Select Save password.
-  7. If you don't know your current password, select the I forgot my password link to reset it.
-
-  GitLab enforces password requirements when you choose a new password.
-
-  ~~~yaml
-  # And here is a
-  # code block
-  everyone:
-    likes:
-      yaml: true
-  ~~~
-  which is rendered while streaming.
-  `,
-  role: 'assistant',
-  extras: {
-    contextItems: getMockContextItems().slice(0, 2),
-  },
-  requestId: '987',
-  errors: [],
-  timestamp: '2021-04-21T12:00:00.000Z',
-};
-
-// Utility function for delay
-async function delayRandom(min = 16, max = 267) {
-  const delay = Math.floor(Math.random() * (max - min + 1)) + min;
-  // eslint-disable-next-line no-promise-executor-return
-  return new Promise((resolve) => setStoryTimeout(resolve, delay));
-}
-
-export async function* generateMockResponseChunks(requestId = 1) {
-  const chunkSize = 5;
-  const contentLength = MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.length;
-  const chunkCount = Math.ceil(contentLength / chunkSize);
-
-  for (let chunkId = 0; chunkId < chunkCount; chunkId += 1) {
-    const start = chunkId * chunkSize;
-    const end = Math.min((chunkId + 1) * chunkSize, contentLength);
-    const chunk = {
-      ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
-      requestId,
-      content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content.substring(start, end),
-      chunkId: chunkId + 1,
-    };
-
-    // eslint-disable-next-line no-await-in-loop
-    await delayRandom();
-    yield chunk;
-  }
-  yield {
-    ...MOCK_RESPONSE_MESSAGE_FOR_STREAMING,
-    requestId,
-    content: MOCK_RESPONSE_MESSAGE_FOR_STREAMING.content,
-    chunkId: null,
-  };
-}
-
-export const MOCK_USER_PROMPT_MESSAGE = {
-  id: '456',
-  chunkId: null,
-  content: 'How to create a new template?',
-  contentHtml: '<p>How to create a new template?</p>',
-  role: MESSAGE_MODEL_ROLES.user,
-  requestId: '987',
-  errors: [],
-  timestamp: '2021-04-21T12:00:00.000Z',
-  extras: {
-    contextItems: getMockContextItems().slice(0, 2),
-  },
-};
-
-export const renderMarkdown = (content) => content;
-export const renderGFM = (el) => {
-  const codeBlock = el.querySelectorAll('.markdown-code-block');
-  codeBlock.forEach((block) => {
-    block?.classList.add('duo-chat-markdown', 'duo-chat-compact-markdown');
-  });
-};
-
-export const SLASH_COMMANDS = [
-  {
-    name: CHAT_RESET_MESSAGE,
-    shouldSubmit: true,
-    description: 'Reset conversation, ignore the previous messages.',
-  },
-  {
-    name: CHAT_CLEAR_MESSAGE,
-    shouldSubmit: true,
-    description: 'Delete all messages in this conversation.',
-  },
-  {
-    name: '/tests',
-    description: 'Write tests for the selected snippet.',
-  },
-  {
-    name: '/refactor',
-    description: 'Refactor the selected snippet.',
-  },
-  {
-    name: '/explain',
-    description: 'Explain the selected snippet.',
-  },
-];
-
-export const INCLUDE_SLASH_COMMAND = {
-  name: CHAT_INCLUDE_MESSAGE,
-  description: 'Include additional context in the conversation.',
-};

package/src/components/experimental/duo/chat/variables.scss

@@ -1,9 +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.
- */
- $duo-chat-scrim-gradient: linear-gradient(to bottom, var(--gl-color-alpha-0), var(--gl-background-color-default));

package/src/components/experimental/duo/user_feedback/user_feedback.md

@@ -1,90 +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.
--->
-
-The main entry point component for gathering the user feedback for AI features.
-
-The component consists of a textual button and a connected modal with the actual form, emitting
-the form data on submission.
-
-## Custom button text
-
-The component allows to customize the button text presented to the user.
-
-```html
-<gl-duo-user-feedback feedback-link-text="Leave your custom feedback" />
-```
-
-## Linking to a separate feedback form
-
-The main goal of this component is to provide an advanced feedback form. However, it might only
-be necessary for some consumers. In such a case, the component bypasses the default
-form and links to an external feedback page/form.
-
-```html
-<gl-duo-user-feedback feedback-link-url="https://gitlab.com" />
-```
-
-## Listening to the feedback form submission
-
-This component emits the `feedback` event with all the options selected in the feedback form.
-
-```html
-<gl-duo-user-feedback @feedback="myEventTracker" />
-```
-
-The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) from
-the underlying `FeedbackModal` component. Here's an example of a possible event:
-
-```json
-{
-  "feedbackChoices": ["unhelpful", "long"],
-  "extendedTextFeedback": "The answer was too long to understand"
-}
-```
-
-## Using the `feedback-extra-fields` slot
-
-By default, the component renders one extra textarea field to gather additional feedback
-information from users. However, it may not be enough sometimes, and different use cases of
-this component might need to fine-tune the form to gather information most suitable for that
-or another use case. For this purpose, the component provides the `feedback-extra-fields`
-slot, which can override the default textarea with different fields/information.
-
-Note, however, that the content put into this slot will override the default textarea. So,
-if you want to append additional fields, instead of completely overriding the default textarea,
-you must copy the textarea field from the `DuoChatFeedbackModal` component into the slot.
-
-```html
-<gl-duo-user-feedback
-  :feedback-link-text="feedbackLinkText"
-  :feedback-link-url="feedbackLinkUrl"
-  @feedback="logEvent"
->
-  <template #feedback-extra-fields>
-    <gl-form-group label="What were you doing?" optional>
-      <gl-form-textarea
-        placeholder="The situation in which you interacted with GitLab Duo Chat."
-        v-model="didWhat"
-      />
-    </gl-form-group>
-    <gl-form-group label="What were you expecting from the response?" optional>
-      <gl-form-textarea
-        placeholder="What kind of information or assistance were you hoping to receive?"
-        v-model="expectedWhat"
-      />
-    </gl-form-group>
-    <gl-form-group label="How could the response be improved?" optional>
-      <gl-form-textarea
-        placeholder="How the response might better meet your needs."
-        v-model="improveWhat"
-      />
-    </gl-form-group>
-  </template>
-</gl-duo-user-feedback>
-```

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -1,95 +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 GlButton from '../../../base/button/button.vue';
-import FeedbackModal from './user_feedback_modal.vue';
-
-export const i18n = {
-  FEEDBACK_LINK_TEXT: 'Give feedback to improve this answer.',
-  FEEDBACK_THANKS: 'Thank you for your feedback.',
-};
-
-export default {
-  name: 'GlDuoUserFeedback',
-  components: {
-    GlAlert,
-    GlButton,
-    FeedbackModal,
-  },
-  props: {
-    /**
-     * Whether the message already has gotten feedback
-     */
-    feedbackReceived: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * The text to be displayed as the feedback link/button.
-     */
-    feedbackLinkText: {
-      type: String,
-      required: false,
-      default: i18n.FEEDBACK_LINK_TEXT,
-    },
-    /**
-     * The URL of a page to provide more explanations on the experiment. If provided, clicking
-     * the feedback link will open a new tab with the URL instead of showing the feedback modal.
-     */
-    feedbackLinkUrl: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    shouldRenderModal() {
-      return !this.feedbackReceived && !this.feedbackLinkUrl;
-    },
-  },
-  methods: {
-    notify(event) {
-      /**
-       * Notify listeners about the feedback form submission.
-       * @param {*} event An event, containing the feedback choices and the extended feedback text.
-       */
-      this.$emit('feedback', event);
-    },
-  },
-  i18n,
-};
-</script>
-
-<template>
-  <div class="gl-w-full gl-pt-4">
-    <div>
-      <gl-button
-        v-if="!feedbackReceived"
-        variant="link"
-        target="_blank"
-        :href="feedbackLinkUrl"
-        button-text-classes="!gl-whitespace-normal gl-text-left"
-        @click="shouldRenderModal && $refs.feedbackModal.show()"
-        >{{ feedbackLinkText }}</gl-button
-      >
-      <gl-alert v-else variant="success" :dismissible="false">
-        {{ $options.i18n.FEEDBACK_THANKS }}
-      </gl-alert>
-    </div>
-    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
-      <template #feedback-extra-fields>
-        <!-- @slot The addition Feedback form fields. -->
-        <slot name="feedback-extra-fields"></slot>
-      </template>
-    </feedback-modal>
-  </div>
-</template>

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -1,167 +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. */
-
-<script>
-import GlModal from '../../../base/modal/modal.vue';
-import GlAlert from '../../../base/alert/alert.vue';
-import GlFormGroup from '../../../base/form/form_group/form_group.vue';
-import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
-import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
-
-export const i18n = {
-  MODAL: {
-    TITLE: 'Give feedback on GitLab Duo',
-    DESCRIPTION: 'To help improve GitLab Duo, send your feeback to GitLab team members.',
-    ALERT: 'GitLab team members cannot see the AI content. Please be as descriptive as possible.',
-    OPTIONS_LABEL: 'How could the AI content be improved?',
-    SITUATION_DESCRIPTION_LABEL: 'What were you doing?',
-    SITUATION_DESCRIPTION_PLACEHOLDER:
-      'The situation in which you interacted with GitLab Duo Chat.',
-    IMPROVEMENT_SUGGESTION_LABEL: 'How could the response be improved?',
-    IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
-    MORE_LABEL: 'More information',
-    MORE_PLACEHOLDER: 'How could the content be improved?',
-    REQUIRED_VALIDATION_ERROR: 'Select at least one option.',
-    FEEDBACK_OPTIONS: {
-      helpful: 'Helpful',
-      unhelpful: 'Unhelpful or irrelevant',
-      incorrect: 'Factually incorrect',
-      long: 'Too long',
-      abuse: 'Abusive or offensive',
-      other: 'Something else',
-    },
-    ACTIONS: {
-      submit: 'Submit',
-      cancel: 'Cancel',
-    },
-  },
-};
-
-export const feedbackOptions = [
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.helpful,
-    value: 'helpful',
-  },
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.unhelpful,
-    value: 'unhelpful',
-  },
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.incorrect,
-    value: 'incorrect',
-  },
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.long,
-    value: 'long',
-  },
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.abuse,
-    value: 'abuse',
-  },
-  {
-    text: i18n.MODAL.FEEDBACK_OPTIONS.other,
-    value: 'other',
-  },
-];
-
-export default {
-  name: 'DuoChatFeedbackModal',
-  components: {
-    GlModal,
-    GlAlert,
-    GlFormCheckboxGroup,
-    GlFormGroup,
-    GlFormTextarea,
-  },
-  inject: {
-    modalTitle: {
-      default: i18n.MODAL.TITLE,
-    },
-    modalAlert: {
-      default: i18n.MODAL.ALERT,
-    },
-  },
-  data() {
-    return {
-      selectedFeedbackOptions: [],
-      extendedFeedback: '',
-      isValid: null,
-    };
-  },
-  watch: {
-    selectedFeedbackOptions(options) {
-      this.isValid = options.length > 0;
-    },
-  },
-  methods: {
-    close() {
-      this.$refs.feedbackModal.hide();
-    },
-    show() {
-      this.$refs.feedbackModal.show();
-    },
-    onFeedbackSubmit(e) {
-      if (this.selectedFeedbackOptions.length) {
-        this.$emit('feedback-submitted', {
-          feedbackChoices: this.selectedFeedbackOptions,
-          extendedTextFeedback: this.extendedFeedback,
-        });
-        this.close();
-        this.isValid = null;
-      } else {
-        e?.preventDefault();
-        this.isValid = false;
-      }
-    },
-  },
-  actions: {
-    primary: {
-      text: i18n.MODAL.ACTIONS.submit,
-    },
-    cancel: {
-      text: i18n.MODAL.ACTIONS.cancel,
-    },
-  },
-  feedbackOptions,
-  i18n,
-};
-</script>
-<template>
-  <gl-modal
-    ref="feedbackModal"
-    modal-id="feedbackModal"
-    :title="modalTitle"
-    :action-primary="$options.actions.primary"
-    :action-cancel="$options.actions.cancel"
-    :visible="false"
-    size="sm"
-    @primary="onFeedbackSubmit"
-    @canceled="close"
-  >
-    <p>{{ $options.i18n.MODAL.DESCRIPTION }}</p>
-    <gl-form-group
-      :invalid-feedback="$options.i18n.MODAL.REQUIRED_VALIDATION_ERROR"
-      :state="isValid"
-      :label="$options.i18n.MODAL.OPTIONS_LABEL"
-      data-testid="feedback-options"
-    >
-      <gl-form-checkbox-group
-        v-model="selectedFeedbackOptions"
-        :options="$options.feedbackOptions"
-      />
-    </gl-form-group>
-    <gl-alert class="gl-mb-5" :dismissible="false">{{ modalAlert }}</gl-alert>
-    <!-- @slot The addition Feedback form fields. -->
-    <slot name="feedback-extra-fields">
-      <gl-form-group :label="$options.i18n.MODAL.MORE_LABEL" optional>
-        <gl-form-textarea
-          v-model="extendedFeedback"
-          :placeholder="$options.i18n.MODAL.MORE_PLACEHOLDER"
-        />
-      </gl-form-group>
-    </slot>
-  </gl-modal>
-</template>

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.md

@@ -1,42 +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.
--->
-
-This is the main UI panel used in the larger Duo Workflow Plan UI for the IDE
-and WebUI.
-
-## Usage
-
-To use this component, import it and fill out the available slots:
-
-- `title`: the main title for the panel
-- `subtitle`: the small text adjacent to the title
-- `content`: the content of the panel, hidden away when the collapse is toggled
-
-Also provide an icon via the `headerIcon` prop. This icon is displayed adjacent
-to the title.
-
-You can pass `expanded` prop set to `false` if you need a section to be
-collapsed by default. You can also listen to `toggle-panel` event to know
-when the expanded state changed.
-
-Translations for the title of the single button can be provided either via the
-props `expandButtonTitle` and `collapseTitleButton` or via the translation
-configuration:
-
-```js
-setConfigs({
-  translations: {
-    'GlDuoWorkflowPanel.expandButtonTitle': __('Expand Panel'),
-    'GlDuoWorkflowPanel.collapseButtonTitle': __('Collapse Panel'),
-  },
-});
-```
-
-These translations are tied to the action of the button, not its state, so
-ensure they are set properly!