Merge pull request #268 from Kitware/presets

fix(preferences): cluster presets, buttonBar can take children

src/pages/Preferences/Cluster/index.js

@@ -5,6 +5,7 @@ import deepClone        from 'mout/src/lang/deepClone';
 import ActiveList       from '../../../panels/ActiveList';
 import Toolbar          from '../../../panels/Toolbar';
 import ButtonBar        from '../../../panels/ButtonBar';
+import PresetSelector   from '../PresetSelector';
 import React            from 'react';
 import { breadcrumb }   from '..';
 
@@ -141,17 +142,18 @@ export default React.createClass({
     this.setState({ active });
   },
 
+  presetChange(presetName) {
+    console.log(presetName);
+    applyPreset(this.state.clusters[this.state.active], presetName);
+    this.forceUpdate();
+  },
+
   addItem() {
     var clusters = this.state.clusters,
       newItem = deepClone(this.props.clusterTemplate);
     newItem.idx = clusters.length;
     clusters.push(newItem);
 
-    // FIXME
-    const profileNames = Object.keys(clusterPresets);
-    applyPreset(newItem, profileNames[Math.floor(profileNames.length * Math.random())]);
-    // FIXME
-
     this.setState({ clusters, active: clusters.length - 1 });
   },
 
@@ -249,7 +251,13 @@ export default React.createClass({
               onAction={ this.formAction }
               error={ this.state.error }
               actions={getActions(this.state.buttonsDisabled, activeData && activeData.config.ssh.publicKey && activeData.status !== 'running')}
-            />
+            >
+              <PresetSelector
+                contents={Object.keys(clusterPresets)}
+                onChange={this.presetChange}
+                value={''}
+              />
+            </ButtonBar>
           </div>
         </div>
       </div>);

src/pages/Preferences/PresetSelector.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import editor from 'HPCCloudStyle/ItemEditor.mcss';
+
+export default React.createClass({
+  propTypes: {
+    contents: React.PropTypes.array,
+    onChange: React.PropTypes.func,
+    value: React.PropTypes.string,
+  },
+
+  valueChange(e) {
+    if (this.props.onChange) {
+      this.props.onChange(e.target.value);
+    }
+  },
+
+  render() {
+    const optionsMapper = (preset, index) => <option key={`${preset}_${index}`} value={preset}>{ preset }</option>;
+    return (
+      <select onChange={this.valueChange} className={editor.input} value={this.props.value}>
+        <option value={null}>Presets</option>
+        { this.props.contents.map(optionsMapper) }
+      </select>
+    );
+  },
+});

src/panels/ButtonBar/index.js

@@ -8,6 +8,7 @@ export default React.createClass({
 
   propTypes: {
     actions: React.PropTypes.array,
+    children: React.PropTypes.object,
     error: React.PropTypes.string,
     onAction: React.PropTypes.func,
     visible: React.PropTypes.bool,
@@ -33,11 +34,13 @@ export default React.createClass({
 
     return (
       <div className={ editor.buttonGroup }>
-        <span></span>
-        <span className={ (this.props.error ? editor.errorBox : states.isHidden) }>
-          { this.props.error }
+        <span>
+          { this.props.children }
         </span>
         <div>
+          <span className={ (this.props.error ? editor.errorBox : states.isHidden) }>
+            { this.props.error }
+          </span>
           { this.props.actions.map(action =>
             <button
               className={ editor.button }

style/ItemEditor.mcss

@@ -33,6 +33,7 @@ textarea.input {
 
 .buttonGroup {
     composes: rightRow from './Layout.mcss';
+    justify-content: space-between;
     padding: 10px 20px;
 }