@gitlab/ui 66.25.1 → 66.27.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 Oct 2023 19:55:25 GMT
+ * Generated on Wed, 11 Oct 2023 16:10:59 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 Oct 2023 19:55:26 GMT
+ * Generated on Wed, 11 Oct 2023 16:10:59 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 Oct 2023 19:55:26 GMT
+ * Generated on Wed, 11 Oct 2023 16:10:59 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 09 Oct 2023 19:55:25 GMT
+ * Generated on Wed, 11 Oct 2023 16:10:59 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 09 Oct 2023 19:55:26 GMT
+// Generated on Wed, 11 Oct 2023 16:10:59 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 09 Oct 2023 19:55:26 GMT
+// Generated on Wed, 11 Oct 2023 16:10:59 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.25.1",
+  "version": "66.27.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,18 +98,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.5",
-    "@storybook/addon-docs": "7.4.5",
-    "@storybook/addon-essentials": "7.4.5",
-    "@storybook/addon-storyshots": "7.4.5",
-    "@storybook/addon-storyshots-puppeteer": "7.4.5",
-    "@storybook/addon-viewport": "7.4.5",
-    "@storybook/builder-webpack5": "7.4.5",
-    "@storybook/theming": "7.4.5",
-    "@storybook/vue": "7.4.5",
-    "@storybook/vue-webpack5": "7.4.5",
-    "@storybook/vue3": "7.4.5",
-    "@storybook/vue3-webpack5": "7.4.5",
+    "@storybook/addon-a11y": "7.4.6",
+    "@storybook/addon-docs": "7.4.6",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-storyshots": "7.4.6",
+    "@storybook/addon-storyshots-puppeteer": "7.4.6",
+    "@storybook/addon-viewport": "7.4.6",
+    "@storybook/builder-webpack5": "7.4.6",
+    "@storybook/theming": "7.4.6",
+    "@storybook/vue": "7.4.6",
+    "@storybook/vue-webpack5": "7.4.6",
+    "@storybook/vue3": "7.4.6",
+    "@storybook/vue3-webpack5": "7.4.6",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -126,10 +126,10 @@
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.50.0",
+    "eslint": "8.51.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-storybook": "0.6.14",
+    "eslint-plugin-storybook": "0.6.15",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.5",
+    "storybook": "7.4.6",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/alert/alert.scss

@@ -28,24 +28,26 @@
 }
 
 .gl-alert-title {
-  @include gl-font-base;
-  @include gl-font-weight-bold;
-  @include gl-line-height-normal;
-  @include gl-mt-0;
+  @include gl-heading-scale-500;
   @include gl-mb-3;
 }
 
-.gl-alert-icon {
+.gl-alert-icon-container {
   @include gl-absolute;
   @include gl-top-5;
   @include gl-left-5;
-  @include gl-w-5;
-  @include gl-h-5;
-  @include gl-fill-current-color;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  height: $gl-line-height-20;
+
+  .gl-alert-has-title & {
+    @include gl-heading-scale-500; // get dynamic font-size
+    height: $gl-line-height-heading * 1em; // give unit to unitless relative line-height (1.25) 
+  }
 }
 
-.gl-alert-icon-no-title {
-  @include gl-mt-1;
+.gl-alert-icon {
+  @include gl-fill-current-color;
 }
 
 .gl-alert-body {

package/src/components/base/alert/alert.spec.js

@@ -190,6 +190,22 @@ describe('Alert component', () => {
         expect(wrapper.classes()).not.toContain(cssClass);
       });
     });
+
+    it('adds the `gl-alert-has-title` class if there is a title', () => {
+      createComponent({
+        propsData: {
+          title: 'title',
+        },
+      });
+
+      expect(wrapper.classes()).toContain('gl-alert-has-title');
+    });
+
+    it('does not add the `gl-alert-has-title` class if there is no title', () => {
+      createComponent();
+
+      expect(wrapper.classes()).not.toContain('gl-alert-has-title');
+    });
   });
 
   describe('role and aria-live', () => {

package/src/components/base/alert/alert.vue

@@ -197,15 +197,13 @@ export default {
       { 'gl-alert-sticky': sticky },
       { 'gl-alert-not-dismissible': !dismissible },
       { 'gl-alert-no-icon': !showIcon },
+      { 'gl-alert-has-title': !!title },
       variantClass,
     ]"
   >
-    <gl-icon
-      v-if="showIcon"
-      :name="iconName"
-      :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
-    />
-
+    <div v-if="showIcon" class="gl-alert-icon-container">
+      <gl-icon :name="iconName" class="gl-alert-icon" />
+    </div>
     <div class="gl-alert-content" :role="role" :aria-live="ariaLive">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.md

@@ -0,0 +1,60 @@
+The component represents a Duo Chat message.
+
+## Usage
+
+```html
+<gl-duo-chat-message :message="message" />
+```
+
+## Pretty rendering message content
+
+There are two ways of pretty-rendering a message's content in the component:
+
+- dependency injection, providing functions to convert raw markdown into HTML,
+- sending `contentHtml` prop as part of the `message` property,
+
+### Injecting functions
+
+To inject the `renderMarkdown` function, which converts raw markdown into proper HTML,
+the component relies on [dependency injection, using `provide`/`inject` options](https://docs.gitlab.com/ee/development/fe_guide/vue.html#provide-and-inject).
+The component expects a reference to a function, converting raw markdown into HTML
+to be _provided_ by a consumer.
+[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/notes/utils.js#L22-24)
+
+### `contentHtml`
+
+This approach is self-explanatory and is used when raw markdown can be converted to HTML on the server
+before the message is returned to the client. Here's an example of a message's structure where markdown
+has been generated on the server and sent down in the `contentHtml` property:
+
+```javascript
+{
+  content: '_Duo Chat message_ coming from AI',
+  contentHtml: '<p><em>Duo Chat message</em> coming from AI</p>',
+  role: 'assistant',
+  ...
+}
+```
+
+## GitLab Flavored Markdown (GLFM)
+
+In most cases, it's not enough to just convert raw markdown into HTML. Messages also require the
+markup to support [GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html).
+For this, the component relies on another dependency injection (in addition to `renderMarkdown`)
+expecting a reference to the `renderGFM` function, decorating an HTML element with GLFM to be
+_provided_ by a consumer.
+[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/behaviors/markdown/render_gfm.js#L19-52)
+
+## The underlying use of the `GlDuoUserFeedback` component
+
+The component integrates the [`GlDuoUserFeedback`](/story/experimental-duo-user-feedback--default)
+component to track user feedback on the AI-generated responses. Note that the `GlDuoChatMessage`
+component renders the default state of `GlDuoUserFeedback` component, not allowing to override
+the slots in that underlying component.
+
+### Tracking User Feedback for a response
+
+The component emits the `track-feedback` event, a proxy of the `feedback` event emitted by
+the `GlDuoUserFeedback` component. Please refer to
+[the documentation on that component](/story/experimental-duo-user-feedback--docs#listening-to-the-feedback-form-submission)
+when processing feedback from users.

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

@@ -0,0 +1,18 @@
+.duo-chat-message {
+  max-width: 90%;
+
+  code {
+    @include gl-bg-gray-100;
+  }
+
+  pre code {
+    @include gl-font-sm;
+    @include gl-line-height-1;
+    @include gl-bg-transparent;
+    white-space: inherit;
+  }
+
+  p:last-of-type {
+    @include gl-mb-0;
+  }
+}

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

@@ -0,0 +1,381 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlDuoUserFeedback } from '../../../../../../index';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_CHUNK_RESPONSE_MESSAGE,
+} from '../../mock_data';
+import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+import GlDuoChatMessage from './duo_chat_message.vue';
+
+describe('DuoChatMessage', () => {
+  let wrapper;
+
+  const findContent = () => wrapper.findComponent({ ref: 'content' });
+  const findDocumentSources = () => wrapper.findComponent(DocumentationSources);
+  const findUserFeedback = () => wrapper.findComponent(GlDuoUserFeedback);
+  const mockMarkdownContent = 'foo **bar**';
+
+  let renderMarkdown;
+  let renderGFM;
+
+  const componentFactory = ({ message = MOCK_USER_PROMPT_MESSAGE, options = {} } = {}) => {
+    return shallowMount(GlDuoChatMessage, {
+      ...options,
+      propsData: {
+        message,
+      },
+      provide: {
+        renderMarkdown,
+        renderGFM,
+      },
+    });
+  };
+
+  const createComponent = (args) => {
+    wrapper = componentFactory(args);
+  };
+
+  beforeEach(() => {
+    renderMarkdown = jest.fn().mockImplementation((val) => val);
+    renderGFM = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      renderMarkdown.mockImplementation(() => mockMarkdownContent);
+      createComponent();
+    });
+
+    it('converts the message `content` to Markdown', () => {
+      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+    });
+
+    it('renders message content', () => {
+      expect(wrapper.text()).toBe(mockMarkdownContent);
+    });
+
+    describe('user message', () => {
+      it('does not render the documentation sources component', () => {
+        expect(findDocumentSources().exists()).toBe(false);
+      });
+
+      it('does not render the user feedback component', () => {
+        expect(findUserFeedback().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('rendering - with assistant message', () => {
+    beforeEach(() => {
+      createComponent({
+        message: MOCK_RESPONSE_MESSAGE,
+      });
+    });
+
+    it('renders the documentation sources component by default', () => {
+      expect(findDocumentSources().exists()).toBe(true);
+      expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
+    });
+
+    it.each([null, undefined, ''])(
+      'does not render sources component when `sources` is %s',
+      (sources) => {
+        createComponent({
+          message: {
+            ...MOCK_RESPONSE_MESSAGE,
+            extras: {
+              sources,
+            },
+          },
+        });
+        expect(findDocumentSources().exists()).toBe(false);
+      }
+    );
+
+    it('renders the user feedback component', () => {
+      expect(findUserFeedback().exists()).toBe(true);
+    });
+
+    it('proxies the emitted event from the User Feedback component', () => {
+      findUserFeedback().vm.$emit('feedback', 'foo');
+      expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
+    });
+  });
+
+  describe('message output', () => {
+    it('hydrates the message with GLFM when mounting the component', () => {
+      createComponent();
+      expect(renderGFM).toHaveBeenCalled();
+    });
+
+    it('outputs errors if message has no content', async () => {
+      const errors = ['foo', 'bar', 'baz'];
+
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: '',
+          content: '',
+          errors,
+        },
+      });
+
+      await nextTick();
+
+      expect(findContent().text()).toContain(errors[0]);
+      expect(findContent().text()).toContain(errors[1]);
+      expect(findContent().text()).toContain(errors[2]);
+    });
+
+    describe('message updates watcher', () => {
+      const newContent = 'new foo content';
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('listens to the message changes', async () => {
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain(newContent);
+      });
+
+      it('prioritises the output of contentHtml over content', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${MOCK_USER_PROMPT_MESSAGE.content}</p>`,
+            content: newContent,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
+
+      it('outputs errors if message has no content', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors: ['error'],
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain('error');
+      });
+
+      it('merges all the errors for output', async () => {
+        const errors = ['foo', 'bar', 'baz'];
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors,
+          },
+        });
+        await nextTick();
+        expect(findContent().text()).toContain(errors[0]);
+        expect(findContent().text()).toContain(errors[1]);
+        expect(findContent().text()).toContain(errors[2]);
+      });
+
+      it('hydrates the output message with GLFM if its not a chunk', async () => {
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        await nextTick();
+        expect(renderGFM).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('updates to the message', () => {
+    const content1 = 'chunk #1';
+    const content2 = ' chunk #2';
+    const content3 = ' chunk #3';
+    const chunk1 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content1,
+      chunkId: 1,
+    };
+    const chunk2 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content2,
+      chunkId: 2,
+    };
+    const chunk3 = {
+      ...MOCK_CHUNK_RESPONSE_MESSAGE,
+      content: content3,
+      chunkId: 3,
+    };
+
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('does not fail if the message has no chunkId', async () => {
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: {
+          ...MOCK_CHUNK_RESPONSE_MESSAGE,
+          content: content1,
+        },
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+    });
+
+    it('renders chunks correctly when the chunks arrive out of order', async () => {
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe('');
+
+      wrapper.setProps({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+
+      wrapper.setProps({
+        message: chunk3,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2 + content3);
+    });
+
+    it('renders the chunks as they arrive', async () => {
+      const consolidatedContent = content1 + content2;
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(consolidatedContent);
+    });
+
+    it('treats the initial message content as chunk if message has chunkId', async () => {
+      createComponent({
+        message: chunk1,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1);
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(findContent().text()).toBe(content1 + content2);
+    });
+
+    it('does not hydrate the chunk messages with GLFM', async () => {
+      createComponent({
+        propsData: {
+          message: chunk1,
+        },
+      });
+      renderGFM.mockClear();
+      expect(renderGFM).not.toHaveBeenCalled();
+
+      // setProps is justified here because we are testing the component's
+      // reactive behavior which consistutes an exception
+      // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+      wrapper.setProps({
+        message: chunk2,
+      });
+      await nextTick();
+      expect(renderGFM).not.toHaveBeenCalled();
+    });
+
+    it.each`
+      content    | contentHtml | errors            | expectedContent
+      ${'alpha'} | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
+      ${'alpha'} | ${'beta'}   | ${[]}             | ${'beta'}
+      ${'alpha'} | ${''}       | ${['foo', 'bar']} | ${'alpha'}
+      ${'alpha'} | ${''}       | ${[]}             | ${'alpha'}
+      ${''}      | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}
+      ${''}      | ${'beta'}   | ${[]}             | ${'beta'}
+      ${''}      | ${''}       | ${['foo', 'bar']} | ${'foo; bar'}
+    `(
+      'outputs "$expectedContent" and hydrates this content when content is "$content", contentHtml is "$contentHtml" and errors is "$errors" with "chunkId: null"',
+      async ({ content, contentHtml, errors, expectedContent } = {}) => {
+        createComponent({
+          propsData: {
+            message: chunk1,
+          },
+        });
+        renderGFM.mockClear();
+        expect(renderGFM).not.toHaveBeenCalled();
+
+        // setProps is justified here because we are testing the component's
+        // reactive behavior which consistutes an exception
+        // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
+        wrapper.setProps({
+          message: {
+            ...MOCK_CHUNK_RESPONSE_MESSAGE,
+            chunkId: null,
+            content,
+            contentHtml,
+            errors,
+          },
+        });
+        await nextTick();
+        expect(renderGFM).toHaveBeenCalled();
+        expect(findContent().text()).toBe(expectedContent);
+      }
+    );
+  });
+});