Implement Feature Toggle Delete

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

@@ -75,8 +75,8 @@ class ConfigureStrategy extends React.Component {
 
                 {this.renderInputFields(selectedStrategy)}
 
-                <Button raised mini accent label="cancel" onClick={this.props.cancelConfig} />
-                <Button raised mini label="add strategy" onClick={this.addStrategy} />
+                <Button icon="add" accent label="add strategy" onClick={this.addStrategy} />
+                <Button label="cancel" onClick={this.props.cancelConfig} />
             </div>
         );
     }

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

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { Chip } from 'react-toolbox';
+import { Avatar, Chip } from 'react-toolbox';
 
 class ConfiguredStrategies extends React.Component {
     static propTypes () {
@@ -10,9 +10,10 @@ class ConfiguredStrategies extends React.Component {
     }
 
     renderName (strategy) {
-        const params = Object.keys(strategy.parameters)
-            .map(param => `${param}='${strategy.parameters[param]}'`)
-            .join(', ');
+        const parameters = strategy.parameters || {};
+        const params = Object.keys(parameters)
+            .map(param => `${param}="${strategy.parameters[param]}"`)
+            .join('; ');
         return <span>{strategy.name} ({params})</span>;
     }
 
@@ -22,14 +23,16 @@ class ConfiguredStrategies extends React.Component {
             <Chip
                 key={`${index}-${s.name}`}
                 deletable
-                onDeleteClick={() => removeStrategy(s)}>
+                onDeleteClick={() => removeStrategy(s)}
+            >
+                <Avatar icon="edit" />
                 {this.renderName(s)}
             </Chip>
         ));
         return (
-            <div>
+            <p>
                 {strategies.length > 0 ? strategies : <p>No activation strategies added</p>}
-            </div>
+            </p>
         );
     }
 }

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

@@ -4,22 +4,27 @@ import React, { PropTypes } from 'react';
 import { Switch, FontIcon } from 'react-toolbox';
 import { Link } from 'react-router';
 
-const Feature = ({ onClick, name, enabled, strategies }) => (
+const Feature = ({ onClick, name, enabled, strategies, onFeatureRemove }) => (
   <tr>
     <td style={{ paddingTop: '1.5rem' }}><Switch onChange={onClick} checked={enabled} /></td>
-    <td><a href="/edit">{name}</a></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 value="delete" />
+      <FontIcon style={{ cursor: 'pointer' }} value="delete" onClick={onFeatureRemove} />
     </td>
   </tr>
 );
 
 Feature.propTypes = {
     onClick: PropTypes.func.isRequired,
+    onFeatureRemove: PropTypes.func.isRequired,
     enabled: PropTypes.bool.isRequired,
     strategies: PropTypes.array.isRequired,
     name: PropTypes.string.isRequired,

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

@@ -10,6 +10,7 @@ export default class FeatureList extends React.Component {
     static propTypes () {
         return {
             onFeatureClick: PropTypes.func.isRequired,
+            onFeatureRemove: PropTypes.func.isRequired,
             features: PropTypes.array.isRequired,
             fetchFeatureToggles: PropTypes.array.isRequired,
         };
@@ -21,10 +22,12 @@ export default class FeatureList extends React.Component {
 
     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)}
                 />
             );
 

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

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { toggleFeature, fetchFeatureToggles } from '../../store/feature-actions';
+import { toggleFeature, fetchFeatureToggles, removeFeatureToggle } from '../../store/feature-actions';
 import FeatureList from './FeatureList';
 
 const mapStateToProps = (state) => ({
@@ -9,6 +9,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = {
     onFeatureClick: toggleFeature,
+    onFeatureRemove: removeFeatureToggle,
     fetchFeatureToggles,
 };
 

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

@@ -1,7 +1,13 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import EditFeatureToggle from '../../component/feature/EditFeatureToggle';
 
 export default class Features extends Component {
+    static propTypes () {
+        return {
+            params: PropTypes.object.isRequired,
+        };
+    }
+
     static contextTypes = {
         router: React.PropTypes.object,
     }

packages/unleash-frontend-next/src/store/feature-actions.js

@@ -2,6 +2,7 @@ import api from './feature-api';
 const debug = require('debug')('unleash:feature-actions');
 
 export const ADD_FEATURE_TOGGLE             = 'ADD_FEATURE_TOGGLE';
+export const REMOVE_FEATURE_TOGGLE          = 'REMOVE_FEATURE_TOGGLE';
 export const UPDATE_FEATURE_TOGGLE          = 'UPDATE_FEATURE_TOGGLE';
 export const TOGGLE_FEATURE_TOGGLE          = 'TOGGLE_FEATURE_TOGGLE';
 export const REQUEST_FEATURE_TOGGLES        = 'REQUEST_FEATURE_TOGGLES';
@@ -11,6 +12,7 @@ export const RECEIVE_FEATURE_TOGGLES        = 'RECEIVE_FEATURE_TOGGLES';
 export const ERROR_RECEIVE_FEATURE_TOGGLES  = 'ERROR_RECEIVE_FEATURE_TOGGLES';
 export const ERROR_CREATING_FEATURE_TOGGLE  = 'ERROR_CREATING_FEATURE_TOGGLE';
 export const ERROR_UPDATING_FEATURE_TOGGLE  = 'ERROR_UPDATING_FEATURE_TOGGLE';
+export const ERROR_REMOVE_FEATURE_TOGGLE    = 'ERROR_REMOVE_FEATURE_TOGGLE';
 
 function addFeatureToggle (featureToggle) {
     return {
@@ -123,3 +125,10 @@ export function requestUpdateFeatureToggle (featureToggle) {
     };
 }
 
+export function removeFeatureToggle (featureToggleName) {
+    return dispatch => (api.remove(featureToggleName)
+            .then(() => dispatch({ type: REMOVE_FEATURE_TOGGLE, featureToggleName }))
+            .catch(error => dispatch({ type: ERROR_REMOVE_FEATURE_TOGGLE, featureToggleName, error }))
+    );
+}
+

packages/unleash-frontend-next/src/store/feature-api.js

@@ -36,8 +36,15 @@ function update (featureToggle) {
     }).then(throwIfNotSuccess);
 }
 
+function remove (featureToggleName) {
+    return fetch(`${URI}/${featureToggleName}`, {
+        method: 'DELETE',
+    }).then(throwIfNotSuccess);
+}
+
 module.exports = {
     fetchAll,
     create,
     update,
+    remove,
 };

packages/unleash-frontend-next/src/store/feature-store.js

@@ -6,6 +6,7 @@ import {
     ADD_FEATURE_TOGGLE,
     RECEIVE_FEATURE_TOGGLES,
     UPDATE_FEATURE_TOGGLE,
+    REMOVE_FEATURE_TOGGLE,
 } from './feature-actions';
 
 
@@ -14,6 +15,9 @@ const features = (state = new List([]), action) => {
         case ADD_FEATURE_TOGGLE:
             debug(ADD_FEATURE_TOGGLE, action);
             return state.push(new $Map(action.featureToggle));
+        case REMOVE_FEATURE_TOGGLE:
+            debug(REMOVE_FEATURE_TOGGLE, action);
+            return state.filter(toggle => toggle.get('name') !== action.featureToggleName);
         case UPDATE_FEATURE_TOGGLE:
             debug(UPDATE_FEATURE_TOGGLE, action);
             return state.map(toggle => {