Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-04 01:18:20 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Corinne Krych 2018-02-16 09:19:30 +01:00
parent 254c57f4d8
commit f8fb2bbc76
18 changed files with 121 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/application/application-edit-container.js
View File

@ -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]);

2
frontend/src/component/application/application-list-container.js
View File

@ -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() });

2
frontend/src/component/archive/archive-list-container.js
View File

@ -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();

3
frontend/src/component/common/index.js
View File

@ -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';
};

19
frontend/src/component/feature/form-add-component.jsx
View File

@ -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;

83
frontend/src/component/feature/form/index.jsx → frontend/src/component/feature/form/form-add-feature-component.jsx
View File

@ -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;

8
frontend/src/component/feature/form-add-container.jsx → frontend/src/component/feature/form/form-add-feature-container.jsx
View File

@ -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;

57
frontend/src/component/feature/form/form-update-feature-component.jsx Normal file
View File

@ -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;

8
frontend/src/component/feature/form-edit-container.jsx → frontend/src/component/feature/form/form-update-feature-container.jsx
View File

@ -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);

2
frontend/src/component/feature/view-component.jsx
View File

@ -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 = {

2
frontend/src/component/feature/view-container.jsx
View File

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

2
frontend/src/component/history/history-container.js
View File

@ -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();

4
frontend/src/component/strategies/add-container.js
View File

@ -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';

2
frontend/src/component/strategies/list-container.jsx
View File

@ -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();

6
frontend/src/component/strategies/strategy-details-container.js
View File

@ -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);

2
frontend/src/page/features/create.js
View File

@ -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" />;

2
frontend/src/page/features/index.js
View File

@ -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 />;

2
frontend/src/page/features/show.js
View File

@ -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 = {