refactor(form): separate add-feature and update-feature components

frontend/src/component/application/application-edit-container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import ApplicationEdit from './application-edit-component';
-import { fetchApplication, storeApplicationMetaData } from '../../store/application/actions';
+import { fetchApplication, storeApplicationMetaData } from './../../store/application/actions';
 
 const mapStateToProps = (state, props) => {
     let application = state.applications.getIn(['apps', props.appName]);

frontend/src/component/application/application-list-container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import ApplicationList from './application-list-component';
-import { fetchAll } from '../../store/application/actions';
+import { fetchAll } from './../../store/application/actions';
 
 const mapStateToProps = state => ({ applications: state.applications.get('list').toJS() });
 

frontend/src/component/archive/archive-list-container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import ListComponent from './archive-list-component';
-import { fetchArchive, revive } from '../../store/archive-actions';
+import { fetchArchive, revive } from './../../store/archive-actions';
 
 const mapStateToProps = state => {
     const archive = state.archive.get('list').toArray();

frontend/src/component/common/index.js

@@ -180,3 +180,6 @@ export function calc(value, total, decimal) {
 
     return (value / total * 100).toFixed(decimal);
 }
+export function getDisplayName(WrappedComponent) {
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+};

frontend/src/component/feature/form-add-component.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Card, CardTitle } from 'react-mdl';
-
-import FormComponent from './form';
-import { styles as commonStyles } from '../common';
-
-const FormAddComponent = ({ title, ...formProps }) => (
-    <Card className={commonStyles.fullwidth} style={{ overflow: 'visible' }}>
-        <CardTitle style={{ paddingTop: '24px' }}>{title}</CardTitle>
-        <FormComponent {...formProps} />
-    </Card>
-);
-
-FormAddComponent.propTypes = {
-    title: PropTypes.string,
-};
-
-export default FormAddComponent;

frontend/src/component/feature/form/form-add-feature-component.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Textfield, Switch } from 'react-mdl';
 import StrategiesSection from './strategies-section-container';
 
-import { FormButtons } from '../../common';
+import { FormButtons, getDisplayName } from './../../common';
 
 const trim = value => {
     if (value && value.trim) {
@@ -13,7 +13,8 @@ const trim = value => {
     }
 };
 
-class AddFeatureToggleComponent extends Component {
+class AddFeatureComponent extends Component {
+    static displayName = `Add2FeatureToggleComponent${getDisplayName(Component)}`;
     componentWillMount() {
         // TODO unwind this stuff
         if (this.props.initCallRequired === true) {
@@ -32,7 +33,6 @@ class AddFeatureToggleComponent extends Component {
             moveStrategy,
             onSubmit,
             onCancel,
-            editmode = false,
         } = this.props;
 
         const {
@@ -46,44 +46,38 @@ class AddFeatureToggleComponent extends Component {
         return (
             <form onSubmit={onSubmit(input)}>
                 <section style={{ padding: '16px' }}>
-                    {!editmode && (
+                    <Textfield
-                        <Textfield
+                        floatingLabel
-                            floatingLabel
+                        label="Name"
-                            label="Name"
+                        name="name"
-                            name="name"
+                        required
-                            disabled={editmode}
+                        value={name}
-                            required
+                        error={nameError}
-                            value={name}
+                        onBlur={v => validateName(v.target.value)}
-                            error={nameError}
+                        onChange={v => setValue('name', trim(v.target.value))}
-                            onBlur={v => validateName(v.target.value)}
+                    />
-                            onChange={v => setValue('name', trim(v.target.value))}
+                    <Textfield
-                        />
+                        floatingLabel
-                    )}
+                        style={{ width: '100%' }}
-                    {!editmode && (
+                        rows={1}
-                        <Textfield
+                        label="Description"
-                            floatingLabel
+                        required
-                            style={{ width: '100%' }}
+                        value={description}
-                            rows={1}
+                        onChange={v => setValue('description', v.target.value)}
-                            label="Description"
+                    />
-                            required
+                    <div>
-                            value={description}
+                        <br />
-                            onChange={v => setValue('description', v.target.value)}
+                        <Switch
-                        />
+                            checked={enabled}
-                    )}
+                            onChange={() => {
-                    {!editmode && (
+                                setValue('enabled', !enabled);
-                        <div>
+                            }}
-                            <br />
+                        >
-                            <Switch
+                            Enabled
-                                checked={enabled}
+                        </Switch>
-                                onChange={() => {
+                        <hr />
-                                    setValue('enabled', !enabled);
+                    </div>
-                                }}
+
-                            >
-                                Enabled
-                            </Switch>
-                            <hr />
-                        </div>
-                    )}
                     <StrategiesSection
                         configuredStrategies={configuredStrategies}
                         addStrategy={addStrategy}
@@ -93,14 +87,14 @@ class AddFeatureToggleComponent extends Component {
                     />
 
                     <br />
-                    <FormButtons submitText={editmode ? 'Update' : 'Create'} onCancel={onCancel} />
+                    <FormButtons submitText={'Create'} onCancel={onCancel} />
                 </section>
             </form>
         );
     }
 }
 
-AddFeatureToggleComponent.propTypes = {
+AddFeatureComponent.propTypes = {
     input: PropTypes.object,
     setValue: PropTypes.func.isRequired,
     addStrategy: PropTypes.func.isRequired,
@@ -110,9 +104,8 @@ AddFeatureToggleComponent.propTypes = {
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     validateName: PropTypes.func.isRequired,
-    editmode: PropTypes.bool,
     initCallRequired: PropTypes.bool,
     init: PropTypes.func,
 };
 
-export default AddFeatureToggleComponent;
+export default AddFeatureComponent;

frontend/src/component/feature/form/form-add-feature-container.jsx

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { hashHistory } from 'react-router';
-import { createFeatureToggles, validateName } from '../../store/feature-actions';
+import { createFeatureToggles, validateName } from './../../../store/feature-actions';
-import { createMapper, createActions } from '../input-helpers';
+import { createMapper, createActions } from './../../input-helpers';
-import FormAddComponent from './form-add-component';
+import AddFeatureComponent from './form-add-feature-component';
 
 const ID = 'add-feature-toggle';
 const mapStateToProps = createMapper({
@@ -67,6 +67,6 @@ const prepare = (methods, dispatch) => {
 };
 const actions = createActions({ id: ID, prepare });
 
-const FormAddContainer = connect(mapStateToProps, actions)(FormAddComponent);
+const FormAddContainer = connect(mapStateToProps, actions)(AddFeatureComponent);
 
 export default FormAddContainer;

frontend/src/component/feature/form/form-update-feature-component.jsx

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import StrategiesSection from './strategies-section-container';
+
+import { FormButtons, getDisplayName } from './../../common';
+
+class UpdateFeatureComponent extends Component {
+    static displayName = `AddFeatureToggleComponent${getDisplayName(Component)}`;
+    componentWillMount() {
+        // TODO unwind this stuff
+        if (this.props.initCallRequired === true) {
+            this.props.init(this.props.input);
+        }
+    }
+
+    render() {
+        const { input, addStrategy, removeStrategy, updateStrategy, moveStrategy, onSubmit, onCancel } = this.props;
+
+        const {
+            name, // eslint-disable-line
+        } = input;
+        const configuredStrategies = input.strategies || [];
+
+        return (
+            <form onSubmit={onSubmit(input)}>
+                <section style={{ padding: '16px' }}>
+                    <StrategiesSection
+                        configuredStrategies={configuredStrategies}
+                        addStrategy={addStrategy}
+                        updateStrategy={updateStrategy}
+                        moveStrategy={moveStrategy}
+                        removeStrategy={removeStrategy}
+                    />
+
+                    <br />
+                    <FormButtons submitText={'Update'} onCancel={onCancel} />
+                </section>
+            </form>
+        );
+    }
+}
+
+UpdateFeatureComponent.propTypes = {
+    input: PropTypes.object,
+    setValue: PropTypes.func.isRequired,
+    addStrategy: PropTypes.func.isRequired,
+    removeStrategy: PropTypes.func.isRequired,
+    moveStrategy: PropTypes.func.isRequired,
+    updateStrategy: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    validateName: PropTypes.func.isRequired,
+    initCallRequired: PropTypes.bool,
+    init: PropTypes.func,
+};
+
+export default UpdateFeatureComponent;

frontend/src/component/feature/form/form-update-feature-container.jsx

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 import { hashHistory } from 'react-router';
 
-import { requestUpdateFeatureToggle } from '../../store/feature-actions';
+import { requestUpdateFeatureToggle } from '../../../store/feature-actions';
-import { createMapper, createActions } from '../input-helpers';
+import { createMapper, createActions } from '../../input-helpers';
-import FormComponent from './form';
+import UpdateFeatureToggleComponent from './form-update-feature-component';
 
 const ID = 'edit-feature-toggle';
 function getId(props) {
@@ -76,4 +76,4 @@ const actions = createActions({
     prepare,
 });
 
-export default connect(mapStateToProps, actions)(FormComponent);
+export default connect(mapStateToProps, actions)(UpdateFeatureToggleComponent);

frontend/src/component/feature/view-component.jsx

@@ -5,7 +5,7 @@ import { hashHistory, Link } from 'react-router';
 
 import HistoryComponent from '../history/history-list-toggle-container';
 import MetricComponent from './metric-container';
-import EditFeatureToggle from './form-edit-container.jsx';
+import EditFeatureToggle from './form/form-update-feature-container';
 import { styles as commonStyles } from '../common';
 
 const TABS = {

frontend/src/component/feature/view-container.jsx

@@ -5,7 +5,7 @@ import {
     toggleFeature,
     removeFeatureToggle,
     editFeatureToggle,
-} from '../../store/feature-actions';
+} from './../../store/feature-actions';
 
 import ViewToggleComponent from './view-component';
 

frontend/src/component/history/history-container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import HistoryComponent from './history-component';
-import { fetchHistory } from '../../store/history-actions';
+import { fetchHistory } from './../../store/history-actions';
 
 const mapStateToProps = state => {
     const history = state.history.get('list').toArray();

frontend/src/component/strategies/add-container.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 
-import { createMapper, createActions } from '../input-helpers';
+import { createMapper, createActions } from './../input-helpers';
-import { createStrategy } from '../../store/strategy/actions';
+import { createStrategy } from './../../store/strategy/actions';
 
 import AddStrategy from './add-strategy';
 

frontend/src/component/strategies/list-container.jsx

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import StrategiesListComponent from './list-component.jsx';
-import { fetchStrategies, removeStrategy } from '../../store/strategy/actions';
+import { fetchStrategies, removeStrategy } from './../../store/strategy/actions';
 
 const mapStateToProps = state => {
     const list = state.strategies.get('list').toArray();

frontend/src/component/strategies/strategy-details-container.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import ShowStrategy from './strategy-details-component';
-import { fetchStrategies } from '../../store/strategy/actions';
+import { fetchStrategies } from './../../store/strategy/actions';
-import { fetchAll } from '../../store/application/actions';
+import { fetchAll } from './../../store/application/actions';
-import { fetchFeatureToggles } from '../../store/feature-actions';
+import { fetchFeatureToggles } from './../../store/feature-actions';
 
 const mapStateToProps = (state, props) => {
     let strategy = state.strategies.get('list').find(n => n.name === props.strategyName);

frontend/src/page/features/create.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import AddFeatureToggleForm from '../../component/feature/form-add-container';
+import AddFeatureToggleForm from '../../component/feature/form/form-add-feature-container';
 
 const render = () => <AddFeatureToggleForm title="Create feature toggle" />;
 

frontend/src/page/features/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import FeatureListContainer from '../../component/feature/list-container';
+import FeatureListContainer from './../../component/feature/list-container';
 
 const render = () => <FeatureListContainer />;
 

frontend/src/page/features/show.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import ViewFeatureToggle from '../../component/feature/view-container';
+import ViewFeatureToggle from './../../component/feature/view-container';
 
 export default class Features extends PureComponent {
     static propTypes = {