@gitlab/ui 66.23.1 → 66.25.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 09:48:50 GMT
+ * Generated on Thu, 05 Oct 2023 10:55:11 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 09:48:50 GMT
+ * Generated on Thu, 05 Oct 2023 10:55:11 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 09:48:50 GMT
+ * Generated on Thu, 05 Oct 2023 10:55:11 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 09:48:50 GMT
+ * Generated on Thu, 05 Oct 2023 10:55:11 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 04 Oct 2023 09:48:50 GMT
+// Generated on Thu, 05 Oct 2023 10:55:11 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 04 Oct 2023 09:48:50 GMT
+// Generated on Thu, 05 Oct 2023 10:55:11 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.23.1",
+  "version": "66.25.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -0,0 +1 @@
+The Duo Chat loader. Is shown while waiting for the chat response.

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

@@ -0,0 +1,67 @@
+.duo-chat-loader {
+  @include gl-py-3;
+  @include gl-px-4;
+  @include gl-mb-4;
+  @include gl-rounded-lg;
+  @include gl-rounded-bottom-left-none;
+  @include gl-display-flex;
+  @include gl-text-gray-500;
+
+  .transition {
+    transition: width 0.5s ease;
+  }
+
+  .text-enter {
+    @include gl-opacity-0;
+  }
+
+  .text-enter-active {
+    transition: opacity 1s ease-in; // we intentionally overlap this transition with .text-leave-active by 200ms
+  }
+
+  .text-enter-to {
+    @include gl-opacity-10;
+  }
+
+  .text-leave {
+    @include gl-opacity-10;
+  }
+
+  .text-leave-active {
+    transition: opacity 0.7s linear;
+  }
+
+  .text-leave-to {
+    @include gl-opacity-0;
+  }
+
+  &__dot {
+    display: inline-block;
+    width: 0.3rem;
+    height: 0.3rem;
+    background-color: $gray-200;
+    border-radius: 100%;
+    animation: DuoChatLoading 1400ms ease-in-out infinite;
+    animation-fill-mode: both;
+  }
+
+  &__dot--1 {
+    animation-delay: -0.3s;
+  }
+
+  &__dot--2 {
+    animation-delay: -0.15s;
+  }
+}
+
+@keyframes DuoChatLoading {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,70 @@
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+import GlDuoChatLoader from './duo_chat_loader.vue';
+
+jest.useFakeTimers();
+
+describe('GlDuoChatLoader', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = mount(GlDuoChatLoader, {
+      propsData,
+    });
+  };
+
+  const transition = async () => {
+    jest.advanceTimersByTime(LOADING_TRANSITION_DURATION);
+    await nextTick();
+  };
+
+  const findTransitionText = () => wrapper.find('[data-testid="current-transition"]').text();
+  const findToolText = () => wrapper.find('[data-testid="tool"]');
+
+  describe('rendering', () => {
+    const defaultTool = GlDuoChatLoader.props.toolName.default;
+
+    it('displays a default tool', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(findToolText().text()).toBe(defaultTool);
+    });
+
+    it('shows the `toolName` when it is passed', async () => {
+      createComponent({
+        propsData: {
+          toolName: 'foo',
+        },
+      });
+      await nextTick();
+
+      expect(findToolText().text()).toBe('foo');
+      expect(findToolText().text()).not.toBe(defaultTool);
+    });
+
+    it('cycles through transition texts', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(findTransitionText()).toEqual('finding');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('working on');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('generating');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('producing');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('finding');
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+import GlDuoChatLoader from './duo_chat_loader.vue';
+import readme from './duo_chat_loader.md';
+
+const defaultValue = (prop) => GlDuoChatLoader.props[prop].default;
+
+const generateProps = ({ toolName = defaultValue('toolName') } = {}) => ({
+  toolName,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatLoader },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-loader :tool-name="toolName" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_loader',
+  component: GlDuoChatLoader,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,94 @@
+<script>
+import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+
+export const i18n = {
+  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
+  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
+  GITLAB_DUO: 'GitLab Duo',
+};
+
+export default {
+  name: 'GlDuoChatLoader',
+  components: {
+    GlSprintf,
+  },
+  i18n,
+  props: {
+    /**
+     * The message containing the name of the current AI tool working on the answer.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.GITLAB_DUO,
+    },
+  },
+  data() {
+    return {
+      loadingSequence: 0,
+      timeout: null,
+    };
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout);
+  },
+  mounted() {
+    this.computeTransitionWidth();
+    this.enter();
+  },
+  methods: {
+    computeTransitionWidth() {
+      const container = this.$refs.transition;
+      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
+      const { width, height } = active.getBoundingClientRect();
+      container.$el.style.width = `${width}px`;
+      container.$el.style.height = `${height}px`;
+    },
+    enter() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.loadingSequence =
+          (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
+        this.enter();
+      }, LOADING_TRANSITION_DURATION);
+    },
+    isCurrentTransition(index) {
+      return index === this.loadingSequence;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="duo-chat-loader">
+    <div class="gl-display-flex gl-align-items-center gl-mr-3">
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--1"></div>
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--2"></div>
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--3"></div>
+    </div>
+    <gl-sprintf :message="$options.i18n.LOADER_LOADING_MESSAGE">
+      <template #tool>
+        <strong class="gl-mr-2" data-testid="tool">{{ toolName }}</strong>
+      </template>
+      <template #transition>
+        <transition-group
+          ref="transition"
+          name="text"
+          class="transition gl-display-inline-block gl-mx-2"
+          @after-leave="computeTransitionWidth"
+        >
+          <span
+            v-for="(message, index) in $options.i18n.LOADER_LOADING_TRANSITIONS"
+            v-show="isCurrentTransition(index)"
+            :ref="isCurrentTransition(index) ? 'currentTransition' : ''"
+            :key="message"
+            :data-testid="isCurrentTransition(index) ? 'current-transition' : ''"
+            class="gl-white-space-nowrap"
+            >{{ message }}</span
+          >
+        </transition-group>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>

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

@@ -1,3 +1,5 @@
+export const LOADING_TRANSITION_DURATION = 7500;
+
 export const DOCUMENTATION_SOURCE_TYPES = {
   HANDBOOK: {
     value: 'handbook',

package/src/components/experimental/duo/user_feedback/user_feedback.md

@@ -5,7 +5,7 @@ the form data on submission.
 
 ## Custom button text
 
-The component allows to customize the button text, presented to the user.
+The component allows to customize the button text presented to the user.
 
 ```html
 <gl-duo-user-feedback feedback-link-text="Leave your custom feedback" />
@@ -13,9 +13,9 @@ The component allows to customize the button text, presented to the user.
 
 ## Linking to a separate feedback form
 
-The main goal of this component is to provide the advanced feedback form. However, it might not
-be necessary for all consumers. In such a case, the component allows to bypass the default
-form and link to an external feedback page/form.
+The main goal of this component is to provide an advanced feedback form. However, it might only
+be necessary for some consumers. In such a case, the component bypasses the default
+form and links to an external feedback page/form.
 
 ```html
 <gl-duo-user-feedback feedback-link-url="https://gitlab.com" />
@@ -29,8 +29,8 @@ This component emits the `feedback` event with all the options selected in the f
 <gl-duo-user-feedback @feedback="myEventTracker" />
 ```
 
-The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) coming from
-the underlying `FeedbackModal` component. Here's the example of a possible event:
+The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) from
+the underlying `FeedbackModal` component. Here's an example of a possible event:
 
 ```json
 {
@@ -38,3 +38,49 @@ the underlying `FeedbackModal` component. Here's the example of a possible event
   "extendedTextFeedback": "The answer was too long to understand"
 }
 ```
+
+## Using the `feedback-extra-fields` slot
+
+By default, the component renders one extra textarea field to gather additional feedback
+information from users. However, it may not be enough sometimes, and different use cases of
+this component might need to fine-tune the form to gather information most suitable for that
+or another use case. For this purpose, the component provides the `feedback-extra-fields`
+slot, which can override the default textarea with different fields/information.
+
+Note, however, that the content put into this slot will override the default textarea. So,
+if you want to append additional fields, instead of completely overriding the default textarea,
+you must copy the textarea field from the `DuoChatFeedbackModal` component into the slot.
+
+```html
+<gl-duo-user-feedback
+  :feedback-link-text="feedbackLinkText"
+  :feedback-link-url="feedbackLinkUrl"
+  @feedback="logEvent"
+>
+  <template #feedback-extra-fields>
+    <div class="gl-mb-5">
+      <gl-alert variant="info" :dismissible="false">
+        GitLab team members can not see your conversation. Please be as descriptive as possible.
+      </gl-alert>
+    </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>
+```

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

@@ -1,14 +1,18 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '../../../../index';
-import DuoChatFeedbackModal from './user_feedback_modal.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 = {} } = {}) => {
+  const createComponent = ({ props, data = {}, slots = {} } = {}) => {
     wrapper = shallowMount(UserFeedback, {
       data() {
         return data;
@@ -17,11 +21,15 @@ describe('UserFeedback', () => {
         eventName,
         ...props,
       },
+      stubs: {
+        FeedbackModal,
+      },
+      slots,
     });
   };
 
   const findButton = () => wrapper.findComponent(GlButton);
-  const findModal = () => wrapper.findComponent(DuoChatFeedbackModal);
+  const findModal = () => wrapper.findComponent(FeedbackModal);
 
   beforeEach(() => {
     createComponent();
@@ -77,4 +85,13 @@ describe('UserFeedback', () => {
       expect(findModal().exists()).toBe(false);
     });
   });
+
+  describe('slots', () => {
+    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,4 +1,5 @@
-import GlUserFeedback from './user_feedback.vue';
+import { GlAlert, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlDuoUserFeedback from './user_feedback.vue';
 import readme from './user_feedback.md';
 
 const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
@@ -6,8 +7,13 @@ const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
   feedbackLinkUrl,
 });
 
-const Template = (args, { argTypes }) => ({
-  components: { GlUserFeedback },
+export const Default = (args, { argTypes }) => ({
+  components: {
+    GlDuoUserFeedback,
+    GlAlert,
+    GlFormGroup,
+    GlFormTextarea,
+  },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -21,7 +27,7 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
     <div>
-      <gl-user-feedback
+      <gl-duo-user-feedback
         :feedback-link-text="feedbackLinkText"
         :feedback-link-url="feedbackLinkUrl"
         @feedback="logEvent"/>
@@ -29,13 +35,67 @@ const Template = (args, { argTypes }) => ({
     </div>
     `,
 });
-
-export const Default = Template.bind({});
 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">
+            <gl-alert variant="info" :dismissible="false">
+              GitLab team members can not see your conversation. Please be as descriptive as possible.
+            </gl-alert>
+          </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/user-feedback',
-  component: GlUserFeedback,
+  title: 'experimental/duo/duo-user-feedback',
+  component: GlDuoUserFeedback,
   parameters: {
     storyshots: { disable: true },
     docs: {

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -64,6 +64,7 @@ export default {
         variant="link"
         target="_blank"
         :href="feedbackLinkUrl"
+        button-text-classes="gl-white-space-normal! gl-text-left"
         @click="shouldRenderModal && $refs.feedbackModal.show()"
         >{{ feedbackLinkText }}</gl-button
       >
@@ -71,6 +72,11 @@ export default {
         {{ $options.i18n.FEEDBACK_THANKS }}
       </span>
     </div>
-    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify" />
+    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
+      <template #feedback-extra-fields>
+        <!-- @slot The addition Feedback form fields. -->
+        <slot name="feedback-extra-fields"></slot>
+      </template>
+    </feedback-modal>
   </div>
 </template>

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

@@ -2,6 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import { GlModal, GlFormCheckboxGroup, GlFormCheckbox, GlFormTextarea } from '../../../../index';
 import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
 
+const DummyComponent = {
+  template: '<p>dummy</p>',
+};
+
 describe('FeedbackModal', () => {
   let wrapper;
 
@@ -15,8 +19,9 @@ describe('FeedbackModal', () => {
       .at(index)
       .vm.$emit('input', [feedbackOptions[index].value]);
   };
-  const createComponent = () => {
+  const createComponent = (options = {}) => {
     wrapper = shallowMount(FeedbackModal, {
+      ...options,
       stubs: {
         GlModal,
         GlFormCheckboxGroup,
@@ -58,4 +63,16 @@ describe('FeedbackModal', () => {
       expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
     });
   });
+
+  describe('slots', () => {
+    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);
+    });
+  });
 });

package/src/components/experimental/duo/user_feedback/user_feedback_modal.vue

@@ -114,11 +114,15 @@ export default {
         :options="$options.feedbackOptions"
       />
     </gl-form-group>
-    <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
-      <gl-form-textarea
-        v-model="extendedFeedback"
-        :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
-      />
-    </gl-form-group>
+
+    <!-- @slot The addition Feedback form fields. -->
+    <slot name="feedback-extra-fields">
+      <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
+        <gl-form-textarea
+          v-model="extendedFeedback"
+          :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
+        />
+      </gl-form-group>
+    </slot>
   </gl-modal>
 </template>

package/src/scss/components.scss

@@ -3,6 +3,7 @@
 // @import '../components/base/dropdown/dropdown'
 //
 // ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
 @import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';
 @import '../components/charts/gauge/gauge';