@gitlab/ui 61.1.1 → 61.1.3

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -24,6 +24,7 @@ import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
 export default {
+  name: 'GlDisclosureDropdown',
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
@@ -266,6 +267,9 @@ export default {
        */
       this.$emit('action', action);
     },
+    uniqueItemId() {
+      return uniqueId(`disclosure-item-`);
+    },
     isItem,
   },
 };
@@ -314,7 +318,8 @@ export default {
       <slot>
         <template v-for="(item, index) in items">
           <template v-if="isItem(item)">
-            <gl-disclosure-dropdown-item :key="item.text" :item="item" @action="handleAction">
+            <!-- eslint-disable-next-line vue/valid-v-for -->
+            <gl-disclosure-dropdown-item :key="uniqueItemId()" :item="item" @action="handleAction">
               <template #list-item>
                 <!-- @slot Custom template of the disclosure dropdown item -->
                 <slot name="list-item" :item="item"></slot>
@@ -335,9 +340,10 @@ export default {
               </template>
 
               <template v-if="$scopedSlots['list-item']">
+                <!-- eslint-disable vue/valid-v-for -->
                 <gl-disclosure-dropdown-item
                   v-for="groupItem in item.items"
-                  :key="groupItem.text"
+                  :key="uniqueItemId()"
                   :item="groupItem"
                   @action="handleAction"
                 >
@@ -346,6 +352,7 @@ export default {
                     <slot name="list-item" :item="groupItem"></slot>
                   </template>
                 </gl-disclosure-dropdown-item>
+                <!-- eslint-enable vue/valid-v-for -->
               </template>
             </gl-disclosure-dropdown-group>
           </template>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -49,6 +49,9 @@ export default {
     handleAction(action) {
       this.$emit('action', action);
     },
+    uniqueItemId() {
+      return uniqueId(`disclosure-item-`);
+    },
   },
 };
 </script>
@@ -65,9 +68,10 @@ export default {
     </div>
     <ul role="group" :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
       <slot>
+        <!-- eslint-disable vue/valid-v-for -->
         <gl-disclosure-dropdown-item
           v-for="item in group.items"
-          :key="item.text"
+          :key="uniqueItemId()"
           :item="item"
           @action="handleAction"
         >

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -34,6 +34,7 @@ const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {
+  name: 'GlCollapsibleListbox',
   HEADER_ITEMS_BORDER_CLASSES,
   events: {
     GL_DROPDOWN_SHOWN,

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -2,6 +2,7 @@
 import uniqueId from 'lodash/uniqueId';
 
 export default {
+  name: 'GlListboxGroup',
   props: {
     name: {
       type: String,

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -4,6 +4,7 @@ import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 
 export default {
+  name: 'GlListboxItem',
   components: {
     GlIcon,
   },

package/src/components/base/new_dropdowns/listbox/listbox_search_input.vue

@@ -3,6 +3,7 @@ import GlClearIconButton from '../../../shared_components/clear_icon_button/clea
 import GlIcon from '../../icon/icon.vue';
 
 export default {
+  name: 'GlListboxSearchInput',
   components: {
     GlClearIconButton,
     GlIcon,

package/src/components/base/paginated_list/paginated_list.vue

@@ -3,6 +3,7 @@ import GlPagination from '../pagination/pagination.vue';
 import GlSearchBoxByType from '../search_box_by_type/search_box_by_type.vue';
 
 export default {
+  name: 'GlPaginatedList',
   components: {
     GlSearchBoxByType,
     GlPagination,

package/src/components/base/path/path.vue

@@ -12,6 +12,7 @@ const PATH_ITEM_CLASS = 'gl-path-button';
 const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
 
 export default {
+  name: 'GlPath',
   components: {
     GlIcon,
   },

package/src/components/base/popover/popover.vue

@@ -8,6 +8,7 @@ import { popoverPlacements } from '../../../utils/constants';
 const popoverRefName = 'bPopover';
 
 export default {
+  name: 'GlPopover',
   components: {
     BPopover,
     CloseButton,

package/src/components/base/progress_bar/progress_bar.vue

@@ -2,6 +2,7 @@
 import { BProgress } from 'bootstrap-vue';
 
 export default {
+  name: 'GlProgressBar',
   components: {
     BProgress,
   },

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -11,6 +11,7 @@ import GlFormInputGroup from '../form/form_input_group/form_input_group.vue';
 import GlIcon from '../icon/icon.vue';
 
 export default {
+  name: 'GlSearchboxByClick',
   components: {
     GlClearIconButton,
     GlIcon,

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,