InspectJsonTab: Force render the layout after change to reflect new gridPos (#115688)

force render the layout after inspect panel change to account for gridPos change

public/app/features/dashboard-scene/inspect/InspectJsonTab.test.tsx

@@ -12,7 +12,7 @@ import {
 } from '@grafana/data';
 import { getPanelPlugin } from '@grafana/data/test';
 import { setPluginImportUtils, setRunRequest } from '@grafana/runtime';
-import { SceneCanvasText, SceneDataTransformer, SceneQueryRunner, VizPanel } from '@grafana/scenes';
+import { SceneCanvasText, SceneDataTransformer, SceneGridLayout, SceneQueryRunner, VizPanel } from '@grafana/scenes';
 import * as libpanels from 'app/features/library-panels/state/api';
 import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
 
@@ -183,6 +183,51 @@ describe('InspectJsonTab', () => {
     expect(tab.state.onClose).toHaveBeenCalled();
   });
 
+  it('Can update gridPos and forces layout re-render', async () => {
+    const { tab, panel, scene } = await buildTestScene();
+
+    // Get the layout manager and spy on the grid's forceRender
+    const layoutManager = scene.state.body as DefaultGridLayoutManager;
+    const grid = layoutManager.state.grid as SceneGridLayout;
+    const forceRenderSpy = jest.spyOn(grid, 'forceRender');
+
+    const originalGridItem = panel.parent as DashboardGridItem;
+    expect(originalGridItem.state.x).toBe(0);
+    expect(originalGridItem.state.y).toBe(0);
+    expect(originalGridItem.state.width).toBe(8);
+    expect(originalGridItem.state.height).toBe(10);
+
+    tab.onCodeEditorBlur(`{
+      "id": 12,
+      "type": "table",
+      "title": "Panel A",
+      "gridPos": {
+        "x": 5,
+        "y": 10,
+        "w": 12,
+        "h": 8
+      },
+      "options": {},
+      "fieldConfig": {},
+      "transformations": [],
+      "transparent": false
+    }`);
+
+    tab.onApplyChange();
+
+    const panel2 = findVizPanelByKey(scene, panel.state.key)!;
+    const gridItem = panel2.parent as DashboardGridItem;
+
+    // Verify all gridPos properties are updated
+    expect(gridItem.state.x).toBe(5);
+    expect(gridItem.state.y).toBe(10);
+    expect(gridItem.state.width).toBe(12);
+    expect(gridItem.state.height).toBe(8);
+
+    // Verify forceRender was called on the layout to apply position changes
+    expect(forceRenderSpy).toHaveBeenCalled();
+  });
+
   it('Can show panel json for V2 dashboard specification', async () => {
     const { tab } = await buildTestSceneWithV2Spec();
 

public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx

@@ -9,6 +9,7 @@ import {
   SceneDataTransformer,
   sceneGraph,
   SceneGridItemStateLike,
+  SceneGridLayout,
   SceneObjectBase,
   SceneObjectRef,
   SceneObjectState,
@@ -168,6 +169,12 @@ export class InspectJsonTab extends SceneObjectBase<InspectJsonTabState> {
 
       panel.parent.setState(newState);
 
+      // Force the grid layout to re-render with the new positions
+      const layout = sceneGraph.getLayout(panel);
+      if (layout instanceof SceneGridLayout) {
+        layout.forceRender();
+      }
+
       //Report relevant updates
       reportPanelInspectInteraction(InspectTab.JSON, 'apply', {
         panel_type_changed: panel.state.pluginId !== panelModel.type,