Merge pull request #74 from finn-no/filter_list_of_feature_toggles

Filter list of feature toggles.

public/js/__tests__/components/feature/FeatureList-test.js

@@ -0,0 +1,55 @@
+jest.dontMock("../../../components/feature/FeatureList");
+jest.dontMock("../../../components/feature/Feature");
+
+var React           = require("react/addons");
+var TestUtils       = React.addons.TestUtils;
+var FeatureList     = require("../../../components/feature/FeatureList");
+
+describe("FeatureList", function () {
+    var Component, features;
+
+    beforeEach(function() {
+        features = [
+            { name: "featureX", strategy: "other" },
+            { name: "group.featureY", strategy: "default" }
+        ];
+        Component = TestUtils .renderIntoDocument(<FeatureList features={features} />);
+    });
+
+    afterEach(function() {
+        React.unmountComponentAtNode(document.body);
+    });
+
+    it("should render all features", function() {
+        var features = Component.getDOMNode().querySelectorAll(".feature");
+        expect(features.length).toEqual(2);
+    });
+
+    it("should filter list of features", function() {
+        var filterNode = Component.refs.filter.getDOMNode();
+        TestUtils.Simulate.change(filterNode, {target: {value: "group"}});
+
+        var features = Component.getDOMNode().querySelectorAll(".feature");
+        expect(features.length).toEqual(1);
+    });
+
+    it("should filter list of features ignoring case", function() {
+        var filterNode = Component.refs.filter.getDOMNode();
+        TestUtils.Simulate.change(filterNode, {target: {value: "GROUP"}});
+
+        var features = Component.getDOMNode().querySelectorAll(".feature");
+        expect(features.length).toEqual(1);
+        expect(features[0].textContent).toMatch("group");
+    });
+
+    it("should filter list of features by strategy name", function() {
+        var searchString = "other";
+        var filterNode = Component.refs.filter.getDOMNode();
+        TestUtils.Simulate.change(filterNode, {target: {value: searchString}});
+
+        var features = Component.getDOMNode().querySelectorAll(".feature");
+        expect(features.length).toEqual(1);
+        expect(features[0].textContent).toMatch(searchString);
+    });
+
+});

public/js/components/feature/Feature.jsx

@@ -53,7 +53,7 @@ var Feature = React.createClass({
 
     render: function() {
         return (
-            <tbody>
+            <tbody className="feature">
                 <tr className={this.state.editMode ? "edit bg-lilac-xlt" : ""}>
                     <td width="20">
                         <span className={this.props.feature.enabled ? "toggle-active" : "toggle-inactive"} title="Status">
@@ -66,7 +66,7 @@ var Feature = React.createClass({
                         </span>
                     </td>
 
-                    <td>
+                    <td  className="hide-lt480">
                         {this.props.feature.strategy}
                     </td>
 

public/js/components/feature/FeatureList.jsx

@@ -1,9 +1,47 @@
 var React   = require('react');
 var Feature = require('./Feature');
 
+var noop = function() {};
+
 var FeatureList = React.createClass({
+    propTypes: {
+        features: React.PropTypes.array.isRequired
+    },
+
+    getDefaultProps: function() {
+        return {
+            onFeatureChanged: noop,
+            onFeatureArchive: noop
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            filter: undefined
+        };
+    },
+
+    onFilterChange: function(e) {
+        e.preventDefault();
+        this.setState({filter: e.target.value.trim()});
+    },
+
+    filteredFeatures: function() {
+        if(this.state.filter) {
+            var regex = new RegExp(this.state.filter, "i");
+
+            return this.props.features.filter(function(item) {
+                return regex.test(item.name) || regex.test(item.strategy);
+            }.bind(this));
+
+        } else {
+            return this.props.features;
+        }
+
+    },
+
     render: function() {
-        var featureNodes = this.props.features.map(function(feature) {
+        var featureNodes = this.filteredFeatures().map(function(feature) {
             return (
                 <Feature
                   key={feature.name}
@@ -14,19 +52,33 @@ var FeatureList = React.createClass({
         }.bind(this));
 
         return (
-          <div className=''>
+            <div className=''>
-            <table className='outerborder man'>
+                <table className='outerborder man'>
-              <thead>
+                    <thead>
-                <tr>
+                        <tr>
-                  <th></th>
+                            <th></th>
-                  <th>Name</th>
+                            <th>Name</th>
-                  <th>Strategy</th>
+                            <th className="hide-lt480">Strategy</th>
-                  <th></th>
+                            <th></th>
-                </tr>
+                        </tr>
-              </thead>
+                    </thead>
-              {featureNodes}
+                    <tbody>
-            </table>
+                        <tr>
-          </div>
+                            <td colSpan="4">
+                                <input
+                                    name="filter"
+                                    ref="filter"
+                                    type="text"
+                                    placeholder="Filter by name or strategy"
+                                    onChange={this.onFilterChange}
+                                    value={this.state.filter}
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                    {featureNodes}
+                </table>
+            </div>
           );
     }
 });