disco_app 0.9.2 → 0.9.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c93d48179fec89b4944ae9428138e3c12827ba628c525af2742afa9532af6abe
-  data.tar.gz: 944da37163b8fbfaa4db0cd5626e76a5a5ff1680284fff69cebd0dddd105d754
+  metadata.gz: 3e11c5ff7beaece5d87fda19c4d06bcc08ded718b71ce4050a5380c15e638be0
+  data.tar.gz: 7a1ceffb9b2c33f6dffe4a31b6877cbab52946cd3d37ad4396270c397dd99805
 SHA512:
-  metadata.gz: 23e9f5235c6867c3c77557ed229ddd3de0a3b9d3660ff80a3f06c971ce10d8ab867d30fec229c836542e8865ddb24647282a0cb29049d526e52bc8fd9c641f79
-  data.tar.gz: b3bce74312f85aff46bca48ed90d53b1344e6e82461321bc962e790c5cd9bbd9f21edb53f4e4359e1a3e7db980d0d4899142307534d190a432e4d26273c825c5
+  metadata.gz: 6da76ea6fd5ac63a77fe4acaf4552946416841228994d4cf6b431a094180aa63d6d07a1ef586c71c44eeca0cfc38a4da30d6f0ed1a5b62c54b28b109fcdb485f
+  data.tar.gz: 1a96f567be81a5bc6189bb43bb98fd34181009459b2ec085ded5ad820ea662fa7a3780a40e3103a480debe70b74914d224e20cc90a21df3a5c5e949a74801ba4

data/app/assets/javascripts/disco_app/components/custom/rules-editor.es6.jsx

@@ -1,7 +1,7 @@
 /**
  * Defines a generic RulesEditor class. This class can't be used directly, but
  * should be inherited, with the inheriting class defining a list of column
- * types and correponding relations and condition data types, like so:
+ * types and corresponding relations and condition data types, like so:
  *
  *    class MyRulesEditor extends RulesEditor {};
  *    MyRulesEditor.defaultProps = {
@@ -9,13 +9,7 @@
  *        title: {
  *        label: 'Product title',
  *        column: 'title',
- *        relations: {
- *          is_equal_to: {
- *            label: 'is equal to',
- *            relation: 'is_equal_to',
- *            type: 'text'
- *          }
- *        }
+ *        relations: RulesEditor.buildRelationsObj([RulesEditor.EQUALS_STRING])
  *      }
  *    }
  */
@@ -29,13 +23,11 @@ class RulesEditor extends React.Component {
     super(props);
     this.state = {
       rules: props.rules.map((rule, i) => {
-        return {
+        return Object.assign({}, rule, {
           column: Object.keys(this.props.columns).filter((columnKey) => {
             return this.props.columns[columnKey].column == rule.column;
-          })[0],
-          relation: rule.relation,
-          condition: rule.condition
-        }
+          })[0]
+        });
       })
     }
   }
@@ -119,6 +111,19 @@ class RulesEditor extends React.Component {
     });
   }
 
+  /**
+   * Handle a change in a rule's variables
+   *
+   * @param index
+   * @param name
+   * @param value
+   */
+  onRuleVariableChange(index, name, value) {
+    this.updateRule(index, {
+      [name]: value
+    });
+  }
+
   /**
    * Given the column we're changing to and the current rule, return the next
    * relation value.
@@ -165,10 +170,21 @@ class RulesEditor extends React.Component {
    * @param updates
    */
   updateRule(index, updates) {
+    let updatedRule = Object.assign({}, this.state.rules[index], updates);
+
+    // Ensure only valid variables are present in the rule
+    const columnPath = this.props.columns[updatedRule.column].column;
+    const columnVariables = RulesEditor.getColumnPathVariables(columnPath);
+    Object.keys(updatedRule).forEach(function (key) {
+      if ('$' === key[0] && -1 === columnVariables.indexOf(key)) {
+        delete updatedRule[key];
+      }
+    });
+
     this.setState({
       rules: [
         ...this.state.rules.slice(0, index),
-        Object.assign({}, this.state.rules[index], updates),
+        updatedRule,
         ...this.state.rules.slice(index + 1)
       ]
     });
@@ -190,6 +206,7 @@ class RulesEditor extends React.Component {
         onColumnChange={this.onRuleColumnChange.bind(this, i)}
         onRelationChange={this.onRuleRelationChange.bind(this, i)}
         onConditionChange={this.onRuleConditionChange.bind(this, i)}
+        onVariableChange={this.onRuleVariableChange.bind(this, i)}
         ruleCount={rules.length}
         blankOk = {this.props.blankOk}
       />
@@ -198,11 +215,9 @@ class RulesEditor extends React.Component {
     // Convert the current rules JSON into a format using the correct column
     // format used by our more advanced key checker.
     const rulesJSON = JSON.stringify(this.state.rules.map((rule, i) => {
-      return {
-        column: this.props.columns[rule.column].column,
-        relation: rule.relation,
-        condition: rule.condition
-      }
+      return Object.assign({}, rule, {
+        column: this.props.columns[rule.column].column
+      });
     }));
 
     return(
@@ -220,6 +235,23 @@ class RulesEditor extends React.Component {
     );
   }
 
+  /**
+   * Get the variable names present in a column definition
+   *
+   * @param column
+   * @returns {Array.<String>}
+   */
+  static getColumnPathVariables(column) {
+    return column.split(/[^$a-z_A-Z]/).filter((key) => '$' === key[0]);
+  }
+
+  /**
+   * Return a relations object, which is just the passed array
+   * turned into an object which is keyed by the `relation` value
+   *
+   * @param relations
+   * @returns {{}}
+   */
   static buildRelationsObj(relations) {
     var relationsObj = {};
 
@@ -264,7 +296,7 @@ RulesEditor.LESS_THAN = {
   type: 'numeric'
 };
 
-const RulesEditorRule = ({ rule, columns, onRemove, onColumnChange, onRelationChange, onConditionChange, ruleCount, blankOk }) => {
+const RulesEditorRule = ({ rule, columns, onRemove, onColumnChange, onVariableChange, onRelationChange, onConditionChange, ruleCount, blankOk }) => {
   const { column, relation, condition } = rule;
 
   const currentColumn = columns[column];
@@ -293,6 +325,16 @@ const RulesEditorRule = ({ rule, columns, onRemove, onColumnChange, onRelationCh
     );
   }
 
+  const columnVariables = RulesEditor.getColumnPathVariables(currentColumn.column);
+
+  let variablesEditor = columnVariables.map(function(name) {
+    return (
+      <div className="next-grid__cell" key={name}>
+        <RulesEditorVariableInput name={name} value={rule[name]} onChange={onVariableChange.bind(this, name)} />
+      </div>
+    );
+  });
+
   return (
     <div>
       <div className="next-grid next-grid--no-padding next-grid--compact">
@@ -301,6 +343,7 @@ const RulesEditorRule = ({ rule, columns, onRemove, onColumnChange, onRelationCh
             <div className="next-grid__cell">
               <RulesEditorColumnSelect currentColumnName={column} columns={columns} onChange={onColumnChange} />
             </div>
+            {variablesEditor}
             <div className="next-grid__cell">
               <RulesEditorRelationSelect currentRelationName={relation} relations={currentColumn.relations} onChange={onRelationChange} />
             </div>
@@ -325,6 +368,20 @@ const RulesEditorColumnSelect = ({ currentColumnName, columns, onChange }) => {
   return <InputSelect options={options} value={currentColumnName} onChange={onChange} label="Field" labelHidden={true} />;
 };
 
+const RulesEditorVariableInput = ({ name, value, onChange }) => {
+
+  const handleChange = (e) => {
+    onChange && onChange(e);
+  };
+
+  let label = name.substr(1).trim().replace( /([A-Z])/g, " $1" );
+  label = label.charAt(0).toUpperCase() + label.substr(1);
+
+  return (
+    <InputText value={value} onChange={handleChange} label={label} labelHidden={true} placeholder={label} required={true} />
+  );
+};
+
 const RulesEditorRelationSelect = ({ currentRelationName, relations, onChange }) => {
   const options = Object.keys(relations).map((relationName) => {
     return { label: relations[relationName].label, value: relationName }

data/app/assets/javascripts/disco_app/components/ui-kit/ui-layout/ui-empty-state.es6.jsx

@@ -4,7 +4,7 @@ const UIEmptyState = ({ title, subtitle, image, href, label }) => {
   if(image) {
     imageSubsection = (
       <div className="ui-empty-state__subsection">
-        <div className="ui-empty-state__items ui-empty-state__items--odd-queries ui-empty-state__items--quantity-queries">
+        <div className="ui-empty-state__items">
           <div className="ui-empty-state__item">
             <div className="ui-empty-state__subitems">
               <div className="ui-empty-state__subitem">
@@ -21,8 +21,8 @@ const UIEmptyState = ({ title, subtitle, image, href, label }) => {
     <div className="ui-empty-state">
       <div className="ui-empty-state__section">
         <div className="ui-empty-state__subsection">
-          <h1 className="next-heading next-heading--xl">{title}</h1>
-          <h2 className="next-heading next-heading--subdued">{subtitle}</h2>
+          <h1 className="ui-empty-state__title">{title}</h1>
+          <h2 className="ui-empty-state__subtitle">{subtitle}</h2>
         </div>
         {imageSubsection}
         <div className="ui-empty-state__subsection">

data/app/assets/javascripts/disco_app/disco_app.js

@@ -5,6 +5,5 @@
  */
 //= require react
 //= require react_ujs
-//= require bootstrap-sprockets
 //= require disco_app/shopify-turbolinks
 //= require ./ui-kit

data/app/assets/stylesheets/disco_app/admin/_header.scss

@@ -9,7 +9,7 @@
   position: fixed;
   top: 0;
   z-index: 198;
-  left: 230px;
+  left: 240px;
   right: 0;
   height: 56px;
   max-width: 100vw;
@@ -37,6 +37,12 @@
 }
 
 .header__main {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.42857rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  z-index: 2;
+  overflow: hidden;
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 0%;
   -ms-flex: 1 0 0%;
@@ -45,16 +51,19 @@
   -webkit-order: 1;
   -ms-flex-order: 1;
   order: 1;
-  font-size: 24px;
-  text-align: left;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
   margin: 0;
   padding: 10px 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 300;
+  text-align: left;
   white-space: nowrap;
   text-overflow: ellipsis;
-  overflow: hidden;
-  z-index: 2;
 }
 
 .breadcrumb {

data/app/assets/stylesheets/disco_app/admin/_layout.scss

@@ -3,14 +3,6 @@
 // Styles for admin layout.
 // --------------------------------------------------
 
-body {
-  line-height: 18px;
-  font-size: 13px;
-  color: #31373d;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  text-rendering: optimizeLegibility;
-}
-
 html, body {
   height: 100%;
   margin: 0;
@@ -25,7 +17,7 @@ html, body {
 }
 
 #content {
-  padding: 56px 0 0 230px;
+  padding: 56px 0 0 240px;
   width: 100%;
   box-sizing: border-box;
   outline: 0;

data/app/assets/stylesheets/disco_app/admin/_nav.scss

@@ -5,7 +5,7 @@
 
 .next-nav {
   z-index: 221;
-  width: 230px;
+  width: 240px;
   position: fixed;
   top: 0;
   left: 0;
@@ -29,7 +29,7 @@
 
 .next-nav__panel--primary {
   z-index: 1;
-  width: 230px;
+  width: 240px;
   background-color: #31373d;
   -webkit-transition: background-color 200ms ease;
   transition: background-color 200ms ease;
@@ -110,6 +110,15 @@
 }
 
 .next-nav__link {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.07143rem;
+  line-height: 1.42857rem;
+  font-weight: 400;
+  text-transform: initial;
+  letter-spacing: initial;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 500;
   color: #c3cfd8;
   padding: 0 10px 0 20px;
   height: 40px;
@@ -123,9 +132,12 @@
   align-items: center;
   background-color: transparent;
   border: none;
-  font-size: 13px;
   cursor: pointer;
   line-height: normal;
+
+  @media screen and (min-width: 640px) {
+    font-size: 1rem;
+  }
 }
 
 .next-nav__link:hover, .next-nav__link:focus, .next-nav__link:active, .next-nav__link.next-nav__link--is-selected {

data/app/assets/stylesheets/disco_app/disco_app.scss

@@ -2,6 +2,9 @@
 // Styles for Disco applications.
 // --------------------------------------------------
 
+// Variables
+$font-family: -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
+
 // Mixins and utilities.
 @import 'mixins/flexbox';
 

data/app/assets/stylesheets/disco_app/frame/_buttons.scss

@@ -13,7 +13,7 @@
 
   white-space: nowrap;
   vertical-align: middle;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: $font-family;
   font-size: 13px;
 
   -webkit-user-select: none;

data/app/assets/stylesheets/disco_app/frame/_forms.scss

@@ -10,7 +10,7 @@ input[type="text"],
 input[type="url"], {
   vertical-align: top;
   height: 32px;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: $font-family;
   font-size: 13px;
   padding: 5px;
   margin: 0;

data/app/assets/stylesheets/disco_app/frame/_type.scss

@@ -2,16 +2,9 @@
 // Type
 // --------------------------------------------------
 
-@font-face {
-  font-family: 'ProximaNovaLight';
-  src: local('ProximaNovaLight'), local('ProximaNova-Light');
-  font-weight: normal;
-  font-style: normal;
-}
-
 // Base
 html, body {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: $font-family;
   font-size: 13px;
 }
 
@@ -20,7 +13,7 @@ h1 {
   font-size: 24px;
   line-height: 32px;
   height: 32px;
-  font-family: ProximaNovaLight,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: $font-family;
   font-weight: 300;
   margin: 0;
   padding: 0;

data/app/assets/stylesheets/disco_app/frame.scss

@@ -1,4 +1,5 @@
 // Set variables
+$font-family: -apple-system, "BlinkMacSystemFont", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", sans-serif;
 $sidebar-width: 197px;
 $header-height: 57px;
 

data/app/assets/stylesheets/disco_app/ui-kit/_ui-empty-state.scss

@@ -16,6 +16,33 @@
   }
 }
 
+.ui-empty-state__title {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.92857rem;
+  line-height: 2.57143rem;
+  font-weight: 400;
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 2.35714rem;
+    line-height: 3.14286rem;
+  }
+}
+
+.ui-empty-state__subtitle {
+  color: rgba(0,0,0,0.9);
+  font-size: 1.14286rem;
+  line-height: 1.71429rem;
+  font-weight: 400;
+  color: rgba(0,0,0,0.56);
+  margin: 0 0 20px;
+
+  @media (min-width: 640px) {
+    font-size: 1.42857rem;
+    line-height: 2rem;
+  }
+}
+
 .ui-empty-state__section {
   padding: 60px 0;
 }

data/app/assets/stylesheets/disco_app/ui-kit/_ui-footer-help.scss

@@ -5,21 +5,24 @@
 // --------------------------------------------------
 
 .ui-footer-help {
-  margin: 40px 0;
+  margin: 1.71429rem 0;
   text-align: center;
   width: 100%;
 }
 
 .ui-footer-help__content {
-  @include inline-flex();
-  @include align-items(center);
-
+  color: rgba(0,0,0,0.56);
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: left;
+  margin: 0 auto;
+  padding: 1.14286rem;
   border: 1px solid #d3dbe2;
   border-radius: 3px;
-  color: #798c9c;
-
-  font-size: 13px;
-  margin: 0 auto;
-  padding: 20px;
-  text-align: left;
 }