[explore-v2] render columns based on length of fieldSets array (#1559)

* render columns based on length of fieldSets array * fix tests
apache · Nov 8, 2016 · 1bf83c3 · 1bf83c3
1 parent bb6ab11
commit 1bf83c3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx b/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx
@@ -21,7 +21,7 @@ export default class CheckboxField extends React.Component {
   }
   render() {
     return (
-      <Checkbox onChange={this.onToggle.bind(this)}>
+      <Checkbox onChange={this.onToggle.bind(this)} inline>
         <ControlLabelWithTooltip label={this.props.label} description={this.props.description} />
       </Checkbox>
     );

diff --git a/caravel/assets/javascripts/explorev2/components/FieldSetRow.jsx b/caravel/assets/javascripts/explorev2/components/FieldSetRow.jsx
@@ -2,6 +2,8 @@ import React, { PropTypes } from 'react';
 import FieldSet from './FieldSet';
 import { fields } from '../stores/store';
 
+const NUM_COLUMNS = 12;
+
 const propTypes = {
   fieldSets: PropTypes.array.isRequired,
   fieldOverrides: PropTypes.object,
@@ -23,16 +25,18 @@ function getFieldData(fs, fieldOverrides) {
 }
 
 export default function FieldSetRow({ fieldSets, fieldOverrides, onChange }) {
+  const colSize = NUM_COLUMNS / fieldSets.length;
   return (
-    <ul className="list-unstyled">
+    <div className="row">
       {fieldSets.map((fs) => {
         const fieldData = getFieldData(fs, fieldOverrides);
         return (
-          <li key={fs}>
+          <div className={`col-lg-${colSize} col-xs-12`} key={fs}>
             <FieldSet name={fs} onChange={onChange} {...fieldData} />
-          </li>);
+          </div>
+        );
       })}
-    </ul>
+    </div>
   );
 }
 

diff --git a/caravel/assets/spec/javascripts/explorev2/components/FieldSetRow_spec.js b/caravel/assets/spec/javascripts/explorev2/components/FieldSetRow_spec.js
@@ -2,10 +2,13 @@ import React from 'react';
 import { expect } from 'chai';
 import { describe, it, beforeEach } from 'mocha';
 import { shallow } from 'enzyme';
+import { fields } from '../../../../javascripts/explorev2/stores/store';
 
 import FieldSetRow from '../../../../javascripts/explorev2/components/FieldSetRow';
+import FieldSet from '../../../../javascripts/explorev2/components/FieldSet';
 
 const defaultProps = {
+  fields,
   fieldSets: ['columns', 'metrics'],
 };
 
@@ -16,12 +19,12 @@ describe('FieldSetRow', () => {
     wrapper = shallow(<FieldSetRow {...defaultProps} />);
   });
 
-  it('renders a single <ul>', () => {
-    expect(wrapper.find('ul')).to.have.lengthOf(1);
+  it('renders a single row element', () => {
+    expect(wrapper.find('.row')).to.have.lengthOf(1);
   });
 
-  it('renders a <li> for each item in fieldSets array', () => {
+  it('renders a FieldSet for each item in fieldSets array', () => {
     const length = defaultProps.fieldSets.length;
-    expect(wrapper.find('li')).to.have.lengthOf(length);
+    expect(wrapper.find(FieldSet)).to.have.lengthOf(length);
   });
 });