From eecb6d397938b77ee5b4eaf2034720a1d2057f6d Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 26 Sep 2019 15:33:17 +0300
Subject: [PATCH] Added warn and tooltip when non-editable

---
 client/app/pages/alert/Alert.jsx     |  5 ++++
 client/app/pages/alert/AlertView.jsx | 38 ++++++++++++++--------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/client/app/pages/alert/Alert.jsx b/client/app/pages/alert/Alert.jsx
index b6f8c002c3..fbaaceb79c 100644
--- a/client/app/pages/alert/Alert.jsx
+++ b/client/app/pages/alert/Alert.jsx
@@ -68,6 +68,11 @@ class AlertPage extends React.Component {
           // force view mode if can't edit
           if (!canEdit) {
             this.setState({ mode: MODES.VIEW });
+            notification.warn(
+              'You cannot edit this alert',
+              'You do not have sufficient permissions to edit this alert, and have been redirected to the view-only page.',
+              { duration: 0 },
+            );
           }
 
           this.setState({ alert, canEdit, pendingRearm: alert.rearm });
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index 87c8f7bdad..940671b946 100644
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
 import { TimeAgo } from '@/components/TimeAgo';
 import { Alert as AlertType } from '@/components/proptypes';
@@ -9,6 +10,7 @@ import Button from 'antd/lib/button';
 import Icon from 'antd/lib/icon';
 import Dropdown from 'antd/lib/dropdown';
 import Menu from 'antd/lib/menu';
+import Tooltip from 'antd/lib/tooltip';
 
 import Title from './components/Title';
 import Criteria from './components/Criteria';
@@ -53,25 +55,23 @@ export default class AlertView extends React.Component {
     return (
       <>
         <Title name={name} alert={alert}>
-          {canEdit && (
-            <>
-              <Button type="default" onClick={onEdit}><i className="fa fa-edit m-r-5" />Edit</Button>
-              <Dropdown
-                className="m-l-5"
-                trigger={['click']}
-                placement="bottomRight"
-                overlay={(
-                  <Menu>
-                    <Menu.Item>
-                      <a onClick={this.props.delete}>Delete Alert</a>
-                    </Menu.Item>
-                  </Menu>
-                )}
-              >
-                <Button><Icon type="ellipsis" rotate={90} /></Button>
-              </Dropdown>
-            </>
-          )}
+          <Tooltip title={canEdit ? '' : 'You do not have sufficient permissions to edit this alert'}>
+            <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}><i className="fa fa-edit m-r-5" />Edit</Button>
+            <Dropdown
+              className={cx('m-l-5', { disabled: !canEdit })}
+              trigger={[canEdit ? 'click' : undefined]}
+              placement="bottomRight"
+              overlay={(
+                <Menu>
+                  <Menu.Item>
+                    <a onClick={this.props.delete}>Delete Alert</a>
+                  </Menu.Item>
+                </Menu>
+              )}
+            >
+              <Button><Icon type="ellipsis" rotate={90} /></Button>
+            </Dropdown>
+          </Tooltip>
         </Title>
         <div className="row bg-white tiled p-20">
           <div className="d-flex col-md-8">