@gitlab/ui 85.3.1 → 85.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [85.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.4.0...v85.4.1) (2024-06-26)
+
+
+### Bug Fixes
+
+* **GlSparklineChart:** Prevent rendering blank or invalid tooltips ([e462352](https://gitlab.com/gitlab-org/gitlab-ui/commit/e46235217c576aaaed63ca38b30f3fdee3c54a63))
+
+# [85.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.3.1...v85.4.0) (2024-06-26)
+
+
+### Features
+
+* **DuoChat:** update user feedback response ([5c51a3f](https://gitlab.com/gitlab-org/gitlab-ui/commit/5c51a3f8c8c2d04aef7507c3032c3992681a4682))
+
 ## [85.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v85.3.0...v85.3.1) (2024-06-26)
 
 

package/dist/components/charts/sparkline/sparkline.js

@@ -84,6 +84,7 @@ var script = {
     return {
       chartInstance: null,
       tooltip: {
+        show: false,
         title: '',
         content: '',
         position: {
@@ -177,6 +178,8 @@ var script = {
   methods: {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
@@ -188,6 +191,9 @@ var script = {
     handleResize() {
       this.chartInstance.resize();
     },
+    isNilOrBlank(text) {
+      return isNil(text) || typeof text === 'string' && text.trim() === '';
+    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -202,6 +208,8 @@ var script = {
       let {
         seriesData = []
       } = _ref;
+      this.tooltip.show = false;
+
       // seriesData is an array of nearby data point coordinates
       // seriesData[0] is the nearest point at which the tooltip is displayed
       // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -211,10 +219,11 @@ var script = {
       } = firstEntry;
       if (!data) return;
       const [title, content] = data;
-      if (isNil(title) || isNil(content)) return;
+      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
       this.tooltip.title = title;
       this.tooltip.content = content;
       this.setTooltipPosition(data);
+      this.tooltip.show = null;
     }
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES
@@ -226,7 +235,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,3 +1,4 @@
+import GlAlert from '../../../base/alert/alert';
 import GlButton from '../../../base/button/button';
 import FeedbackModal from './user_feedback_modal';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -9,6 +10,7 @@ const i18n = {
 var script = {
   name: 'GlDuoUserFeedback',
   components: {
+    GlAlert,
     GlButton,
     FeedbackModal
   },
@@ -60,7 +62,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 _c('div',{staticClass:"gl-pt-4"},[_c('div',[(!_vm.feedbackReceived)?_c('gl-button',{attrs:{"variant":"link","target":"_blank","href":_vm.feedbackLinkUrl,"button-text-classes":"gl-white-space-normal! gl-text-left"},on:{"click":function($event){_vm.shouldRenderModal && _vm.$refs.feedbackModal.show();}}},[_vm._v(_vm._s(_vm.feedbackLinkText))]):_c('span',{staticClass:"gl-text-gray-500"},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.FEEDBACK_THANKS)+"\n    ")])],1),_vm._v(" "),(_vm.shouldRenderModal)?_c('feedback-modal',{ref:"feedbackModal",on:{"feedback-submitted":_vm.notify},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_vm._t("feedback-extra-fields")]},proxy:true}],null,true)}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-pt-4 gl-w-full"},[_c('div',[(!_vm.feedbackReceived)?_c('gl-button',{attrs:{"variant":"link","target":"_blank","href":_vm.feedbackLinkUrl,"button-text-classes":"gl-white-space-normal! gl-text-left"},on:{"click":function($event){_vm.shouldRenderModal && _vm.$refs.feedbackModal.show();}}},[_vm._v(_vm._s(_vm.feedbackLinkText))]):_c('gl-alert',{attrs:{"variant":"success","dismissible":false}},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.FEEDBACK_THANKS)+"\n    ")])],1),_vm._v(" "),(_vm.shouldRenderModal)?_c('feedback-modal',{ref:"feedbackModal",on:{"feedback-submitted":_vm.notify},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_vm._t("feedback-extra-fields")]},proxy:true}],null,true)}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

package/src/components/charts/sparkline/sparkline.vue

@@ -89,6 +89,7 @@ export default {
     return {
       chartInstance: null,
       tooltip: {
+        show: false,
         title: '',
         content: '',
         position: {
@@ -178,6 +179,8 @@ export default {
   methods: {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
@@ -189,6 +192,9 @@ export default {
     handleResize() {
       this.chartInstance.resize();
     },
+    isNilOrBlank(text) {
+      return isNil(text) || (typeof text === 'string' && text.trim() === '');
+    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -200,6 +206,8 @@ export default {
     // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
     // only when it changes from one point to another or is shown for the first time.
     generateTooltip({ seriesData = [] }) {
+      this.tooltip.show = false;
+
       // seriesData is an array of nearby data point coordinates
       // seriesData[0] is the nearest point at which the tooltip is displayed
       // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -208,11 +216,12 @@ export default {
       if (!data) return;
 
       const [title, content] = data;
-      if (isNil(title) || isNil(content)) return;
+      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
 
       this.tooltip.title = title;
       this.tooltip.content = content;
       this.setTooltipPosition(data);
+      this.tooltip.show = null;
     },
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
@@ -241,6 +250,7 @@ export default {
       />
       <chart-tooltip
         v-if="chartInstance"
+        :show="tooltip.show"
         :chart="chartInstance"
         :top="tooltip.position.top"
         :left="tooltip.position.left"

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

@@ -1,4 +1,5 @@
 <script>
+import GlAlert from '../../../base/alert/alert.vue';
 import GlButton from '../../../base/button/button.vue';
 import FeedbackModal from './user_feedback_modal.vue';
 
@@ -10,6 +11,7 @@ export const i18n = {
 export default {
   name: 'GlDuoUserFeedback',
   components: {
+    GlAlert,
     GlButton,
     FeedbackModal,
   },
@@ -59,7 +61,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-pt-4">
+  <div class="gl-pt-4 gl-w-full">
     <div>
       <gl-button
         v-if="!feedbackReceived"
@@ -70,9 +72,9 @@ export default {
         @click="shouldRenderModal && $refs.feedbackModal.show()"
         >{{ feedbackLinkText }}</gl-button
       >
-      <span v-else class="gl-text-gray-500">
+      <gl-alert v-else variant="success" :dismissible="false">
         {{ $options.i18n.FEEDBACK_THANKS }}
-      </span>
+      </gl-alert>
     </div>
     <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
       <template #feedback-extra-fields>