Merge pull request #13568 from praveensastry/render-drag-handle-only-edit-mode

Render Dashboard Row drag handle only in edit mode

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 title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
     const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
     const count = this.props.panel.panels ? this.props.panel.panels.length : 0;
     const panels = count === 1 ? 'panel' : 'panels';
     const panels = count === 1 ? 'panel' : 'panels';
+    const canEdit = this.dashboard.meta.canEdit === true;
 
 
     return (
     return (
       <div className={classes}>
       <div className={classes}>
@@ -97,7 +98,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
             ({count} {panels})
             ({count} {panels})
           </span>
           </span>
         </a>
         </a>
-        {this.dashboard.meta.canEdit === true && (
+        {canEdit && (
           <div className="dashboard-row__actions">
           <div className="dashboard-row__actions">
             <a className="pointer" onClick={this.openSettings}>
             <a className="pointer" onClick={this.openSettings}>
               <i className="fa fa-cog" />
               <i className="fa fa-cog" />
@@ -112,7 +113,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
             &nbsp;
             &nbsp;
           </div>
           </div>
         )}
         )}
-        <div className="dashboard-row__drag grid-drag-handle" />
+        {canEdit && <div className="dashboard-row__drag grid-drag-handle" />}
       </div>
       </div>
     );
     );
   }
   }

public/app/features/dashboard/specs/DashboardRow.test.tsx

@@ -39,6 +39,12 @@ describe('DashboardRow', () => {
     expect(wrapper.find('.dashboard-row__actions .pointer')).toHaveLength(2);
     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', () => {
   it('should have zero actions when cannot edit', () => {
     dashboardMock.meta.canEdit = false;
     dashboardMock.meta.canEdit = false;
     panel = new PanelModel({ collapsed: false });
     panel = new PanelModel({ collapsed: false });