Alert redesign #2 - Destinations

client/app/components/EmailSettingsWarning.jsx

@@ -1,22 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { react2angular } from 'react2angular';
-import { currentUser, clientConfig } from '@/services/auth';
+import cx from 'classnames';
+import { clientConfig, currentUser } from '@/services/auth';
+import Tooltip from 'antd/lib/tooltip';
+import Alert from 'antd/lib/alert';
+import { HelpTrigger } from '@/components/HelpTrigger';
 
-export function EmailSettingsWarning({ featureName }) {
-  return (clientConfig.mailSettingsMissing && currentUser.isAdmin) ? (
-    <p className="alert alert-danger">
-      {`It looks like your mail server isn't configured. Make sure to configure it for the ${featureName} to work.`}
-    </p>
-  ) : null;
+export default function EmailSettingsWarning({ featureName, className, mode, adminOnly }) {
+  if (!clientConfig.mailSettingsMissing) {
+    return null;
+  }
+
+  if (adminOnly && !currentUser.isAdmin) {
+    return null;
+  }
+
+  const message = (
+    <span>
+      Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{' '}
+      <HelpTrigger type="MAIL_CONFIG" className="f-inherit" />
+    </span>
+  );
+
+  if (mode === 'icon') {
+    return (
+      <Tooltip title={message}>
+        <i className={cx('fa fa-exclamation-triangle', className)} />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Alert message={message} type="error" className={className} />
+  );
 }
 
 EmailSettingsWarning.propTypes = {
   featureName: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  mode: PropTypes.oneOf(['alert', 'icon']),
+  adminOnly: PropTypes.bool,
 };
 
-export default function init(ngModule) {
-  ngModule.component('emailSettingsWarning', react2angular(EmailSettingsWarning));
-}
-
-init.init = true;
+EmailSettingsWarning.defaultProps = {
+  className: null,
+  mode: 'alert',
+  adminOnly: false,
+};

client/app/components/HelpTrigger.jsx

@@ -72,6 +72,10 @@ export const TYPES = {
     '/user-guide/alerts/setting-up-an-alert',
     'Guide: Setting Up a New Alert',
   ],
+  MAIL_CONFIG: [
+    '/open-source/setup/#Mail-Configuration',
+    'Guide: Mail Configuration',
+  ],
 };
 
 export class HelpTrigger extends React.Component {

client/app/components/proptypes.js

@@ -86,6 +86,13 @@ export const UserProfile = PropTypes.shape({
   isDisabled: PropTypes.bool,
 });
 
+export const Destination = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+});
+
 export const AlertOptions = PropTypes.shape({
   column: PropTypes.string,
   op: PropTypes.oneOf(['greater than', 'less than', 'equals']),

client/app/pages/alert/Alert.jsx

@@ -17,6 +17,7 @@ import { TimeAgo } from '@/components/TimeAgo';
 
 import Form from 'antd/lib/form';
 import Button from 'antd/lib/button';
+import Tooltip from 'antd/lib/tooltip';
 import Icon from 'antd/lib/icon';
 import Modal from 'antd/lib/modal';
 import Input from 'antd/lib/input';
@@ -26,6 +27,7 @@ import Menu from 'antd/lib/menu';
 import Criteria from './components/Criteria';
 import Rearm from './components/Rearm';
 import Query from './components/Query';
+import AlertDestinations from './components/AlertDestinations';
 import { STATE_CLASS } from '../alerts/AlertsList';
 import { routesToAngularRoutes } from '@/lib/utils';
 
@@ -367,10 +369,16 @@ class AlertPage extends React.Component {
               </HelpTrigger>
             )}
           </div>
-          {!editMode && (
+          {!editMode && alert.id && (
             <div className="col-md-4">
-              <h4>Destinations</h4>
-              <div><i className="fa fa-hand-o-right" /> In next PR</div>
+              <h4>Destinations{' '}
+                <Tooltip title="Open Alert Destinations page in a new tab.">
+                  <a href="/destinations" target="_blank">
+                    <i className="fa fa-external-link f-13" />
+                  </a>
+                </Tooltip>
+              </h4>
+              <AlertDestinations alertId={alert.id} />
             </div>
           )}
         </div>