improve strategy deleted message and add strategy form

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

@@ -33,7 +33,7 @@ class AddStrategy extends React.Component {
         return (
             <div style={{ position: 'relative', width: '25px', height: '25px', display: 'inline-block' }} >
                 <IconButton name="add" id="strategies-add" colored title="Sort" onClick={this.stopPropagation}/>
-                <Menu target="strategies-add" valign="bottom" align="left" ripple onClick={
+                <Menu target="strategies-add" valign="bottom" align="right" ripple onClick={
                     (e) => this.setSort(e.target.getAttribute('data-target'))}>
                     <MenuItem disabled>Add Strategy:</MenuItem>
                     {this.props.strategies.map((s) => <MenuItem key={s.name} onClick={() => this.addStrategy(s.name)}>{s.name}</MenuItem>)}

frontend/src/component/feature/form/strategies-section.jsx

@@ -1,10 +1,7 @@
 import React, { PropTypes } from 'react';
 import StrategiesList from './strategies-list';
 import AddStrategy from './strategies-add';
-
+import { HeaderTitle } from '../../common';
-const headerStyle = {
-    marginBottom: '10px',
-};
 
 class StrategiesSection extends React.Component {
 
@@ -29,7 +26,7 @@ class StrategiesSection extends React.Component {
 
         return (
             <div>
-                <h5 style={headerStyle}>Activation strategies <AddStrategy {...this.props} /> </h5>
+                <HeaderTitle title="Activation strategies" actions={<AddStrategy {...this.props} />} />
                 <StrategiesList {...this.props} />
             </div>
         );

frontend/src/component/feature/form/strategy-configure.jsx

@@ -1,6 +1,13 @@
 import React, { PropTypes } from 'react';
 import { Textfield, Button, Card, CardTitle, CardText, CardActions, CardMenu, IconButton }  from 'react-mdl';
+import { Link } from 'react-router';
 
+const style = {
+    flex: '1',
+    minWidth: '300px',
+    maxWidth: '100%',
+    margin: '5px 20px 15px 0px',
+};
 class StrategyConfigure extends React.Component {
 
     static propTypes () {
@@ -50,11 +57,19 @@ class StrategyConfigure extends React.Component {
 
     render () {
         if (!this.props.strategyDefinition) {
+            const { name } = this.props.strategy;
             return (
-                <div>
+                <Card shadow={0} style={style}>
-                    <h6><span style={{ color: 'red' }}>Strategy "{this.props.strategy.name}" deleted</span></h6>
+                    <CardTitle>"{name}" deleted?</CardTitle>
-                    <Button onClick={this.handleRemove} icon="remove" label="remove strategy" flat/>
+                    <CardText>
-                </div>
+                        The strategy "{name}" does not exist on this this server.
+                        <Link to={`/strategies/create?name=${name}`}>Want to create it now?</Link>
+                    </CardText>
+                    <CardActions>
+                        <Button onClick={this.handleRemove} label="remove strategy" accent raised>Remove</Button>
+                    </CardActions>
+
+                </Card>
             );
         }
 
@@ -63,13 +78,7 @@ class StrategyConfigure extends React.Component {
         const { name } = this.props.strategy;
 
         return (
-            <Card shadow={0} style={{
+            <Card shadow={0} style={style}>
-                flex: '1',
-                minWidth: '300px',
-                maxWidth: '100%',
-                // flexBasis: '1',
-                margin: '5px 20px 15px 0px',
-            }}>
                 <CardTitle style={{ color: '#fff', height: '65px', background: '#607d8b' }}>
                     { name }
                 </CardTitle>

frontend/src/component/strategies/add-strategy.jsx

@@ -21,6 +21,8 @@ const genParams = (input, num = 0, setValue) => (<div>{gerArrayWithEntries(num).
     const key = `${PARAM_PREFIX}${i + 1}`;
     return (
         <Textfield
+            style={{ width: '100%' }}
+            floatingLabel
             label={`Parameter name ${i + 1}`}
             name={key} key={key}
             onChange={({ target }) => setValue(key, target.value)}
@@ -37,16 +39,20 @@ const AddStrategy = ({
     onSubmit,
 }) => (
     <form onSubmit={onSubmit(input)}>
-        <HeaderTitle title="Create new strategy"/>
+        <HeaderTitle title="Create new strategy" subtitle="It is not possible to edit a strategy after it is created."/>
-        <section>
+        <section style={{ margin: '16px 20px' }}>
             <Textfield label="Strategy name"
-                name="name" required
+                floatingLabel
+                name="name"
+                required
                 pattern="^[0-9a-zA-Z\.\-]+$"
                 onChange={({ target }) => setValue('name', trim(target.value))}
                 value={input.name}
                 />
             <br />
             <Textfield
+                floatingLabel
+                style={{ width: '100%' }}
                 rows={2}
                 label="Description"
                 name="description"
@@ -55,12 +61,12 @@ const AddStrategy = ({
                 />
         </section>
 
-        <section>
+        <section style={{ margin: '0 20px' }}>
             {genParams(input, input._params, setValue)}
             <IconButton name="add" title="Add parameter" onClick={(e) => {
                 e.preventDefault();
                 incValue('_params');
-            }}/>
+            }}/> Add parameter
         </section>
 
         <br />