@gitlab/ui 80.13.1 → 80.14.0

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -1,240 +0,0 @@
-import GlButton from '../../../base/button/button.vue';
-import GlAlert from '../../../base/alert/alert.vue';
-import { makeContainer } from '../../../../utils/story_decorators/container';
-import GlDuoChat from './duo_chat.vue';
-import readme from './duo_chat.md';
-import { CHAT_CLEAN_MESSAGE } from './constants';
-import {
-  MOCK_RESPONSE_MESSAGE,
-  MOCK_USER_PROMPT_MESSAGE,
-  SLASH_COMMANDS as slashCommands,
-  generateMockResponseChunks,
-  renderGFM,
-} from './mock_data';
-
-const defaultValue = (prop) =>
-  typeof GlDuoChat.props[prop].default === 'function'
-    ? GlDuoChat.props[prop].default()
-    : GlDuoChat.props[prop].default;
-
-const generateProps = ({
-  title = defaultValue('title'),
-  messages = defaultValue('messages'),
-  error = defaultValue('error'),
-  isLoading = defaultValue('isLoading'),
-  isChatAvailable = defaultValue('isChatAvailable'),
-  predefinedPrompts = defaultValue('predefinedPrompts'),
-  badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
-  badgeType = defaultValue('badgeType'),
-  toolName = defaultValue('toolName'),
-  showHeader = defaultValue('showHeader'),
-  emptyStateTitle = defaultValue('emptyStateTitle'),
-  emptyStateDescription = defaultValue('emptyStateDescription'),
-  chatPromptPlaceholder = defaultValue('chatPromptPlaceholder'),
-} = {}) => ({
-  title,
-  messages,
-  error,
-  isLoading,
-  isChatAvailable,
-  predefinedPrompts,
-  badgeHelpPageUrl,
-  badgeType,
-  toolName,
-  slashCommands,
-  showHeader,
-  emptyStateTitle,
-  emptyStateDescription,
-  chatPromptPlaceholder,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components: { GlDuoChat },
-  props: Object.keys(argTypes),
-  provide: {
-    renderGFM,
-  },
-  template: `
-    <gl-duo-chat
-      :title="title"
-      :messages="messages"
-      :error="error"
-      :is-loading="isLoading"
-      :is-chat-available="isChatAvailable"
-      :predefined-prompts="predefinedPrompts"
-      :badge-help-page-url="badgeHelpPageUrl"
-      :badge-type="badgeType"
-      :tool-name="toolName"
-      :show-header="showHeader"
-      :empty-state-title="emptyStateTitle"
-      :empty-state-description="emptyStateDescription"
-      :chat-prompt-placeholder="chatPromptPlaceholder"
-    />`,
-});
-Default.args = generateProps({
-  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
-});
-Default.decorators = [makeContainer({ height: '800px' })];
-
-export const Interactive = (args, { argTypes }) => ({
-  components: { GlDuoChat, GlButton },
-  props: Object.keys(argTypes),
-  provide: {
-    renderGFM,
-  },
-  data() {
-    return {
-      isHidden: false,
-      loggerInfo: '',
-      promptInFlight: false,
-      msgs: args.messages,
-      chunks: [],
-      timeout: null,
-      requestId: 1,
-    };
-  },
-  methods: {
-    onSendChatPrompt(prompt) {
-      const newPrompt = {
-        ...MOCK_USER_PROMPT_MESSAGE,
-        contentHtml: '',
-        content: prompt,
-        requestId: this.requestId,
-      };
-      this.loggerInfo += `New prompt: ${JSON.stringify(newPrompt)}\n\n`;
-      if (prompt === CHAT_CLEAN_MESSAGE) {
-        this.msgs = [];
-      } else {
-        this.msgs.push(newPrompt);
-        this.promptInFlight = true;
-      }
-    },
-    onChatHidden() {
-      this.isHidden = true;
-      this.loggerInfo += `Chat closed\n\n`;
-    },
-    showChat() {
-      this.isHidden = false;
-      this.loggerInfo += `Chat opened\n\n`;
-    },
-    async onResponseRequested() {
-      this.timeout = null;
-      await this.mockResponseFromAi();
-      this.requestId += 1;
-    },
-    async mockResponseFromAi() {
-      const generator = generateMockResponseChunks(this.requestId);
-
-      for await (const newResponse of generator) {
-        const existingMessageIndex = this.msgs.findIndex(
-          (msg) => msg.requestId === newResponse.requestId && msg.role === newResponse.role
-        );
-        const existingMessage = this.msgs[existingMessageIndex];
-        if (existingMessage) {
-          this.updateExistingMessage(newResponse, existingMessageIndex);
-        } else {
-          this.addNewMessage(newResponse);
-        }
-      }
-    },
-    addNewMessage(msg) {
-      this.promptInFlight = false;
-      this.$set(this.msgs, this.msgs.length, msg);
-    },
-    updateExistingMessage(newResponse, existingMessageIndex) {
-      const existingMessage = this.msgs[existingMessageIndex];
-      this.$set(this.msgs, existingMessageIndex, {
-        ...existingMessage,
-        ...newResponse,
-      });
-    },
-  },
-  template: `
-  <div style="height: 800px">
-    <div id="logger" class="gl-w-half">
-      <pre class="gl-font-sm" style="text-wrap: wrap">
-<code>{{ loggerInfo }}</code>
-      </pre>
-      <gl-button v-if="promptInFlight" @click="onResponseRequested">Mock the response</gl-button>
-    </div>
-    <gl-button v-if="isHidden" @click="showChat">Show chat</gl-button>
-    <gl-duo-chat
-      v-if="!isHidden"
-      :title="title"
-      :messages="msgs"
-      :error="error"
-      :is-loading="promptInFlight"
-      :is-chat-available="isChatAvailable"
-      :predefined-prompts="predefinedPrompts"
-      :badge-help-page-url="badgeHelpPageUrl"
-      :badge-type="badgeType"
-      :tool-name="toolName"
-      :show-header="showHeader"
-      :empty-state-title="emptyStateTitle"
-      :empty-state-description="emptyStateDescription"
-      :chat-prompt-placeholder="chatPromptPlaceholder"
-      :slash-commands="slashCommands"
-      class="gl-drawer-default"
-      @send-chat-prompt="onSendChatPrompt"
-      @chat-hidden="onChatHidden"
-    />
-  </div>`,
-});
-Interactive.args = generateProps({});
-
-export const Slots = (args, { argTypes }) => ({
-  components: { GlDuoChat, GlAlert },
-  props: Object.keys(argTypes),
-  provide: {
-    renderMarkdown: (md) => `THIS IS ALTERED MARKDOWN: ${md}`,
-    renderGFM,
-  },
-  template: `
-    <div>
-      <gl-duo-chat
-        :title="title"
-        :messages="messages"
-        :error="error"
-        :is-loading="isLoading"
-        :is-chat-available="isChatAvailable"
-        :predefined-prompts="predefinedPrompts"
-        :badge-help-page-url="badgeHelpPageUrl"
-        :badge-type="badgeType"
-        :tool-name="toolName"
-        :show-header="showHeader"
-        :empty-state-title="emptyStateTitle"
-        :empty-state-description="emptyStateDescription"
-        :chat-prompt-placeholder="chatPromptPlaceholder">
-        <template #subheader>
-          <gl-alert
-            :dismissible="false"
-            variant="warning"
-            class="gl-font-sm gl-border-t"
-            role="alert"
-            data-testid="chat-legal-warning-gitlab-usage"
-            primary-button-link="https://internal-handbook.gitlab.io/handbook/product/ai-strategy/ai-integration-effort/legal_restrictions/"
-            primary-button-text="Read more"
-          >
-            <p>
-              You are not allowed to copy any part of this output into issues, comments, GitLab source code, commit messages, merge requests or any other user interface in the <code>/gitlab-org</code> or <code>/gitlab-com</code> groups.
-            </p>
-          </gl-alert>
-        </template>
-      </gl-duo-chat>
-    </div>
-    `,
-});
-Slots.args = generateProps();
-Slots.decorators = [makeContainer({ height: '800px' })];
-
-export default {
-  title: 'experimental/duo/chat/duo-chat',
-  component: GlDuoChat,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,55 +0,0 @@
-import { Parser } from 'marked';
-import { renderDuoChatMarkdownPreview } from './markdown_renderer';
-
-describe('Duo Chat Markdown renderer', () => {
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('renders a few edge cases', () => {
-    expect(renderDuoChatMarkdownPreview('')).toEqual('');
-    expect(renderDuoChatMarkdownPreview(null)).toEqual('');
-    expect(renderDuoChatMarkdownPreview(undefined)).toEqual('');
-    expect(renderDuoChatMarkdownPreview(5)).toEqual('<p>5</p>\n');
-  });
-
-  it('renders a simple paragraph', () => {
-    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('<p>Hello world</p>\n');
-  });
-
-  it('auto-closes an open code block', () => {
-    expect(renderDuoChatMarkdownPreview('```yaml\n# comment')).toEqual(
-      '<pre><code class="language-yaml"># comment\n</code></pre>\n'
-    );
-  });
-
-  it('renders standard markdown syntax', () => {
-    expect(renderDuoChatMarkdownPreview('*italic*')).toEqual(`<p><em>italic</em></p>\n`);
-    expect(renderDuoChatMarkdownPreview('_italic_')).toEqual(`<p><em>italic</em></p>\n`);
-    expect(renderDuoChatMarkdownPreview('**bold**')).toEqual(`<p><strong>bold</strong></p>\n`);
-    expect(renderDuoChatMarkdownPreview('~~strike~~')).toEqual(`<p><del>strike</del></p>\n`);
-    expect(renderDuoChatMarkdownPreview('https://example.org')).toEqual(
-      `<p><a href="https://example.org">https://example.org</a></p>\n`
-    );
-    expect(renderDuoChatMarkdownPreview('[example](https://example.org)')).toEqual(
-      `<p><a href="https://example.org">example</a></p>\n`
-    );
-    expect(renderDuoChatMarkdownPreview('1. first\n2. second')).toEqual(
-      `<ol>\n<li>first</li>\n<li>second</li>\n</ol>\n`
-    );
-    expect(renderDuoChatMarkdownPreview('- first\n- second')).toEqual(
-      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
-    );
-    expect(renderDuoChatMarkdownPreview('* first\n* second')).toEqual(
-      `<ul>\n<li>first</li>\n<li>second</li>\n</ul>\n`
-    );
-  });
-
-  it('returns content as-is if marked throws', () => {
-    jest.spyOn(Parser.prototype, 'parse').mockImplementationOnce(() => {
-      throw new Error('I am a broken parser');
-    });
-
-    expect(renderDuoChatMarkdownPreview('Hello world')).toEqual('Hello world');
-  });
-});

package/src/components/experimental/duo/user_feedback/user_feedback.spec.js

@@ -1,100 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlButton from '../../../base/button/button.vue';
-import FeedbackModal from './user_feedback_modal.vue';
-import UserFeedback, { i18n } from './user_feedback.vue';
-
-const DummyComponent = {
-  template: '<p>dummy</p>',
-};
-
-describe('UserFeedback', () => {
-  let wrapper;
-  const eventName = 'test_event_name';
-
-  const createComponent = ({ props, data = {}, slots = {} } = {}) => {
-    wrapper = shallowMount(UserFeedback, {
-      data() {
-        return data;
-      },
-      propsData: {
-        eventName,
-        ...props,
-      },
-      stubs: {
-        FeedbackModal,
-      },
-      slots,
-    });
-  };
-
-  const findButton = () => wrapper.findComponent(GlButton);
-  const findModal = () => wrapper.findComponent(FeedbackModal);
-
-  describe('rendering with no feedback registered', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders a button to provide feedback', () => {
-      expect(findButton().exists()).toBe(true);
-    });
-
-    it('renders the feedback modal', () => {
-      expect(findModal().exists()).toBe(true);
-    });
-  });
-
-  it.each`
-    feedbackLinkText | expectedButtonText
-    ${'Foo'}         | ${'Foo'}
-    ${undefined}     | ${i18n.FEEDBACK_LINK_TEXT}
-  `(
-    'renders "$expectedButtonText" as button text when "$feedbackLinkText" is passed as the feedback link text',
-    ({ feedbackLinkText, expectedButtonText } = {}) => {
-      createComponent({ props: { feedbackLinkText } });
-      expect(findButton().text()).toBe(expectedButtonText);
-    }
-  );
-
-  it('does not render the modal if custom URL is passed for the feedback link', () => {
-    const feedbackLinkUrl = 'https://example.com';
-    createComponent({ props: { feedbackLinkUrl } });
-    expect(findButton().attributes('href')).toBe(feedbackLinkUrl);
-    expect(findModal().exists()).toBe(false);
-  });
-
-  describe('event handling', () => {
-    const passedFeedback = { feedbackOptions: ['helpful'], extendedFeedback: 'Foo bar' };
-
-    it('emits the event, containing the form data, when modal emits', () => {
-      createComponent();
-      findModal().vm.$emit('feedback-submitted', passedFeedback);
-      expect(wrapper.emitted('feedback')).toHaveLength(1);
-    });
-
-    it('renders the thank you text instead of a button', async () => {
-      createComponent({ props: { feedbackReceived: true } });
-
-      expect(findButton().exists()).toBe(false);
-      expect(wrapper.text()).toContain(i18n.FEEDBACK_THANKS);
-    });
-
-    it('does not render the modal after feedback submitted', async () => {
-      createComponent({ props: { feedbackReceived: true } });
-      expect(findModal().exists()).toBe(false);
-    });
-  });
-
-  describe('slots', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders the `feedback-extra-fields` slot', () => {
-      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
-      wrapper.destroy();
-      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
-      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
-    });
-  });
-});

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -1,107 +0,0 @@
-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 GlDuoUserFeedback from './user_feedback.vue';
-import readme from './user_feedback.md';
-
-const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
-  feedbackLinkText,
-  feedbackLinkUrl,
-});
-
-export const Default = (args, { argTypes }) => ({
-  components: {
-    GlDuoUserFeedback,
-    GlAlert,
-    GlFormGroup,
-    GlFormTextarea,
-  },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      eventOutput: '',
-    };
-  },
-  methods: {
-    logEvent(event) {
-      this.eventOutput = JSON.stringify(event);
-    },
-  },
-  template: `
-    <div>
-      <gl-duo-user-feedback
-        :feedback-link-text="feedbackLinkText"
-        :feedback-link-url="feedbackLinkUrl"
-        @feedback="logEvent"/>
-      <p v-if="eventOutput"><code>{{ eventOutput }}</code></p>
-    </div>
-    `,
-});
-Default.args = generateProps();
-
-export const Slots = (args, { argTypes }) => ({
-  components: {
-    GlDuoUserFeedback,
-    GlAlert,
-    GlFormGroup,
-    GlFormTextarea,
-  },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      eventOutput: '',
-      didWhat: '',
-      expectedWhat: '',
-      improveWhat: '',
-    };
-  },
-  methods: {
-    logEvent(event) {
-      const { feedbackChoices } = event;
-      this.eventOutput = JSON.stringify({
-        feedbackChoices,
-        didWhat: this.didWhat,
-        expectedWhat: this.expectedWhat,
-        improveWhat: this.improveWhat,
-      });
-    },
-  },
-  template: `
-    <div>
-      <gl-duo-user-feedback
-        :feedback-link-text="feedbackLinkText"
-        :feedback-link-url="feedbackLinkUrl"
-        @feedback="logEvent">
-        <template #feedback-extra-fields>
-          <div class="gl-mb-5">
-              Example slot content: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-          </div>
-          <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>
-      <p v-if="eventOutput"><code>{{ eventOutput }}</code></p>
-    </div>
-    `,
-});
-Slots.parameters = { controls: { disable: true } };
-
-export default {
-  title: 'experimental/duo/duo-user-feedback',
-  component: GlDuoUserFeedback,
-  tags: ['skip-visual-test'],
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js

@@ -1,134 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlModal from '../../../base/modal/modal.vue';
-import GlAlert from '../../../base/alert/alert.vue';
-import GlFormCheckbox from '../../../base/form/form_checkbox/form_checkbox.vue';
-import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
-import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
-import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
-
-const DummyComponent = {
-  template: '<p>dummy</p>',
-};
-
-describe('FeedbackModal', () => {
-  let wrapper;
-  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
-  const findModal = () => wrapper.findComponent(GlModal);
-  const findOptions = () => findByTestId('feedback-options');
-  const findOptionsCheckboxes = () => findOptions().findAllComponents(GlFormCheckbox);
-  const findTextarea = () => wrapper.findComponent(GlFormTextarea);
-
-  const selectOption = (index = 0) => {
-    wrapper
-      .findAllComponents(GlFormCheckboxGroup)
-      .at(index)
-      .vm.$emit('input', [feedbackOptions[index].value]);
-  };
-  const createComponent = (options = {}) => {
-    wrapper = shallowMount(FeedbackModal, {
-      ...options,
-      stubs: {
-        GlModal,
-        GlFormCheckboxGroup,
-      },
-      provide: options.injections,
-    });
-
-    wrapper.vm.close = jest.fn();
-    return wrapper;
-  };
-
-  describe('inputs', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders the feedback options', () => {
-      const checkboxes = findOptionsCheckboxes();
-      feedbackOptions.forEach((option, index) => {
-        expect(checkboxes.at(index).text()).toBe(option.text);
-        expect(checkboxes.at(index).attributes('value')).toBe(option.value);
-      });
-    });
-
-    it('renders the textarea field for additional feedback', () => {
-      expect(findTextarea().exists()).toBe(true);
-    });
-  });
-
-  describe('interaction', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('emits the feedback event when the submit button is clicked and closes the modal', () => {
-      selectOption();
-      findModal().vm.$emit('primary');
-      expect(wrapper.emitted('feedback-submitted')).toEqual([
-        [
-          {
-            feedbackChoices: [feedbackOptions[0].value],
-            extendedTextFeedback: '',
-          },
-        ],
-      ]);
-
-      expect(wrapper.vm.close).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not render validation error by default', () => {
-      expect(findOptions().vm.$attrs.state).not.toBe(false);
-    });
-
-    it('renders validation error when submit was triggered without selected a required option', async () => {
-      findModal().vm.$emit('primary');
-      await wrapper.vm.$nextTick();
-
-      expect(findOptions().vm.$attrs.state).toBe(false);
-      expect(findOptions().vm.$attrs['invalid-feedback']).toBe('Select at least one option.');
-      expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
-    });
-  });
-
-  describe('slots', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    it('renders the `feedback-extra-fields` slot with default content', () => {
-      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
-      expect(findTextarea().exists()).toBe(true);
-      wrapper.destroy();
-
-      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
-      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
-      expect(findTextarea().exists()).toBe(false);
-    });
-  });
-
-  describe('injections', () => {
-    it('should pass modalTitle when set as injection', () => {
-      const customTitle = 'Custom Feedback Title';
-      createComponent({ injections: { modalTitle: customTitle } });
-      expect(findModal().props('title')).toBe(customTitle);
-    });
-
-    it('should pass modalTitle default when injection not set', () => {
-      createComponent();
-      expect(findModal().props('title')).toBe('Give feedback on GitLab Duo');
-    });
-
-    it('should pass modalAlert when set as injection', () => {
-      const customAlert = 'Custom Alert Message';
-      createComponent({ injections: { modalAlert: customAlert } });
-      expect(wrapper.findComponent(GlAlert).text()).toBe(customAlert);
-    });
-
-    it('should render modalAlert default when injection not set', () => {
-      createComponent();
-      expect(wrapper.findComponent(GlAlert).text()).toBe(
-        'GitLab team members cannot see the AI content. Please be as descriptive as possible.'
-      );
-    });
-  });
-});