mirror of
https://github.com/Unleash/unleash.git
synced 2025-05-31 01:16:01 +02:00
refactor(form): separate add-feature and update-feature components
This commit is contained in:
parent
254c57f4d8
commit
f8fb2bbc76
@ -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]);
|
||||
|
@ -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() });
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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';
|
||||
};
|
||||
|
@ -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;
|
@ -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
|
||||
floatingLabel
|
||||
label="Name"
|
||||
name="name"
|
||||
disabled={editmode}
|
||||
required
|
||||
value={name}
|
||||
error={nameError}
|
||||
onBlur={v => validateName(v.target.value)}
|
||||
onChange={v => setValue('name', trim(v.target.value))}
|
||||
/>
|
||||
)}
|
||||
{!editmode && (
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
required
|
||||
value={description}
|
||||
onChange={v => setValue('description', v.target.value)}
|
||||
/>
|
||||
)}
|
||||
{!editmode && (
|
||||
<div>
|
||||
<br />
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => {
|
||||
setValue('enabled', !enabled);
|
||||
}}
|
||||
>
|
||||
Enabled
|
||||
</Switch>
|
||||
<hr />
|
||||
</div>
|
||||
)}
|
||||
<Textfield
|
||||
floatingLabel
|
||||
label="Name"
|
||||
name="name"
|
||||
required
|
||||
value={name}
|
||||
error={nameError}
|
||||
onBlur={v => validateName(v.target.value)}
|
||||
onChange={v => setValue('name', trim(v.target.value))}
|
||||
/>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
style={{ width: '100%' }}
|
||||
rows={1}
|
||||
label="Description"
|
||||
required
|
||||
value={description}
|
||||
onChange={v => setValue('description', v.target.value)}
|
||||
/>
|
||||
<div>
|
||||
<br />
|
||||
<Switch
|
||||
checked={enabled}
|
||||
onChange={() => {
|
||||
setValue('enabled', !enabled);
|
||||
}}
|
||||
>
|
||||
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;
|
@ -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;
|
@ -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;
|
@ -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);
|
@ -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 = {
|
||||
|
@ -5,7 +5,7 @@ import {
|
||||
toggleFeature,
|
||||
removeFeatureToggle,
|
||||
editFeatureToggle,
|
||||
} from '../../store/feature-actions';
|
||||
} from './../../store/feature-actions';
|
||||
|
||||
import ViewToggleComponent from './view-component';
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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';
|
||||
|
||||
|
@ -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();
|
||||
|
@ -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);
|
||||
|
@ -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" />;
|
||||
|
||||
|
@ -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 />;
|
||||
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user