Dynamic Dashboards: Drag and Drop improvements

packages/scenes-react/package.json

@@ -74,7 +74,7 @@
     "@types/node": "20.11.30",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
-    "@types/react-grid-layout": "1.3.2",
+    "@types/react-grid-layout": "1.3.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/uuid": "8.3.4",
     "@typescript-eslint/eslint-plugin": "^8.34.0",

packages/scenes/package.json

@@ -42,7 +42,7 @@
     "@leeoniya/ufuzzy": "^1.0.16",
     "@tanstack/react-virtual": "^3.9.0",
     "i18next-parser": "9.3.0",
-    "react-grid-layout": "1.3.4",
+    "react-grid-layout": "1.5.2",
     "react-use": "17.5.0",
     "react-virtualized-auto-sizer": "1.0.24",
     "uuid": "^9.0.0"
@@ -64,7 +64,6 @@
     "@eslint/compat": "1.3.0",
     "@eslint/js": "^9.28.0",
     "@grafana/eslint-config": "^8.1.0",
-    "@grafana/i18n": "12.1.0",
     "@grafana/tsconfig": "^1.3.0-rc1",
     "@rollup/plugin-dynamic-import-vars": "2.1.5",
     "@rollup/plugin-json": "^6.1.0",
@@ -82,7 +81,7 @@
     "@types/node": "20.11.30",
     "@types/react": "18.2.74",
     "@types/react-dom": "18.2.24",
-    "@types/react-grid-layout": "1.3.2",
+    "@types/react-grid-layout": "1.3.5",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/systemjs": "^6.15.1",
     "@types/uuid": "8.3.4",

packages/scenes/src/components/layout/grid/SceneGridItem.tsx

@@ -31,6 +31,6 @@ export function isSceneGridRow(child: SceneObject): child is SceneGridRow {
   return child instanceof SceneGridRow;
 }
 
-function isSceneGridLayout(child: SceneObject): child is SceneGridLayout {
+export function isSceneGridLayout(child: SceneObject): child is SceneGridLayout {
   return child instanceof SceneGridLayout;
 }

packages/scenes/src/components/layout/grid/SceneGridLayout.tsx

@@ -28,6 +28,7 @@ interface SceneGridLayoutState extends SceneObjectState {
    */
   UNSAFE_fitPanels?: boolean;
   children: SceneGridItemLike[];
+  _placeholderItem: SceneGridItemLike | null;
 }
 
 export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> implements SceneLayout {
@@ -37,10 +38,11 @@ export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> imple
   private _oldLayout: ReactGridLayout.Layout[] = [];
   private _loadOldLayout = false;
 
-  public constructor(state: SceneGridLayoutState) {
+  public constructor(state: Omit<SceneGridLayoutState, '_placeholderItem'>) {
     super({
       ...state,
       children: sortChildrenByPosition(state.children),
+      _placeholderItem: null,
     });
   }
 
@@ -189,6 +191,10 @@ export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> imple
    * Will also scan row children and return child of the row
    */
   public getSceneLayoutChild(key: string): SceneGridItemLike {
+    if (key === this.state._placeholderItem?.state.key) {
+      return this.state._placeholderItem!;
+    }
+
     for (const child of this.state.children) {
       if (child.state.key === key) {
         return child;
@@ -312,13 +318,15 @@ export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> imple
     return rootChildren;
   }
 
-  public onDragStart: ReactGridLayout.ItemCallback = (gridLayout) => {
-    this._oldLayout = [...gridLayout];
-  };
-
-  public onDragStop: ReactGridLayout.ItemCallback = (gridLayout, o, updatedItem) => {
+  public onDragStop = (gridLayout: ReactGridLayout.Layout[], updatedItem: ReactGridLayout.Layout) => {
     const sceneChild = this.getSceneLayoutChild(updatedItem.i)!;
 
+    // gridLayout contains both the original item and the updated item
+    // we need to remove the original item
+    gridLayout = gridLayout.filter(
+      (item) => item.i !== updatedItem.i || (item.i === updatedItem.i && item === updatedItem)
+    );
+
     // Need to resort the grid layout based on new position (needed to find the new parent)
     gridLayout = sortGridLayout(gridLayout);
 
@@ -361,7 +369,7 @@ export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> imple
       newChildren = this.moveChildTo(sceneChild, newParent);
     }
 
-    this.setState({ children: sortChildrenByPosition(newChildren) });
+    this.setState({ children: sortChildrenByPosition(newChildren), _placeholderItem: null });
     this._skipOnLayoutChange = true;
   };
 
@@ -420,6 +428,12 @@ export class SceneGridLayout extends SceneObjectBase<SceneGridLayoutState> imple
 
     return cells;
   }
+
+  public setPlaceholder(placeholderItem: SceneGridItemLike | null) {
+    if (this.state._placeholderItem !== placeholderItem) {
+      this.setState({ _placeholderItem: placeholderItem });
+    }
+  }
 }
 
 function isItemSizeEqual(a: SceneGridItemPlacement, b: SceneGridItemPlacement) {

packages/scenes/src/components/layout/grid/SceneGridLayoutRenderer.tsx

@@ -11,7 +11,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useMeasure } from 'react-use';
 
 export function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {
-  const { children, isLazy, isDraggable, isResizable } = model.useState();
+  const { children, isLazy, isDraggable, isResizable, _placeholderItem } = model.useState();
   const [outerDivRef, { width, height }] = useMeasure();
   const ref = useRef<HTMLDivElement | null>(null);
 
@@ -45,7 +45,7 @@ export function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGrid
                 moving panels. https://github.com/grafana/grafana/issues/18497
                 theme.breakpoints.md = 769
            */
-          isDraggable={isDraggable && width > 768}
+          isDraggable={false}
           isResizable={isResizable ?? false}
           containerPadding={[0, 0]}
           useCSSTransforms={true}
@@ -55,12 +55,21 @@ export function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGrid
           draggableHandle={`.grid-drag-handle-${model.state.key}`}
           draggableCancel=".grid-drag-cancel"
           layout={layout}
-          onDragStart={model.onDragStart}
-          onDragStop={model.onDragStop}
+          droppingItem={
+            _placeholderItem
+              ? {
+                  i: _placeholderItem.state.key!,
+                  w: _placeholderItem.state.width!,
+                  h: _placeholderItem.state.height!,
+                }
+              : undefined
+          }
           onResizeStop={model.onResizeStop}
           onLayoutChange={model.onLayoutChange}
           isBounded={false}
           resizeHandle={<ResizeHandle />}
+          isDroppable={true}
+          onDrop={model.onDragStop}
         >
           {layout.map((gridItem, index) => (
             <GridItemWrapper

packages/scenes/src/utils/wrapInSafeSerializableSceneObject.ts

@@ -33,5 +33,6 @@ export function wrapInSafeSerializableSceneObject(sceneObject: SceneObject): Sco
     return new SafeSerializableSceneObject(sceneObject);
   }
 
+  // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
   return { value: sceneObject, text: '__sceneObject' };
 }