Alert page - migrate to 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,10 @@
       border-radius: 50%;
     }
   }
+
+  // for form items that contain text
+  &.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 @input-border;
+    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: @headings-color;
     }
+}
 
-    &.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,10 @@ text.slicetext {
     }
 }
 
+.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,11 +146,13 @@ export function QuerySelector(props) {
         notFoundContent={null}
         filterOption={false}
         defaultActiveFirstOption={false}
+        className={props.className}
+        data-test="QuerySelector"
       >
         {searchResults && searchResults.map((q) => {
           const disabled = q.is_draft;
           return (
-            <Option value={q.id} key={q.id} disabled={disabled}>
+            <Option value={q.id} key={q.id} disabled={disabled} className="query-selector-result" data-test={`QueryId${q.id}`}>
               {q.name}{' '}
               <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className={cx('inline-tags-control', { disabled })} />
             </Option>
@@ -161,7 +163,7 @@ export function QuerySelector(props) {
   }
 
   return (
-    <React.Fragment>
+    <span data-test="QuerySelector">
       {selectedQuery ? (
         <Input value={selectedQuery.name} suffix={clearIcon} readOnly />
       ) : (
@@ -175,20 +177,22 @@ export function QuerySelector(props) {
       <div className="scrollbox" style={{ maxHeight: '50vh', marginTop: 15 }}>
         {searchResults && renderResults()}
       </div>
-    </React.Fragment>
+    </span>
   );
 }
 
 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);