Don't persist errors in different service creation forms

static_src/actions/service_actions.js

@@ -113,13 +113,13 @@ const serviceActions = {
   },
 
   createInstanceForm(serviceGuid, planGuid) {
-    AppDispatcher.handleViewAction({
-      type: serviceActionTypes.SERVICE_INSTANCE_CREATE_FORM,
-      serviceGuid,
-      servicePlanGuid: planGuid
+    return serviceActions.createInstanceFormCancel().then(() => {
+      AppDispatcher.handleViewAction({
+        type: serviceActionTypes.SERVICE_INSTANCE_CREATE_FORM,
+        serviceGuid,
+        servicePlanGuid: planGuid
+      });
     });
-
-    return Promise.resolve();
   },
 
   createInstanceFormCancel() {

static_src/components/create_service_instance.jsx

@@ -12,11 +12,13 @@ import OrgStore from '../stores/org_store.js';
 import SpaceStore from '../stores/space_store.js';
 import ServiceInstanceStore from '../stores/service_instance_store.js';
 import serviceActions from '../actions/service_actions.js';
+import formActions from '../actions/form_actions';
 import { validateString } from '../util/validators';
 
 const CREATE_SERVICE_INSTANCE_FORM_GUID = 'create-service-form';
 
 const propTypes = {
+  error: PropTypes.object,
   service: PropTypes.object,
   servicePlan: PropTypes.object.isRequired
 };
@@ -27,7 +29,6 @@ const defaultProps = {
 
 function stateSetter() {
   return {
-    createError: ServiceInstanceStore.createError,
     createLoading: ServiceInstanceStore.createLoading,
     createdTempNotification: ServiceInstanceStore.createdTempNotification,
     spaces: SpaceStore.getAll()
@@ -40,8 +41,7 @@ export default class CreateServiceInstance extends React.Component {
 
     this.state = {
       errs: [],
-      spaces: SpaceStore.getAll(),
-      createError: ServiceInstanceStore.createError
+      spaces: SpaceStore.getAll()
     };
 
     this.validateString = validateString().bind(this);
@@ -109,26 +109,33 @@ export default class CreateServiceInstance extends React.Component {
     });
   }
 
-  render() {
-    let createError;
+  get contextualAction() {
+    const { createLoading, createdTempNotification } = this.state;
+
     let createAction = (
       <Action label="submit" type="submit">Create service instance</Action>
     );
 
-    if (this.state.createError) {
-      createError = <FormError message={ this.state.createError.description } />
-    }
-
-    if (this.state.createLoading) {
+    if (createLoading) {
       createAction = <Loading style="inline" />;
-    } else if (this.state.createdTempNotification) {
+    } else if (createdTempNotification) {
       createAction = (
         <span className="status status-ok">
           Created! To bind the service instance to an app, go to an application page and use the services panel.
         </span>
       );
     }
 
+    return createAction;
+  }
+
+  render() {
+    let createError;
+
+    if (this.props.error) {
+      createError = <FormError message={ this.props.error.description } />
+    }
+
     return (
       <div className="actions-large">
         { createError }
@@ -162,7 +169,7 @@ export default class CreateServiceInstance extends React.Component {
             options={ this.validSpaceTargets }
             validator={ this.validateString }
           />
-          { createAction }
+          { this.contextualAction }
           <Action
             label="cancel"
             style="base"

static_src/components/form/form.jsx

@@ -33,6 +33,7 @@ const defaultProps = {
 
 function stateSetter(props) {
   const model = FormStore.get(props.guid);
+
   return {
     errors: [],
     model

static_src/components/marketplace.jsx

@@ -78,20 +78,24 @@ export default class Marketplace extends React.Component {
     if (state.createInstanceForm) {
       form = (
         <CreateServiceInstance
+          error={ state.createInstanceForm.error }
           service={ state.createInstanceForm.service }
           servicePlan={ state.createInstanceForm.servicePlan }
         />
       );
     }
 
-    let loading = <Loading text="Loading marketplace services" />;
-    let content = <div>{ loading }</div>;
+    let content = (
+      <div>
+        <Loading text="Loading marketplace services" />;
+      </div>
+    );
+
     if (!this.state.loading) {
-      let list = <ServiceList />;
       content = (
         <div>
           { this.documentation }
-          { list }
+          <ServiceList />
           { form }
         </div>
       );

static_src/components/service_list.jsx

@@ -2,19 +2,15 @@
 /**
  * Renders a list of services
  */
-
-import style from 'cloudgov-style/css/cloudgov-style.css';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import ComplexList from './complex_list.jsx';
 import ElasticLine from './elastic_line.jsx';
 import ElasticLineItem from './elastic_line_item.jsx';
 import PanelGroup from './panel_group.jsx';
 import ServiceStore from '../stores/service_store.js';
 import ServicePlanStore from '../stores/service_plan_store.js';
 import ServicePlanList from './service_plan_list.jsx';
-import createStyler from '../util/create_styler';
 import formatDateTime from '../util/format_date.js';
 
 function stateSetter() {
@@ -34,7 +30,6 @@ export default class ServiceList extends React.Component {
   constructor(props) {
     super(props);
     this.state = stateSetter();
-    this.styler = createStyler(style);
   }
 
   componentDidMount() {
@@ -53,7 +48,7 @@ export default class ServiceList extends React.Component {
     let content = <div></div>;
 
     if (this.state.empty) {
-      let content = <h4 className="test-none_message">No services</h4>;
+      content = <h4 className="test-none_message">No services</h4>;
     } else if (this.state.services.length) {
       const state = this.state;
       content = (
@@ -69,10 +64,10 @@ export default class ServiceList extends React.Component {
 
             // TODO use new panel section component
             return (
-              <div className={ this.styler('panel-section') } key={ service.guid }>
+              <div className="panel-section" key={ service.guid }>
                 <ElasticLine>
                   <ElasticLineItem>
-                    <h3 className={ this.styler('sans-s6') }>
+                    <h3 className="sans-s6">
                       <strong>{ service.label }</strong>
                     </h3>
                     <span>{ service.description }</span>

static_src/components/service_plan.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Action from './action.jsx';
+
+const propTypes = {
+  cost: PropTypes.string,
+  onAddInstance: PropTypes.func,
+  plan: PropTypes.shape({
+    guid: PropTypes.string,
+    name: PropTypes.string,
+    description: PropTypes.string
+  })
+};
+
+class ServicePlan extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    const { plan, onAddInstance } = this.props;
+
+    onAddInstance(plan.guid);
+  }
+
+  render() {
+    const { cost, plan } = this.props;
+
+    return (
+      <tr>
+        <td label="Name">{ plan.name }</td>
+        <td label="Description">{ plan.description }</td>
+        <td label="Cost">{ cost }</td>
+        <td label="Actions">
+          <Action
+            classes={ ['test-create_service_instance'] }
+            clickHandler={ this.handleClick }
+            label="create"
+          >
+            Create service instance
+          </Action>
+        </td>
+      </tr>
+    );
+  }
+}
+
+ServicePlan.propTypes = propTypes;
+
+export default ServicePlan;

static_src/components/service_plan_list.jsx

@@ -2,15 +2,11 @@
 /**
  * Renders a list of service plans
  */
-
-import style from 'cloudgov-style/css/cloudgov-style.css';
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import Action from './action.jsx';
+import ServicePlan from './service_plan.jsx';
 import serviceActions from '../actions/service_actions.js';
 import ServicePlanStore from '../stores/service_plan_store.js';
-import createStyler from '../util/create_styler';
 
 const propTypes = {
   serviceGuid: PropTypes.string
@@ -42,7 +38,6 @@ export default class ServicePlanList extends React.Component {
 
     this._onChange = this._onChange.bind(this);
     this._handleAdd = this._handleAdd.bind(this);
-    this.styler = createStyler(style);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -54,8 +49,7 @@ export default class ServicePlanList extends React.Component {
   }
 
   _handleAdd(planGuid) {
-    serviceActions.createInstanceForm(this.state.serviceGuid,
-      planGuid);
+    serviceActions.createInstanceForm(this.state.serviceGuid, planGuid);
   }
 
   get columns() {
@@ -91,45 +85,33 @@ export default class ServicePlanList extends React.Component {
           <tr>
             { this.columns.map((column) => {
               return (
-                <th className={ column.key }
-                  key={ column.key }
-                >
-                  { column.label }</th>
+                <th className={ column.key } key={ column.key }>
+                  { column.label }
+                </th>
               );
             })}
           </tr>
         </thead>
         <tbody>
-          { this.rows.map((plan) => {
-            return (
-              <tr key={ plan.guid }>
-                <td label="Name">
-                  <span>{ plan.name }</span>
-                </td>
-                <td label="Description">{ plan.description }</td>
-                <td label="Cost">
-                  <span>
-                    { this.cost(plan) }
-                  </span>
-                </td>
-                <td label="Actions">
-                  <Action
-                    classes={ ["test-create_service_instance"] }
-                    clickHandler={ this._handleAdd.bind(this, plan.guid) }
-                    label="create">
-                      <span>Create service instance</span>
-                  </Action>
-                </td>
-              </tr>
-            )
-          })}
+          {
+            this.rows.map((plan, index) => {
+              return (
+                <ServicePlan
+                  cost={ this.cost(plan) }
+                  key={ index }
+                  onAddInstance={ this._handleAdd }
+                  plan={ plan }
+                />
+              );
+            })
+          }
         </tbody>
       </table>
       );
     }
 
     return (
-    <div className={ this.styler('tableWrapper') }>
+    <div className='tableWrapper'>
       { content }
     </div>
     );

static_src/stores/service_instance_store.js

@@ -47,8 +47,6 @@ const BINDING_ERROR_MAP = {
 const getFriendlyError = (error, errorMap) => {
   const { code, error_code: errorCode } = error;
 
-  debugger;
-
   if (errorCode in errorMap) {
     return errorMap[errorCode];
   }
@@ -187,16 +185,20 @@ export class ServiceInstanceStore extends BaseStore {
 
       case serviceActionTypes.SERVICE_INSTANCE_CREATE_FORM: {
         AppDispatcher.waitFor([ServiceStore.dispatchToken]);
+
         this._createInstanceForm = {
+          error: null,
           service: ServiceStore.get(action.serviceGuid),
           servicePlan: ServicePlanStore.get(action.servicePlanGuid)
         };
+
         this.emitChange();
         break;
       }
 
       case serviceActionTypes.SERVICE_INSTANCE_CREATE_FORM_CANCEL:
         this._createInstanceForm = null;
+
         this.emitChange();
         break;
 
@@ -221,11 +223,15 @@ export class ServiceInstanceStore extends BaseStore {
       }
 
       case serviceActionTypes.SERVICE_INSTANCE_CREATE_ERROR: {
-        this._createError = {
-          description: getFriendlyError(action.error, SERVICE_INSTANCE_CREATE_ERROR_MAP)
-        };
+        this._createInstanceForm = Object.assign({}, this._createInstanceForm || {}, {
+          error: {
+            description: getFriendlyError(action.error, SERVICE_INSTANCE_CREATE_ERROR_MAP)
+          }
+        });
         this._createLoading = false;
+
         this.emitChange();
+
         break;
       }