Scenes/PanelEdit: Replace panel when commiting editor changes (#80282)

* Scenes/PanelEdit: Replace panel when commiting editor changes

* Clone panel rather than setting it as body directly

public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx

@@ -6,6 +6,7 @@ import {
   getUrlSyncManager,
   SceneFlexItem,
   SceneFlexLayout,
+  SceneGridItem,
   SceneObject,
   SceneObjectBase,
   SceneObjectRef,
@@ -99,22 +100,22 @@ export class PanelEditor extends SceneObjectBase<PanelEditorState> {
     const dashboard = this.state.dashboardRef.resolve();
     const sourcePanel = this.state.sourcePanelRef.resolve();
 
-    const panelMngr = this.state.panelRef.resolve();
-
     if (!dashboard.state.isEditing) {
       dashboard.onEnterEditMode();
     }
 
-    const newState = sceneUtils.cloneSceneObjectState(panelMngr.state.panel.state);
+    const panelMngr = this.state.panelRef.resolve();
 
     // Remove data provider if it's a share query. For editing purposes the data provider is cloned and attached to the
     // ShareQueryDataProvider when panel is in edit mode.
     // TODO: Handle transformations when we get on transformations edit.
-    if (newState.$data instanceof ShareQueryDataProvider) {
-      newState.$data.setState({ $data: undefined });
+    if (panelMngr.state.panel.state.$data instanceof ShareQueryDataProvider) {
+      panelMngr.state.panel.state.$data.setState({ $data: undefined });
     }
 
-    sourcePanel.setState(newState);
+    if (sourcePanel.parent instanceof SceneGridItem) {
+      sourcePanel.parent.setState({ body: panelMngr.state.panel.clone() });
+    }
 
     // preserve time range and variables state
     dashboard.setState({