@gitlab/ui 32.37.0 → 32.41.0

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

@@ -94,6 +94,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
+        type: 'search',
         placeholder: this.placeholder,
         ...this.$attrs,
       };
@@ -210,6 +211,7 @@ export default {
       :title="clearButtonTitle"
       :tooltip-container="tooltipContainer"
       class="gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button"
+      data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
     <template #append class="gl-search-box-by-click-input-group-control">

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

@@ -49,7 +49,7 @@ export default {
   computed: {
     inputAttributes() {
       const attributes = {
-        type: 'text',
+        type: 'search',
         placeholder: 'Search',
         ...this.$attrs,
       };

package/src/components/base/table/constants.js

@@ -0,0 +1,49 @@
+export const tableFullSlots = [
+  'bottom-row',
+  'empty',
+  'emptyfiltered',
+  'table-busy',
+  'thead-top',
+  'top-row',
+];
+
+export const tableFullProps = [
+  'api-url',
+  'busy',
+  'current-page',
+  'empty-filtered-html',
+  'empty-filtered-text',
+  'empty-html',
+  'empty-text',
+  'filter',
+  'filter-debounce',
+  'filter-function',
+  'filter-ignored-fields',
+  'filter-included-fields',
+  'label-sort-asc',
+  'label-sort-clear',
+  'label-sort-desc',
+  'no-footer-sorting',
+  'no-local-sorting',
+  'no-provider-filtering',
+  'no-provider-paging',
+  'no-provider-sorting',
+  'no-select-on-click',
+  'no-sort-reset',
+  'per-page',
+  'select-mode',
+  'selectable',
+  'selected-variant',
+  'show-empty',
+  'sort-by',
+  'sort-compare',
+  'sort-compare-locale',
+  'sort-compare-options',
+  'sort-desc',
+  'sort-direction',
+  'sort-icon-left',
+  'sort-null-last',
+];
+
+export const glTableLiteWarning =
+  'This GlTable could be a GlTableLite component, please consider using GlTableLite instead of GlTable to reduce the page bundlesize more about this here: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-table-table-lite--default';

package/src/components/base/table/table.spec.js

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import { logWarning } from '../../../utils/utils';
+import { waitForAnimationFrame } from '../../../utils/test_utils';
+import { glTableLiteWarning } from './constants';
+import Table from './table.vue';
+
+jest.mock('../../../utils/utils', () => ({
+  isDev: () => true,
+  logWarning: jest.fn(),
+}));
+
+describe('GlTable', () => {
+  const slotsTemplate = {
+    empty: `
+      <p>Placeholder empty text</p>`,
+  };
+
+  const factory = ({ props = {}, scopedSlots = {} } = {}) => {
+    shallowMount(Table, {
+      scopedSlots,
+      propsData: props,
+    });
+  };
+
+  afterEach(() => {
+    logWarning.mockClear();
+  });
+
+  it('should log a warning when not given any props or slots which qualifies for the usage of GlTable', async () => {
+    factory();
+    await waitForAnimationFrame();
+
+    expect(logWarning).toHaveBeenCalledWith(glTableLiteWarning);
+  });
+
+  it('should not log a warning when given a prop which qualifies for the usage of GlTable', async () => {
+    factory({ props: { busy: true } });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+
+  it('should not log a warning when given a slot which qualifies for the usage of GlTable', async () => {
+    factory({ scopedSlots: slotsTemplate });
+    await waitForAnimationFrame();
+
+    expect(logWarning).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,11 +1,27 @@
 <script>
 import { BTable } from 'bootstrap-vue';
+import { logWarning, isDev } from '../../../utils/utils';
+import { tableFullSlots, tableFullProps, glTableLiteWarning } from './constants';
+
+const shouldUseFullTable = ({ $attrs, $scopedSlots }) => {
+  return (
+    tableFullProps.some((prop) => $attrs[prop] !== undefined) ||
+    tableFullSlots.some((slot) => $scopedSlots[slot] !== undefined)
+  );
+};
 
 export default {
   components: {
     BTable,
   },
   inheritAttrs: false,
+  mounted() {
+    // logWarning will call isDev before logging any message
+    // this additional call to isDev is being made to exit the condition early when run in production
+    if (isDev() && !shouldUseFullTable(this)) {
+      logWarning(glTableLiteWarning);
+    }
+  },
 };
 </script>
 

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

@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import BarChart from './bar.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
 const mockChartInstance = {
@@ -34,7 +33,6 @@ describe('Bar chart component', () => {
   let wrapper;
 
   const findChart = () => wrapper.findComponent(Chart);
-  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -123,19 +121,6 @@ describe('Bar chart component', () => {
           );
         });
       });
-
-      it('render accurate tooltip title and content', () => {
-        const expectedTooltipTitle = `${labelParams.value} (${defaultChartProps.yAxisTitle})`;
-
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-        return wrapper.vm.$nextTick(() => {
-          const tooltipTextContent = findChartTooltip().element.textContent;
-
-          expect(tooltipTextContent).toContain(expectedTooltipTitle);
-          expect(tooltipTextContent).toContain(defaultChartProps.xAxisTitle);
-          expect(tooltipTextContent).toContain(labelParams.seriesData[0].data[0]);
-        });
-      });
     });
   });
 });

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

@@ -238,8 +238,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ yAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

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

@@ -207,8 +207,9 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-      <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      <template #title>
+        <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+      </template>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
   </div>

package/src/components/charts/column/column_chart.spec.js

@@ -6,6 +6,13 @@ import {
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ColumnChart from './column.vue';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
 
 describe('column chart component', () => {
   const defaultChartProps = {
@@ -16,35 +23,32 @@ describe('column chart component', () => {
   };
   let wrapper;
 
-  const TooltipStub = {
-    name: 'chart-tooltip',
-    template: '<div />',
-  };
-
   const chartItemClickedSpy = jest.fn();
   const findChart = () => wrapper.findComponent(Chart);
+  const findTooltip = () => wrapper.findComponent(ChartTooltipStub);
+  const getChartOptions = () => findChart().props('options');
 
-  const factory = (props = defaultChartProps) => {
+  const factory = (props = defaultChartProps, slots) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
       stubs: {
-        chart: true,
-        'chart-tooltip': TooltipStub,
+        'chart-tooltip': ChartTooltipStub,
       },
       listeners: {
         chartItemClicked: chartItemClickedSpy,
       },
+      data() {
+        return {
+          chart: mockChartInstance,
+        };
+      },
+      slots,
     });
-    const chart = {
-      getDom: jest.fn(() => ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
-      })),
-    };
-    wrapper.setData({ chart });
   };
 
   beforeEach(() => {
+    mockChartInstance = createMockChartInstance();
+
     factory();
   });
 
@@ -104,4 +108,20 @@ describe('column chart component', () => {
       expect(chart.props('options').yAxis[1].name).toEqual(secondaryDataTitle);
     });
   });
+
+  describe('tooltip', () => {
+    it('displays the generic tooltip content', async () => {
+      const params = {
+        seriesData: [{ seriesIndex: '0', seriesName: 'Full', value: ['Mary', 934] }],
+      };
+
+      getChartOptions().xAxis.axisPointer.label.formatter(params);
+
+      await wrapper.vm.$nextTick();
+
+      const expectedTooltipTitle = `${params.seriesData[0].value[0]} (${defaultChartProps.xAxisTitle})`;
+
+      expect(findTooltip().text()).toContain(expectedTooltipTitle);
+    });
+  });
 });

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

@@ -1,6 +1,5 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
 
@@ -12,18 +11,6 @@ const mockChartInstance = {
   resize: mockResize,
 };
 
-// echarts need to be mocked to prevent prop-validation in chart-tooltips to fail
-jest.mock('echarts', () => ({
-  getInstanceByDom: () => mockChartInstance,
-}));
-
-jest.mock('~/utils/charts/theme', () => ({
-  sparkline: {
-    variants: { foo: 'foo', bar: 'bar' },
-    defaultVariant: 'foo',
-  },
-}));
-
 let triggerResize = () => {};
 jest.mock('~/directives/resize_observer/resize_observer', () => ({
   GlResizeObserverDirective: {
@@ -35,6 +22,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
 
 const localVue = createLocalVue();
 
+const ChartToolTipStub = {
+  name: 'chart-tooltip-stub',
+  template: '<div><slot name="default"></slot><slot name="title"></slot></div>',
+};
+
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
@@ -46,19 +38,23 @@ describe('sparkline chart component', () => {
         variant: null,
       },
       scopedSlots: { latestSeriesEntry: jest.fn() },
+      stubs: {
+        'chart-tooltip': ChartToolTipStub,
+      },
     };
 
     wrapper = shallowMount(SparklineChart, componentOptions);
   };
 
   // helpers
+  const getByTestId = (id) => wrapper.find(`[data-testid="${id}"]`);
   const getChart = () => wrapper.findComponent(Chart);
 
-  const getTooltip = () => wrapper.findComponent(ChartTooltip);
-  const getTooltipTitle = () => getTooltip().find('.js-tooltip-title');
-  const getTooltipContent = () => getTooltip().find('.js-tooltip-content');
+  const getTooltip = () => wrapper.findComponent(ChartToolTipStub);
+  const getTooltipTitle = () => getByTestId('tooltip-title');
+  const getTooltipContent = () => getByTestId('tooltip-content');
 
-  const getLastYValue = () => wrapper.find('.js-last-y-value');
+  const getLastYValue = () => getByTestId('last-y-value');
 
   const getChartOptions = () => getChart().props('options');
   const getXAxisLabelFormatter = () => {
@@ -87,7 +83,7 @@ describe('sparkline chart component', () => {
   });
 
   it('emits `chartCreated`, which passes on the chart instance', () => {
-    expect(wrapper.emitted('chartCreated').length).toBe(1);
+    expect(wrapper.emitted('chartCreated')).toHaveLength(1);
     expect(wrapper.emitted('chartCreated')[0][0]).toBe(mockChartInstance);
   });
 
@@ -153,7 +149,7 @@ describe('sparkline chart component', () => {
     expect(getTooltip().attributes('show')).toBeFalsy();
   });
 
-  it('adds the right content to the tooltip', () => {
+  it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';
     const mockData = { seriesData: [{ data: [xValue, yValue] }] };
@@ -163,10 +159,9 @@ describe('sparkline chart component', () => {
     expect(getTooltipTitle().text()).toBe('');
     expect(getTooltipContent().text()).toBe('');
 
-    return waitForAnimationFrame().then(() => {
-      expect(getTooltipTitle().text()).toBe(xValue);
-      expect(getTooltipContent().text()).toBe(yValue);
-    });
+    await waitForAnimationFrame();
+    expect(getTooltipTitle().text()).toBe(xValue);
+    expect(getTooltipContent().text()).toBe(yValue);
   });
 
   it(`shows the last entry's y-value per default`, async () => {
@@ -182,13 +177,12 @@ describe('sparkline chart component', () => {
     expect(getLastYValue().text()).toBe(latestEntryYValue);
   });
 
-  it(`does not show the last entry's y-value if 'showLastYValue' is false`, () => {
+  it(`does not show the last entry's y-value if 'showLastYValue' is false`, async () => {
     expect(getLastYValue().exists()).toBe(true);
 
     wrapper.setProps({ showLastYValue: false });
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(getLastYValue().exists()).toBe(false);
-    });
+    await wrapper.vm.$nextTick();
+    expect(getLastYValue().exists()).toBe(false);
   });
 });

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

@@ -174,9 +174,13 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="d-flex align-items-center" @mouseleave="hideTooltip">
+  <div
+    v-resize-observer="handleResize"
+    class="gl-display-flex gl-align-items-center"
+    @mouseleave="hideTooltip"
+  >
     <slot name="default"></slot>
-    <div class="flex-grow-1 position-relative">
+    <div class="gl-flex-grow-1 gl-relative">
       <chart :height="height" :options="options" @created="onChartCreated" />
       <chart-tooltip
         v-if="chartInstance"
@@ -187,17 +191,25 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="default" class="js-tooltip-content d-flex">
-          <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
-          <strong>{{ tooltip.content }}</strong>
-        </div>
+        <template #title>
+          <div data-testid="tooltip-title" class="gl-white-space-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <template #default>
+          <div class="gl-display-flex" data-testid="tooltip-content">
+            <span v-if="tooltipLabel" class="gl-pr-6 gl-mr-auto">{{ tooltipLabel }}</span>
+            <strong>{{ tooltip.content }}</strong>
+          </div>
+        </template>
       </chart-tooltip>
     </div>
-    <span v-if="showLastYValue" class="js-last-y-value d-inline-flex justify-content-center ml-3">{{
-      lastYValue
-    }}</span>
+    <span
+      v-if="showLastYValue"
+      class="gl-display-inline-flex gl-justify-content-center gl-ml-5"
+      data-testid="last-y-value"
+    >
+      {{ lastYValue }}
+    </span>
   </div>
 </template>

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

@@ -9,9 +9,9 @@ import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
 let mockChartInstance;
@@ -31,12 +31,11 @@ const defaultChartProps = {
 
 describe('stacked column chart component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
   const getOptions = () => findChart().props('options');
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
+  const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -45,6 +44,7 @@ describe('stacked column chart component', () => {
       propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
+        ChartTooltip: ChartTooltipStub,
       },
       slots,
     });
@@ -52,24 +52,7 @@ describe('stacked column chart component', () => {
   };
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
+    mockChartInstance = createMockChartInstance();
   });
 
   afterEach(() => {

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

@@ -308,16 +308,13 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+
+      <slot name="tooltip-content">
         <tooltip-default-format :tooltip-content="tooltipContent" />
-      </template>
+      </slot>
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

package/src/utils/utils.js

@@ -103,12 +103,22 @@ export function focusFirstFocusableElement(elts) {
   if (focusableElt) focusableElt.focus();
 }
 
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+export function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+
 /**
  * Prints a warning message to the console in non-test and non-production environments.
  * @param {string} message message to print to the console
  */
 export function logWarning(message = '') {
-  if (message.length && !['test', 'production'].includes(process.env.NODE_ENV)) {
+  if (message.length && isDev()) {
     console.warn(message); // eslint-disable-line no-console
   }
 }

package/dist/components/base/carousel/examples/carousel.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-carousel',{staticStyle:{"text-shadow":"1px 1px 2px #333"},attrs:{"interval":4000,"controls":"","indicators":"","background":"#ababab","img-width":"1024","img-height":"480"}},[_c('gl-carousel-slide',{attrs:{"caption":"First slide","text":"Nulla vitae elit libero, a pharetra augue mollis interdum.","img-src":"https://picsum.photos/1024/480/?image=52"}}),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=54"}},[_c('h1',[_vm._v("Hello world!")])]),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=58"}})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/carousel/examples/index.js

@@ -1,13 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'carousel-basic',
-    name: 'Basic',
-    description: 'Basic Carousel',
-    component: CarouselBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/markdown/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './markdown.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'markdown-basic',
-    name: 'Basic',
-    description: 'Basic Markdown',
-    component: BasicExample
-  }]
-}];
-
-export default index;