diff --git a/frontend/src/component/application/application-edit-container.js b/frontend/src/component/application/application-edit-container.js index 82d9ebde37..cb9daba63d 100644 --- a/frontend/src/component/application/application-edit-container.js +++ b/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]); diff --git a/frontend/src/component/application/application-list-container.js b/frontend/src/component/application/application-list-container.js index d213878e05..eb3809c078 100644 --- a/frontend/src/component/application/application-list-container.js +++ b/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() }); diff --git a/frontend/src/component/archive/archive-list-container.js b/frontend/src/component/archive/archive-list-container.js index 3d2ea58d3e..577187c6e5 100644 --- a/frontend/src/component/archive/archive-list-container.js +++ b/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(); diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js index 706faf38bd..f704a9c8de 100644 --- a/frontend/src/component/common/index.js +++ b/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'; +}; diff --git a/frontend/src/component/feature/form-add-component.jsx b/frontend/src/component/feature/form-add-component.jsx deleted file mode 100644 index 06139d12fe..0000000000 --- a/frontend/src/component/feature/form-add-component.jsx +++ /dev/null @@ -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 }) => ( - - {title} - - -); - -FormAddComponent.propTypes = { - title: PropTypes.string, -}; - -export default FormAddComponent; diff --git a/frontend/src/component/feature/form/index.jsx b/frontend/src/component/feature/form/form-add-feature-component.jsx similarity index 50% rename from frontend/src/component/feature/form/index.jsx rename to frontend/src/component/feature/form/form-add-feature-component.jsx index 4f0ec44809..439149dcda 100644 --- a/frontend/src/component/feature/form/index.jsx +++ b/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 (
- {!editmode && ( - validateName(v.target.value)} - onChange={v => setValue('name', trim(v.target.value))} - /> - )} - {!editmode && ( - setValue('description', v.target.value)} - /> - )} - {!editmode && ( -
-
- { - setValue('enabled', !enabled); - }} - > - Enabled - -
-
- )} + validateName(v.target.value)} + onChange={v => setValue('name', trim(v.target.value))} + /> + setValue('description', v.target.value)} + /> +
+
+ { + setValue('enabled', !enabled); + }} + > + Enabled + +
+
+
- +
); } } -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; diff --git a/frontend/src/component/feature/form-add-container.jsx b/frontend/src/component/feature/form/form-add-feature-container.jsx similarity index 85% rename from frontend/src/component/feature/form-add-container.jsx rename to frontend/src/component/feature/form/form-add-feature-container.jsx index 9699f49c36..8361e1f0ea 100644 --- a/frontend/src/component/feature/form-add-container.jsx +++ b/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 { createMapper, createActions } from '../input-helpers'; -import FormAddComponent from './form-add-component'; +import { createFeatureToggles, validateName } from './../../../store/feature-actions'; +import { createMapper, createActions } from './../../input-helpers'; +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; diff --git a/frontend/src/component/feature/form/form-update-feature-component.jsx b/frontend/src/component/feature/form/form-update-feature-component.jsx new file mode 100644 index 0000000000..daca108c17 --- /dev/null +++ b/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 ( +
+
+ + +
+ +
+
+ ); + } +} + +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; diff --git a/frontend/src/component/feature/form-edit-container.jsx b/frontend/src/component/feature/form/form-update-feature-container.jsx similarity index 86% rename from frontend/src/component/feature/form-edit-container.jsx rename to frontend/src/component/feature/form/form-update-feature-container.jsx index eb0821f723..185df3f99a 100644 --- a/frontend/src/component/feature/form-edit-container.jsx +++ b/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 { createMapper, createActions } from '../input-helpers'; -import FormComponent from './form'; +import { requestUpdateFeatureToggle } from '../../../store/feature-actions'; +import { createMapper, createActions } from '../../input-helpers'; +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); diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx index b186460892..4f2546fe33 100644 --- a/frontend/src/component/feature/view-component.jsx +++ b/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 = { diff --git a/frontend/src/component/feature/view-container.jsx b/frontend/src/component/feature/view-container.jsx index 6827012bfd..f8a33ae007 100644 --- a/frontend/src/component/feature/view-container.jsx +++ b/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'; diff --git a/frontend/src/component/history/history-container.js b/frontend/src/component/history/history-container.js index 0197b14bca..ee79b6cd61 100644 --- a/frontend/src/component/history/history-container.js +++ b/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(); diff --git a/frontend/src/component/strategies/add-container.js b/frontend/src/component/strategies/add-container.js index e7d5a0e8fc..b6e74ad1f3 100644 --- a/frontend/src/component/strategies/add-container.js +++ b/frontend/src/component/strategies/add-container.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; -import { createMapper, createActions } from '../input-helpers'; -import { createStrategy } from '../../store/strategy/actions'; +import { createMapper, createActions } from './../input-helpers'; +import { createStrategy } from './../../store/strategy/actions'; import AddStrategy from './add-strategy'; diff --git a/frontend/src/component/strategies/list-container.jsx b/frontend/src/component/strategies/list-container.jsx index 51b6f69381..aec2cf3791 100644 --- a/frontend/src/component/strategies/list-container.jsx +++ b/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(); diff --git a/frontend/src/component/strategies/strategy-details-container.js b/frontend/src/component/strategies/strategy-details-container.js index 0f3eabef5e..486b6e3a06 100644 --- a/frontend/src/component/strategies/strategy-details-container.js +++ b/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 { fetchAll } from '../../store/application/actions'; -import { fetchFeatureToggles } from '../../store/feature-actions'; +import { fetchStrategies } from './../../store/strategy/actions'; +import { fetchAll } from './../../store/application/actions'; +import { fetchFeatureToggles } from './../../store/feature-actions'; const mapStateToProps = (state, props) => { let strategy = state.strategies.get('list').find(n => n.name === props.strategyName); diff --git a/frontend/src/page/features/create.js b/frontend/src/page/features/create.js index cab5811e62..7e65314b7d 100644 --- a/frontend/src/page/features/create.js +++ b/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 = () => ; diff --git a/frontend/src/page/features/index.js b/frontend/src/page/features/index.js index 764327ced3..ccd602443e 100644 --- a/frontend/src/page/features/index.js +++ b/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 = () => ; diff --git a/frontend/src/page/features/show.js b/frontend/src/page/features/show.js index b17f57861a..4143c1f289 100644 --- a/frontend/src/page/features/show.js +++ b/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 = {