@gitlab/ui 77.7.0 → 78.0.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [78.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.7.0...v78.0.0) (2024-03-05)
+
+
+### Features
+
+* **GlDuoChat:** refactor hasFeedback to rely on props ([97d1664](https://gitlab.com/gitlab-org/gitlab-ui/commit/97d166494f7af33f36779863fedc8084ea3254fe))
+
+
+### BREAKING CHANGES
+
+* **GlDuoChat:** This commit refactors the
+GlDuoChat Feedback indicator on every message
+to use the information coming in from props
+not from localState.
+
 # [77.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v77.6.0...v77.7.0) (2024-03-04)
 
 

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

@@ -86,6 +86,10 @@ var script = {
       var _this$message$extras;
       return (_this$message$extras = this.message.extras) === null || _this$message$extras === void 0 ? void 0 : _this$message$extras.sources;
     },
+    hasFeedback() {
+      var _this$message$extras2;
+      return (_this$message$extras2 = this.message.extras) === null || _this$message$extras2 === void 0 ? void 0 : _this$message$extras2.hasFeedback;
+    },
     messageContent() {
       if (this.message.errors.length > 0) return this.renderMarkdown(this.message.errors.join('; '));
       if (this.message.contentHtml) {
@@ -115,7 +119,8 @@ var script = {
       this.$emit('track-feedback', {
         ...e,
         didWhat: this.didWhat,
-        improveWhat: this.improveWhat
+        improveWhat: this.improveWhat,
+        message: this.message
       });
     }
   },
@@ -130,7 +135,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': _vm.isUserMessage,
     'gl-rounded-bottom-left-none gl-text-gray-900 gl-bg-white gl-border-1 gl-border-solid gl-border-gray-50':
       _vm.isAssistantMessage,
-  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)};
+  }},[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-flex-end gl-mt-4 duo-chat-message-feedback"},[_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)})],1)]:_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/user_feedback/user_feedback.js

@@ -13,6 +13,14 @@ var script = {
     FeedbackModal
   },
   props: {
+    /**
+     * Whether the message already has gotten feedback
+     */
+    feedbackReceived: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /**
      * The text to be displayed as the feedback link/button.
      */
@@ -31,11 +39,6 @@ var script = {
       default: ''
     }
   },
-  data() {
-    return {
-      feedbackReceived: false
-    };
-  },
   computed: {
     shouldRenderModal() {
       return !this.feedbackReceived && !this.feedbackLinkUrl;
@@ -48,7 +51,6 @@ var script = {
        * @param {*} event An event, containing the feedback choices and the extended feedback text.
        */
       this.$emit('feedback', event);
-      this.feedbackReceived = true;
     }
   },
   i18n

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Mar 2024 19:50:55 GMT
+ * Generated on Tue, 05 Mar 2024 10:22:05 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Mar 2024 19:50:55 GMT
+ * Generated on Tue, 05 Mar 2024 10:22:05 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Mar 2024 19:50:55 GMT
+ * Generated on Tue, 05 Mar 2024 10:22:05 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Mar 2024 19:50:55 GMT
+ * Generated on Tue, 05 Mar 2024 10:22:05 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 Mon, 04 Mar 2024 19:50:55 GMT
+// Generated on Tue, 05 Mar 2024 10:22:06 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 Mon, 04 Mar 2024 19:50:55 GMT
+// Generated on Tue, 05 Mar 2024 10:22:05 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

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

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

@@ -119,6 +119,7 @@ describe('DuoChatMessage', () => {
             extendedTextFeedback: 'exampleText',
             didWhat: '',
             improveWhat: '',
+            message: MOCK_RESPONSE_MESSAGE,
           },
         ],
       ]);

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

@@ -92,6 +92,9 @@ export default {
     sources() {
       return this.message.extras?.sources;
     },
+    hasFeedback() {
+      return this.message.extras?.hasFeedback;
+    },
     messageContent() {
       if (this.message.errors.length > 0)
         return this.renderMarkdown(this.message.errors.join('; '));
@@ -125,6 +128,7 @@ export default {
         ...e,
         didWhat: this.didWhat,
         improveWhat: this.improveWhat,
+        message: this.message,
       });
     },
   },
@@ -147,6 +151,7 @@ export default {
 
       <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"

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

@@ -1,4 +1,3 @@
-import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlButton from '../../../base/button/button.vue';
 import FeedbackModal from './user_feedback_modal.vue';
@@ -65,27 +64,23 @@ 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', () => {
+      createComponent();
       findModal().vm.$emit('feedback-submitted', passedFeedback);
       expect(wrapper.emitted('feedback')).toHaveLength(1);
     });
 
     it('renders the thank you text instead of a button', async () => {
-      findModal().vm.$emit('feedback-submitted', passedFeedback);
-      await nextTick();
+      createComponent({ props: { feedbackReceived: true } });
+
       expect(findButton().exists()).toBe(false);
       expect(wrapper.text()).toContain(i18n.FEEDBACK_THANKS);
     });
 
     it('does not render the modal after feedback submitted', async () => {
-      findModal().vm.$emit('feedback-submitted', passedFeedback);
-      await nextTick();
+      createComponent({ props: { feedbackReceived: true } });
       expect(findModal().exists()).toBe(false);
     });
   });

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

@@ -14,6 +14,14 @@ export default {
     FeedbackModal,
   },
   props: {
+    /**
+     * Whether the message already has gotten feedback
+     */
+    feedbackReceived: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     /**
      * The text to be displayed as the feedback link/button.
      */
@@ -32,11 +40,6 @@ export default {
       default: '',
     },
   },
-  data() {
-    return {
-      feedbackReceived: false,
-    };
-  },
   computed: {
     shouldRenderModal() {
       return !this.feedbackReceived && !this.feedbackLinkUrl;
@@ -49,7 +52,6 @@ export default {
        * @param {*} event An event, containing the feedback choices and the extended feedback text.
        */
       this.$emit('feedback', event);
-      this.feedbackReceived = true;
     },
   },
   i18n,