@gitlab/ui 115.0.1 → 115.1.0

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

@@ -114,7 +114,7 @@ export default {
           return type === CHART_TYPE_LINE
             ? generateLineSeries({ color, name, data, yAxisIndex: 1 })
             : generateBarSeries({ color, name, data, yAxisIndex: 1, stack });
-        }
+        },
       );
     },
     series() {
@@ -158,7 +158,7 @@ export default {
             : yAxisPrimary,
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially

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

@@ -90,7 +90,7 @@ export default {
               color: getColor('itemStyle'),
             },
           },
-          series
+          series,
         );
       });
     },
@@ -125,7 +125,7 @@ export default {
           },
         },
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially

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

@@ -108,7 +108,7 @@ export default {
             axisColor: this.axisColor,
           }),
         },
-        this.option
+        this.option,
       );
 
       return mergedOptions;

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

@@ -36,7 +36,7 @@ function getRange(series) {
       if (value > acc.max) acc.max = value;
       return acc;
     },
-    { min: 0, max: 0 }
+    { min: 0, max: 0 },
   );
 }
 
@@ -197,7 +197,7 @@ export default {
             },
           },
         },
-        this.option
+        this.option,
       );
     },
     legendStyle() {

package/src/components/charts/heatmap/index.js

@@ -1,3 +1,4 @@
 import Heatmap from './heatmap.vue';
 
+// eslint-disable-next-line import/no-default-export
 export default Heatmap;

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

@@ -149,7 +149,7 @@ export default {
     },
     suppressLastActiveSeriesLabelToggle({ selected }) {
       const selectedSeriesLabels = Object.entries(selected).filter(([, isSelected]) =>
-        Boolean(isSelected)
+        Boolean(isSelected),
       );
 
       this.lastActiveSeriesLabel = null;

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

@@ -167,7 +167,7 @@ export default {
           symbolSize,
           lineStyle,
           series,
-          getThresholdConfig(this.thresholds)
+          getThresholdConfig(this.thresholds),
         );
       });
       // if annotation series exists, append it
@@ -212,13 +212,13 @@ export default {
         lineChartOptions,
         this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially
       return mergeSeriesToOptions(
         mergeAnnotationAxisToOptions(mergedOptions, this.hasAnnotations),
-        this.series
+        this.series,
       );
     },
     /**

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

@@ -25,7 +25,7 @@ const generateGradient = (colors) => {
     colors.map((color, index) => {
       const offset = index / (colors.length - 1);
       return { offset, color };
-    })
+    }),
   );
 };
 

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

@@ -263,7 +263,7 @@ export default {
         stackedColumnChartOptions,
         this.formatTooltipText ? deprecatedTooltipFormatterOptions : {},
         this.option,
-        dataZoomAdjustments(this.option.dataZoom)
+        dataZoomAdjustments(this.option.dataZoom),
       );
       // All chart options can be merged but series
       // needs to be handled specially

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.scss

@@ -0,0 +1 @@
+@import 'gridstack/dist/gridstack';

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -0,0 +1,247 @@
+<script>
+import { GridStack } from 'gridstack';
+import pickBy from 'lodash/pickBy';
+import { breakpoints } from '../../../../utils/breakpoints';
+
+const CURSOR_GRABBING_CLASS = '!gl-cursor-grabbing';
+
+export default {
+  name: 'GlGridLayout',
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+    isStatic: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      grid: undefined,
+      gridPanels: [],
+    };
+  },
+  computed: {
+    gridConfig() {
+      return this.value.panels.map((panel) => {
+        const { gridAttributes, ...otherProps } = panel;
+
+        return {
+          ...this.getPanelGridItemConfig(panel),
+          props: otherProps,
+        };
+      });
+    },
+  },
+  watch: {
+    isStatic(value) {
+      this.grid?.setStatic(value);
+    },
+    gridConfig: {
+      handler(config) {
+        this.grid?.load(config);
+      },
+      deep: true,
+    },
+    /**
+     * Data flow:
+     * 1. Initial: mounted → initGridStack() → grid.load(gridConfig) →
+     *    grid.getGridItems() → initGridPanelSlots → gridPanels populated with DOM references
+     * 2. Updates: value.panels changes → two parallel paths:
+     *    a. gridConfig changes → grid.load() updates grid layout (but not gridPanels)
+     *    b. this watcher updates gridPanels with new panel properties
+     */
+    'value.panels': {
+      handler(newPanels) {
+        if (this.gridPanels.length === 0) return;
+
+        // Only update panels that have changed to improve performance
+        newPanels.forEach((updatedPanel) => {
+          const panel = this.gridPanels.find((p) => p.id === updatedPanel.id);
+
+          if (panel) {
+            // Exclude `gridAttributes` from being included in the panel props as it's not a valid prop for the panel component
+            const panelPropsWithoutGridAttributes = pickBy(
+              updatedPanel,
+              (_, k) => k !== 'gridAttributes',
+            );
+
+            panel.props = { ...panelPropsWithoutGridAttributes };
+          }
+        });
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.initGridStack();
+  },
+  beforeDestroy() {
+    const removeDom = Boolean(this.$el.parentElement);
+    this.grid?.destroy(removeDom);
+  },
+  methods: {
+    // TODO: Refactor this to use render methods once Vue 3 migration is complete
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/549095
+    async mountGridComponents(panels, options = { scrollIntoView: false }) {
+      // Ensure new panels are always rendered first
+      await this.$nextTick();
+
+      panels.forEach((panel) => {
+        const wrapper = this.$refs.panelWrappers?.find((w) => w.id === panel.id);
+        const widgetContentEl = panel.el.querySelector('.grid-stack-item-content');
+
+        if (wrapper && widgetContentEl) {
+          widgetContentEl.appendChild(wrapper);
+        }
+      });
+
+      if (options.scrollIntoView) {
+        const mostRecent = panels[panels.length - 1];
+        mostRecent.el.scrollIntoView({ behavior: 'smooth' });
+      }
+    },
+    getGridItemForElement(el) {
+      return this.gridConfig.find((item) => item.id === el.getAttribute('gs-id'));
+    },
+    initGridPanelSlots(gridElements) {
+      if (!gridElements) return;
+
+      this.gridPanels = gridElements.map((el) => ({
+        ...this.getGridItemForElement(el),
+        el,
+      }));
+
+      this.mountGridComponents(this.gridPanels);
+    },
+    initGridStack() {
+      // See https://github.com/gridstack/gridstack.js/tree/master/doc#grid-options
+      this.grid = GridStack.init(
+        {
+          // Uniform gap between panels
+          margin: '8px',
+          // CSS Selector for finding the drag handle element
+          handle: '.grid-stack-item-handle',
+          /* Magic number 125px:
+           * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+           * This means text/content with our spacing scale can fit up to 49px without scrolling.
+           */
+          cellHeight: '125px',
+          // Setting 1 in minRow prevents the grid collapsing when all panels are removed
+          minRow: 1,
+          // Define the number of columns for anything below a set width, defaults to fill the available space
+          columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
+          alwaysShowResizeHandle: true,
+          animate: true,
+          float: true,
+          // Toggles user-customization of grid layout
+          staticGrid: this.isStatic,
+        },
+        this.$refs.grid,
+      ).load(this.gridConfig);
+
+      // Sync Vue components array with gridstack items
+      this.initGridPanelSlots(this.grid.getGridItems());
+
+      this.grid.on('dragstart', () => {
+        this.$el.classList.add(CURSOR_GRABBING_CLASS);
+      });
+      this.grid.on('dragstop', () => {
+        this.$el.classList.remove(CURSOR_GRABBING_CLASS);
+      });
+      this.grid.on('change', (_, items) => {
+        if (!items) return;
+
+        this.emitLayoutChanges(items);
+      });
+      this.grid.on('added', (_, items) => {
+        this.addGridPanels(items);
+      });
+      this.grid.on('removed', (_, items) => {
+        this.removeGridPanels(items);
+      });
+    },
+    getPanelGridItemConfig({
+      gridAttributes: { xPos, yPos, width, height, minHeight, minWidth, maxHeight, maxWidth },
+      id,
+    }) {
+      const filterUndefinedValues = (obj) => pickBy(obj, (value) => value !== undefined);
+
+      // GridStack renders undefined layout values so we need to filter them out.
+      return filterUndefinedValues({
+        x: xPos,
+        y: yPos,
+        w: width,
+        h: height,
+        minH: minHeight,
+        minW: minWidth,
+        maxH: maxHeight,
+        maxW: maxWidth,
+        id,
+      });
+    },
+    convertToGridAttributes(gridStackItem) {
+      return {
+        yPos: gridStackItem.y,
+        xPos: gridStackItem.x,
+        width: gridStackItem.w,
+        height: gridStackItem.h,
+      };
+    },
+    removeGridPanels(items) {
+      items.forEach((item) => {
+        const index = this.gridPanels.findIndex((c) => c.id === item.id);
+        this.gridPanels.splice(index, 1);
+        // Finally, remove the gridstack element
+        item.el.remove();
+      });
+    },
+    addGridPanels(items) {
+      const newPanels = items.map(({ grid, ...rest }) => ({ ...rest }));
+      this.gridPanels.push(...newPanels);
+
+      this.mountGridComponents(newPanels, { scrollIntoView: true });
+    },
+    emitLayoutChanges(items) {
+      /**
+       * Uses JSON parse and stringify to remove object references.
+       * Lodash's `cloneDeep` retains circular references.
+       * See https://github.com/lodash/lodash/issues/4710#issuecomment-606892867 for details on cloneDeep circular references
+       * See https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm for the underlying mechanism used by Lodash
+       */
+      const newValue = JSON.parse(JSON.stringify(this.value));
+
+      items.forEach((item) => {
+        const panel = newValue.panels.find((p) => p.id === item.id);
+
+        if (!panel) return;
+
+        panel.gridAttributes = {
+          ...panel.gridAttributes,
+          ...this.convertToGridAttributes(item),
+        };
+      });
+      this.$emit('input', newValue);
+    },
+  },
+};
+</script>
+
+<template>
+  <div ref="grid" class="grid-stack" data-testid="gridstack-grid">
+    <div
+      v-for="panel in gridPanels"
+      :id="panel.id"
+      ref="panelWrappers"
+      :key="panel.id"
+      class="gl-h-full"
+      :class="{ 'gl-cursor-grab': !isStatic }"
+      data-testid="gridstack-panel"
+    >
+      <slot name="panel" v-bind="{ panel: panel.props }"></slot>
+    </div>
+  </div>
+</template>

package/src/components/dashboards/mock_data.js

@@ -0,0 +1,40 @@
+import uniqueId from 'lodash/uniqueId';
+
+export const getUniquePanelId = () => uniqueId('panel-');
+
+export const dashboard = {
+  id: 'analytics_overview',
+  slug: 'analytics_overview',
+  title: 'Analytics Overview',
+  description: 'This is a dashboard',
+  userDefined: true,
+  panels: [
+    {
+      title: 'Test A',
+      gridAttributes: { width: 3, height: 3, xPos: 0, yPos: 0 },
+      id: getUniquePanelId(),
+    },
+    {
+      title: 'Test B',
+      gridAttributes: { width: 2, height: 4, xPos: 1, yPos: 1, minHeight: 2, minWidth: 2 },
+      id: getUniquePanelId(),
+    },
+  ],
+  status: null,
+  errors: null,
+};
+
+export const mockPanel = {
+  title: 'Test A',
+  gridAttributes: {
+    width: 1,
+    height: 2,
+    xPos: 0,
+    yPos: 3,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 1,
+    maxHeight: 2,
+  },
+  id: getUniquePanelId(),
+};

package/src/components/mixins/tooltip_mixin.js

@@ -12,7 +12,7 @@ export default (tooltipRefName) => ({
      * https://bootstrap-vue.org/docs/components/tooltip#programmatically-show-and-hide-tooltip
      */
     tooltipActionEvents.forEach((event) =>
-      this.$on(event, () => this.$refs[tooltipRefName].$emit(event))
+      this.$on(event, () => this.$refs[tooltipRefName].$emit(event)),
     );
   },
   beforeDestroy() {

package/src/components/utilities/intersection_observer/intersection_observer.vue

@@ -7,7 +7,7 @@ const getObserver = memoize(
       entries.forEach((entry) => {
         entry.target.$_gl_intersectionHandler(entry);
       });
-    }, options || {})
+    }, options || {}),
 );
 
 export default {

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

@@ -8,7 +8,7 @@ import { intersperse, insert } from '../../../utils/data_utils';
 import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 
 const filterEmptyNodesVue2 = filter(
-  (vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== ''
+  (vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== '',
 );
 
 const { Fragment } = Vue;
@@ -67,7 +67,7 @@ export default {
     const filterAndSeparate = compose(
       addLastSeparator(lastSeparator),
       intersperse(separator),
-      filterEmptyNodes
+      filterEmptyNodes,
     );
 
     return createElement('span', data, filterAndSeparate(slots().default));

package/src/components/utilities/sprintf/sprintf.md

@@ -140,7 +140,7 @@ The example above renders to this HTML:
 
 `GlSprintf` does not handle white space in scoped slots specially; it is passed
 through and rendered just like regular text. This means that white space in the
-scoped slot templates *themselves*, including newlines and indentation, are
+scoped slot templates _themselves_, including newlines and indentation, are
 passed through untouched (assuming the template compiler you're using doesn't
 trim text nodes at compile time; `vue-template-compiler` preserves white space
 by default, for instance).

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

@@ -69,7 +69,7 @@ export default {
       validator: (value) =>
         Object.values(value).every(
           // eslint-disable-next-line unicorn/no-array-callback-reference
-          (tagPair) => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString)
+          (tagPair) => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString),
         ),
     },
   },

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

@@ -55,10 +55,10 @@ export default {
       const collapsibleWhitespaceChar = /^[ \n\t\r\f]$/;
       const { text, middleIndex } = this;
       const lastCharOfFirstIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(
-        text.charAt(middleIndex - 1)
+        text.charAt(middleIndex - 1),
       );
       const firstCharOfLastIsCollapsibleWhitespace = collapsibleWhitespaceChar.test(
-        text.charAt(middleIndex)
+        text.charAt(middleIndex),
       );
 
       return lastCharOfFirstIsCollapsibleWhitespace && !firstCharOfLastIsCollapsibleWhitespace;

package/src/config.js

@@ -81,7 +81,7 @@ const setConfigs = ({ translations, firstDayOfWeek } = {}) => {
       if (undefinedTranslationKeys.length) {
         /* eslint-disable no-console */
         console.warn(
-          '[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:'
+          '[@gitlab/ui] The following translations have not been given, so will fall back to their default US English strings:',
         );
         console.table(undefinedTranslationKeys);
         /* eslint-enable no-console */

package/src/directives/outside/outside.js

@@ -94,19 +94,19 @@ function parseBinding({ arg, value, modifiers }) {
 
     if (typeof arg !== 'undefined') {
       throw new Error(
-        `[GlOutsideDirective] Arguments are not supported. Consider using modifiers instead.`
+        `[GlOutsideDirective] Arguments are not supported. Consider using modifiers instead.`,
       );
     }
 
     const unsupportedModifiers = modifiersList.filter(
-      (modifier) => !supportedEventTypes.includes(modifier)
+      (modifier) => !supportedEventTypes.includes(modifier),
     );
 
     if (unsupportedModifiers.length > 0) {
       throw new Error(
         `[GlOutsideDirective] Cannot bind ${unsupportedModifiers.join(', ')} events; supported event types are: ${supportedEventTypes.join(
-          ', '
-        )}`
+          ', ',
+        )}`,
       );
     }
   }

package/src/directives/tooltip/tooltip.js

@@ -8,7 +8,7 @@ const patchHook = (hook) => (el, bindings, vnode) => {
       ...bindings,
       arg: bindings.arg || getGlTooltipDefaultContainer(),
     },
-    vnode
+    vnode,
   );
 };
 

package/src/scss/components.scss

@@ -72,6 +72,7 @@
 @import '../components/charts/single_stat/single_stat';
 @import '../components/charts/shared/tooltip/tooltip';
 @import '../components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format';
+@import '../components/dashboards/dashboard_layout/grid_layout/grid_layout';
 @import '../components/utilities/truncate/truncate';
 @import '../components/utilities/truncate_text/truncate_text';
 @import '../components/base/new_dropdowns/dropdown';