[WC-3288][WC-3280][WC-3279] datagrid all the grid layouts (#2124)

Author: r0b1n

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-filters.scss

@@ -19,6 +19,8 @@
     flex-grow: 1;
     position: relative;
 
+    overflow: hidden;
+
     .filter-input {
         border-start-start-radius: 0;
         border-end-start-radius: 0;

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -129,6 +129,7 @@ $root: ".widget-datagrid";
                 color: var(--gray-dark, $gray-dark);
                 height: var(--btn-font-size, $btn-font-size);
                 align-self: center;
+                z-index: 1;
             }
 
             &:focus:not(:focus-visible) {
@@ -493,6 +494,14 @@ $root: ".widget-datagrid";
         width: calc(var(--widgets-grid-width) - var(--widgets-grid-scrollbar-size));
         overflow-x: hidden;
     }
+
+    .widget-datagrid-grid-head {
+        &[data-scrolled-x="true"],
+        &[data-scrolled-y="true"] {
+            z-index: 1;
+        }
+    }
+
     .widget-datagrid-grid-head[data-scrolled-y="true"] {
         // add shadow under the header
         // implying that grid is scrolled vertically (there are rows hidden under header)
@@ -524,27 +533,54 @@ $root: ".widget-datagrid";
     }
 }
 
+// styles for browsers that don't support subgrid
+// if the browser doesn't support subgrid
+// fall back header an body the contents and apply grid template to the table
+.widget-datagrid-grid.table {
+    grid-template-columns: var(--widgets-grid-template-columns);
+}
+.widget-datagrid-grid-body,
 .widget-datagrid-grid-head {
-    display: grid;
-    min-width: 0;
-
-    // this head is not part of the grid, so it has dedicated column template  --widgets-grid-template-columns-head
-    // but it might not be available at the initial render, so we use template from the grid --widgets-grid-template-columns
-    // using template from the grid might to misalignment from the grid itself,
-    // but in practice:
-    //   - grid has no data at that moment, so misalignment is not visible.
-    //   - as soon as the grid itself gets rendered --widgets-grid-template-columns-head gets calculated
-    //     and everything looks like it should.
-    grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
+    display: contents;
 }
 
-.widget-datagrid-grid-body {
-    // this element has to position their children (columns or headers)
-    // as grid and have those aligned with the parent grid
-    display: grid;
-    // this property makes sure we align our own grid columns
-    // to the columns defined in the global grid
-    grid-template-columns: var(--widgets-grid-template-columns);
+// styles for modern browsers
+@supports (grid-template-rows: subgrid) {
+    .widget-datagrid-grid.table:not([data-has-scroll-x="true"]) {
+        grid-template-columns: var(--widgets-grid-template-columns);
+        .widget-datagrid-grid-body,
+        .widget-datagrid-grid-head {
+            display: grid;
+            min-width: 0;
+
+            // this property makes sure we align our own grid columns
+            // to the columns defined in the global grid
+            grid-template-columns: subgrid;
+
+            // ensure that we cover all columns of original top level grid
+            // so our own columns get aligned with the parent
+            grid-column: 1 / -1;
+        }
+    }
+
+    .widget-datagrid-grid.table[data-has-scroll-x="true"] {
+        // reset the columns defined on table level
+        // header and body will define their own instead
+        // this is needed to make body horizontally scrollable
+        grid-template-columns: initial;
+        .widget-datagrid-grid-head {
+            display: grid;
+            min-width: 0;
+
+            grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
+        }
+
+        .widget-datagrid-grid-body {
+            display: grid;
+
+            grid-template-columns: var(--widgets-grid-template-columns);
+        }
+    }
 }
 
 .grid-mock-header {

packages/pluggableWidgets/datagrid-web/e2e/DataGrid.spec.js-snapshots/datagrid-virtual-scrolling-chromium-linux.png

@@ -54,9 +54,6 @@ export function getProperties(values: DatagridPreviewProps, defaultProperties: P
         if (column.width !== "manual") {
             hidePropertyIn(defaultProperties, values, "columns", index, "size");
         }
-        if (column.width !== "autoFit") {
-            hidePropertyIn(defaultProperties, values, "columns", index, "minWidth");
-        }
         if (column.minWidth !== "manual") {
             hidePropertyIn(defaultProperties, values, "columns", index, "minWidthLimit");
         }

packages/pluggableWidgets/datagrid-web/e2e/filtering/DataGridFilteringIntegration.spec.js-snapshots/datagridFilteringIntegration-chromium-linux.png

@@ -8,6 +8,21 @@ export function MockHeader(): ReactNode {
     const resizeCallback = useCallback<ResizeObserverCallback>(
         entries => {
             const container = entries[0].target.parentElement!;
+
+            const gridContainer = container.closest<HTMLDivElement>(".table");
+            const gridBody = container.closest<HTMLDivElement>(".table-content");
+            if (gridContainer && gridBody) {
+                if (gridContainer.dataset.hasScrollX === "true") {
+                    if (gridBody.scrollWidth <= gridBody.clientWidth) {
+                        delete gridContainer.dataset.hasScrollX;
+                    }
+                } else {
+                    if (gridContainer.scrollWidth > gridContainer.clientWidth) {
+                        gridContainer.dataset.hasScrollX = "true";
+                    }
+                }
+            }
+
             const sizes = new Map<string, number>();
             container.querySelectorAll<HTMLDivElement>("[data-column-id]").forEach(c => {
                 const columnId = c.dataset.columnId;

packages/pluggableWidgets/datagrid-web/e2e/filtering/DataGridFilteringSingle.spec.js-snapshots/datagridFilteringSingle-chromium-linux.png

@@ -26,8 +26,8 @@ export function Widget(props: { onExportCancel?: () => void }): ReactElement {
                     <SelectAllBar />
                     <RefreshStatus />
                     <GridBody>
-                        <MockHeader />
                         <RowsRenderer />
+                        <MockHeader />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -5,7 +5,7 @@ exports[`Grid renders without crashing 1`] = `
   <div
     class="widget-datagrid-grid table"
     role="grid"
-    style="--widgets-grid-template-columns: 1fr 1fr 54px;"
+    style="--widgets-grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr) 54px;"
   >
     Test
   </div>
@@ -17,7 +17,7 @@ exports[`Grid renders without selector column 1`] = `
   <div
     class="widget-datagrid-grid table"
     role="grid"
-    style="--widgets-grid-template-columns: 1fr 1fr;"
+    style="--widgets-grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);"
   >
     Test
   </div>

packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx

@@ -56,21 +56,30 @@ export class BaseColumnInfo {
         this.allowEventPropagation = props.allowEventPropagation;
     }
 
+    get minColumnWidth(): "auto" | "min-content" | `${number}px` {
+        switch (this.minWidth) {
+            case "auto": {
+                return "auto";
+            }
+            case "minContent": {
+                return "min-content";
+            }
+            case "manual": {
+                return `${this.minWidthLimit}px`;
+            }
+        }
+    }
+
     get columnWidth(): string {
         switch (this.width) {
+            case "autoFill": {
+                return `minmax(${this.minColumnWidth}, 1fr)`;
+            }
             case "autoFit": {
-                const min =
-                    this.minWidth === "manual"
-                        ? `${this.minWidthLimit}px`
-                        : this.minWidth === "minContent"
-                          ? "min-content"
-                          : "auto";
-                return `minmax(${min}, auto)`;
+                return `minmax(${this.minColumnWidth}, auto)`;
             }
             case "manual":
-                return `${this.weight}fr`;
-            default:
-                return "1fr";
+                return `minmax(${this.minColumnWidth}, ${this.weight}fr)`;
         }
     }
 }