minor feature cleanup

packages/unleash-frontend-next/src/component/feature/AddFeatureToggleUI.jsx

@@ -3,72 +3,81 @@ import { Input, Switch, Button } from 'react-toolbox';
 import AddFeatureToggleStrategy from './AddFeatureToggleStrategy';
 import ConfiguredStrategies from './ConfiguredStrategies';
 
-class AddFeatureToggleUI extends React.Component {
-    static propTypes () {
-        return {
-            strategies: PropTypes.array.required,
-            featureToggle: PropTypes.object,
-            updateField: PropTypes.func.required,
-            addStrategy: PropTypes.func.required,
-            removeStrategy: PropTypes.func.required,
-            onSubmit: PropTypes.func.required,
-            onCancel: PropTypes.func.required,
-            editmode: PropTypes.bool,
-        };
-    }
+const AddFeatureToggleUI = ({
+    strategies,
+    featureToggle,
+    updateField,
+    addStrategy,
+    removeStrategy,
+    onSubmit,
+    onCancel,
+    editmode,
+}) => {
+    const {
+        name, // eslint-disable-line
+        description,
+        enabled,
+    } = featureToggle;
+    const configuredStrategies = featureToggle.strategies;
 
-    render () {
-        const configuredStrategies = this.props.featureToggle.strategies;
-
-        return (
-            <form onSubmit={this.props.onSubmit}>
-                <section>
-                    <Input
-                        type="text"
-                        label="Name"
-                        name="name"
-                        disabled={this.props.editmode}
-                        required
-                        value={this.props.featureToggle.name}
-                        onChange={this.props.updateField.bind(this, 'name')} />
-                    <Input
-                        type="text"
-                        multiline label="Description"
-                        required
-                        value={this.props.featureToggle.description}
-                        onChange={this.props.updateField.bind(this, 'description')} />
-
-                    <br />
-
-                    <Switch
-                        checked={this.props.featureToggle.enabled}
-                        label="Enabled"
-                        onChange={this.props.updateField.bind(this, 'enabled')} />
-
-                    <br />
-                </section>
-
-                <section>
-                    <strong>Activation strategies</strong>
-                    <ConfiguredStrategies
-                        configuredStrategies={configuredStrategies}
-                        removeStrategy={this.props.removeStrategy} />
-                </section>
-
-                <section>
-                    <AddFeatureToggleStrategy
-                        strategies={this.props.strategies}
-                        addStrategy={this.props.addStrategy} />
-                </section>
+    return (
+        <form onSubmit={onSubmit}>
+            <section>
+                <Input
+                    type="text"
+                    label="Name"
+                    name="name"
+                    disabled={editmode}
+                    required
+                    value={name}
+                    onChange={updateField.bind(this, 'name')} />
+                <Input
+                    type="text"
+                    multiline label="Description"
+                    required
+                    value={description}
+                    onChange={updateField.bind(this, 'description')} />
 
                 <br />
 
+                <Switch
+                    checked={enabled}
+                    label="Enabled"
+                    onChange={updateField.bind(this, 'enabled')} />
 
-                <Button type="submit" raised primary label={this.props.editmode ? 'Update' : 'Create'} />
-                <Button type="cancel" raised label="Cancel" onClick={this.props.onCancel} />
-            </form>
-        );
-    }
-}
+                <br />
+            </section>
+
+            <section>
+                <strong>Activation strategies</strong>
+                <ConfiguredStrategies
+                    configuredStrategies={configuredStrategies}
+                    removeStrategy={removeStrategy} />
+            </section>
+
+            <section>
+                <AddFeatureToggleStrategy strategies={strategies} addStrategy={addStrategy} />
+            </section>
+
+            <br />
+
+
+            <Button type="submit" raised primary label={editmode ? 'Update' : 'Create'} />
+            &nbsp;
+            <Button type="cancel" raised label="Cancel" onClick={onCancel} />
+        </form>
+    );
+};
+
+AddFeatureToggleUI.propTypes = {
+    strategies: PropTypes.array.required,
+    featureToggle: PropTypes.object,
+    updateField: PropTypes.func.required,
+    addStrategy: PropTypes.func.required,
+    removeStrategy: PropTypes.func.required,
+    onSubmit: PropTypes.func.required,
+    onCancel: PropTypes.func.required,
+    editmode: PropTypes.bool,
+};
 
 export default AddFeatureToggleUI;

packages/unleash-frontend-next/src/component/feature/EditFeatureToggle.jsx

@@ -2,9 +2,11 @@ import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { editFeatureToggle } from '../../store/feature-actions';
 import AddFeatureToggleUI from './AddFeatureToggleUI';
+import { fetchStrategies } from '../../store/strategy-actions';
+
 
 const mapStateToProps = (state, ownProps) => ({
-    strategies: state.strategies.toJS(),
+    strategies: state.strategies.get('list').toArray(),
     featureToggle: state.features.toJS().find(toggle => toggle.name === ownProps.featureToggleName) || {},
 });
 
@@ -28,6 +30,11 @@ class EditFeatureToggle extends React.Component {
         };
     }
 
+    componentDidMount () {
+        // todo fetch feature if missing? (reload of page does not fetch data from url)
+        this.props.fetchStrategies();
+    }
+
     static contextTypes = {
         router: React.PropTypes.object,
     }
@@ -62,20 +69,18 @@ class EditFeatureToggle extends React.Component {
 
     render () {
         return (
-            <div>
-                <AddFeatureToggleUI
-                    editmode="true"
-                    strategies={this.props.strategies}
-                    featureToggle={this.state}
-                    updateField={this.updateField}
-                    addStrategy={this.addStrategy}
-                    removeStrategy={this.removeStrategy}
-                    onSubmit={this.onSubmit}
-                    onCancel={this.onCancel}
-                />
-            </div>
+            <AddFeatureToggleUI
+                editmode="true"
+                strategies={this.props.strategies}
+                featureToggle={this.state}
+                updateField={this.updateField}
+                addStrategy={this.addStrategy}
+                removeStrategy={this.removeStrategy}
+                onSubmit={this.onSubmit}
+                onCancel={this.onCancel}
+            />
         );
     }
 }
 
-export default connect(mapStateToProps)(EditFeatureToggle);
+export default connect(mapStateToProps, { fetchStrategies })(EditFeatureToggle);

packages/unleash-frontend-next/src/component/feature/Feature.jsx

@@ -1,33 +1,43 @@
-/* eslint no-shadow: ["error", { "allow": ["name"] }]*/
-
 import React, { PropTypes } from 'react';
-import { Switch, FontIcon } from 'react-toolbox';
-import { Link } from 'react-router';
 
-const Feature = ({ onClick, name, enabled, strategies, onFeatureRemove }) => (
-  <tr>
-    <td style={{ paddingTop: '1.5rem' }}><Switch onChange={onClick} checked={enabled} /></td>
-    <td>
-      <Link to={`/features/edit/${name}`} title={`Edit ${name}`}>
-        {name}
-      </Link>
-    </td>
-    <td>{strategies.map(s => s.name).join(', ')}</td>
-    <td style={{ textAlign: 'right' }}>
-      <Link to={`/features/edit/${name}`} title={`Edit ${name}`}>
-        <FontIcon value="edit" />
-      </Link>
-      <FontIcon style={{ cursor: 'pointer' }} value="delete" onClick={onFeatureRemove} />
-    </td>
-  </tr>
-);
+import { Link } from 'react-router';
+import FontIcon from 'react-toolbox/lib/font_icon';
+import Switch from 'react-toolbox/lib/switch';
+import { ListItem } from 'react-toolbox/lib/list';
+
+import style from './feature.scss';
+
+const Feature = ({ feature, onFeatureClick, onFeatureRemove }) => {
+    const { name, description, enabled, strategies } = feature; // eslint-disable-line no-shadow
+
+    const actions = [
+        strategies.map(s => s.name).join(', '),
+        <Link to={`/features/edit/${name}`} title={`Edit ${name}`}>
+            <FontIcon value="edit" className={style.action} />
+        </Link>,
+        <FontIcon className={style.action} value="delete" onClick={() => onFeatureRemove(name)} />,
+    ];
+
+    const leftActions = [
+        <Switch onChange={() => onFeatureClick(feature)} checked={enabled} />,
+    ];
+
+    return (
+        <ListItem
+            leftActions={leftActions}
+            rightActions={actions}
+            caption={<Link to={`/features/edit/${name}`} title={`Edit ${name}`} className={style.link}>
+                {name}
+            </Link>}
+            legend={(description && description.substring(0, 100)) || '-'}
+        />
+    );
+};
 
 Feature.propTypes = {
-    onClick: PropTypes.func.isRequired,
-    onFeatureRemove: PropTypes.func.isRequired,
-    enabled: PropTypes.bool.isRequired,
-    strategies: PropTypes.array.isRequired,
-    name: PropTypes.string.isRequired,
+    feature: PropTypes.object,
+    onFeatureClick: PropTypes.func,
+    onFeatureRemove: PropTypes.func,
 };
 
 export default Feature;

packages/unleash-frontend-next/src/component/feature/FeatureList.jsx

@@ -1,11 +1,8 @@
 import React, { PropTypes } from 'react';
 import Feature from './Feature';
-import style from './table.scss';
+import { List, ListItem, ListSubHeader, ListDivider } from 'react-toolbox/lib/list';
 
 export default class FeatureList extends React.Component {
-    constructor () {
-        super();
-    }
 
     static propTypes () {
         return {
@@ -16,35 +13,28 @@ export default class FeatureList extends React.Component {
         };
     }
 
+    static contextTypes = {
+        router: React.PropTypes.object,
+    }
+
     componentDidMount () {
         this.props.fetchFeatureToggles();
     }
 
     render () {
-        const onFeatureClick = this.props.onFeatureClick;
-        const onFeatureRemove = this.props.onFeatureRemove;
-        const features = this.props.features.map(featureToggle =>
-                <Feature key={featureToggle.name}
-                    {...featureToggle}
-                    onClick={() => onFeatureClick(featureToggle)}
-                    onFeatureRemove={() => onFeatureRemove(featureToggle.name)}
-                />
-            );
+        const { features, onFeatureClick, onFeatureRemove } = this.props;
 
         return (
-            <table className={style.ztable}>
-                <thead>
-                    <tr>
-                        <th width="80">Enabled</th>
-                        <th>Feature Toggle</th>
-                        <th>Strategies</th>
-                        <th width="100" style={{ textAlign: 'right' }}>Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {features}
-                </tbody>
-            </table>
+           <List>
+                <ListSubHeader caption="Feature toggles" />
+                {features.map(feature =>
+                    <Feature feature={feature} onFeatureClick={onFeatureClick} onFeatureRemove={onFeatureRemove}/>
+                )}
+                <ListDivider />
+                <ListItem
+                    onClick={() => this.context.router.push('/features/create')}
+                    caption="Add" legend="new feature toggle" leftIcon="add" />
+           </List>
         );
     }
 }

packages/unleash-frontend-next/src/component/feature/FeatureListContainer.jsx

@@ -4,7 +4,6 @@ import FeatureList from './FeatureList';
 
 const mapStateToProps = (state) => ({
     features: state.features.toJS(),
-    strategies: state.strategies.toJS(),
 });
 
 const mapDispatchToProps = {

packages/unleash-frontend-next/src/component/feature/feature.scss

@@ -0,0 +1,8 @@
+.link {
+    color: #212121;
+}
+
+.action {
+    color: #aaa !important;
+    cursor: pointer;
+}

packages/unleash-frontend-next/src/component/feature/table.scss

@@ -1,12 +0,0 @@
-.ztable tbody tr:nth-child(odd) {
-    background-color: #efefef;
-}
-.ztable {
-    margin: 10px;
-    border-collapse: separate;
-    border-spacing: 0;
-}
-
-.ztable td, th {
-    padding: 4px 10px;
-}

packages/unleash-frontend-next/src/page/features/create.js

@@ -1,13 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import AddFeatureToggle from '../../component/feature/AddFeatureToggle';
 
-export default class Features extends Component {
-    render () {
-        return (
-            <div>
-                <h1>Create Feature Toggle</h1>
-                <AddFeatureToggle />
-            </div>
-        );
-    }
-};
+const render = () => (
+    <div>
+        <h3>Create feature toggle</h3>
+        <AddFeatureToggle />
+    </div>
+);
+
+export default render;

packages/unleash-frontend-next/src/page/features/edit.js

@@ -8,14 +8,10 @@ export default class Features extends Component {
         };
     }
 
-    static contextTypes = {
-        router: React.PropTypes.object,
-    }
-
     render () {
         return (
             <div>
-                <h1>Edit Feature Toggle</h1>
+                <h3>Edit feature toggle</h3>
                 <EditFeatureToggle featureToggleName={this.props.params.name} />
             </div>
         );

packages/unleash-frontend-next/src/page/features/index.js

@@ -1,21 +1,8 @@
-import React, { Component } from 'react';
+import React from 'react';
 import FeatureListContainer from '../../component/feature/FeatureListContainer';
-import { Button } from 'react-toolbox';
+
+const render = () => (<FeatureListContainer />);
+
+export default render;
 
 
-export default class Features extends Component {
-    static contextTypes = {
-        router: React.PropTypes.object,
-    }
-
-    render () {
-        const createHref = this.context.router.createHref('/features/create');
-        return (
-            <div>
-                <h1>Feature Toggles</h1>
-                <Button href={createHref} icon="add" raised primary label="New Feature Toggle"/>
-                <FeatureListContainer />
-            </div>
-        );
-    }
-};

packages/unleash-frontend-next/src/page/history/index.js

@@ -4,7 +4,7 @@ export default class EventHisotry extends Component {
     render () {
         return (
             <div>
-                <h1>Event history</h1>
+                <h2>Event history</h2>
             </div>
         );
     }