@gitlab/ui 77.7.0 → 78.1.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [78.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.0.0...v78.1.0) (2024-03-05)
+
+
+### Features
+
+* **GlDuoChat:** explicitly disable Experimental Badge ([d701cc9](https://gitlab.com/gitlab-org/gitlab-ui/commit/d701cc95e9af956ce17c3b4c75ea4d481cadde59))
+
+# [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/chat/duo_chat.js

@@ -119,7 +119,7 @@ var script = {
      * The type of the badge. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
      */
     badgeType: {
-      type: String,
+      type: String || null,
       required: false,
       default: badgeTypes[0],
       validator: badgeTypeValidator
@@ -343,7 +343,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block gl-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-bg-gray-10",class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.isHidden)?_c('aside',{staticClass:"markdown-code-block gl-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('header',{staticClass:"gl-drawer-header gl-drawer-header-sticky gl-z-index-200 gl-p-0! gl-border-b-0",attrs:{"data-testid":"chat-header"}},[_c('div',{staticClass:"drawer-title gl-display-flex gl-justify-content-start gl-align-items-center gl-p-5"},[_c('h3',{staticClass:"gl-my-0 gl-font-size-h2"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),(_vm.badgeType)?_c('gl-experiment-badge',{attrs:{"help-page-url":_vm.badgeHelpPageUrl,"type":_vm.badgeType,"container-id":"chat-component"}}):_vm._e(),_vm._v(" "),_c('gl-button',{staticClass:"gl-p-0! gl-ml-auto",attrs:{"category":"tertiary","variant":"default","icon":"close","size":"small","data-testid":"chat-close-button","aria-label":_vm.$options.i18n.CHAT_CLOSE_LABEL},on:{"click":_vm.hideChat}})],1),_vm._v(" "),_c('gl-alert',{staticClass:"gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full",attrs:{"dismissible":false,"variant":"tip","show-icon":false,"role":"alert","data-testid":"chat-legal-warning"}},[_vm._v(_vm._s(_vm.$options.i18n.CHAT_LEGAL_GENERATED_BY_AI))]),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),(_vm.error)?_c('gl-alert',{key:"error",staticClass:"gl-pl-9!",attrs:{"dismissible":false,"variant":"danger","role":"alert","data-testid":"chat-error"}},[_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.error),expression:"error"}]})]):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-drawer-body",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingTrottled}},[_c('transition-group',{staticClass:"duo-chat-history gl-display-flex gl-flex-direction-column gl-justify-content-end gl-bg-gray-10",class:[
         {
           'gl-h-full': !_vm.hasMessages,
           'force-scroll-bar': _vm.hasMessages,

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/components/experimental/experiment_badge/constants.js

@@ -1,4 +1,4 @@
-const badgeTypes = ['experiment', 'beta'];
+const badgeTypes = ['experiment', 'beta', null];
 const badgeTypeValidator = value => badgeTypes.includes(value);
 
 export { badgeTypeValidator, badgeTypes };

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 12:25:08 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 12:25:08 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 12:25:08 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 12:25:08 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 12:25:08 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 12:25:08 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.1.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/chat/duo_chat.spec.js

@@ -126,6 +126,15 @@ describe('GlDuoChat', () => {
       expect(component().exists()).toBe(shouldRender);
     });
 
+    it('does not render the experimental label if it is explicitely disabled', () => {
+      createComponent({
+        propsData: {
+          badgeType: null,
+        },
+      });
+      expect(findBadge().exists()).toBe(false);
+    });
+
     describe('when messages exist', () => {
       it('scrolls to the bottom on load', async () => {
         const scrollIntoViewMock = jest.fn();

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

@@ -127,7 +127,7 @@ export default {
      * The type of the badge. This is passed down to the `GlExperimentBadge` component. Refer that component for more information.
      */
     badgeType: {
-      type: String,
+      type: String || null,
       required: false,
       default: badgeTypes[0],
       validator: badgeTypeValidator,
@@ -369,6 +369,7 @@ export default {
       >
         <h3 class="gl-my-0 gl-font-size-h2">{{ title }}</h3>
         <gl-experiment-badge
+          v-if="badgeType"
           :help-page-url="badgeHelpPageUrl"
           :type="badgeType"
           container-id="chat-component"

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,

package/src/components/experimental/experiment_badge/constants.js

@@ -1,2 +1,2 @@
-export const badgeTypes = ['experiment', 'beta'];
+export const badgeTypes = ['experiment', 'beta', null];
 export const badgeTypeValidator = (value) => badgeTypes.includes(value);