Client side query validation (#335)

* validate query text * Update structure of submitted SaveQueryForm data * form calls correct prop function when invalid query text * Lowercase directory names
2016-10-21 17:58:13 -04:00
parent 10c32bc47f
commit aa275751b2
22 changed files with 214 additions and 89 deletions
@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import radium from 'radium';
+
+import componentStyles from './styles';
+import Slider from '../../../buttons/Slider';
+
+const SaveQuerySection = ({ onToggleSaveQuery, saveQuery }) => {
+  const {
+    saveQuerySection,
+    saveTextWrapper,
+    saveWrapper,
+    sliderTextDontSave,
+    sliderTextSave,
+  } = componentStyles;
+
+  return (
+    <section style={saveQuerySection}>
+      <div style={saveTextWrapper}>
+        <p>Save Query & Results For Later?</p>
+        <small>For certain types of queries, like one that targets many hosts or one you plan to reuse frequently, we suggest saving the query & results. This allows you to set some advanced options, view the results later, and share with other users</small>
+      </div>
+      <div style={saveWrapper}>
+        <span style={sliderTextDontSave(saveQuery)}>Dont save</span>
+        <Slider onClick={onToggleSaveQuery} engaged={saveQuery} />
+        <span style={sliderTextSave(saveQuery)}>Save</span>
+      </div>
+    </section>
+  );
+};
+
+SaveQuerySection.propTypes = {
+  onToggleSaveQuery: PropTypes.func,
+  saveQuery: PropTypes.bool,
+};
+
+export default radium(SaveQuerySection);
@@ -0,0 +1,38 @@
+import Styles from '../../../../styles';
+
+const { color, font } = Styles;
+
+export default {
+  saveQuerySection: {
+    alignItems: 'flex-end',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  saveTextWrapper: {
+    display: 'inline-block',
+    width: '440px',
+    '@media (max-width: 911px)': {
+      width: '400px',
+    },
+  },
+  saveWrapper: {
+    alignItems: 'center',
+    display: 'flex',
+  },
+  sliderTextDontSave: (saveQuery) => {
+    return {
+      color: saveQuery ? color.textDark : color.textUltradark,
+      textTransform: 'uppercase',
+      fontSize: font.small,
+      marginRight: '5px',
+    };
+  },
+  sliderTextSave: (saveQuery) => {
+    return {
+      color: saveQuery ? color.brand : color.textMedium,
+      textTransform: 'uppercase',
+      fontSize: font.small,
+      marginLeft: '5px',
+    };
+  },
+};