AutoGrid: Fixes issue with deserialize (#102864)

* ResponsiveGrid: Fixes issue with deserialize

* fix test

public/app/features/dashboard-scene/serialization/layoutSerializers/ResponsiveGridLayoutSerializer.ts

@@ -1,10 +1,13 @@
-import { DashboardV2Spec, ResponsiveGridLayoutItemKind } from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0';
+import {
+  DashboardV2Spec,
+  defaultResponsiveGridLayoutSpec,
+  ResponsiveGridLayoutItemKind,
+} from '@grafana/schema/dist/esm/schema/dashboard/v2alpha0';
 
 import { ResponsiveGridItem } from '../../scene/layout-responsive-grid/ResponsiveGridItem';
 import { ResponsiveGridLayout } from '../../scene/layout-responsive-grid/ResponsiveGridLayout';
 import {
   AUTO_GRID_DEFAULT_COLUMN_WIDTH,
-  AUTO_GRID_DEFAULT_MAX_COLUMN_COUNT,
   AUTO_GRID_DEFAULT_ROW_HEIGHT,
   AutoGridColumnWidth,
   AutoGridRowHeight,
@@ -20,14 +23,17 @@ import { buildLibraryPanel, buildVizPanel, getConditionalRendering } from './uti
 
 export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer {
   serialize(layoutManager: ResponsiveGridLayoutManager): DashboardV2Spec['layout'] {
+    const { maxColumnCount, fillScreen, columnWidth, rowHeight, layout } = layoutManager.state;
+    const defaults = defaultResponsiveGridLayoutSpec();
+
     return {
       kind: 'ResponsiveGridLayout',
       spec: {
-        maxColumnCount: layoutManager.state.maxColumnCount,
-        fillScreen: layoutManager.state.fillScreen,
-        ...serializeAutoGridColumnWidth(layoutManager.state.columnWidth),
-        ...serializeAutoGridRowHeight(layoutManager.state.rowHeight),
-        items: layoutManager.state.layout.state.children.map((child) => {
+        maxColumnCount,
+        fillScreen: fillScreen === defaults.fillScreen ? undefined : fillScreen,
+        ...serializeAutoGridColumnWidth(columnWidth),
+        ...serializeAutoGridRowHeight(rowHeight),
+        items: layout.state.children.map((child) => {
           if (!(child instanceof ResponsiveGridItem)) {
             throw new Error('Expected ResponsiveGridItem');
           }
@@ -68,6 +74,9 @@ export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer {
       throw new Error('Invalid layout kind');
     }
 
+    const defaults = defaultResponsiveGridLayoutSpec();
+    const { maxColumnCount, columnWidthMode, columnWidth, rowHeightMode, rowHeight, fillScreen } = layout.spec;
+
     const children = layout.spec.items.map((item) => {
       const panel = elements[item.spec.element.name];
       if (!panel) {
@@ -81,20 +90,20 @@ export class ResponsiveGridLayoutSerializer implements LayoutManagerSerializer {
       });
     });
 
+    const columnWidthCombined = columnWidthMode === 'custom' ? columnWidth : columnWidthMode;
+    const rowHeightCombined = rowHeightMode === 'custom' ? rowHeight : rowHeightMode;
+
     return new ResponsiveGridLayoutManager({
-      maxColumnCount: layout.spec.maxColumnCount,
-      columnWidth: layout.spec.columnWidthMode === 'custom' ? layout.spec.columnWidth : layout.spec.columnWidthMode,
-      rowHeight: layout.spec.rowHeightMode === 'custom' ? layout.spec.rowHeight : layout.spec.rowHeightMode,
-      fillScreen: layout.spec.fillScreen,
+      maxColumnCount,
+      columnWidth: columnWidthCombined,
+      rowHeight: rowHeightCombined,
+      fillScreen: fillScreen ?? defaults.fillScreen,
       layout: new ResponsiveGridLayout({
         templateColumns: getTemplateColumnsTemplate(
-          layout.spec.maxColumnCount ?? AUTO_GRID_DEFAULT_MAX_COLUMN_COUNT,
-          layout.spec.columnWidth ?? AUTO_GRID_DEFAULT_COLUMN_WIDTH
-        ),
-        autoRows: getAutoRowsTemplate(
-          layout.spec.rowHeight ?? AUTO_GRID_DEFAULT_ROW_HEIGHT,
-          layout.spec.fillScreen ?? false
+          maxColumnCount ?? defaults.maxColumnCount!,
+          columnWidthCombined ?? AUTO_GRID_DEFAULT_COLUMN_WIDTH
         ),
+        autoRows: getAutoRowsTemplate(rowHeightCombined ?? AUTO_GRID_DEFAULT_ROW_HEIGHT, fillScreen ?? false),
         children,
       }),
     });

public/app/features/dashboard-scene/serialization/layoutSerializers/RowsLayoutSerializer.test.ts

@@ -272,7 +272,7 @@ describe('serialization', () => {
                 spec: {
                   columnWidth: undefined,
                   rowHeight: undefined,
-                  fillScreen: false,
+                  fillScreen: undefined,
                   rowHeightMode: 'standard',
                   columnWidthMode: 'standard',
                   maxColumnCount: 4,