DashboardScene: Edit mode should enable dragging (#73628)

* DashboardScene: Edit mode should enable dragging

* Update

* Update

* Update scenes lib

public/app/features/scenes/dashboard/DashboardScene.tsx

@@ -6,6 +6,7 @@ import {
   getUrlSyncManager,
   sceneGraph,
   SceneGridItem,
+  SceneGridLayout,
   SceneObject,
   SceneObjectBase,
   SceneObjectState,
@@ -17,6 +18,7 @@ import {
 import appEvents from 'app/core/app_events';
 
 import { DashboardSceneRenderer } from './DashboardSceneRenderer';
+import { forceRenderChildren } from './utils';
 
 export interface DashboardSceneState extends SceneObjectState {
   title: string;
@@ -75,12 +77,24 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
 
   onEnterEditMode = () => {
     this.setState({ isEditing: true });
+
+    // Make grid draggable
+    if (this.state.body instanceof SceneGridLayout) {
+      this.state.body.setState({ isDraggable: true, isResizable: true });
+      forceRenderChildren(this.state.body, true);
+    }
   };
 
   onDiscard = () => {
     // TODO open confirm modal if dirty
     // TODO actually discard changes
     this.setState({ isEditing: false });
+
+    // Disable grid dragging
+    if (this.state.body instanceof SceneGridLayout) {
+      this.state.body.setState({ isDraggable: false, isResizable: false });
+      forceRenderChildren(this.state.body, true);
+    }
   };
 
   onCloseInspectDrawer = () => {

public/app/features/scenes/dashboard/utils.ts

@@ -24,3 +24,23 @@ export function activateFullSceneTree(scene: SceneObject): SceneDeactivationHand
     }
   };
 }
+
+/**
+ * Force re-render children. This is useful in some edge case scenarios when
+ * children deep down the scene graph needs to be re-rendered when some parent state change.
+ *
+ * Example could be isEditing bool flag or a layout IsDraggable state flag.
+ *
+ * @param model The model whose children should be re-rendered. It does not force render this model, only the children.
+ * @param recursive if it should keep force rendering down to leaf nodess
+ */
+export function forceRenderChildren(model: SceneObject, recursive?: boolean) {
+  model.forEachChild((child) => {
+    if (!child.isActive) {
+      return;
+    }
+
+    child.forceRender();
+    forceRenderChildren(child, recursive);
+  });
+}