@gitlab/ui 132.0.0 → 132.0.2

package/dist/components/dashboards/dashboard_layout/dashboard_layout.js

@@ -0,0 +1,125 @@
+import GridLayout from './grid_layout/grid_layout';
+import { dashboardConfigValidator } from './validators';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+/**
+ * The `DashboardLayout` component provides an easy way to render dashboards using a configuration, aligning with our [Pajamas guidelines](https://design.gitlab.com/patterns/dashboards).
+ */
+var script = {
+  name: 'GlDashboardLayout',
+  components: {
+    GridLayout
+  },
+  props: {
+    /**
+     * The dashboard configuration object.
+     *
+     * @typedef {Object} Dashboard
+     * @property {string} title - The dashboard title to render. Expected if no #title or #header slot is provided.
+     * @property {string} description - Optional: The dashboard description to render.
+     * @property {DashboardGrid} panels - Optional: The grid configuration.
+     * @see GridLayout.vue
+     *
+     * @type {Dashboard}
+     */
+    config: {
+      type: Object,
+      required: true,
+      validator: dashboardConfigValidator
+    },
+    /**
+     * Set to `false` to enable user-driven modification of the grid layout.
+     */
+    isStaticGrid: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+      /* Magic number:
+       * 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.
+       */
+      default: 137,
+      validator: value => value > 0
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: value => value > 0
+    }
+  },
+  computed: {
+    dashboardHasPanels() {
+      var _this$config$panels;
+      return ((_this$config$panels = this.config.panels) === null || _this$config$panels === void 0 ? void 0 : _this$config$panels.length) > 0;
+    },
+    dashboardHasTitle() {
+      return this.$scopedSlots.title || Boolean(this.config.title);
+    },
+    dashboardHasDescription() {
+      return this.$scopedSlots.description || Boolean(this.config.description);
+    },
+    dashboardHasHeader() {
+      return this.$scopedSlots.header || this.$scopedSlots.actions || this.dashboardHasTitle || this.dashboardHasDescription;
+    }
+  },
+  methods: {
+    emitChanges(newConfig) {
+      this.$emit('changed', newConfig);
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
+var panel = ref.panel;
+return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("footer")],2)};
+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__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/dashboards/dashboard_layout/grid_layout/grid_layout.js

@@ -0,0 +1,326 @@
+import { GridStack } from 'gridstack';
+import { pickBy } from 'lodash-es';
+import { breakpoints } from '../../../../utils/breakpoints';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const CURSOR_GRABBING_CLASS = '!gl-cursor-grabbing';
+var script = {
+  name: 'GlGridLayout',
+  props: {
+    /**
+     * The grid configuration object.
+     *
+     * @typedef {Object} DashboardGrid
+     * @property {Array<Object>} panels - The dashboard panels. If empty, it will render an empty grid
+     * @property {string} panels[].id - Each panel must have a unique ID.
+     * @property {string} panels[].title - The panel title to render.
+     * @property {Object} panels[].gridAttributes - Layout settings for the panel.
+     * @property {number} panels[].gridAttributes.width - Width of the panel in grid units.
+     * @property {number} panels[].gridAttributes.height - Height of the panel in grid units.
+     * @property {number} panels[].gridAttributes.xPos - X position of the panel in the grid, expressed in grid units, starts from 0.
+     * @property {number} panels[].gridAttributes.yPos - Y position of the panel in the grid, expressed in grid units, starts from 0.
+     *
+     * @type {DashboardGrid}
+     */
+    value: {
+      type: Object,
+      required: true
+    },
+    /**
+     * Set to `false` to enable user-driven modification of the grid layout.
+     */
+    isStaticGrid: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+      /* Magic number:
+       * 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.
+       */
+      default: 137,
+      validator: value => value > 0
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: value => value > 0
+    }
+  },
+  data() {
+    return {
+      grid: undefined,
+      gridPanels: []
+    };
+  },
+  computed: {
+    gridConfig() {
+      return this.value.panels.map(panel => {
+        const {
+          gridAttributes,
+          ...otherProps
+        } = panel;
+        return {
+          ...this.getPanelGridItemConfig(panel),
+          props: otherProps
+        };
+      });
+    }
+  },
+  watch: {
+    isStaticGrid(value) {
+      var _this$grid;
+      (_this$grid = this.grid) === null || _this$grid === void 0 ? void 0 : _this$grid.setStatic(value);
+    },
+    gridConfig: {
+      handler(config) {
+        var _this$grid2;
+        (_this$grid2 = this.grid) === null || _this$grid2 === void 0 ? void 0 : _this$grid2.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() {
+    var _this$grid3;
+    const removeDom = Boolean(this.$el.parentElement);
+    (_this$grid3 = this.grid) === null || _this$grid3 === void 0 ? void 0 : _this$grid3.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) {
+      let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        scrollIntoView: false
+      };
+      // Ensure new panels are always rendered first
+      await this.$nextTick();
+      panels.forEach(panel => {
+        var _this$$refs$panelWrap;
+        const wrapper = (_this$$refs$panelWrap = this.$refs.panelWrappers) === null || _this$$refs$panelWrap === void 0 ? void 0 : _this$$refs$panelWrap.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',
+        // 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
+          }]
+        },
+        cellHeight: this.cellHeight,
+        alwaysShowResizeHandle: true,
+        animate: true,
+        float: true,
+        // Toggles user-customization of grid layout
+        staticGrid: this.isStaticGrid
+      }, 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(_ref) {
+      let {
+        gridAttributes: {
+          xPos,
+          yPos,
+          width,
+          height,
+          minHeight,
+          minWidth,
+          maxHeight,
+          maxWidth
+        },
+        id
+      } = _ref;
+      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 || this.minCellHeight,
+        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(_ref2 => {
+        let {
+          grid,
+          ...rest
+        } = _ref2;
+        return {
+          ...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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"grid",staticClass:"grid-stack",attrs:{"data-testid":"gridstack-grid"}},_vm._l((_vm.gridPanels),function(panel){return _c('div',{key:panel.id,ref:"panelWrappers",refInFor:true,staticClass:"gl-h-full",class:{ 'gl-cursor-grab': !_vm.isStaticGrid },attrs:{"id":panel.id,"data-testid":"gridstack-panel"}},[_vm._t("panel",null,null,{ panel: panel.props })],2)}),0)};
+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__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/components/dashboards/dashboard_layout/validators.js

@@ -0,0 +1,14 @@
+const dashboardConfigValidator = config => {
+  if (config.panels) {
+    if (!Array.isArray(config.panels)) return false;
+    if (!config.panels.every(panel => panel.id && panel.gridAttributes)) return false;
+
+    // Validate that all panel IDs are unique
+    const panelIds = config.panels.map(panel => panel.id);
+    const uniquePanelIds = new Set(panelIds);
+    if (panelIds.length !== uniquePanelIds.size) return false;
+  }
+  return true;
+};
+
+export { dashboardConfigValidator };