@gitlab/ui 76.1.0 → 77.1.0

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

@@ -1,5 +1,7 @@
 <script>
 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';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
@@ -7,6 +9,18 @@ import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_s
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
 import { CopyCodeElement } from './copy_code_element';
 
+export const i18n = {
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo Chat',
+    ALERT_TEXT:
+      'GitLab team members cannot view your conversation. Please be as descriptive as possible.',
+    DID_WHAT: 'What were you doing?',
+    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.',
+  },
+};
+
 const concatUntilEmpty = (arr) => {
   if (!arr) return '';
 
@@ -25,10 +39,18 @@ export default {
   components: {
     DocumentationSources,
     GlDuoUserFeedback,
+    GlFormGroup,
+    GlFormTextarea,
   },
   directives: {
     SafeHtml,
   },
+  provide() {
+    return {
+      modalTitle: i18n.MODAL.TITLE,
+      modalAlertText: i18n.MODAL.ALERT_TEXT,
+    };
+  },
   inject: {
     // Note, we likely might move away from Provide/Inject for this
     // and only ship the versions that are currently in the default
@@ -54,6 +76,12 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      didWhat: '',
+      improveWhat: '',
+    };
+  },
   computed: {
     isAssistantMessage() {
       return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
@@ -92,7 +120,15 @@ export default {
         this.renderGFM(this.$refs.content);
       }
     },
+    logEvent(e) {
+      this.$emit('track-feedback', {
+        ...e,
+        didWhat: this.didWhat,
+        improveWhat: this.improveWhat,
+      });
+    },
   },
+  i18n,
 };
 </script>
 <template>
@@ -110,7 +146,23 @@ export default {
       <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="$emit('track-feedback', $event)" />
+        <gl-duo-user-feedback
+          :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>

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

@@ -467,7 +467,7 @@ export default {
             <gl-card
               v-if="shouldShowSlashCommands"
               ref="commands"
-              class="slash-commands gl-absolute! gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md"
+              class="slash-commands !gl-absolute gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md"
               body-class="gl-p-2!"
             >
               <gl-dropdown-item
@@ -504,7 +504,7 @@ export default {
               icon="paper-airplane"
               category="primary"
               variant="confirm"
-              class="gl-absolute! gl-bottom-2 gl-right-2 gl-rounded-base!"
+              class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
               type="submit"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
               :disabled="isLoading"

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

@@ -58,11 +58,6 @@ you must copy the textarea field from the `DuoChatFeedbackModal` component into
   @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."

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

@@ -31,11 +31,11 @@ describe('UserFeedback', () => {
   const findButton = () => wrapper.findComponent(GlButton);
   const findModal = () => wrapper.findComponent(FeedbackModal);
 
-  beforeEach(() => {
-    createComponent();
-  });
-
   describe('rendering with no feedback registered', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders a button to provide feedback', () => {
       expect(findButton().exists()).toBe(true);
     });
@@ -65,6 +65,10 @@ describe('UserFeedback', () => {
   });
 
   describe('event handling', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     const passedFeedback = { feedbackOptions: ['helpful'], extendedFeedback: 'Foo bar' };
 
     it('emits the event, containing the form data, when modal emits', () => {
@@ -87,6 +91,10 @@ describe('UserFeedback', () => {
   });
 
   describe('slots', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders the `feedback-extra-fields` slot', () => {
       expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
       wrapper.destroy();

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

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import GlModal from '../../../base/modal/modal.vue';
+import GlAlert from '../../../base/alert/alert.vue';
 import GlFormCheckbox from '../../../base/form/form_checkbox/form_checkbox.vue';
 import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
@@ -11,7 +12,6 @@ const DummyComponent = {
 
 describe('FeedbackModal', () => {
   let wrapper;
-
   const findModal = () => wrapper.findComponent(GlModal);
   const findOptions = () => wrapper.findComponent('[data-testid="feedback-options"]');
   const findOptionsCheckboxes = () => findOptions().findAllComponents(GlFormCheckbox);
@@ -29,26 +29,33 @@ describe('FeedbackModal', () => {
         GlModal,
         GlFormCheckboxGroup,
       },
+      provide: options.injections,
     });
   };
 
-  beforeEach(() => {
-    createComponent();
-  });
+  describe('inputs', () => {
+    beforeEach(() => {
+      createComponent();
+    });
 
-  it('renders the feedback options', () => {
-    const checkboxes = findOptionsCheckboxes();
-    feedbackOptions.forEach((option, index) => {
-      expect(checkboxes.at(index).text()).toBe(option.text);
-      expect(checkboxes.at(index).attributes('value')).toBe(option.value);
+    it('renders the feedback options', () => {
+      const checkboxes = findOptionsCheckboxes();
+      feedbackOptions.forEach((option, index) => {
+        expect(checkboxes.at(index).text()).toBe(option.text);
+        expect(checkboxes.at(index).attributes('value')).toBe(option.value);
+      });
     });
-  });
 
-  it('renders the textarea field for additional feedback', () => {
-    expect(findTextarea().exists()).toBe(true);
+    it('renders the textarea field for additional feedback', () => {
+      expect(findTextarea().exists()).toBe(true);
+    });
   });
 
   describe('interaction', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('emits the feedback event when the submit button is clicked', () => {
       selectOption();
       findModal().vm.$emit('primary');
@@ -68,6 +75,10 @@ describe('FeedbackModal', () => {
   });
 
   describe('slots', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     it('renders the `feedback-extra-fields` slot with default content', () => {
       expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
       expect(findTextarea().exists()).toBe(true);
@@ -78,4 +89,30 @@ describe('FeedbackModal', () => {
       expect(findTextarea().exists()).toBe(false);
     });
   });
+
+  describe('injections', () => {
+    it('should pass modalTitle when set as injection', () => {
+      const customTitle = 'Custom Feedback Title';
+      createComponent({ injections: { modalTitle: customTitle } });
+      expect(findModal().props('title')).toBe(customTitle);
+    });
+
+    it('should pass modalTitle default when injection not set', () => {
+      createComponent();
+      expect(findModal().props('title')).toBe('Give feedback on GitLab Duo');
+    });
+
+    it('should pass modalAlert when set as injection', () => {
+      const customAlert = 'Custom Alert Message';
+      createComponent({ injections: { modalAlert: customAlert } });
+      expect(wrapper.findComponent(GlAlert).text()).toBe(customAlert);
+    });
+
+    it('should render modalAlert default when injection not set', () => {
+      createComponent();
+      expect(wrapper.findComponent(GlAlert).text()).toBe(
+        'GitLab team members cannot see the AI content. Please be as descriptive as possible.'
+      );
+    });
+  });
 });

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

@@ -1,53 +1,61 @@
 <script>
 import GlModal from '../../../base/modal/modal.vue';
+import GlAlert from '../../../base/alert/alert.vue';
 import GlFormGroup from '../../../base/form/form_group/form_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 
 export const i18n = {
-  MODAL_TITLE: 'Give feedback on AI content',
-  MODAL_DESCRIPTION:
-    'To help improve the quality of the content, send your feedback to GitLab team members.',
-  MODAL_OPTIONS_LABEL: 'How was the AI content?',
-  MODAL_MORE_LABEL: 'More information',
-  MODAL_MORE_PLACEHOLDER: 'How could the content be improved?',
-  MODAL_FEEDBACK_OPTIONS: {
-    helpful: 'Helpful',
-    unhelpful: 'Unhelpful or irrelevant',
-    incorrect: 'Factually incorrect',
-    long: 'Too long',
-    abuse: 'Abusive or offensive',
-    other: 'Something else',
-  },
-  MODAL_ACTIONS: {
-    submit: 'Submit',
-    cancel: 'Cancel',
+  MODAL: {
+    TITLE: 'Give feedback on GitLab Duo',
+    DESCRIPTION: 'To help improve GitLab Duo, send your feeback to GitLab team members.',
+    ALERT: 'GitLab team members cannot see the AI content. Please be as descriptive as possible.',
+    OPTIONS_LABEL: 'How could the AI content be improved?',
+    SITUATION_DESCRIPTION_LABEL: 'What were you doing?',
+    SITUATION_DESCRIPTION_PLACEHOLDER:
+      'The situation in which you interacted with GitLab Duo Chat.',
+    IMPROVEMENT_SUGGESTION_LABEL: 'How could the response be improved?',
+    IMPROVEMENT_SUGGESTION_PLACEHOLDER: 'How the response might better meet your needs.',
+    MORE_LABEL: 'More information',
+    MORE_PLACEHOLDER: 'How could the content be improved?',
+    FEEDBACK_OPTIONS: {
+      helpful: 'Helpful',
+      unhelpful: 'Unhelpful or irrelevant',
+      incorrect: 'Factually incorrect',
+      long: 'Too long',
+      abuse: 'Abusive or offensive',
+      other: 'Something else',
+    },
+    ACTIONS: {
+      submit: 'Submit',
+      cancel: 'Cancel',
+    },
   },
 };
 
 export const feedbackOptions = [
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.helpful,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.helpful,
     value: 'helpful',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.unhelpful,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.unhelpful,
     value: 'unhelpful',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.incorrect,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.incorrect,
     value: 'incorrect',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.long,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.long,
     value: 'long',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.abuse,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.abuse,
     value: 'abuse',
   },
   {
-    text: i18n.MODAL_FEEDBACK_OPTIONS.other,
+    text: i18n.MODAL.FEEDBACK_OPTIONS.other,
     value: 'other',
   },
 ];
@@ -56,10 +64,19 @@ export default {
   name: 'DuoChatFeedbackModal',
   components: {
     GlModal,
+    GlAlert,
     GlFormCheckboxGroup,
     GlFormGroup,
     GlFormTextarea,
   },
+  inject: {
+    modalTitle: {
+      default: i18n.MODAL.TITLE,
+    },
+    modalAlert: {
+      default: i18n.MODAL.ALERT,
+    },
+  },
   data() {
     return {
       selectedFeedbackOptions: [],
@@ -84,10 +101,10 @@ export default {
   },
   actions: {
     primary: {
-      text: i18n.MODAL_ACTIONS.submit,
+      text: i18n.MODAL.ACTIONS.submit,
     },
     cancel: {
-      text: i18n.MODAL_ACTIONS.cancel,
+      text: i18n.MODAL.ACTIONS.cancel,
     },
   },
   feedbackOptions,
@@ -98,7 +115,7 @@ export default {
   <gl-modal
     ref="feedbackModal"
     modal-id="feedbackModal"
-    :title="$options.i18n.MODAL_TITLE"
+    :title="modalTitle"
     :action-primary="$options.actions.primary"
     :action-cancel="$options.actions.cancel"
     :visible="false"
@@ -106,9 +123,9 @@ export default {
     @primary="onFeedbackSubmit"
     @canceled="onFeedbackCanceled"
   >
-    <p>{{ $options.i18n.MODAL_DESCRIPTION }}</p>
+    <p>{{ $options.i18n.MODAL.DESCRIPTION }}</p>
     <gl-form-group
-      :label="$options.i18n.MODAL_OPTIONS_LABEL"
+      :label="$options.i18n.MODAL.OPTIONS_LABEL"
       :optional="false"
       data-testid="feedback-options"
     >
@@ -117,13 +134,13 @@ export default {
         :options="$options.feedbackOptions"
       />
     </gl-form-group>
-
+    <gl-alert class="gl-mb-5" :dismissible="false">{{ modalAlert }}</gl-alert>
     <!-- @slot The addition Feedback form fields. -->
     <slot name="feedback-extra-fields">
-      <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
+      <gl-form-group :label="$options.i18n.MODAL.MORE_LABEL" optional>
         <gl-form-textarea
           v-model="extendedFeedback"
-          :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
+          :placeholder="$options.i18n.MODAL.MORE_PLACEHOLDER"
         />
       </gl-form-group>
     </slot>

package/src/scss/tailwind.css

@@ -0,0 +1 @@
+@tailwind utilities;