Add link to volumes to docker settings

src/css/layout/base.less

@@ -88,3 +88,13 @@ h3 {
     margin: @base-spacing-unit 0;
   }
 }
+
+.soft-link{
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+    color: @alto;
+  }
+}

src/js/components/AppConfigEditFormComponent.jsx

@@ -50,7 +50,8 @@ var AppConfigEditFormComponent = React.createClass({
     return {
       fields: AppFormStore.fields,
       errorIndices: AppFormStore.validationErrorIndices,
-      responseErrorMessages: AppFormStore.responseErrors
+      responseErrorMessages: AppFormStore.responseErrors,
+      isVolumesOpen: false
     };
   },
 
@@ -108,6 +109,12 @@ var AppConfigEditFormComponent = React.createClass({
     });
   },
 
+  setViewVolumes: function (isVolumesOpen = true) {
+    this.setState({
+      isVolumesOpen: !!isVolumesOpen
+    });
+  },
+
   onFormChange: function () {
     this.setState({
       fields: AppFormStore.fields,
@@ -150,6 +157,12 @@ var AppConfigEditFormComponent = React.createClass({
   render: function () {
     var state = this.state;
 
+    var volumesIsOpen = this.fieldsHaveError({volumes: "volumes"});
+
+    if (state.isVolumesOpen) {
+      volumesIsOpen = state.isVolumesOpen;
+    }
+
     return (
       <div>
         <FormGroupComponent
@@ -221,7 +234,8 @@ var AppConfigEditFormComponent = React.createClass({
             <ContainerSettingsComponent
               errorIndices={state.errorIndices}
               fields={state.fields}
-              getErrorMessage={this.getErrorMessage} />
+              getErrorMessage={this.getErrorMessage}
+              openVolumes={this.setViewVolumes}/>
           </CollapsiblePanelComponent>
         </div>
         <div className="row full-bleed">
@@ -269,7 +283,8 @@ var AppConfigEditFormComponent = React.createClass({
         </div>
         <div className="row full-bleed">
           <CollapsiblePanelComponent
-              isOpen={this.fieldsHaveError({volumes: "volumes"})}
+              isOpen={volumesIsOpen}
+              togglePanel={this.setViewVolumes}
               title="Volumes">
             <OptionalVolumesComponent
               errorIndices={state.errorIndices}

src/js/components/CollapsiblePanelComponent.jsx

@@ -1,18 +1,21 @@
 import classNames from "classnames";
 import React from "react";
+import Util from "../helpers/Util";
 
 var CollapsiblePanelComponent = React.createClass({
   displayName: "CollapsiblePanelComponent",
 
   propTypes: {
     children: React.PropTypes.node,
     isOpen: React.PropTypes.bool,
-    title: React.PropTypes.string.isRequired
+    title: React.PropTypes.string.isRequired,
+    togglePanel: React.PropTypes.func
   },
 
   getDefaultProps: function () {
     return {
-      isOpen: false
+      isOpen: false,
+      togglePanel: Util.noop
     };
   },
 
@@ -27,10 +30,12 @@ var CollapsiblePanelComponent = React.createClass({
       this.setState({
         isOpen: nextProps.isOpen
       });
+      this.props.togglePanel(false);
     }
   },
 
   handleToggle: function () {
+    this.props.togglePanel(!this.state.isOpen);
     this.setState({isOpen: !this.state.isOpen});
   },
 

src/js/components/ContainerSettingsComponent.jsx

@@ -27,7 +27,8 @@ var ContainerSettingsComponent = React.createClass({
 
   propTypes: {
     fields: React.PropTypes.object.isRequired,
-    getErrorMessage: React.PropTypes.func.isRequired
+    getErrorMessage: React.PropTypes.func.isRequired,
+    openVolumes: React.PropTypes.func
   },
 
   handleAddRow: function (fieldId, position, event) {
@@ -169,7 +170,12 @@ var ContainerSettingsComponent = React.createClass({
         </FormGroupComponent>
         <h4>Parameters</h4>
         <div className="duplicable-list">{this.getParametersRows()}</div>
-        <div>You can set your Docker volume settings below.</div>
+        <div>
+          You can configure your Docker
+          volume <a className="soft-link" onClick={this.props.openVolumes}>
+            below
+          </a>.
+        </div>
       </div>
     );
   }