@gitlab/ui 115.0.0 → 115.1.0

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -1,8 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, shift, arrow, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, KEY_CODE_ESCAPE, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { logWarning, isElementFocusable, isElementTabbable, stopEvent } from '../../../../utils/utils';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -461,11 +461,23 @@ var script = {
     },
     onKeydown(event) {
       const {
+        keyCode,
         code,
         target: {
           tagName
         }
       } = event;
+
+      // Use keyCode because @vue/test-utils doesn't correctly set the
+      // `code` and `key` KeyboardEvent properties. This is only needed in this case because:
+      //  - We are not using the @keydown.esc template syntax, which under Vue 2 checks against `keyCode` anyway.
+      //  - The `.trigger('keydown.esc')` shorthand @vue/test-utils provides is useful.
+      // See https://github.com/vuejs/vue-test-utils/issues/2096
+      if (keyCode === KEY_CODE_ESCAPE && this.visible) {
+        stopEvent(event);
+        this.close();
+        return;
+      }
       let toggleOnEnter = true;
       let toggleOnSpace = true;
       if (tagName === 'BUTTON') {
@@ -496,7 +508,7 @@ var 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',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.close.apply(null, arguments)}}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/constants.js

@@ -4,7 +4,7 @@ const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
-// KEY Codes
+// KeyboardEvent.code values
 const ARROW_DOWN = 'ArrowDown';
 const ARROW_UP = 'ArrowUp';
 const END = 'End';
@@ -12,10 +12,13 @@ const ENTER = 'Enter';
 const HOME = 'Home';
 const SPACE = 'Space';
 
+// KeyboardEvent.keyCode values
+const KEY_CODE_ESCAPE = 27;
+
 // Positioning strategies
 // https://floating-ui.com/docs/computePosition#strategy
 const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, KEY_CODE_ESCAPE, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

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

@@ -0,0 +1,286 @@
+import { GridStack } from 'gridstack';
+import pickBy from 'lodash/pickBy';
+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: {
+    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) {
+      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',
+        /* 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(_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,
+        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.isStatic },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/mock_data.js

@@ -0,0 +1,49 @@
+import uniqueId from 'lodash/uniqueId';
+
+const getUniquePanelId = () => uniqueId('panel-');
+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
+};
+const mockPanel = {
+  title: 'Test A',
+  gridAttributes: {
+    width: 1,
+    height: 2,
+    xPos: 0,
+    yPos: 3,
+    minWidth: 1,
+    minHeight: 2,
+    maxWidth: 1,
+    maxHeight: 2
+  },
+  id: getUniquePanelId()
+};
+
+export { dashboard, getUniquePanelId, mockPanel };