Dashboard SchemaV2: v2->scene tests for layout, transformations (#97819)

* Tests for layout, transformations; displayMode

* remove fixme; update helper with the correct type

* Rename to transparent

* Fix

packages/grafana-schema/src/schema/dashboard/v2alpha0/dashboard.gen.ts

@@ -700,6 +700,7 @@ export interface PanelSpec {
 	links: DataLink[];
 	data: QueryGroupKind;
 	vizConfig: VizConfigKind;
+	transparent?: boolean;
 }
 
 export const defaultPanelSpec = (): PanelSpec => ({

packages/grafana-schema/src/schema/dashboard/v2alpha0/dashboard.schema.cue

@@ -485,6 +485,7 @@ PanelSpec: {
   links: [...DataLink]
   data: QueryGroupKind
   vizConfig: VizConfigKind
+  transparent?: bool
 }
 
 PanelKind: {

packages/grafana-schema/src/schema/dashboard/v2alpha0/examples.ts

@@ -194,8 +194,8 @@ export const handyTestingSchema: DashboardV2Spec = {
               kind: 'ElementReference',
               name: 'test-panel-uid',
             },
-            height: 0,
-            width: 0,
+            height: 100,
+            width: 200,
             x: 0,
             y: 0,
           },

public/app/features/dashboard-scene/serialization/transformSaveModelSchemaV2ToScene.test.ts

@@ -12,6 +12,7 @@ import {
   sceneGraph,
   GroupByVariable,
   AdHocFiltersVariable,
+  SceneDataTransformer,
 } from '@grafana/scenes';
 import {
   AdhocVariableKind,
@@ -29,6 +30,7 @@ import { DashboardWithAccessInfo } from 'app/features/dashboard/api/dashboard_ap
 import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
 
 import { DashboardDataLayerSet } from '../scene/DashboardDataLayerSet';
+import { DefaultGridLayoutManager } from '../scene/layout-default/DefaultGridLayoutManager';
 import { DashboardLayoutManager } from '../scene/types';
 import { dashboardSceneGraph } from '../utils/dashboardSceneGraph';
 import { getQueryRunnerFor } from '../utils/utils';
@@ -208,7 +210,20 @@ describe('transformSaveModelSchemaV2ToScene', () => {
     const vizPanel = vizPanels[0];
     validateVizPanel(vizPanel, dash);
 
-    // FIXME: Tests for layout
+    // Layout
+    const layout = scene.state.body as DefaultGridLayoutManager;
+    expect(layout.state.grid.state.children.length).toBe(1);
+    expect(layout.state.grid.state.children[0].state.key).toBe(`grid-item-${Object.keys(dash.elements)[0]}`);
+    const gridLayoutItemSpec = dash.layout.spec.items[0].spec;
+    expect(layout.state.grid.state.children[0].state.width).toBe(gridLayoutItemSpec.width);
+    expect(layout.state.grid.state.children[0].state.height).toBe(gridLayoutItemSpec.height);
+    expect(layout.state.grid.state.children[0].state.x).toBe(gridLayoutItemSpec.x);
+    expect(layout.state.grid.state.children[0].state.y).toBe(gridLayoutItemSpec.y);
+
+    // Transformations
+    expect((vizPanel.state.$data as SceneDataTransformer)?.state.transformations[0]).toEqual(
+      dash.elements['test-panel-uid'].spec.data.spec.transformations[0].spec
+    );
   });
 
   it('should set panel ds if it is mixed DS', () => {

public/app/features/dashboard-scene/serialization/transformSaveModelSchemaV2ToScene.ts

@@ -238,8 +238,7 @@ function buildVizPanel(panel: PanelKind): VizPanel {
     options: panel.spec.vizConfig.spec.options,
     fieldConfig: transformMappingsToV1(panel.spec.vizConfig.spec.fieldConfig),
     pluginVersion: panel.spec.vizConfig.spec.pluginVersion,
-    // FIXME: Transparent is not added to the schema yet
-    // displayMode: panel.spec.transparent ? 'transparent' : undefined,
+    displayMode: panel.spec.transparent ? 'transparent' : 'default',
     hoverHeader: !panel.spec.title && !timeOverrideShown,
     hoverHeaderOffset: 0,
     $data: createPanelDataProvider(panel),

public/app/features/dashboard-scene/v2schema/test-helpers.ts

@@ -1,7 +1,7 @@
 import {
   AdHocFiltersVariable,
+  CustomVariable,
   DataSourceVariable,
-  GroupByVariable,
   QueryVariable,
   SceneDataTransformer,
   SceneObject,
@@ -54,8 +54,8 @@ export function validateVariable<
     expect(sceneVariable?.state.datasource).toBe(variableKind.spec.datasource);
     expect(sceneVariable?.state.query).toBe(variableKind.spec.query);
   }
-  if (sceneVariable instanceof GroupByVariable && variableKind.kind === 'CustomVariable') {
-    expect(sceneVariable?.state.datasource).toBe(variableKind.spec.query);
+  if (sceneVariable instanceof CustomVariable && variableKind.kind === 'CustomVariable') {
+    expect(sceneVariable?.state.query).toBe(variableKind.spec.query);
   }
 }
 
@@ -67,6 +67,7 @@ export function validateVizPanel(vizPanel: VizPanel, dash: DashboardV2Spec) {
   expect(vizPanel.state.options).toEqual(dash.elements['test-panel-uid'].spec.vizConfig.spec.options);
   expect(vizPanel.state.fieldConfig).toEqual(dash.elements['test-panel-uid'].spec.vizConfig.spec.fieldConfig);
   expect(vizPanel.state.key).toBe(dash.elements['test-panel-uid'].spec.uid);
+  expect(vizPanel.state.displayMode).toBe(dash.elements['test-panel-uid'].spec.transparent ? 'transparent' : 'default');
 
   expect(vizPanel.state.$data).toBeInstanceOf(SceneDataTransformer);
   const dataTransformer = vizPanel.state.$data as SceneDataTransformer;