grid: disable resize and drag on non editable dashboards, closes #10235

package.json

@@ -76,7 +76,7 @@
     "postcss-browser-reporter": "^0.5.0",
     "postcss-loader": "^2.0.6",
     "postcss-reporter": "^5.0.0",
-    "prettier": "1.7.3",
+    "prettier": "1.9.2",
     "react-test-renderer": "^16.0.0",
     "sass-lint": "^1.10.2",
     "sass-loader": "^6.0.6",

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
 import ReactGridLayout from 'react-grid-layout';
-import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT} from 'app/core/constants';
-import {DashboardPanel} from './DashboardPanel';
-import {DashboardModel} from '../dashboard_model';
-import {PanelContainer} from './PanelContainer';
-import {PanelModel} from '../panel_model';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
+import { DashboardPanel } from './DashboardPanel';
+import { DashboardModel } from '../dashboard_model';
+import { PanelContainer } from './PanelContainer';
+import { PanelModel } from '../panel_model';
 import classNames from 'classnames';
 import sizeMe from 'react-sizeme';
 
 let lastGridWidth = 1200;
 
-function GridWrapper({size, layout, onLayoutChange, children, onDragStop, onResize, onResizeStop, onWidthChange, className}) {
+function GridWrapper({
+  size,
+  layout,
+  onLayoutChange,
+  children,
+  onDragStop,
+  onResize,
+  onResizeStop,
+  onWidthChange,
+  className,
+  isResizable,
+  isDraggable,
+}) {
   if (size.width === 0) {
     console.log('size is zero!');
   }
@@ -25,8 +37,8 @@ function GridWrapper({size, layout, onLayoutChange, children, onDragStop, onResi
     <ReactGridLayout
       width={lastGridWidth}
       className={className}
-      isDraggable={true}
-      isResizable={true}
+      isDraggable={isDraggable}
+      isResizable={isResizable}
       measureBeforeMount={false}
       containerPadding={[0, 0]}
       useCSSTransforms={true}
@@ -44,7 +56,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onDragStop, onResi
   );
 }
 
-const SizedReactLayoutGrid = sizeMe({monitorWidth: true})(GridWrapper);
+const SizedReactLayoutGrid = sizeMe({ monitorWidth: true })(GridWrapper);
 
 export interface DashboardGridProps {
   getPanelContainer: () => PanelContainer;
@@ -54,7 +66,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   gridToPanelMap: any;
   panelContainer: PanelContainer;
   dashboard: DashboardModel;
-  panelMap: {[id: string]: PanelModel};
+  panelMap: { [id: string]: PanelModel };
 
   constructor(props) {
     super(props);
@@ -65,7 +77,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.onDragStop = this.onDragStop.bind(this);
     this.onWidthChange = this.onWidthChange.bind(this);
 
-    this.state = {animated: false};
+    this.state = { animated: false };
 
     // subscribe to dashboard events
     this.dashboard = this.panelContainer.getDashboard();
@@ -153,7 +165,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   componentDidMount() {
     setTimeout(() => {
       this.setState(() => {
-        return {animated: true};
+        return { animated: true };
       });
     });
   }
@@ -162,7 +174,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     const panelElements = [];
 
     for (let panel of this.dashboard.panels) {
-      const panelClasses = classNames({panel: true, 'panel--fullscreen': panel.fullscreen});
+      const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
       panelElements.push(
         <div key={panel.id.toString()} className={panelClasses}>
           <DashboardPanel panel={panel} getPanelContainer={this.props.getPanelContainer} />
@@ -176,8 +188,10 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   render() {
     return (
       <SizedReactLayoutGrid
-        className={classNames({'layout': true, 'animated': this.state.animated})}
+        className={classNames({ layout: true, animated: this.state.animated })}
         layout={this.buildLayout()}
+        isResizable={this.dashboard.meta.canEdit}
+        isDraggable={this.dashboard.meta.canEdit}
         onLayoutChange={this.onLayoutChange}
         onWidthChange={this.onWidthChange}
         onDragStop={this.onDragStop}
@@ -188,4 +202,3 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     );
   }
 }
-

yarn.lock

@@ -7668,9 +7668,9 @@ preserve@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
-prettier@1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.3.tgz#8e6974725273914b1c47439959dd3d3ba53664b6"
+prettier@1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
 
 pretty-bytes@^1.0.0:
   version "1.0.4"