[v9.3.x] Dashboard: Making a dashboard editable does not allow resizing of panels (#59943)

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

(cherry picked from commit db1e19fe86)

Co-authored-by: Polina Boneva <13227501+polibb@users.noreply.github.com>

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>

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();

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]}