From b74e76298f704d871b5edc1bfb704da6bfd7d860 Mon Sep 17 00:00:00 2001
From: praveensastry <sastry.praveen@gmail.com>
Date: Tue, 9 Oct 2018 13:40:17 +1100
Subject: [PATCH] render drag handle only in edit mode

---
 public/app/features/dashboard/dashgrid/DashboardRow.tsx   | 3 ++-
 public/app/features/dashboard/specs/DashboardRow.test.tsx | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
index 74630ac8f47..751745fbd41 100644
--- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardRow.tsx
@@ -87,6 +87,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     const title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
     const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
     const panels = count === 1 ? 'panel' : 'panels';
+    const editModeEnabled = this.dashboard.meta.canEdit === true;
 
     return (
       <div className={classes}>
@@ -112,7 +113,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
             &nbsp;
           </div>
         )}
-        <div className="dashboard-row__drag grid-drag-handle" />
+        {editModeEnabled && <div className="dashboard-row__drag grid-drag-handle" />}
       </div>
     );
   }
diff --git a/public/app/features/dashboard/specs/DashboardRow.test.tsx b/public/app/features/dashboard/specs/DashboardRow.test.tsx
index 8424346b0c5..3d89c22f962 100644
--- a/public/app/features/dashboard/specs/DashboardRow.test.tsx
+++ b/public/app/features/dashboard/specs/DashboardRow.test.tsx
@@ -39,6 +39,12 @@ describe('DashboardRow', () => {
     expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2);
   });
 
+  it('should not show row drag handle when cannot edit', () => {
+    dashboardMock.meta.canEdit = false;
+    wrapper = shallow(<DashboardRow panel={panel} getPanelContainer={getPanelContainer} />);
+    expect(wrapper.find('.dashboard-row__drag')).toHaveLength(0);
+  });
+
   it('should have zero actions when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
     panel = new PanelModel({ collapsed: false });