From db1e19fe8682219e248e7a91424e4a897af22f00 Mon Sep 17 00:00:00 2001
From: Polina Boneva <13227501+polibb@users.noreply.github.com>
Date: Wed, 7 Dec 2022 12:46:10 +0200
Subject: [PATCH] Dashboard: Making a dashboard editable does not allow
 resizing of panels (#59255)

* DashboardGrid should rerender ReactGridLayout when mutable dashboard updates

* add missing prop to test
---
 .../app/features/dashboard/containers/DashboardPage.tsx   | 7 ++++++-
 .../features/dashboard/dashgrid/DashboardGrid.test.tsx    | 1 +
 public/app/features/dashboard/dashgrid/DashboardGrid.tsx  | 8 ++++----
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index 1783d7d34bd..717f79579de 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -392,7 +392,12 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
             </section>
           )}
 
-          <DashboardGrid dashboard={dashboard} viewPanel={viewPanel} editPanel={editPanel} />
+          <DashboardGrid
+            dashboard={dashboard}
+            isEditable={!!dashboard.meta.canEdit}
+            viewPanel={viewPanel}
+            editPanel={editPanel}
+          />
 
           {inspectPanel && <PanelInspector dashboard={dashboard} panel={inspectPanel} />}
         </Page>
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
index 05af4a5831e..111583e7745 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx
@@ -57,6 +57,7 @@ describe('DashboardGrid', () => {
     const props: Props = {
       editPanel: null,
       viewPanel: null,
+      isEditable: true,
       dashboard: getTestDashboard(),
     };
     expect(() => render(<DashboardGrid {...props} />)).not.toThrow();
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 74f11cfea55..02a2204fbb7 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -17,6 +17,7 @@ import { DashboardPanel } from './DashboardPanel';
 
 export interface Props {
   dashboard: DashboardModel;
+  isEditable: boolean;
   editPanel: PanelModel | null;
   viewPanel: PanelModel | null;
 }
@@ -200,7 +201,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
   }
 
   render() {
-    const { dashboard } = this.props;
+    const { isEditable } = this.props;
 
     /**
      * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
@@ -215,14 +216,13 @@ export class DashboardGrid extends PureComponent<Props, State> {
               return null;
             }
 
-            const draggable = width <= 769 ? false : dashboard.meta.canEdit;
+            const draggable = width <= 769 ? false : isEditable;
 
             /*
             Disable draggable if mobile device, solving an issue with unintentionally
             moving panels. https://github.com/grafana/grafana/issues/18497
             theme.breakpoints.md = 769
           */
-
             return (
               /**
                * The children is using a width of 100% so we need to guarantee that it is wrapped
@@ -233,7 +233,7 @@ export class DashboardGrid extends PureComponent<Props, State> {
                 <ReactGridLayout
                   width={width}
                   isDraggable={draggable}
-                  isResizable={dashboard.meta.canEdit}
+                  isResizable={isEditable}
                   containerPadding={[0, 0]}
                   useCSSTransforms={false}
                   margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}