@gitlab/ui 66.35.0 → 66.35.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [66.35.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.35.1...v66.35.2) (2023-10-24)
+
+
+### Bug Fixes
+
+* rendering chunks after the final message ([b745c98](https://gitlab.com/gitlab-org/gitlab-ui/commit/b745c98cce77355e3efef2ec08867cb2e2cacb2a))
+* **GlDiscreteChatter:** Fix popover handling ([3a9deb0](https://gitlab.com/gitlab-org/gitlab-ui/commit/3a9deb05e7fd9fd6f63ae18c4bed565170735038))
+
+## [66.35.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.35.0...v66.35.1) (2023-10-20)
+
+
+### Bug Fixes
+
+* **GlDuoChatMessage:** nextTick() when rendering GFM ([835900c](https://gitlab.com/gitlab-org/gitlab-ui/commit/835900cb9cf01e26b4e24120be3abc6f48c3c371))
+
 # [66.35.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.34.0...v66.35.0) (2023-10-20)
 
 

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -48,7 +48,7 @@ var script = {
     disableTooltip: {
       type: Boolean,
       required: false,
-      default: () => false
+      default: false
     },
     /**
      * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
@@ -91,7 +91,7 @@ var script = {
     },
     options() {
       const mergedOptions = merge({}, defaultChartOptions, {
-        tooltip: {
+        tooltip: this.disableTooltip ? undefined : {
           formatter: this.onLabelChange
         },
         xAxis: {
@@ -127,9 +127,7 @@ var script = {
   },
   methods: {
     defaultFormatTooltipText(params) {
-      const {
-        data
-      } = params;
+      const data = this.getChartData(params);
       const [title, content] = data;
       this.tooltipTitle = title;
       const seriesName = this.yAxisTitle;
@@ -152,9 +150,7 @@ var script = {
     },
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
-      const {
-        data = []
-      } = params;
+      const data = this.getChartData(params);
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
         this.tooltipPosition = {
@@ -162,6 +158,13 @@ var script = {
           top: `${top}px`
         };
       }
+    },
+    getChartData(_ref) {
+      let {
+        data
+      } = _ref;
+      const chartData = (data === null || data === void 0 ? void 0 : data.value) || data;
+      return Array.isArray(chartData) ? chartData : [];
     }
   },
   HEIGHT_AUTO_CLASSES

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -32,7 +33,8 @@ var script = {
   },
   data() {
     return {
-      messageContent: ''
+      messageContent: '',
+      messageWatcher: null
     };
   },
   computed: {
@@ -50,24 +52,10 @@ var script = {
       return this.message.contentHtml || this.renderMarkdown(this.message.content || this.message.errors.join('; '));
     }
   },
-  watch: {
-    message: {
-      handler() {
-        const {
-          chunkId,
-          content
-        } = this.message;
-        if (!chunkId) {
-          this.messageChunks = [];
-          this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
-        } else {
-          this.messageChunks[chunkId] = content;
-          this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
-        }
-      },
+  created() {
+    this.messageWatcher = this.$watch('message', this.messageUpdateHandler, {
       deep: true
-    }
+    });
   },
   beforeCreate() {
     /**
@@ -81,7 +69,28 @@ var script = {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    },
+    async messageUpdateHandler() {
+      const {
+        chunkId,
+        content
+      } = this.message;
+      if (!chunkId) {
+        this.messageChunks = [];
+        this.messageContent = this.content;
+        this.messageWatcher();
+        this.hydrateContentWithGFM();
+      } else {
+        this.messageChunks[chunkId] = content;
+        this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
+      }
+    }
   }
 };
 

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

@@ -80,5 +80,12 @@ const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null
 };
+const renderMarkdown = content => content;
+const renderGFM = el => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach(block => {
+    block === null || block === void 0 ? void 0 : block.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};
 
-export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks };
+export { MOCK_CHUNK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_USER_PROMPT_MESSAGE, generateMockResponseChunks, renderGFM, renderMarkdown };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Tue, 24 Oct 2023 08:49:42 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Tue, 24 Oct 2023 08:49:43 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Tue, 24 Oct 2023 08:49:43 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 20 Oct 2023 08:03:38 GMT
+ * Generated on Tue, 24 Oct 2023 08:49:42 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 20 Oct 2023 08:03:38 GMT
+// Generated on Tue, 24 Oct 2023 08:49:43 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 20 Oct 2023 08:03:38 GMT
+// Generated on Tue, 24 Oct 2023 08:49:43 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.35.0",
+  "version": "66.35.2",
   "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.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",
+    "@storybook/addon-a11y": "7.5.1",
+    "@storybook/addon-docs": "7.5.1",
+    "@storybook/addon-essentials": "7.5.1",
+    "@storybook/addon-storyshots": "7.5.1",
+    "@storybook/addon-storyshots-puppeteer": "7.5.1",
+    "@storybook/addon-viewport": "7.5.1",
+    "@storybook/builder-webpack5": "7.5.1",
+    "@storybook/theming": "7.5.1",
+    "@storybook/vue": "7.5.1",
+    "@storybook/vue-webpack5": "7.5.1",
+    "@storybook/vue3": "7.5.1",
+    "@storybook/vue3-webpack5": "7.5.1",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -122,11 +122,11 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.3.1",
+    "cypress": "13.3.2",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.6",
+    "storybook": "7.5.1",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/charts/discrete_scatter/discrete_scatter.spec.js

@@ -1,8 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
+import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import DiscreteScatterChart from './discrete_scatter.vue';
 
 let mockChartInstance;
@@ -12,11 +14,21 @@ jest.mock('echarts', () => ({
 }));
 
 describe('column chart component', () => {
+  const mockData = {
+    x: '19 May',
+    y: 6.95,
+  };
+
+  const mockDataPixel = {
+    x: 1,
+    y: 2,
+  };
+
   const defaultChartProps = {
     xAxisTitle: 'x axis',
     yAxisTitle: 'y axis',
     xAxisType: 'category',
-    data: [['19 May', 6.95]],
+    data: [[mockData.x, mockData.y]],
   };
   let wrapper;
 
@@ -30,6 +42,7 @@ describe('column chart component', () => {
 
   beforeEach(() => {
     mockChartInstance = createMockChartInstance();
+    mockChartInstance.convertToPixel.mockReturnValue([mockDataPixel.x, mockDataPixel.y]);
   });
 
   describe('height', () => {
@@ -40,19 +53,121 @@ describe('column chart component', () => {
     });
   });
 
-  describe('disable-tooltip', () => {
-    it('is set to false by default', async () => {
+  describe('tooltip formatter', () => {
+    let onLabelChange;
+
+    beforeEach(async () => {
       createComponent();
 
       await findChart().vm.$emit('created', mockChartInstance);
+      onLabelChange = findChart().props('options').tooltip.formatter;
+    });
+
+    describe.each([
+      {
+        params: {
+          data: [mockData.x, mockData.y],
+        },
+        descr: 'when data is an array',
+      },
+      {
+        params: {
+          data: { value: [mockData.x, mockData.y] },
+        },
+        descr: 'when data is an object',
+      },
+    ])('$descr', ({ params }) => {
+      it('sets the popover content', async () => {
+        onLabelChange(params);
+        await nextTick();
 
-      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(true);
+        expect(mockChartInstance.convertToPixel).toHaveBeenCalledTimes(1);
+        expect(mockChartInstance.convertToPixel).toHaveBeenLastCalledWith('grid', [
+          mockData.x,
+          mockData.y,
+        ]);
+
+        expect(wrapper.findComponent(ChartTooltip).props('left')).toBe(`${mockDataPixel.x}px`);
+        expect(wrapper.findComponent(ChartTooltip).props('top')).toBe(`${mockDataPixel.y}px`);
+        expect(wrapper.findComponent(TooltipDefaultFormat).props('tooltipContent')).toEqual({
+          'y axis': { color: '', value: mockData.y },
+        });
+      });
     });
 
-    it('disables the tooltip', () => {
-      createComponent({ disableTooltip: true });
+    describe.each([
+      {
+        params: {},
+        descr: 'when data is missing',
+      },
+      {
+        params: {
+          data: [],
+        },
+        descr: 'when data is an empty array',
+      },
+      {
+        params: { data: 'foo' },
+        descr: 'when data is not an array',
+      },
+      {
+        params: {
+          data: { value: [] },
+        },
+        descr: 'when data.value is an empty array',
+      },
+      {
+        params: { data: { value: undefined } },
+        descr: 'when data.value is undefined',
+      },
+      {
+        params: { data: { value: 'foo' } },
+        descr: 'when data.value is not an array',
+      },
+    ])('$descr', ({ params }) => {
+      it('does not set the tooltip content', async () => {
+        onLabelChange(params);
+        await nextTick();
+
+        expect(mockChartInstance.convertToPixel).not.toHaveBeenCalled();
+        expect(wrapper.findComponent(ChartTooltip).props('left')).toBe('0');
+        expect(wrapper.findComponent(ChartTooltip).props('top')).toBe('0');
+        expect(wrapper.findComponent(TooltipDefaultFormat).props('tooltipContent')).toEqual({
+          'y axis': { color: '', value: undefined },
+        });
+      });
+    });
+  });
+
+  describe('disable-tooltip', () => {
+    describe('when false', () => {
+      beforeEach(async () => {
+        createComponent();
+        await findChart().vm.$emit('created', mockChartInstance);
+      });
+
+      it('renders the ChartTooltip component', async () => {
+        expect(wrapper.findComponent(ChartTooltip).exists()).toBe(true);
+      });
+
+      it('sets chart tooltip options', () => {
+        expect(findChart().props('options').tooltip).not.toBeUndefined();
+      });
+    });
+
+    describe('when true', () => {
+      beforeEach(async () => {
+        createComponent({ disableTooltip: true });
+        await findChart().vm.$emit('created', mockChartInstance);
+      });
+
+      it('does not render the ChartTooltip component', async () => {
+        expect(wrapper.findComponent(ChartTooltip).exists()).toBe(false);
+      });
 
-      expect(wrapper.findComponent(ChartTooltip).exists()).toBe(false);
+      it('does not set chart tooltip options', () => {
+        expect(findChart().props('options').tooltip).toBeUndefined();
+      });
     });
   });
 });

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -52,7 +52,7 @@ export default {
     disableTooltip: {
       type: Boolean,
       required: false,
-      default: () => false,
+      default: false,
     },
     /**
      * Sets the chart's height in pixels. Set to `"auto"` to use the height of the container.
@@ -103,9 +103,11 @@ export default {
         {},
         defaultChartOptions,
         {
-          tooltip: {
-            formatter: this.onLabelChange,
-          },
+          tooltip: this.disableTooltip
+            ? undefined
+            : {
+                formatter: this.onLabelChange,
+              },
           xAxis: {
             type: 'category',
             name: this.xAxisTitle,
@@ -142,7 +144,7 @@ export default {
   },
   methods: {
     defaultFormatTooltipText(params) {
-      const { data } = params;
+      const data = this.getChartData(params);
       const [title, content] = data;
       this.tooltipTitle = title;
       const seriesName = this.yAxisTitle;
@@ -166,7 +168,7 @@ export default {
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
 
-      const { data = [] } = params;
+      const data = this.getChartData(params);
 
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
@@ -177,6 +179,10 @@ export default {
         };
       }
     },
+    getChartData({ data }) {
+      const chartData = data?.value || data;
+      return Array.isArray(chartData) ? chartData : [];
+    },
   },
   HEIGHT_AUTO_CLASSES,
 };

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

@@ -1,10 +1,13 @@
-import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import {
+  MOCK_USER_PROMPT_MESSAGE,
+  MOCK_RESPONSE_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatConversation from './duo_chat_conversation.vue';
 import readme from './duo_chat_conversation.md';
 
 const defaultValue = (prop) => GlDuoChatConversation.props[prop].default;
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
 
 const generateProps = ({ messages = [], showDelimiter = defaultValue('showDelimiter') } = {}) => ({
   messages,

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

@@ -109,8 +109,9 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('hydrates the message with GLFM when mounting the component', () => {
+    it('hydrates the message with GLFM when mounting the component', async () => {
       createComponent();
+      await nextTick();
       expect(renderGFM).toHaveBeenCalled();
     });
 
@@ -327,6 +328,7 @@ describe('DuoChatMessage', () => {
           message: chunk1,
         },
       });
+      await nextTick();
       renderGFM.mockClear();
       expect(renderGFM).not.toHaveBeenCalled();
 
@@ -340,6 +342,33 @@ describe('DuoChatMessage', () => {
       expect(renderGFM).not.toHaveBeenCalled();
     });
 
+    it('does not re-render when chunk is received after final message', async () => {
+      const finalMessageContent = 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
+      await wrapper.setProps({
+        message: chunk1,
+      });
+      expect(findContent().text()).toBe(content1);
+
+      await wrapper.setProps({
+        message: {
+          ...MOCK_RESPONSE_MESSAGE,
+          content: finalMessageContent,
+          contentHtml: finalMessageContent,
+          chunkId: null,
+        },
+      });
+      expect(findContent().text()).toBe(finalMessageContent);
+
+      await wrapper.setProps({
+        message: chunk2,
+      });
+      expect(findContent().text()).toBe(finalMessageContent);
+    });
+
     it.each`
       content    | contentHtml | errors            | expectedContent
       ${'alpha'} | ${'beta'}   | ${['foo', 'bar']} | ${'beta'}

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

@@ -1,10 +1,12 @@
-import { MOCK_RESPONSE_MESSAGE, MOCK_USER_PROMPT_MESSAGE } from '../../mock_data';
+import {
+  MOCK_RESPONSE_MESSAGE,
+  MOCK_USER_PROMPT_MESSAGE,
+  renderGFM,
+  renderMarkdown,
+} from '../../mock_data';
 import GlDuoChatMessage from './duo_chat_message.vue';
 import readme from './duo_chat_message.md';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const generateProps = ({ message = MOCK_RESPONSE_MESSAGE } = {}) => ({
   message,
 });

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

@@ -1,4 +1,5 @@
 <script>
+import { nextTick } from 'vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
@@ -34,6 +35,7 @@ export default {
   data() {
     return {
       messageContent: '',
+      messageWatcher: null,
     };
   },
   computed: {
@@ -53,21 +55,8 @@ export default {
       );
     },
   },
-  watch: {
-    message: {
-      handler() {
-        const { chunkId, content } = this.message;
-        if (!chunkId) {
-          this.messageChunks = [];
-          this.messageContent = this.content;
-          this.renderGFM(this.$refs.content);
-        } else {
-          this.messageChunks[chunkId] = content;
-          this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
-        }
-      },
-      deep: true,
-    },
+  created() {
+    this.messageWatcher = this.$watch('message', this.messageUpdateHandler, { deep: true });
   },
   beforeCreate() {
     /**
@@ -81,7 +70,26 @@ export default {
     if (this.message.chunkId) {
       this.messageChunks[this.message.chunkId] = this.message.content;
     }
-    this.renderGFM(this.$refs.content);
+    this.hydrateContentWithGFM();
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+      this.renderGFM(this.$refs.content);
+    },
+    async messageUpdateHandler() {
+      const { chunkId, content } = this.message;
+      if (!chunkId) {
+        this.messageChunks = [];
+        this.messageContent = this.content;
+
+        this.messageWatcher();
+        this.hydrateContentWithGFM();
+      } else {
+        this.messageChunks[chunkId] = content;
+        this.messageContent = this.renderMarkdown(concatIndicesUntilEmpty(this.messageChunks));
+      }
+    },
   },
 };
 </script>

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

@@ -8,11 +8,10 @@ import {
   MOCK_RESPONSE_MESSAGE,
   MOCK_USER_PROMPT_MESSAGE,
   generateMockResponseChunks,
+  renderGFM,
+  renderMarkdown,
 } from './mock_data';
 
-const renderMarkdown = (content) => content;
-const renderGFM = () => {};
-
 const defaultValue = (prop) =>
   typeof GlDuoChat.props[prop].default === 'function'
     ? GlDuoChat.props[prop].default()

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

@@ -94,3 +94,11 @@ export const MOCK_USER_PROMPT_MESSAGE = {
   timestamp: '2021-04-21T12:00:00.000Z',
   extras: null,
 };
+
+export const renderMarkdown = (content) => content;
+export const renderGFM = (el) => {
+  const codeBlock = el.querySelectorAll('.markdown-code-block');
+  codeBlock.forEach((block) => {
+    block?.classList.add('gl-bg-purple-50', 'gl-p-3', 'gl-mb-3');
+  });
+};