Extracted alert menu button (#4273)

client/app/assets/less/ant.less

@@ -326,7 +326,7 @@
 }
 
 .@{btn-prefix-cls} .@{iconfont-css-prefix}-ellipsis {
-  margin: 0 -7px;
+  margin: 0 -7px 0 -8px;
 }
 
 // Collapse

client/app/pages/alert/Alert.jsx

@@ -10,12 +10,11 @@ import { Alert as AlertService } from '@/services/alert';
 import { Query as QueryService } from '@/services/query';
 
 import LoadingState from '@/components/items-list/components/LoadingState';
+import MenuButton from './components/MenuButton';
 import AlertView from './AlertView';
 import AlertEdit from './AlertEdit';
 import AlertNew from './AlertNew';
 
-import Modal from 'antd/lib/modal';
-
 import { routesToAngularRoutes } from '@/lib/utils';
 import PromiseRejectionError from '@/lib/promise-rejection-error';
 
@@ -152,24 +151,11 @@ class AlertPage extends React.Component {
 
   delete = () => {
     const { alert } = this.state;
-
-    const doDelete = () => {
-      alert.$delete(() => {
-        notification.success('Alert deleted successfully.');
-        navigateTo('/alerts');
-      }, () => {
-        notification.error('Failed deleting alert.');
-      });
-    };
-
-    Modal.confirm({
-      title: 'Delete Alert',
-      content: 'Are you sure you want to delete this alert?',
-      okText: 'Delete',
-      okType: 'danger',
-      onOk: doDelete,
-      maskClosable: true,
-      autoFocusButton: null,
+    return alert.$delete(() => {
+      notification.success('Alert deleted successfully.');
+      navigateTo('/alerts');
+    }, () => {
+      notification.error('Failed deleting alert.');
     });
   };
 
@@ -192,12 +178,20 @@ class AlertPage extends React.Component {
     }
 
     const { queryResult, mode, canEdit, pendingRearm } = this.state;
+
+    const menuButton = (
+      <MenuButton
+        doDelete={this.delete}
+        canEdit={canEdit}
+      />
+    );
+
     const commonProps = {
       alert,
       queryResult,
       pendingRearm,
-      delete: this.delete,
       save: this.save,
+      menuButton,
       onQuerySelected: this.onQuerySelected,
       onRearmChange: this.onRearmChange,
       onNameChange: this.onNameChange,

client/app/pages/alert/AlertEdit.jsx

@@ -6,9 +6,6 @@ import { Alert as AlertType } from '@/components/proptypes';
 
 import Form from 'antd/lib/form';
 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 Title from './components/Title';
 import Criteria from './components/Criteria';
@@ -51,7 +48,7 @@ export default class AlertEdit extends React.Component {
   };
 
   render() {
-    const { alert, queryResult, pendingRearm, onNotificationTemplateChange } = this.props;
+    const { alert, queryResult, pendingRearm, onNotificationTemplateChange, menuButton } = this.props;
     const { onQuerySelected, onNameChange, onRearmChange, onCriteriaChange } = this.props;
     const { query, name, options } = alert;
     const { saving, canceling } = this.state;
@@ -67,20 +64,7 @@ export default class AlertEdit extends React.Component {
             {saving ? spinnerIcon : <i className="fa fa-check m-r-5" />}
             Save Changes
           </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>
+          {menuButton}
         </Title>
         <div className="row bg-white tiled p-20">
           <div className="d-flex">
@@ -131,7 +115,7 @@ AlertEdit.propTypes = {
   alert: AlertType.isRequired,
   queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types,
   pendingRearm: PropTypes.number,
-  delete: PropTypes.func.isRequired,
+  menuButton: PropTypes.node.isRequired,
   save: PropTypes.func.isRequired,
   cancel: PropTypes.func.isRequired,
   onQuerySelected: PropTypes.func.isRequired,

client/app/pages/alert/AlertView.jsx

@@ -8,8 +8,6 @@ import { Alert as AlertType } from '@/components/proptypes';
 import Form from 'antd/lib/form';
 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';
@@ -50,7 +48,7 @@ AlertState.defaultProps = {
 
 export default class AlertView extends React.Component {
   render() {
-    const { alert, queryResult, canEdit, onEdit } = this.props;
+    const { alert, queryResult, canEdit, onEdit, menuButton } = this.props;
     const { query, name, options, rearm } = alert;
 
     return (
@@ -58,20 +56,7 @@ export default class AlertView extends React.Component {
         <Title name={name} alert={alert}>
           <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>
+            {menuButton}
           </Tooltip>
         </Title>
         <div className="row bg-white tiled p-20">
@@ -126,8 +111,8 @@ AlertView.propTypes = {
   alert: AlertType.isRequired,
   queryResult: PropTypes.object, // eslint-disable-line react/forbid-prop-types,
   canEdit: PropTypes.bool.isRequired,
-  delete: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,
+  menuButton: PropTypes.node.isRequired,
 };
 
 AlertView.defaultProps = {

client/app/pages/alert/components/MenuButton.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import Modal from 'antd/lib/modal';
+import Dropdown from 'antd/lib/dropdown';
+import Menu from 'antd/lib/menu';
+import Button from 'antd/lib/button';
+import Icon from 'antd/lib/icon';
+
+
+export default function MenuButton({ doDelete, canEdit }) {
+  const [loading, setLoading] = useState(false);
+
+  const confirmDelete = useCallback(() => {
+    Modal.confirm({
+      title: 'Delete Alert',
+      content: 'Are you sure you want to delete this alert?',
+      okText: 'Delete',
+      okType: 'danger',
+      onOk: () => {
+        setLoading(true);
+        doDelete().catch(() => {
+          setLoading(false);
+        });
+      },
+      maskClosable: true,
+      autoFocusButton: null,
+    });
+  }, []);
+
+  return (
+    <Dropdown
+      className={cx('m-l-5', { disabled: !canEdit })}
+      trigger={[canEdit ? 'click' : undefined]}
+      placement="bottomRight"
+      overlay={(
+        <Menu>
+          <Menu.Item>
+            <a onClick={confirmDelete}>Delete Alert</a>
+          </Menu.Item>
+        </Menu>
+      )}
+    >
+      <Button>
+        {loading ? <Icon type="loading" /> : <Icon type="ellipsis" rotate={90} />}
+      </Button>
+    </Dropdown>
+  );
+}
+
+MenuButton.propTypes = {
+  doDelete: PropTypes.func.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+};