@gitlab/ui 79.1.1 → 79.2.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:20 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:21 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:21 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 14:36:20 GMT
+ * Generated on Wed, 24 Apr 2024 16:36:49 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 Wed, 24 Apr 2024 14:36:21 GMT
+// Generated on Wed, 24 Apr 2024 16:36:49 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 Wed, 24 Apr 2024 14:36:20 GMT
+// Generated on Wed, 24 Apr 2024 16:36:49 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/dist/utils/utils.js

@@ -194,4 +194,22 @@ function filterVisible(els) {
   return (els || []).filter(el => isVisible(el));
 }
 
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };
+/**
+ * Given an element, returns a Rect object
+ * with top and bottom boundaries removed.
+ */
+function getHorizontalBoundingClientRect(el) {
+  const rect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+  if (rect) {
+    return {
+      x: rect.x,
+      width: rect.width,
+      y: 0,
+      // top of the document
+      height: document.documentElement.clientHeight // bottom of the document
+    };
+  }
+  return null;
+}
+
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, getHorizontalBoundingClientRect, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "79.1.1",
+  "version": "79.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -116,15 +116,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: document.querySelector('main'),
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: { x: 0, y: 0, width: 0, height: 0 },
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
 
         document.body.innerHTML = '';
       });
@@ -141,15 +142,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for center-aligned menu', async () => {
@@ -164,15 +166,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: undefined,
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom', 'top'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: undefined,
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom', 'top'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for right-aligned menu', async () => {
@@ -187,15 +190,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'end',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'end',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        });
       });
 
       it('initializes Floating UI with reference and floating elements and config for `right-start` aligned menu', async () => {
@@ -210,15 +214,16 @@ describe('base dropdown', () => {
             strategy: 'absolute',
             middleware: [
               offset({ mainAxis: DEFAULT_OFFSET }),
-              autoPlacement({
-                alignment: 'start',
-                boundary: 'clippingAncestors',
-                allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
-              }),
+              autoPlacement(expect.any(Function)),
               shift(),
             ],
           }
         );
+        expect(autoPlacement.mock.calls[0][0]()).toEqual({
+          alignment: 'start',
+          boundary: 'clippingAncestors',
+          allowedPlacements: ['right-start', 'right-end', 'left-start', 'left-end'],
+        });
       });
 
       it("passes custom offset to Floating UI's middleware", async () => {
@@ -235,7 +240,7 @@ describe('base dropdown', () => {
           {
             placement: 'bottom-end',
             strategy: 'absolute',
-            middleware: [offset(customOffset), autoPlacement(expect.any(Object)), shift()],
+            middleware: [offset(customOffset), autoPlacement(expect.any(Function)), shift()],
           }
         );
       });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -9,7 +9,7 @@ import {
   dropdownVariantOptions,
 } from '../../../../utils/constants';
 import {
-  GL_DROPDOWN_BOUNDARY_SELECTOR,
+  GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR,
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
@@ -21,7 +21,12 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
-import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
+import {
+  logWarning,
+  isElementTabbable,
+  isElementFocusable,
+  getHorizontalBoundingClientRect,
+} from '../../../../utils/utils';
 
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -271,10 +276,15 @@ export default {
         strategy: this.positioningStrategy,
         middleware: [
           offset(this.offset),
-          autoPlacement({
-            alignment,
-            boundary: this.$el.closest(GL_DROPDOWN_BOUNDARY_SELECTOR) || 'clippingAncestors',
-            allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+          autoPlacement(() => {
+            const autoHorizontalBoundary = getHorizontalBoundingClientRect(
+              this.$el.closest(GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR)
+            );
+            return {
+              alignment,
+              boundary: autoHorizontalBoundary || 'clippingAncestors',
+              allowedPlacements: dropdownAllowedAutoPlacements[this.placement],
+            };
           }),
           shift(),
           size({

package/src/components/base/new_dropdowns/constants.js

@@ -1,5 +1,5 @@
 // base dropdown events
-export const GL_DROPDOWN_BOUNDARY_SELECTOR = 'main';
+export const GL_DROPDOWN_HORIZONTAL_BOUNDARY_SELECTOR = 'main';
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';

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

@@ -1,10 +1,15 @@
 .duo-chat-message {
   max-width: 90%;
+  position: relative;
 
   code {
     @include gl-bg-gray-100;
   }
 
+  pre.code {
+    @include gl-bg-white;
+  }
+
   pre code {
     @include gl-font-sm;
     @include gl-line-height-1;
@@ -30,4 +35,13 @@
       @include gl-opacity-10;
     }
   }
-}
+
+  .has-error {
+    margin-left: $gl-spacing-scale-6;
+  }
+
+  .error-icon {
+    top: 14px;
+    position: absolute;
+  }
+}

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

@@ -1,6 +1,7 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
+import GlIcon from '../../../../../base/icon/icon.vue';
 import {
   MOCK_USER_PROMPT_MESSAGE,
   MOCK_RESPONSE_MESSAGE,
@@ -12,10 +13,13 @@ import GlDuoChatMessage from './duo_chat_message.vue';
 describe('DuoChatMessage', () => {
   let wrapper;
 
+  const findContentWrapper = () => wrapper.findComponent({ ref: 'content-wrapper' });
   const findContent = () => wrapper.findComponent({ ref: 'content' });
+  const findErrorMessage = () => wrapper.findComponent({ ref: 'error-message' });
   const findDocumentSources = () => wrapper.findComponent(DocumentationSources);
   const findUserFeedback = () => wrapper.findComponent(GlDuoUserFeedback);
   const findCopyCodeButton = () => wrapper.find('copy-code');
+  const findErrorIcon = () => wrapper.findComponent(GlIcon);
   const mockMarkdownContent = 'foo **bar**';
 
   let renderMarkdown;
@@ -82,6 +86,10 @@ describe('DuoChatMessage', () => {
     it('does not render the user feedback component', () => {
       expect(findUserFeedback().exists()).toBe(false);
     });
+
+    it('does not render the error icon', () => {
+      expect(findErrorIcon().exists()).toBe(false);
+    });
   });
 
   describe('rendering with assistant message', () => {
@@ -100,6 +108,10 @@ describe('DuoChatMessage', () => {
       expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
     });
 
+    it('does not render the error icon', () => {
+      expect(findErrorIcon().exists()).toBe(false);
+    });
+
     it.each([null, undefined, ''])(
       'does not render sources component when `sources` is %s',
       (sources) => {
@@ -139,7 +151,19 @@ describe('DuoChatMessage', () => {
   });
 
   describe('message output', () => {
-    it('outputs errors if they are present', async () => {
+    it('renders the warning icon when message has errors', () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          errors: ['foo'],
+        },
+      });
+      expect(findErrorIcon().exists()).toBe(true);
+      expect(findErrorMessage().text()).toBe('foo');
+      expect(findContentWrapper().classes()).toContain('has-error');
+    });
+
+    it('outputs errors as icon if they are present', async () => {
       const errors = ['error1', 'error2', 'error3'];
 
       createComponent({
@@ -147,15 +171,30 @@ describe('DuoChatMessage', () => {
           ...MOCK_USER_PROMPT_MESSAGE,
           errors,
           contentHtml: 'fooHtml barHtml',
+          content: 'foo bar',
+          chunks: ['a', 'b', 'c'],
         },
       });
 
       await nextTick();
 
-      const contentText = findContent().text();
-      expect(contentText).toContain(errors[0]);
-      expect(contentText).toContain(errors[1]);
-      expect(contentText).toContain(errors[2]);
+      const errorMessage = findErrorMessage().text();
+      expect(errorMessage).toContain(errors[0]);
+      expect(errorMessage).toContain(errors[1]);
+      expect(errorMessage).toContain(errors[2]);
+    });
+
+    it('outputs errors if message has no content', async () => {
+      createComponent({
+        message: {
+          ...MOCK_USER_PROMPT_MESSAGE,
+          contentHtml: '',
+          content: '',
+          errors: ['error'],
+        },
+      });
+      await nextTick();
+      expect(findErrorMessage().text()).toBe('error');
     });
 
     it('outputs contentHtml if it is present', async () => {
@@ -216,23 +255,6 @@ describe('DuoChatMessage', () => {
       expect(renderGFM).toHaveBeenCalled();
     });
 
-    it('sanitizes html produced by errors', async () => {
-      createComponent({
-        options: {
-          provide: null,
-        },
-        message: {
-          ...MOCK_USER_PROMPT_MESSAGE,
-          errors: ['[click here](javascript:prompt(1))'],
-          contentHtml: undefined,
-          content: '',
-        },
-      });
-
-      await nextTick();
-      expect(findContent().html()).toContain('<p><a>click here</a></p>');
-    });
-
     it('sanitizes html produced by content', async () => {
       createComponent({
         options: {
@@ -339,27 +361,11 @@ describe('DuoChatMessage', () => {
             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();
+        expect(findContent().exists()).toBe(false);
 
-      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(findErrorMessage().text()).toBe('error');
+        expect(findErrorIcon().exists()).toBe(true);
       });
 
       it('hydrates the output message with GLFM if its not a chunk', async () => {
@@ -479,7 +485,7 @@ describe('DuoChatMessage', () => {
 
         // 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
+        // See https://docs.gitlab.com/ee/devoutputs errors if message has no contentelopment/fe_guide/style/vue.html#setting-component-state
         await wrapper.setProps({
           message: CHUNK2,
         });
@@ -519,8 +525,8 @@ describe('DuoChatMessage', () => {
               errors,
             },
           });
-          expect(renderGFM).toHaveBeenCalled();
-          expect(findContent().text()).toBe(expectedContent);
+
+          expect(findContentWrapper().text()).toBe(expectedContent);
         }
       );
     });

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

@@ -33,6 +33,14 @@ Response.args = generateProps({
   message: MOCK_RESPONSE_MESSAGE,
 });
 
+export const ErrorResponse = Template.bind({});
+ErrorResponse.args = generateProps({
+  message: {
+    ...MOCK_RESPONSE_MESSAGE,
+    errors: ['Error: Whatever you see is wrong'],
+  },
+});
+
 export default {
   title: 'experimental/duo/chat/duo-chat-message',
   component: GlDuoChatMessage,

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

@@ -1,4 +1,6 @@
 <script>
+import GlIcon from '../../../../../base/icon/icon.vue';
+import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
@@ -19,11 +21,13 @@ export const i18n = {
     INTERACTION: 'The situation in which you interacted with GitLab Duo Chat.',
     IMPROVE_WHAT: 'How could the response be improved?',
     BETTER_RESPONSE: 'How the response might better meet your needs.',
+    MESSAGE_ERROR: 'Error sending the message',
   },
 };
 
 export default {
   name: 'GlDuoChatMessage',
+  i18n,
   safeHtmlConfigExtension: {
     ADD_TAGS: ['copy-code'],
   },
@@ -32,9 +36,11 @@ export default {
     GlDuoUserFeedback,
     GlFormGroup,
     GlFormTextarea,
+    GlIcon,
   },
   directives: {
     SafeHtml,
+    GlTooltip: GlTooltipDirective,
   },
   provide() {
     return {
@@ -92,9 +98,6 @@ export default {
       return this.message.extras?.hasFeedback;
     },
     defaultContent() {
-      if (this.message.errors.length > 0)
-        return this.renderMarkdown(this.message.errors.join('; '));
-
       if (this.message.contentHtml) {
         return this.message.contentHtml;
       }
@@ -105,8 +108,13 @@ export default {
       if (this.isAssistantMessage && this.isChunk) {
         return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
       }
+
       return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
     },
+
+    error() {
+      return Boolean(this.message?.errors?.length) && this.message.errors.join('; ');
+    },
   },
   beforeCreate() {
     if (!customElements.get('copy-code')) {
@@ -142,7 +150,7 @@ export default {
       }
     },
     hydrateContentWithGFM() {
-      if (!this.isChunk) {
+      if (!this.isChunk && this.$refs.content) {
         this.$nextTick(this.renderGFM(this.$refs.content));
       }
     },
@@ -161,7 +169,6 @@ export default {
       }
     },
   },
-  i18n,
 };
 </script>
 <template>
@@ -171,33 +178,50 @@ export default {
       'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': isUserMessage,
       'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
         isAssistantMessage,
+      'gl-bg-red-50 gl-border-none!': error,
     }"
   >
-    <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
+    <gl-icon
+      v-if="error"
+      :aria-label="$options.i18n.MESSAGE_ERROR"
+      name="status_warning_borderless"
+      :size="16"
+      class="gl-text-red-600 gl-border gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon"
+      data-testid="error"
+    />
+    <div ref="content-wrapper" :class="{ 'has-error': error }">
+      <div v-if="error" ref="error-message" class="error-message">{{ error }}</div>
+      <div v-else>
+        <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
 
-    <template v-if="isAssistantMessage">
-      <documentation-sources v-if="sources" :sources="sources" />
+        <template v-if="isAssistantMessage">
+          <documentation-sources v-if="sources" :sources="sources" />
 
-      <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
-        <gl-duo-user-feedback
-          :feedback-received="hasFeedback"
-          :modal-title="$options.i18n.MODAL.TITLE"
-          :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
-          @feedback="logEvent"
-        >
-          <template #feedback-extra-fields>
-            <gl-form-group :label="$options.i18n.MODAL.DID_WHAT" optional>
-              <gl-form-textarea v-model="didWhat" :placeholder="$options.i18n.MODAL.INTERACTION" />
-            </gl-form-group>
-            <gl-form-group :label="$options.i18n.MODAL.IMPROVE_WHAT" optional>
-              <gl-form-textarea
-                v-model="improveWhat"
-                :placeholder="$options.i18n.MODAL.BETTER_RESPONSE"
-              />
-            </gl-form-group>
-          </template>
-        </gl-duo-user-feedback>
+          <div class="gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback">
+            <gl-duo-user-feedback
+              :feedback-received="hasFeedback"
+              :modal-title="$options.i18n.MODAL.TITLE"
+              :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
+              @feedback="logEvent"
+            >
+              <template #feedback-extra-fields>
+                <gl-form-group :label="$options.i18n.MODAL.DID_WHAT" optional>
+                  <gl-form-textarea
+                    v-model="didWhat"
+                    :placeholder="$options.i18n.MODAL.INTERACTION"
+                  />
+                </gl-form-group>
+                <gl-form-group :label="$options.i18n.MODAL.IMPROVE_WHAT" optional>
+                  <gl-form-textarea
+                    v-model="improveWhat"
+                    :placeholder="$options.i18n.MODAL.BETTER_RESPONSE"
+                  />
+                </gl-form-group>
+              </template>
+            </gl-duo-user-feedback>
+          </div>
+        </template>
       </div>
-    </template>
+    </div>
   </div>
 </template>

package/src/utils/utils.js

@@ -204,3 +204,21 @@ export function stopEvent(
 export function filterVisible(els) {
   return (els || []).filter((el) => isVisible(el));
 }
+
+/**
+ * Given an element, returns a Rect object
+ * with top and bottom boundaries removed.
+ */
+export function getHorizontalBoundingClientRect(el) {
+  const rect = el?.getBoundingClientRect();
+
+  if (rect) {
+    return {
+      x: rect.x,
+      width: rect.width,
+      y: 0, // top of the document
+      height: document.documentElement.clientHeight, // bottom of the document
+    };
+  }
+  return null;
+}