Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +01:00
Code Issues Projects Releases Wiki Activity

fix configure strategy UI

Browse Source
This commit is contained in:
Ivar 2016-11-15 23:14:30 +01:00
parent 35ca8b7fa9
commit d3d8591b45
5 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/feature/form/index.jsx
View File

@ -71,6 +71,8 @@ class AddFeatureToggleComponent extends Component {
<br /> <br />
<hr />
<Button type="submit" raised primary label={editmode ? 'Update' : 'Create'} /> <Button type="submit" raised primary label={editmode ? 'Update' : 'Create'} />
&nbsp; &nbsp;
<Button type="cancel" raised label="Cancel" onClick={onCancel} /> <Button type="cancel" raised label="Cancel" onClick={onCancel} />

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

@ -57,13 +57,16 @@ class AddStrategy extends React.Component {
}); });
return ( return (
<Dropdown <div style={{ maxWidth: '400px', marginTop: '20px' }}>
allowBlank={false} <Dropdown
source={strats} allowBlank={false}
onChange={this.addStrategy} auto
label="Add an activation strategy" source={strats}
template={this.customItem} onChange={this.addStrategy}
/> label="Click to add activation strategy"
template={this.customItem}
/>
</div>
); );
} }
} }

6
frontend/src/component/feature/form/strategies-list.jsx
View File

@ -21,7 +21,7 @@ class StrategiesList extends React.Component {
} = this.props; } = this.props;
if (!configuredStrategies || configuredStrategies.length === 0) { if (!configuredStrategies || configuredStrategies.length === 0) {
return <i>No strategies added</i>; return <i style={{ color: 'red' }}>No strategies added</i>;
} }
const blocks = configuredStrategies.map((strat, i) => ( const blocks = configuredStrategies.map((strat, i) => (
@ -33,9 +33,9 @@ class StrategiesList extends React.Component {
strategyDefinition={strategies.find(s => s.name === strat.name)} /> strategyDefinition={strategies.find(s => s.name === strat.name)} />
)); ));
return ( return (
<List> <div>
{blocks} {blocks}
</List> </div>
); );
} }
} }

10
frontend/src/component/feature/form/strategies-section.jsx
View File

@ -3,8 +3,6 @@ import StrategiesList from './strategies-list';
import AddStrategy from './strategies-add'; import AddStrategy from './strategies-add';
const headerStyle = { const headerStyle = {
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
paddingBottom: '5px',
marginBottom: '10px', marginBottom: '10px',
}; };
@ -31,11 +29,9 @@ class StrategiesSection extends React.Component {
return ( return (
<div> <div>
<div> <h5 style={headerStyle}>Activation strategies</h5>
<h5 style={headerStyle}>Strategies:</h5> <StrategiesList {...this.props} />
<StrategiesList {...this.props} /> <AddStrategy {...this.props} />
<AddStrategy {...this.props} />
</div>
</div> </div>
); );
} }

29
frontend/src/component/feature/form/strategy-configure.jsx
View File

@ -23,7 +23,7 @@ class StrategyConfigure extends React.Component {
}; };
handleConfigChange = (key, value) => { handleConfigChange = (key, value) => {
const parameters = {}; const parameters = this.props.strategy.parameters || {};
parameters[key] = value; parameters[key] = value;
const updatedStrategy = Object.assign({}, this.props.strategy, { parameters }); const updatedStrategy = Object.assign({}, this.props.strategy, { parameters });
@ -52,27 +52,28 @@ class StrategyConfigure extends React.Component {
} }
render () { render () {
const leftActions = [
<Button key="remove" onClick={this.handleRemove} icon="remove" floating accent mini />,
];
if (!this.props.strategyDefinition) { if (!this.props.strategyDefinition) {
return ( return (
<ListItem <div>
leftActions={leftActions} <h6><span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span></h6>
caption={<span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span>} <Button onClick={this.handleRemove} icon="remove" label="remove strategy" flat/>
/> </div>
); );
} }
const inputFields = this.renderInputFields(this.props.strategyDefinition) || []; const inputFields = this.renderInputFields(this.props.strategyDefinition) || [];
return ( return (
<ListItem leftActions={leftActions} <div style={{ padding: '5px 15px', backgroundColor: '#f7f8ff', marginBottom: '10px' }}>
caption={this.props.strategy.name} <h6>
legend={this.props.strategyDefinition.description} <strong>{this.props.strategy.name} </strong>
rightActions={inputFields} (<a style={{ color: '#ff4081' }} onClick={this.handleRemove} href="#remove-strat">remove</a>)
/> </h6>
<small>{this.props.strategyDefinition.description}</small>
<div>
{inputFields}
</div>
</div>
); );
} }
} }