Alert redesign #1 - React and redesign

client/app/assets/less/ant.less

@@ -60,6 +60,11 @@
   font-weight: normal;
 }
 
+.ant-select-dropdown-menu-item em {
+  color: @input-color-placeholder;
+  font-size: 11px;
+}
+
 // Fix for disabled button styles inside Tooltip component.
 // Tooltip wraps disabled buttons with `<span>` and moves all styles
 // and classes to that `<span>`. This resets all button styles and
@@ -362,4 +367,9 @@
       border-radius: 50%;
     }
   }
+
+  &.form-item-line-height-normal .@{form-prefix-cls}-item-control {
+    line-height: 20px;
+    margin-top: 9px;
+  }
 }

client/app/assets/less/inc/alert.less

@@ -1,44 +1,53 @@
-.alert {
-    padding: 15px;
+.alert-page h3 {
+    flex-grow: 1;
 
-    span {
-        cursor: pointer;
+    input {
+        margin: -0.2em 0; // 
+        width: 100%;
+        min-width: 170px;
     }
 }
 
-.alert-dismissable,
-.alert-dismissible {
-    padding-right: 44px;
-} 
-
-.alert-inverse {
-    .alert-variant(@alert-inverse-bg; @alert-inverse-border; @alert-inverse-text);
+.btn-create-alert[disabled] {
+    display: block;
+    margin-top: -20px;
 }
 
-.alert-link {
-    color: #fff !important;
-    font-weight: normal !important;
-    text-decoration: underline;
-}
+.alert-state {
+    border-bottom: 1px solid #e8e8e8;
+    padding-bottom: 30px;
 
-.growl-animated {
-    &.alert-inverse {
-        box-shadow: 0 0 5px fade(@alert-inverse-bg, 50%);
-    }
-
-    &.alert-info {
-        box-shadow: 0 0 5px fade(@alert-info-bg, 50%);
+    .alert-state-indicator {
+        text-transform: uppercase;
+        font-size: 14px;
+        padding: 5px 8px;
     }
 
-    &.alert-success {
-        box-shadow: 0 0 5px fade(@alert-success-bg, 50%);
+    .alert-last-triggered {
+        color: #333;
     }
+}
 
-    &.alert-warning {
-        box-shadow: 0 0 5px fade(@alert-warning-bg, 50%);
-    }
+.alert-query-selector {
+    min-width: 250px;
+    width: auto !important;
+}
 
-    &.alert-danger {
-        box-shadow: 0 0 5px fade(@alert-danger-bg, 50%);
+// allow form item labels to gracefully break line
+.alert-form-item label {
+    white-space: initial;
+    padding-right: 8px;
+    line-height: 21px;
+
+    &::after {
+        margin-right: 0 !important;
     }
 }
+
+.alert-actions {
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-right: -15px;
+}

client/app/assets/less/inc/ant-variables.less

@@ -36,6 +36,7 @@
 -----------------------------------------------------------*/
 @input-height-base:                    35px;
 @input-color:                          #595959;
+@input-color-placeholder:               #b4b4b4;
 @border-radius-base: 2px;
 @border-color-base:                    #E8E8E8;
 

client/app/assets/less/inc/base.less

@@ -222,6 +222,14 @@ text.slicetext {
     }
 }
 
+.fa-external-link {
+    font-size: inherit;
+}
+
+.warning-icon-danger {
+    color: @red !important;
+}
+
 // page
 .page-header--new .btn-favourite, .page-header--new .btn-archive {
     font-size: 19px;

client/app/assets/less/inc/generics.less

@@ -76,6 +76,8 @@
 
 .font-size(20, 8px, 8);
 
+.f-inherit { font-size: inherit !important; }
+
 
 /* --------------------------------------------------------
     Font Weight

client/app/components/HelpTrigger.jsx

@@ -68,6 +68,10 @@ export const TYPES = {
     '/user-guide/querying/query-results-data-source',
     'Guide: Help Setting up Query Results',
   ],
+  ALERT_SETUP: [
+    '/user-guide/alerts/setting-up-an-alert',
+    'Guide: Setting Up a New Alert',
+  ],
 };
 
 export class HelpTrigger extends React.Component {

client/app/components/QuerySelector.jsx

@@ -146,6 +146,7 @@ export function QuerySelector(props) {
         notFoundContent={null}
         filterOption={false}
         defaultActiveFirstOption={false}
+        className={props.className}
       >
         {searchResults && searchResults.map((q) => {
           const disabled = q.is_draft;
@@ -183,12 +184,14 @@ QuerySelector.propTypes = {
   onChange: PropTypes.func.isRequired,
   selectedQuery: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   type: PropTypes.oneOf(['select', 'default']),
+  className: PropTypes.string,
   disabled: PropTypes.bool,
 };
 
 QuerySelector.defaultProps = {
   selectedQuery: null,
   type: 'default',
+  className: null,
   disabled: false,
 };
 

client/app/components/proptypes.js

@@ -86,6 +86,12 @@ export const UserProfile = PropTypes.shape({
   isDisabled: PropTypes.bool,
 });
 
+export const AlertOptions = PropTypes.shape({
+  column: PropTypes.string,
+  op: PropTypes.oneOf(['greater than', 'less than', 'equals']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+});
+
 function checkMoment(isRequired, props, propName, componentName) {
   const value = props[propName];
   const isRequiredValid = isRequired && (value !== null && value !== undefined) && moment.isMoment(value);

client/app/components/queries/SchedulePhrase.jsx

@@ -1,6 +1,7 @@
 import { react2angular } from 'react2angular';
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Tooltip from 'antd/lib/tooltip';
 import { localizeTime, durationHumanize } from '@/filters';
 import { RefreshScheduleType, RefreshScheduleDefault } from '../proptypes';
@@ -12,11 +13,13 @@ export class SchedulePhrase extends React.Component {
     schedule: RefreshScheduleType,
     isNew: PropTypes.bool.isRequired,
     isLink: PropTypes.bool,
+    className: PropTypes.string,
   };
 
   static defaultProps = {
     schedule: RefreshScheduleDefault,
     isLink: false,
+    className: null,
   };
 
   get content() {
@@ -48,10 +51,11 @@ export class SchedulePhrase extends React.Component {
 
     const [short, full] = this.content;
     const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
+    const className = cx('schedule-phrase', this.props.className);
 
     return this.props.isLink
-      ? <a className="schedule-phrase">{content}</a>
-      : content;
+      ? <a className={className}>{content}</a>
+      : <span className={className}>{content}</span>;
   }
 }