@gitlab/ui 61.1.1 → 61.1.2

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -5,6 +5,7 @@ import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 
 export default {
+  name: 'GlSearchboxByType',
   components: {
     GlClearIconButton,
     GlIcon,

package/src/components/base/segmented_control/segmented_control.vue

@@ -4,6 +4,7 @@ import { BFormRadioGroup } from 'bootstrap-vue';
 const genericErrorMessage = 'Segmented button should always have valid option selected';
 
 export default {
+  name: 'GlSegmentedControl',
   components: {
     BFormRadioGroup,
   },

package/src/components/base/skeleton_loading/skeleton_loading.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'GlSkeletonLoading',
   props: {
     /**
      * Controls the number of lines.

package/src/components/base/table/table.vue

@@ -14,6 +14,7 @@ const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
 const { tableClass } = BTable.options.props;
 
 export default {
+  name: 'GlTable',
   components: {
     BTable,
   },

package/src/components/base/table_lite/table_lite.vue

@@ -4,6 +4,7 @@ import { BTableLite } from 'bootstrap-vue';
 const { tableClass } = BTableLite.options.props;
 
 export default {
+  name: 'GlTableLite',
   components: {
     BTableLite,
   },

package/src/components/base/tabs/tab/tab.vue

@@ -6,6 +6,7 @@ import isPlainObject from 'lodash/isPlainObject';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 
 export default {
+  name: 'GlTab',
   components: {
     BTab,
   },

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -7,6 +7,7 @@ import GlTabs from './tabs.vue';
 const NAV_CLASS = 'gl-scrollable-tabs-nav';
 
 export default {
+  name: 'GlScrollableTabs',
   components: {
     GlTabs,
     GlIcon,

package/src/components/base/tabs/tabs/tabs.vue

@@ -8,6 +8,7 @@ const validatorHelper = (obj) =>
   Object.keys(obj).every((val) => val === 'text' || val === 'attributes');
 
 export default {
+  name: 'GlTabs',
   components: {
     BTabs,
     GlButton,

package/src/components/base/toggle/toggle.vue

@@ -9,6 +9,7 @@ import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 let uuid = 0;
 
 export default {
+  name: 'GlToggle',
   components: {
     GlIcon,
     GlLoadingIcon,

package/src/components/base/token/token.vue

@@ -4,6 +4,7 @@ import { tokenVariants } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 export default {
+  name: 'GlToken',
   components: {
     CloseButton,
   },

package/src/components/base/tooltip/tooltip.vue

@@ -7,6 +7,7 @@ import tooltipMixin from '../../mixins/tooltip_mixin';
 const tooltipRefName = 'bvTooltip';
 
 export default {
+  name: 'GlTooltip',
   tooltipDelay,
   components: {
     BTooltip,

package/src/components/charts/area/area.vue

@@ -49,6 +49,7 @@ import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlAreaChart',
   components: {
     Chart,
     ChartLegend,

package/src/components/charts/bar/bar.vue

@@ -56,6 +56,7 @@ const defaultOptions = {
 };
 
 export default {
+  name: 'GlBarChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/chart/chart.vue

@@ -27,6 +27,7 @@ const increaseChartGridTop = (options, increaseBy) => ({
 });
 
 export default {
+  name: 'GlChart',
   directives: {
     resizeObserver: GlResizeObserverDirective,
   },

package/src/components/charts/column/column.vue

@@ -33,6 +33,7 @@ const yAxisDefaults = {
 };
 
 export default {
+  name: 'GlColumnChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -14,6 +14,7 @@ import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlDiscreteScatterChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/gauge/gauge.vue

@@ -51,6 +51,7 @@ const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) =>
 ];
 
 export default {
+  name: 'GlGaugeChart',
   components: {
     Chart,
   },

package/src/components/charts/heatmap/heatmap.vue

@@ -42,6 +42,7 @@ function getRange(series) {
 }
 
 export default {
+  name: 'GlHeatmap',
   components: {
     Chart,
     ChartLegend,

package/src/components/charts/legend/legend.vue

@@ -16,6 +16,7 @@ import GlTruncate from '../../utilities/truncate/truncate.vue';
 import GlChartSeriesLabel from '../series_label/series_label.vue';
 
 export default {
+  name: 'GlChartLegend',
   components: {
     GlChartSeriesLabel,
     GlTruncate,

package/src/components/charts/line/line.vue

@@ -52,6 +52,7 @@ import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
 export default {
+  name: 'GlLineChart',
   components: {
     Chart,
     ChartLegend,

package/src/components/charts/series_label/series_label.vue

@@ -3,6 +3,7 @@ const makePathRect = (startX, startY, width, height) =>
   `M${startX},${startY}H${startX + width}V${startY + height}H${startX}Z`;
 
 export default {
+  name: 'GlChartSeriesLabel',
   props: {
     color: {
       type: String,

package/src/components/charts/single_stat/single_stat.vue

@@ -5,6 +5,7 @@ import GlIcon from '../../base/icon/icon.vue';
 import GlAnimatedNumber from '../../utilities/animated_number/animated_number.vue';
 
 export default {
+  name: 'GlSingleStat',
   components: {
     GlIcon,
     GlBadge,

package/src/components/charts/sparkline/sparkline.spec.js

@@ -149,6 +149,22 @@ describe('sparkline chart component', () => {
     expect(getTooltip().attributes('show')).toBe(undefined);
   });
 
+  it.each`
+    label        | content
+    ${null}      | ${5}
+    ${5}         | ${null}
+    ${undefined} | ${0}
+    ${-10}       | ${undefined}
+  `(`hides the tooltip when seriesData = ($label, $content)`, async ({ label, content }) => {
+    expect(getTooltip().attributes('show')).toBe(undefined);
+
+    const mockData = { seriesData: [{ data: [label, content] }] };
+    getXAxisLabelFormatter()(mockData);
+
+    await wrapper.vm.$nextTick();
+    expect(getTooltip().attributes('show')).toBe(undefined);
+  });
+
   it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
+import isNil from 'lodash/isNil';
 import { graphic } from 'echarts';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import {
@@ -29,6 +30,7 @@ const generateGradient = (colors) => {
 };
 
 export default {
+  name: 'GlSparklineChart',
   components: { Chart, ChartTooltip },
   directives: {
     resizeObserver: GlResizeObserverDirective,
@@ -116,7 +118,7 @@ export default {
             show: true,
             type: 'none',
             label: {
-              formatter: this.xAxisLabelFormatter,
+              formatter: this.generateTooltip,
             },
           },
         },
@@ -191,10 +193,6 @@ export default {
     hideTooltip() {
       this.tooltip.show = false;
     },
-    formatTooltipText([xValue, yValue]) {
-      this.tooltip.title = xValue;
-      this.tooltip.content = yValue;
-    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -205,18 +203,21 @@ export default {
     // This function is called any time the axis pointer is changed (the black bubble showing which
     // 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.
-    xAxisLabelFormatter({ seriesData = [] }) {
+    generateTooltip({ seriesData = [] }) {
       // 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
       const [firstEntry = {}] = seriesData;
       const { data } = firstEntry;
+      if (!data) return;
 
-      if (data) {
-        this.tooltip.show = true;
-        this.formatTooltipText(data);
-        this.setTooltipPosition(data);
-      }
+      const [title, content] = data;
+      if (isNil(title) || isNil(content)) return;
+
+      this.tooltip.show = true;
+      this.tooltip.title = title;
+      this.tooltip.content = content;
+      this.setTooltipPosition(data);
     },
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,

package/src/components/charts/stacked_column/stacked_column.vue

@@ -38,6 +38,7 @@ const yAxisDefaults = {
 };
 
 export default {
+  name: 'GlStackedColumnChart',
   components: {
     Chart,
     ChartTooltip,

package/src/components/charts/tooltip/tooltip.vue

@@ -6,6 +6,7 @@ import GlPopover from '../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../utils/constants';
 
 export default {
+  name: 'GlChartTooltip',
   components: {
     GlPopover,
   },

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'GlDashboardSkeleton',
   props: {
     /**
      * Number of cards to be shown

package/src/components/regions/empty_state/empty_state.vue

@@ -2,6 +2,7 @@
 import GlButton from '../../base/button/button.vue';
 
 export default {
+  name: 'GlEmptyState',
   components: {
     GlButton,
   },

package/src/components/shared_components/charts/tooltip_default_format.vue

@@ -2,6 +2,7 @@
 import SeriesLabel from '../../charts/series_label/series_label.vue';
 
 export default {
+  name: 'TooltipDefaultFormat',
   components: {
     SeriesLabel,
   },

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -3,6 +3,7 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlButton from '../../base/button/button.vue';
 
 export default {
+  name: 'ClearIconButton',
   components: {
     GlButton,
   },

package/src/components/utilities/friendly_wrap/friendly_wrap.vue

@@ -3,6 +3,7 @@ import { intersperse } from '../../../utils/data_utils';
 import { splitAfterSymbols } from '../../../utils/string_utils';
 
 export default {
+  name: 'GlFriendlyWrap',
   functional: true,
   props: {
     /**

package/src/components/utilities/intersperse/intersperse.vue

@@ -27,6 +27,7 @@ const addLastSeparator = (lastSeparator) => (items) => {
 };
 
 export default {
+  name: 'GlIntersperse',
   functional: true,
   props: {
     separator: {

package/src/components/utilities/sprintf/sprintf.vue

@@ -47,6 +47,7 @@ function getPlaceholderDefinition(chunk, placeholdersByStartTag) {
 }
 
 export default {
+  name: 'GlSprintf',
   functional: true,
   props: {
     /**

package/src/components/utilities/truncate/truncate.vue

@@ -5,6 +5,7 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { POSITION } from './constants';
 
 export default {
+  name: 'GlTruncate',
   POSITION,
   directives: {
     GlTooltip: GlTooltipDirective,