- Fixes issues in wizard flow

- Adds validation for options

src/components/WizardNetworks/WizardNetworks.js

@@ -19,9 +19,9 @@ import React, { Component, PropTypes } from 'react';
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './WizardNetworks.scss';
 import Dropdown from '../NewDropdown';
+import WizardActions from '../../actions/WizardActions';
 import LoadingIcon from '../LoadingIcon';
 import ConnectionsActions from '../../actions/ConnectionsActions';
-import { targetNetworkMock } from '../../config';
 
 
 const title = 'Network mapping';
@@ -48,28 +48,33 @@ class WizardNetworks extends Component {
           value: network.name
         })
       }, this)
-    } else {
-      targetNetworkMock.forEach(network => {
-        this.networkOptions.push({
-          label: network,
-          value: network
-        })
+    }
+
+    props.data.selectedInstances.forEach((vm) => {
+      ConnectionsActions.loadInstanceDetail({ id: this.props.data.sourceCloud.credential.id }, vm)
+    })
+
+    let valid = true
+    if (props.data.networks) {
+      props.data.networks.forEach(item => {
+        if (item.migrateNetwork === null) {
+          valid = false
+        }
       })
+    } else {
+      valid = false
     }
 
     this.state = {
-      networks: null,
+      networks: props.data.networks || null,
       nextStep: "WizardOptions",
-      valid: false
+      valid: valid
     }
   }
 
   componentWillMount() {
-    this.props.setWizardState(this.state)
+    WizardActions.updateWizardState(this.state)
     this.context.onSetTitle(title);
-    this.props.data.selectedInstances.forEach((vm) => {
-      ConnectionsActions.loadInstanceDetail({ id: this.props.data.sourceCloud.credential.id }, vm)
-    })
   }
 
   componentWillReceiveProps(props) {
@@ -114,12 +119,12 @@ class WizardNetworks extends Component {
         valid = false
       }
     })
-    
+
     this.setState({
       networks: networks,
       valid: valid
     }, () => {
-      this.props.setWizardState(this.state)
+      WizardActions.updateWizardState(this.state)
     })
   }
 

src/components/WizardOptions/WizardOptions.js

@@ -22,7 +22,7 @@ import s from './WizardOptions.scss';
 import Dropdown from '../NewDropdown';
 import WizardActions from '../../actions/WizardActions';
 import WizardStore from '../../stores/WizardStore';
-import InfoIcon from '../InfoIcon';
+import NotificationActions from '../../actions/NotificationActions';
 
 
 const title = 'Migration Options';
@@ -40,10 +40,6 @@ class WizardOptions extends Reflux.Component {
     super(props)
     this.store = WizardStore
 
-    this.diskFormats = ["VHD", "VHD2"]
-    this.fipPools = ["public", "private_01", "private_02"]
-
-
     this.state = {
       autoFlavors: true,
       diskFormat: "VHD",
@@ -51,13 +47,14 @@ class WizardOptions extends Reflux.Component {
       valid: true,
       nextStep: "WizardSchedule",
       formSubmitted: false,
-      showAdvancedOptions: false
+      nextCallback: (e) => this.nextCallback(e),
+      showAdvancedOptions: props.data.showAdvancedOptions
     }
   }
 
   componentWillMount() {
     super.componentWillMount.call(this)
-    this.props.setWizardState(this.state)
+    WizardActions.updateWizardState(this.state)
     this.context.onSetTitle(title)
   }
 
@@ -85,23 +82,46 @@ class WizardOptions extends Reflux.Component {
   }
 
   updateWizard() {
-    this.props.setWizardState(this.state)
+    WizardActions.updateWizardState(this.state)
   }
 
   isValid(field) {
-    if (field.required && this.state.formSubmitted) {
-      if (this.state.currentCloudData[field.name].length == 0) {
+    if (field.required && this.state.formSubmitted && field.name != "network_map") {
+      if (!this.state.destination_environment[field.name]) {
         return false
       } else {
-        return true
+        if (this.state.destination_environment[field.name].trim().length == 0) {
+          return false
+        } else {
+          return true
+        }
       }
     } else {
       return true
     }
   }
 
+  nextCallback(callback) {
+    let valid = true
+    this.setState({ formSubmitted: true }, () => {
+      this.state.targetCloud.cloudRef["import_" + this.state.migrationType].fields.forEach(field => {
+        if (!this.isValid(field)) {
+          valid = false
+        }
+      })
+      if (callback && valid) {
+        callback()
+      }
+      if (!valid) {
+        NotificationActions.notify("Please fill all required fields", "error")
+      }
+    })
+  }
+
   toggleAdvancedOptions() {
-    this.setState({ showAdvancedOptions: !this.state.showAdvancedOptions })
+    let showAdvancedOptions = !this.state.showAdvancedOptions
+    this.setState({ showAdvancedOptions: showAdvancedOptions })
+    WizardActions.updateWizardState({ showAdvancedOptions: showAdvancedOptions })
   }
 
   handleOptionsFieldChange(e, field) {

src/components/WizardOptions/WizardOptions.scss

@@ -93,6 +93,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       &.required, &.showAdvanced {
         display: block;
       }
+      &.error {
+        input {
+          border-color: $red;
+        }
+        :global(.Dropdown-control) {
+          border-color: $red;
+        }
+      }
     }
   }
   &:after {

src/components/WizardTarget/WizardTarget.js

@@ -20,7 +20,7 @@ import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import s from './WizardTarget.scss';
 import CloudItem from '../CloudItem';
 import ConnectionsActions from '../../actions/ConnectionsActions';
-import ConnectionStore from '../../stores/ConnectionsStore';
+import WizardActions from '../../actions/WizardActions';
 import {networkMock} from '../../config';
 
 const title = 'Select your target cloud';
@@ -41,8 +41,6 @@ class WizardTarget extends Component {
   constructor(props) {
     super(props)
 
-    this.store = ConnectionStore
-
     this.state = {
       valid: false,
       clouds: this.props.clouds,
@@ -59,7 +57,7 @@ class WizardTarget extends Component {
         if (item.name == this.props.cloud.name) {
           item.selected = true
           item.credentialSelected = this.props.cloud.credentials
-          this.props.setWizardState({ valid: true, nextStep: "WizardVms" })
+          WizardActions.updateWizardState({ valid: true, nextStep: "WizardVms" })
         }
       }, this)
     }
@@ -92,13 +90,13 @@ class WizardTarget extends Component {
 
       this.setState({ clouds: newCloudsState }, () => {
         // we're all good, next step
-        this.props.setWizardState({
+        WizardActions.updateWizardState({
           targetCloud: Object.assign({}, cloudData),
           selected: selected,
           valid: true,
           nextCallback: (e) => this.nextCallback(e),
           nextStep: "WizardVms",
-          networks: networkMock // TODO: Change mock here
+          networks: null
         })
       })
     }

src/stores/WizardStore/WizardStore.js

@@ -42,9 +42,10 @@ class UsersStore extends Reflux.Store
     instances: null,
     selectedInstances: [],
     vms: null,
+    showAdvancedOptions: false,
     destination_environment: {},
-    networks: networkMock, // TODO: Change mock here
-    targetNetworks: null, // TODO: Change mock here
+    networks: null,
+    targetNetworks: null,
     selected: false,
     wizardStarted: false
   }