@gitlab/ui 62.9.2 → 62.10.0

package/package.json

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

package/src/components/base/dropdown/dropdown.vue

@@ -222,8 +222,7 @@ export default {
   },
   methods: {
     hasSlotContents(slotName) {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots[slotName]);
+      return Boolean(this.$scopedSlots[slotName]?.());
     },
     show(...args) {
       this.$refs.dropdown.show(...args);

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
@@ -41,7 +42,7 @@ describe('area component', () => {
   it('emits `created`, with the chart instance', async () => {
     createShallowWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
@@ -51,7 +52,7 @@ describe('area component', () => {
     it('are hidden by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
@@ -68,7 +69,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -94,7 +95,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -128,7 +129,7 @@ describe('area component', () => {
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
       expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
@@ -154,7 +155,7 @@ describe('area component', () => {
 
       wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findDataTooltip().props('left')).toBe(`${left}`);
       expect(findDataTooltip().props('top')).toBe(`${top}`);
@@ -166,7 +167,7 @@ describe('area component', () => {
     it('is inline by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -178,7 +179,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -190,7 +191,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
@@ -211,7 +212,7 @@ describe('area component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('seriesInfo')).toEqual(expect.arrayContaining(legendSeriesInfo));
     });

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

@@ -12,7 +12,7 @@ jest.mock('echarts', () => ({
   registerTheme: jest.fn(),
 }));
 
-const seriesInfo = [
+const mockSeriesInfo = [
   {
     type: 'solid',
     name: 'Example Title 1',
@@ -51,7 +51,7 @@ describe('chart legend component', () => {
     },
   ];
 
-  const buildLegend = (propsData = {}) => {
+  const buildLegend = ({ propsData = {}, seriesInfo = mockSeriesInfo } = {}) => {
     legendWrapper = shallowMount(Legend, {
       propsData: {
         ...propsData,
@@ -79,13 +79,21 @@ describe('chart legend component', () => {
   });
 
   it('allows user to override max value label text using props', () => {
-    buildLegend({ maxText: 'maxText' });
+    buildLegend({
+      propsData: {
+        maxText: 'maxText',
+      },
+    });
 
     expect(legendWrapper.text()).toMatch('maxText');
   });
 
   it('allows user to override average value label text using props', () => {
-    buildLegend({ averageText: 'averageText' });
+    buildLegend({
+      propsData: {
+        averageText: 'averageText',
+      },
+    });
 
     expect(legendWrapper.text()).toMatch('averageText');
   });
@@ -111,6 +119,36 @@ describe('chart legend component', () => {
       legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
       expect(chart.dispatchAction).toHaveBeenCalled();
     });
+
+    it('does not dispatch a `legendToggleSelect` action when there is only one active series', () => {
+      buildLegend({ seriesInfo: [mockSeriesInfo[0]] });
+
+      legendWrapper.findComponent(GlChartSeriesLabel).trigger('click');
+
+      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not dispatch a `legendToggleSelect` action on the chart when disabled=true', () => {
+      const disabledLegendItem = {
+        type: 'solid',
+        name: 'Example Title 4',
+        color: 'red',
+        data: [1, 2, 3, 4, 5],
+        disabled: true,
+      };
+
+      const seriesInfo = [...mockSeriesInfo, disabledLegendItem];
+      const disabledLegendItemIndex = seriesInfo.length - 1;
+
+      buildLegend({ seriesInfo });
+
+      legendWrapper
+        .findAllComponents(GlChartSeriesLabel)
+        .at(disabledLegendItemIndex)
+        .trigger('click');
+
+      expect(chart.dispatchAction).toHaveBeenCalledTimes(0);
+    });
   });
 
   it('renders the inline layout by default', () => {
@@ -121,7 +159,11 @@ describe('chart legend component', () => {
 
   describe('when setting the layout prop to table', () => {
     beforeEach(() => {
-      buildLegend({ layout: 'table' });
+      buildLegend({
+        propsData: {
+          layout: 'table',
+        },
+      });
       legendWrapper.vm.$nextTick();
     });
 

package/src/components/charts/legend/legend.stories.js

@@ -6,6 +6,7 @@ import {
   SERIES_NAME_LONG,
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_constants';
+import { gray200 } from '../../../../scss_to_js/scss_variables';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {
@@ -79,6 +80,13 @@ const baseStoryOptions = {
   },
 };
 
+const disabledLegendItem = {
+  type: 'solid',
+  name: 'Disabled Item',
+  color: gray200,
+  disabled: true,
+};
+
 const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
   return {
     ...baseStoryOptions,
@@ -89,16 +97,28 @@ const getStoryOptions = (seriesLength, seriesNameType, legendLayoutType) => {
 };
 
 export const Default = () => getStoryOptions(10, SERIES_NAME_SHORT);
+export const DefaultWithDisabledLegendItem = () => {
+  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT);
 
+  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
+
+  return storyOptions;
+};
 export const DefaultWithLongSeriesNames = () => getStoryOptions(10, SERIES_NAME_LONG);
 
 export const DefaultWithLongSeriesNamesAndNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES);
 
 export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+export const WithTabularLayoutAndDisabledLegendItem = () => {
+  const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+
+  storyOptions.seriesInfo = [...storyOptions.seriesInfo, disabledLegendItem];
+
+  return storyOptions;
+};
 export const WithTabularLayoutAndLongSeriesNames = () =>
   getStoryOptions(10, SERIES_NAME_LONG, LEGEND_LAYOUT_TABLE);
-
 export const WithTabularLayoutAndLongSeriesNamesWithNoSpaces = () =>
   getStoryOptions(10, SERIES_NAME_LONG_WITHOUT_SPACES, LEGEND_LAYOUT_TABLE);
 

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

@@ -82,6 +82,7 @@ export default {
   data() {
     return {
       disabledSeries: {},
+      lastActiveSeriesLabel: null,
     };
   },
   computed: {
@@ -91,6 +92,15 @@ export default {
         fontSize: `${this.textStyle.fontSize || defaultFontSize}px`,
       };
     },
+    hasOneSeriesElement() {
+      return this.seriesInfo.length === 1;
+    },
+  },
+  created() {
+    this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
+  },
+  beforeDestroy() {
+    this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },
   methods: {
     sanitizeSeriesData(seriesData) {
@@ -115,7 +125,9 @@ export default {
     seriesNameIsLong(seriesName) {
       return seriesName.length > 120;
     },
-    handleClick(name, key) {
+    handleClick({ name, disabled }, key) {
+      if (this.hasOneSeriesElement || this.isToggleDisabled(name, disabled)) return;
+
       this.chart.dispatchAction({ type: 'legendToggleSelect', name });
       this.disabledSeries = { ...this.disabledSeries, [key]: !this.disabledSeries[key] };
     },
@@ -128,6 +140,29 @@ export default {
     getColor(color, key) {
       return this.disabledSeries[key] ? gray200 : color;
     },
+    suppressLastActiveSeriesLabelToggle({ selected }) {
+      const selectedSeriesLabels = Object.entries(selected).filter(([, isSelected]) =>
+        Boolean(isSelected)
+      );
+
+      this.lastActiveSeriesLabel = null;
+
+      if (selectedSeriesLabels.length === 1) {
+        const [lastActiveSeriesLabelName] = selectedSeriesLabels[0];
+
+        this.lastActiveSeriesLabel = lastActiveSeriesLabelName;
+      }
+    },
+    /**
+     * Disables toggling legend if it is the last active one or if its data series
+     * has a disabled property set to true
+     * @param {String} name Series name
+     * @param {Boolean} isDisabled Value of the series element's disabled property
+     * @returns {boolean}
+     */
+    isToggleDisabled(name, isDisabled) {
+      return name === this.lastActiveSeriesLabel || isDisabled;
+    },
   },
   legendLayoutTypes: {
     LEGEND_LAYOUT_INLINE,
@@ -137,17 +172,23 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="gl-chart-legend">
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_INLINE">
       <div class="gl-legend-inline">
         <div
           v-for="(series, key) in seriesInfo"
           :key="key"
-          :class="{ 'text-muted': disabledSeries[key], 'w-100': seriesNameIsLong(series.name) }"
+          :class="{
+            'text-muted': disabledSeries[key],
+            'w-100': seriesNameIsLong(series.name),
+            'gl-hover-cursor-not-allowed!':
+              hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
+          }"
           class="gl-legend-inline-series"
           :style="fontStyle"
+          :aria-disabled="hasOneSeriesElement || isToggleDisabled(series.name, series.disabled)"
           role="button"
-          @click="handleClick(series.name, key)"
+          @click="handleClick(series, key)"
           @mouseenter="handleMouseEnter(series.name)"
           @mouseleave="handleMouseLeave(series.name)"
         >
@@ -182,11 +223,16 @@ export default {
           <div
             v-for="(series, key) in seriesInfo"
             :key="key"
-            :class="{ 'text-muted': disabledSeries[key] }"
+            :class="{
+              'text-muted': disabledSeries[key],
+              'gl-hover-cursor-not-allowed!':
+                hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),
+            }"
             class="gl-legend-tabular-row"
             :style="fontStyle"
+            :aria-disabled="isToggleDisabled(series.name, series.disabled)"
             role="button"
-            @click="handleClick(series.name, key)"
+            @click="handleClick(series, key)"
             @mouseenter="handleMouseEnter(series.name)"
             @mouseleave="handleMouseLeave(series.name)"
           >

package/src/scss/utilities.scss

@@ -2805,10 +2805,18 @@
   cursor: not-allowed
 }
 
+.gl-hover-cursor-not-allowed:hover {
+  cursor: not-allowed
+}
+
 .gl-cursor-not-allowed\! {
   cursor: not-allowed !important
 }
 
+.gl-hover-cursor-not-allowed\!:hover {
+  cursor: not-allowed !important
+}
+
 .gl-cursor-text {
   cursor: text
 }

package/src/scss/utility-mixins/cursor.scss

@@ -19,7 +19,7 @@
   cursor: grabbing;
 }
 
-@mixin gl-cursor-not-allowed {
+@mixin gl-cursor-not-allowed($hover: true) {
   cursor: not-allowed;
 }