From 1bf83c3bf78de422df1b21c3049d106b1cb29385 Mon Sep 17 00:00:00 2001
From: Alanna Scott <alanna.scott@airbnb.com>
Date: Tue, 8 Nov 2016 13:52:24 -0800
Subject: [PATCH] [explore-v2] render columns based on length of fieldSets
 array (#1559)

* render columns based on length of fieldSets array

* fix tests
---
 .../explorev2/components/CheckboxField.jsx           |  2 +-
 .../javascripts/explorev2/components/FieldSetRow.jsx | 12 ++++++++----
 .../explorev2/components/FieldSetRow_spec.js         | 11 +++++++----
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx b/caravel/assets/javascripts/explorev2/components/CheckboxField.jsx
index 0996b90396c5e..957b2f33241aa 100644
--- 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
index 8ab8b877db445..22d7b56848e1c 100644
--- 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
index 1d61ed0566e4e..dd66ac632d00a 100644
--- 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);
   });
 });