Bump gridstack from 11.5.1 to 12.1.1

* Bump gridstack from 11.5.1 to 12.1.1

Bumps [gridstack](https://github.com/gridstack/gridstack.js) from 11.5.1 to 12.1.1.
- [Release notes](https://github.com/gridstack/gridstack.js/releases)
- [Changelog](https://github.com/gridstack/gridstack.js/blob/master/doc/CHANGES.md)
- [Commits](https://github.com/gridstack/gridstack.js/commits/v12.1.1)

---
updated-dependencies:
- dependency-name: gridstack
  dependency-version: 12.1.1
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Review CSS imports
* Fix styles
* Switch to CSS vars

Author: dependabot[bot]

css/includes/components/_racks.scss

@@ -105,14 +105,6 @@
 }
 
 .grid-stack {
-    .grid-stack-item {
-        .grid-stack-item-content,
-        .placeholder-content {
-            left: 0;
-            right: 0;
-        }
-    }
-
     .grid-stack-placeholder > .placeholder-content {
         border: 1px dashed #bcbf33;
         background-color: rgba(229, 245, 105, 50%);
@@ -153,7 +145,7 @@ ul.indexes {
         content: "\2b";
         left: 45%;
         color: grey;
-        top: 1px;
+        top: 3px;
         font: var(--fa-font-solid);
         font-size: 1em;
         position: absolute;
@@ -206,8 +198,8 @@ ul.indexes {
             float: left;
 
             &::after {
-                left: calc(50% - 4px);
-                top: calc(50% - 0.5em - 4px);
+                left: calc(50% - 5px);
+                top: calc(50% - 6px);
             }
         }
     }
@@ -430,7 +422,7 @@ ul.indexes {
 .grid-rack {
     width: 217px;
     background:
-        var(--tblr-body-bg) repeating-linear-gradient(
+        var(--tblr-bg-surface) repeating-linear-gradient(
             transparent,
             transparent 21px,
             var(--tblr-bg-surface-tertiary) 21px,

css/standalone/dashboard.scss

@@ -31,7 +31,6 @@
  * ---------------------------------------------------------------------
  */
 
-$item_margin: 3px;
 $toolbar_height: 40px;
 $filter_height: 62px;
 $break_phones: 700px;
@@ -563,20 +562,23 @@ $break_tablet: 1400px;
     .grid-guide {
         display: none;
         position: absolute;
-        top: calc(#{$toolbar_height} + #{$filter_height} + 16px);
+        bottom: var(--gs-cell-height);
         width: calc(100% + 1px);
         border: 1px solid var(--tblr-body-bg);
         border-width: 0 1px 1px 0;
         background-image:
             linear-gradient(to right, var(--tblr-body-bg) 1px, transparent 1px),
             linear-gradient(to bottom, var(--tblr-body-bg) 1px, transparent 1px);
+        background-size: var(--gs-cell-height) var(--gs-cell-height);
 
         .cell-add {
             opacity: 0;
             z-index: 2;
             position: relative;
             cursor: pointer;
             border: 2px dashed #777;
+            width: var(--gs-cell-height);
+            height: var(--gs-cell-height);
 
             &:hover {
                 opacity: 1;
@@ -638,11 +640,6 @@ $break_tablet: 1400px;
                 }
             }
 
-            .placeholder-content {
-                left: $item_margin;
-                right: $item_margin;
-            }
-
             .loading-card {
                 height: 100%;
                 border: 1px solid rgba($color: #000, $alpha: 5%);

js/modules/Dashboard/Dashboard.js

@@ -166,9 +166,6 @@ class GLPIDashboard {
         // see https://github.com/gridstack/gridstack.js/issues/1229
         this.grid.setStatic(true);
 
-        // generate the css based on the grid width
-        this.generateCss();
-
         // set the width of the select box to match the selected option
         this.resizeSelect();
 
@@ -295,8 +292,6 @@ class GLPIDashboard {
 
             window.clearTimeout(debounce);
             debounce = window.setTimeout(() => {
-                this.generateCss();
-
                 // fit again numbers
                 this.fitNumbers();
             }, 200);
@@ -1177,52 +1172,6 @@ class GLPIDashboard {
         }, 10);
     }
 
-    generateCss() {
-        const dash_width    = Math.floor(this.element.width());
-        const cell_length   = (dash_width - 1) / this.cols;
-        let cell_height   = cell_length;
-        const cell_fullsize = (dash_width / this.cols);
-        const width_percent = 100 / this.cols;
-
-        let style = " \
-      "+this.elem_id+" .cell-add { \
-         width: "+cell_length+"px; \
-         height: "+cell_fullsize+"px; \
-      } \
-      "+this.elem_id+" .grid-guide { \
-         background-size: "+cell_length+"px "+cell_fullsize+"px; \
-         bottom: "+cell_fullsize+"px; \
-      }";
-
-        for (let i = 0; i < this.cols; i++) {
-            const left  = i * width_percent;
-            const width = (i+1) * width_percent;
-
-            style+= this.elem_id+" .grid-stack > .grid-stack-item[gs-x='"+i+"'] { \
-            left: "+left+"%; \
-         } \
-         "+this.elem_id+" .grid-stack > .grid-stack-item[gs-w='"+(i+1)+"'] { \
-            min-width: "+width_percent+"%; \
-            width: "+width+"%; \
-         }";
-        }
-
-        // remove old inline styles
-        $("#gs_inline_css_"+this.rand).remove();
-
-        // add new style
-        if (dash_width > 700) {
-            $("<style id='gs_inline_css_"+this.rand+"'></style>")
-                .prop("type", "text/css")
-                .html(style)
-                .appendTo("head");
-        } else {
-            cell_height = 60;
-        }
-
-        // apply new height to gridstack
-        this.grid.cellHeight(cell_height);
-    }
 
     /**
      * init filters of the dashboard

lib/bundles/gridstack.js

@@ -34,5 +34,4 @@
 // Gridstack lib
 import { GridStack } from 'gridstack';
 window.GridStack = GridStack;
-require('gridstack/dist/gridstack.min.css');
-require('gridstack/dist/gridstack-extra.min.css');
+require('gridstack/dist/gridstack.css');

package-lock.json

@@ -38,7 +38,7 @@
         "flatpickr": "^4.6.3",
         "fuzzy": "^0.1.3",
         "gettext.js": "^2.0.3",
-        "gridstack": "^11.5.1",
+        "gridstack": "^12.1.1",
         "hotkeys-js": "^3.13.9",
         "html5sortable": "^0.14.0",
         "jquery": "^3.7.1",

package.json

@@ -56,7 +56,7 @@
 
 class Grid
 {
-    protected $cell_margin     = 6;
+    protected $cell_margin     = 3;
     protected $grid_cols       = 26;
     protected $grid_rows       = 24;
     protected $current         = "";
@@ -462,12 +462,12 @@ public function show(bool $mini = false, ?string $token = null)
                 <span class='glpi_logo'></span>
                 {{ toolbars|raw }}
                 {{ filters|raw }}
-                {{ grid_guide|raw }}
                 <div class="grid-stack grid-stack-{{ grid_cols }}"
-                    id="grid-stack-{{ rand }}"
-                    gs-column="{{ grid_cols }}"
-                    gs-min-row="{{ grid_rows }}"
-                    style="width: 100%">
+                id="grid-stack-{{ rand }}"
+                gs-column="{{ grid_cols }}"
+                gs-min-row="{{ grid_rows }}"
+                style="width: 100%">
+                    {{ grid_guide|raw }}
                     {{ gridstack_items|raw }}
                 </div>
             </div>

src/Glpi/Dashboard/Grid.php

@@ -38,7 +38,6 @@ import {jest} from '@jest/globals';
 describe('Dashboard', () => {
     beforeAll(() => {
         // Make backups of some methods on the prototype we will mock by default because they are called from the constructor
-        GLPIDashboard.prototype._generateCss = GLPIDashboard.prototype.generateCss;
         GLPIDashboard.prototype._refreshDashboard = GLPIDashboard.prototype.refreshDashboard;
     });
     beforeEach(() => {
@@ -48,7 +47,6 @@ describe('Dashboard', () => {
         window.AjaxMock.end();
 
         // Mock some instance methods we don't want to test but are called from the constructor
-        GLPIDashboard.prototype.generateCss = jest.fn().mockImplementation(() => {});
         GLPIDashboard.prototype.refreshDashboard = jest.fn().mockImplementation(() => {});
 
         // Mock GridStack
@@ -1335,51 +1333,6 @@ describe('Dashboard', () => {
         expect($('.grid-stack-item > *:not(.empty-card)').length).toBe(2);
     });
 
-    test('generateCss', () => {
-        let dashboard = new GLPIDashboard({
-            'rand': '12345',
-            'cols': 10
-        });
-        // Restore the original function (must be done per-object after constructor)
-        dashboard.generateCss = GLPIDashboard.prototype._generateCss;
-        $('#dashboard-12345').width('1000px');
-        dashboard.grid.cellHeight = jest.fn().mockImplementation(() => {});
-        dashboard.generateCss();
-        expect(dashboard.grid.cellHeight).toHaveBeenCalledWith(99.9);
-        let head_html = $('head').html();
-        expect(head_html).toMatch(/^<style id="gs_inline_css_12345"/i);
-        expect(head_html).toMatch(/#dashboard-12345 .cell-add\s*{\s*width: 99.9px;\s*height: 100px;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-guide\s*{\s*background-size: 99.9px 100px;\s*bottom: 100px;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-stack > .grid-stack-item\[gs-w='6']\s*{\s*min-width: 10%;\s*width: 60%;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-stack > .grid-stack-item\[gs-x='6']\s*{\s*left: 60%;\s*}/i);
-
-        dashboard = new GLPIDashboard({
-            'rand': '12345',
-            'cols': 15
-        });
-        dashboard.generateCss = GLPIDashboard.prototype._generateCss;
-        $('#dashboard-12345').width('750px');
-        dashboard.grid.cellHeight = jest.fn().mockImplementation(() => {});
-        dashboard.generateCss();
-        expect(dashboard.grid.cellHeight).toHaveBeenCalledWith(49.93333333333333);
-        head_html = $('head').html();
-        expect(head_html).toMatch(/^<style id="gs_inline_css_12345"/i);
-        expect(head_html).toMatch(/#dashboard-12345 .cell-add\s*{\s*width: 49.93333333333333px;\s*height: 50px;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-guide\s*{\s*background-size: 49.93333333333333px 50px;\s*bottom: 50px;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-stack > .grid-stack-item\[gs-w='6']\s*{\s*min-width: 6.666666666666667%;\s*width: 40%;\s*}/i);
-        expect(head_html).toMatch(/#dashboard-12345 .grid-stack > .grid-stack-item\[gs-x='6']\s*{\s*left: 40%;\s*}/i);
-
-        dashboard = new GLPIDashboard({
-            'rand': '12345',
-            'cols': 10
-        });
-        dashboard.generateCss = GLPIDashboard.prototype._generateCss;
-        $('#dashboard-12345').width('500px');
-        dashboard.grid.cellHeight = jest.fn().mockImplementation(() => {});
-        dashboard.generateCss();
-        expect(dashboard.grid.cellHeight).toHaveBeenCalledWith(60);
-    });
-
     test('initFilters', async () => {
         const dashboard = new GLPIDashboard({'rand': '12345'});
         dashboard.getFiltersFromDB = jest.fn().mockImplementation(() => {
@@ -1818,23 +1771,19 @@ describe('Dashboard', () => {
 
     test('Update CSS and Fit Numbers on Resize', () => {
         const dashboard = new GLPIDashboard({'rand': '12345'});
-        dashboard.generateCss = jest.fn().mockImplementation(() => {});
         dashboard.fitNumbers = jest.fn().mockImplementation(() => {});
         jest.useFakeTimers();
         $(window).trigger('resize');
         jest.advanceTimersByTime(250);
-        expect(dashboard.generateCss).toHaveBeenCalled();
         expect(dashboard.fitNumbers).toHaveBeenCalled();
     });
 
     test('Do not Update CSS and Fit Numbers on Propagated Resize', () => {
         const dashboard = new GLPIDashboard({'rand': '12345'});
-        dashboard.generateCss = jest.fn().mockImplementation(() => {});
         dashboard.fitNumbers = jest.fn().mockImplementation(() => {});
         jest.useFakeTimers();
         $('body').trigger('resize');
         jest.advanceTimersByTime(250);
-        expect(dashboard.generateCss).not.toHaveBeenCalled();
         expect(dashboard.fitNumbers).not.toHaveBeenCalled();
     });