Make edit mode explicity in modal props

src/js/components/modals/AppModalComponent.jsx

@@ -19,12 +19,14 @@ var AppModalComponent = React.createClass({
 
   propTypes: {
     app: React.PropTypes.object,
+    editMode: React.PropTypes.bool,
     onDestroy: React.PropTypes.func
   },
 
   getDefaultProps: function () {
     return {
       app: null,
+      editMode: false,
       onDestroy: Util.noop
     };
   },
@@ -129,20 +131,19 @@ var AppModalComponent = React.createClass({
   },
 
   getSubmitButton: function () {
-    var submitButtonTitle = "+ Create";
-    if (this.props.app != null && this.props.app.version != null) {
-      submitButtonTitle = "Change and deploy configuration";
-    }
+    var submitButtonText = this.props.editMode
+      ? "Change and deploy configuration"
+      : "+ Create";
 
     var classSet = classNames({
       "btn btn-success": true,
       "disabled": !this.state.appIsValid
     });
 
     return (
-      <input type="submit"
-        className={classSet}
-        value={submitButtonTitle} />
+      <button type="submit" className={classSet}>
+        {submitButtonText}
+      </button>
     );
   },
 
@@ -171,11 +172,9 @@ var AppModalComponent = React.createClass({
     var props = this.props;
     var state = this.state;
 
-    var modalTitle = "New Application";
-
-    if (props.app != null && props.app.version != null) {
-      modalTitle = "Edit Application";
-    }
+    var modalTitle = props.editMode
+      ? "Edit Application"
+      : "New Application";
 
     var appConfigProps = {
       app: state.app,
@@ -198,7 +197,7 @@ var AppModalComponent = React.createClass({
       <ModalComponent dismissOnClickOutside={false}
           ref="modalComponent"
           size="md"
-          onDestroy={this.props.onDestroy}>
+          onDestroy={props.onDestroy}>
         <form method="post" role="form" onSubmit={this.handleSubmit}>
           <button onClick={event => event.preventDefault()}
             style={{display: "none"}} />

src/js/components/modals/EditAppModalComponent.jsx

@@ -90,7 +90,9 @@ var EditAppModalComponent = React.createClass({
     }
 
     return (
-      <AppModalComponent app={state.app}
+      <AppModalComponent
+        app={state.app}
+        editMode={true}
         onDestroy={this.props.onDestroy} />
     );
   }

src/test/units/AppModalComponent.test.js

@@ -0,0 +1,62 @@
+import {expect} from "chai";
+import {shallow} from "enzyme";
+
+import React from "react/addons";
+import AppModalComponent from "../../js/components/modals/AppModalComponent";
+
+describe("App Modal", function () {
+
+  describe("default mode", function () {
+
+    before(function () {
+      this.component = shallow(<AppModalComponent />);
+      this.nodes = {
+        title: this.component.find(".modal-title"),
+        submitBtn: this.component.find(".btn-success")
+      };
+    });
+
+    after(function () {
+      this.component.instance().componentWillUnmount();
+    });
+
+    it("shows the creation title", function () {
+      expect(this.nodes.title.text()).to.equal("New Application");
+    });
+
+    it("shows the creation button text", function () {
+      expect(this.nodes.submitBtn.text()).to.equal("+ Create");
+    });
+
+  });
+
+  describe("edit mode", function () {
+
+    before(function () {
+      this.component = shallow(
+        <AppModalComponent
+          app={{id: "/some-app", cmd: "sleep 100"}}
+          editMode={true} />
+      );
+      this.nodes = {
+        title: this.component.find(".modal-title"),
+        submitBtn: this.component.find(".btn-success")
+      };
+    });
+
+    after(function () {
+      this.component.instance().componentWillUnmount();
+    });
+
+    it("shows the creation title", function () {
+      expect(this.nodes.title.text()).to.equal("Edit Application");
+    });
+
+    it("shows the creation button text", function () {
+      expect(this.nodes.submitBtn.text())
+        .to.equal("Change and deploy configuration");
+    });
+
+  });
+
+});