@gitlab/ui 78.9.0 → 78.10.1

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 20:52:08 GMT
+ * Generated on Tue, 09 Apr 2024 14:01:48 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 20:52:08 GMT
+ * Generated on Tue, 09 Apr 2024 14:01:48 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 20:52:08 GMT
+ * Generated on Tue, 09 Apr 2024 14:01:48 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 04 Apr 2024 20:52:08 GMT
+ * Generated on Tue, 09 Apr 2024 14:01:48 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 04 Apr 2024 20:52:08 GMT
+// Generated on Tue, 09 Apr 2024 14:01:48 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 04 Apr 2024 20:52:08 GMT
+// Generated on Tue, 09 Apr 2024 14:01:48 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.9.0",
+  "version": "78.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,7 +102,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.94.0",
+    "@gitlab/svgs": "3.95.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/label/label.scss

@@ -17,7 +17,7 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   &:focus-within {
-    @include gl-focus($color: var(--label-background-color), $important: true);
+    @include gl-focus($color: var(--label-background-color, $white), $important: true);
   }
 
   .gl-label-link {

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

@@ -1,7 +1,11 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
-import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  generateSeparateChunks,
+} from '../../mock_data';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
 import GlDuoChatMessage from './duo_chat_message.vue';
 
@@ -35,7 +39,7 @@ describe('DuoChatMessage', () => {
   };
 
   beforeEach(() => {
-    renderMarkdown = jest.fn().mockImplementation((val) => `markdown: ${val}`);
+    renderMarkdown = jest.fn().mockImplementation((val) => val);
     renderGFM = jest.fn();
   });
 
@@ -49,18 +53,26 @@ describe('DuoChatMessage', () => {
     expect(customElements.get('copy-code')).toBeDefined();
   });
 
-  describe('rendering with user message', () => {
+  describe('rendering', () => {
     beforeEach(() => {
       renderMarkdown.mockImplementation(() => mockMarkdownContent);
-      createComponent();
     });
 
-    it('converts the message `content` to Markdown', () => {
-      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+    it('renders html content of the message by default', () => {
+      createComponent();
+      expect(renderMarkdown).not.toHaveBeenCalled();
+      expect(wrapper.html()).toContain(MOCK_USER_PROMPT_MESSAGE.contentHtml);
     });
 
-    it('renders message content', () => {
-      expect(wrapper.text()).toBe(mockMarkdownContent);
+    it('converts the message `content` to Markdown if there is no contentHtml', () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: undefined,
+        },
+      });
+      expect(renderMarkdown).toHaveBeenCalledWith(MOCK_USER_PROMPT_MESSAGE.content);
+      expect(findContent().text()).toBe(mockMarkdownContent);
     });
 
     it('does not render the documentation sources component', () => {
@@ -135,8 +147,6 @@ describe('DuoChatMessage', () => {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors,
           contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
@@ -155,7 +165,6 @@ describe('DuoChatMessage', () => {
           errors: [],
           contentHtml: 'fooHtml barHtml',
           content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
@@ -169,47 +178,14 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
+          contentHtml: undefined,
           content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
         },
       });
 
       await nextTick();
 
-      expect(findContent().text()).toContain('markdown: foo bar');
-    });
-
-    it('outputs chunks if there is no content', async () => {
-      createComponent({
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: '',
-          content: '',
-          chunks: ['a', 'b', 'c'],
-        },
-      });
-
-      await nextTick();
-
-      expect(findContent().text()).toContain('markdown: abc');
-    });
-
-    it('outputs chunks until first undefined', async () => {
-      createComponent({
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: '',
-          content: '',
-          chunks: ['a', undefined, 'c'],
-        },
-      });
-
-      await nextTick();
-
-      expect(findContent().text()).toContain('markdown: a');
+      expect(findContent().text()).toContain('foo bar');
     });
 
     it('hydrates the message with GFM when mounting with contentHtml', async () => {
@@ -231,44 +207,33 @@ describe('DuoChatMessage', () => {
         },
       });
 
-      wrapper.setProps({
+      await wrapper.setProps({
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           contentHtml: 'foo bar',
         },
       });
-
-      await nextTick();
       expect(renderGFM).toHaveBeenCalled();
     });
-  });
-
-  describe('default renderers', () => {
-    it('outputs errors if they are present', async () => {
-      const errors = ['error1', 'error2', 'error3'];
 
+    it('sanitizes html produced by errors', async () => {
       createComponent({
         options: {
           provide: null,
         },
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
-          errors,
-          contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          errors: ['[click here](javascript:prompt(1))'],
+          contentHtml: undefined,
+          content: '',
         },
       });
 
       await nextTick();
-
-      const contentText = findContent().text();
-      expect(contentText).toContain(errors[0]);
-      expect(contentText).toContain(errors[1]);
-      expect(contentText).toContain(errors[2]);
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs contentHtml if it is present', async () => {
+    it('sanitizes html produced by content', async () => {
       createComponent({
         options: {
           provide: null,
@@ -276,20 +241,17 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: 'fooHtml barHtml',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          contentHtml: undefined,
+          content: '[click here](javascript:prompt(1))',
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe(
-        '<div class="gl-markdown gl-compact-markdown">fooHtml barHtml</div>'
-      );
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs markdown content if there is no contentHtml', async () => {
+    it('deprecated: sanitizes html produced by chunks', async () => {
       createComponent({
         options: {
           provide: null,
@@ -297,18 +259,18 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
-          content: 'foo bar',
-          chunks: ['a', 'b', 'c'],
+          contentHtml: undefined,
+          content: '',
+          chunks: ['[click here]', '(javascript:prompt(1))'],
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe('<div>\n  <p>foo bar</p>\n</div>');
+      expect(findContent().html()).toContain('<p><a>click here</a></p>');
     });
 
-    it('outputs chunks if there is no content', async () => {
+    it('sanitizes contentHtml', async () => {
       createComponent({
         options: {
           provide: null,
@@ -316,92 +278,250 @@ describe('DuoChatMessage', () => {
         message: {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors: [],
-          contentHtml: '',
+          contentHtml: `<a href="javascript:prompt(1)">click here</a>`,
           content: '',
-          chunks: ['a', 'b', 'c'],
+          chunks: [],
         },
       });
 
       await nextTick();
 
-      expect(findContent().html()).toBe('<div>\n  <p>abc</p>\n</div>');
+      expect(findContent().html()).toBe(
+        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></div>'
+      );
     });
 
-    it('sanitizes html produced by errors', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: ['[click here](javascript:prompt(1))'],
-          contentHtml: '',
-          content: '',
-          chunks: [],
-        },
+    describe('message updates watcher', () => {
+      const newContent = 'new foo content';
+      beforeEach(() => {
+        createComponent();
       });
 
-      await nextTick();
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain(newContent);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
-    });
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${MOCK_USER_PROMPT_MESSAGE.content}</p>`,
+            content: newContent,
+          },
+        });
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
 
-    it('sanitizes html produced by content', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: '',
-          content: '[click here](javascript:prompt(1))',
-          chunks: [],
-        },
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors: ['error'],
+          },
+        });
+        expect(findContent().text()).not.toContain(newContent);
+        expect(findContent().text()).not.toContain(MOCK_USER_PROMPT_MESSAGE.content);
+        expect(findContent().text()).toContain('error');
       });
 
-      await nextTick();
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: '',
+            content: '',
+            errors,
+          },
+        });
+        expect(findContent().text()).toContain(errors[0]);
+        expect(findContent().text()).toContain(errors[1]);
+        expect(findContent().text()).toContain(errors[2]);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
+      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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            contentHtml: `<p>${newContent}</p>`,
+          },
+        });
+        expect(renderGFM).toHaveBeenCalled();
+      });
     });
 
-    it('sanitizes html produced by chunks', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: '',
-          content: '',
-          chunks: ['[click here]', '(javascript:prompt(1))'],
-        },
+    describe('updates to the message', () => {
+      const [CHUNK1, CHUNK2, CHUNK3] = generateSeparateChunks(3);
+      const consolidatedContent = CHUNK1.content + CHUNK2.content;
+
+      beforeEach(() => {
+        createComponent({ message: MOCK_RESPONSE_MESSAGE });
       });
 
-      await nextTick();
+      it('does not handle message updates with chunks for the user messages', async () => {
+        createComponent({ message: MOCK_USER_PROMPT_MESSAGE });
+        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
+        await wrapper.setProps({
+          message: {
+            ...MOCK_USER_PROMPT_MESSAGE,
+            content: 'foo bar',
+            chunkId: 1,
+          },
+        });
+        expect(findContent().text()).toContain(MOCK_USER_PROMPT_MESSAGE.content);
+      });
 
-      expect(findContent().html()).toBe('<div>\n  <p><a>click here</a></p>\n</div>');
-    });
+      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
+        await wrapper.setProps({
+          message: {
+            ...CHUNK1,
+            chunkId: null,
+          },
+        });
+        expect(findContent().text()).toContain(CHUNK1.content);
+      });
 
-    it('sanitizes contentHtml', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: [],
-          contentHtml: `<a href="javascript:prompt(1)">click here</a>`,
-          content: '',
-          chunks: [],
-        },
+      it('renders chunks correctly when the chunks arrive out of order', async () => {
+        expect(CHUNK1.content).toBe('chunk #1');
+        expect(CHUNK2.content).toBe('chunk #2');
+        expect(CHUNK3.content).toBe('chunk #3');
+        // 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
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(findContent().text()).toBe('');
+
+        await wrapper.setProps({
+          message: CHUNK1,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content + CHUNK2.content);
+
+        await wrapper.setProps({
+          message: CHUNK3,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content + CHUNK2.content + CHUNK3.content);
       });
 
-      await nextTick();
+      it('renders the chunks as they arrive when they arrive in the correct 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
+        await wrapper.setProps({
+          message: CHUNK1,
+        });
+        expect(findContent().text()).toBe(CHUNK1.content);
 
-      expect(findContent().html()).toBe(
-        '<div class="gl-markdown gl-compact-markdown"><a>click here</a></div>'
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        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(CHUNK1.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
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(findContent().text()).toBe(consolidatedContent);
+      });
+
+      it('does not hydrate the chunk messages with GLFM', async () => {
+        createComponent({
+          propsData: {
+            message: CHUNK1,
+          },
+        });
+        await nextTick();
+        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
+        await wrapper.setProps({
+          message: CHUNK2,
+        });
+        expect(renderGFM).not.toHaveBeenCalled();
+      });
+
+      it.each`
+        content    | contentHtml  | errors            | expectedContent
+        ${'alpha'} | ${'beta'}    | ${['foo', 'bar']} | ${'foo; bar'}
+        ${'alpha'} | ${'beta'}    | ${[]}             | ${'beta'}
+        ${'alpha'} | ${undefined} | ${['foo', 'bar']} | ${'foo; bar'}
+        ${'alpha'} | ${undefined} | ${[]}             | ${'alpha'}
+        ${''}      | ${'beta'}    | ${['foo', 'bar']} | ${'foo; bar'}
+        ${''}      | ${'beta'}    | ${[]}             | ${'beta'}
+        ${''}      | ${undefined} | ${['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,
+            },
+          });
+          await nextTick();
+          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
+          await wrapper.setProps({
+            message: {
+              ...CHUNK2,
+              chunkId: null,
+              content,
+              contentHtml,
+              errors,
+            },
+          });
+          expect(renderGFM).toHaveBeenCalled();
+          expect(findContent().text()).toBe(expectedContent);
+        }
       );
     });
   });