Fix schedules UI not updating in Wizard

The React `render` method didn't get called because the schedules array
didn't get registered as an observable array in the `mobx` library.

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -99,6 +99,7 @@ type Props = {
   networkStore: typeof networkStore,
   wizardData: WizardData,
   endpoints: Endpoint[],
+  schedules: ScheduleType[],
   onTypeChange: (isReplicaChecked: ?boolean) => void,
   onBackClick: () => void,
   onNextClick: () => void,
@@ -355,7 +356,7 @@ class WizardPageContent extends React.Component<Props, State> {
       case 'schedule':
         body = (
           <Schedule
-            schedules={this.props.wizardData.schedules}
+            schedules={this.props.schedules}
             onAddScheduleClick={this.props.onAddScheduleClick}
             onChange={this.props.onScheduleChange}
             onRemove={this.props.onScheduleRemove}
@@ -369,6 +370,7 @@ class WizardPageContent extends React.Component<Props, State> {
         body = (
           <WizardSummary
             data={this.props.wizardData}
+            schedules={this.props.schedules}
             wizardType={this.props.type}
           />
         )

src/components/organisms/WizardSummary/WizardSummary.jsx

@@ -40,6 +40,9 @@ const Column = styled.div`
   &:first-child {
     margin-right: 160px;
   }
+  &:last-child {
+    max-width: calc(50% - 160px);
+  }
 `
 const Section = styled.div`
   margin-bottom: 42px;
@@ -109,6 +112,8 @@ const TargetNetwork = styled.div`
   width: 50%;
   text-align: right;
   margin-left: 20px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `
 const OptionsList = styled.div``
 const Option = styled.div`
@@ -132,6 +137,7 @@ const OptionValue = styled.div`
 type Props = {
   data: WizardData,
   wizardType: 'replica' | 'migration',
+  schedules: Schedule[],
 }
 @observer
 class WizardSummary extends React.Component<Props> {
@@ -190,7 +196,7 @@ class WizardSummary extends React.Component<Props> {
   }
 
   renderScheduleSection() {
-    let schedules = this.props.data.schedules
+    let schedules = this.props.schedules
     if (this.props.wizardType !== 'replica' || !schedules || schedules.length === 0) {
       return null
     }

src/components/pages/WizardPage/WizardPage.jsx

@@ -425,13 +425,11 @@ class WizardPage extends React.Component<Props, State> {
   }
 
   scheduleReplica(replica: MainItem): Promise<void> {
-    let data = wizardStore.data
-
-    if (!data.schedules || data.schedules.length === 0) {
+    if (wizardStore.schedules.length === 0) {
       return Promise.resolve()
     }
 
-    return scheduleStore.scheduleMultiple(replica.id, data.schedules)
+    return scheduleStore.scheduleMultiple(replica.id, wizardStore.schedules)
   }
 
   executeCreatedReplica(replica: MainItem) {
@@ -469,6 +467,7 @@ class WizardPage extends React.Component<Props, State> {
             networkStore={networkStore}
             endpoints={endpointStore.endpoints}
             wizardData={wizardStore.data}
+            schedules={wizardStore.schedules}
             nextButtonDisabled={this.state.nextButtonDisabled}
             type={this.state.type}
             onTypeChange={isReplica => { this.handleTypeChange(isReplica) }}

src/stores/WizardStore.js

@@ -26,7 +26,8 @@ import { wizardConfig } from '../config'
 import Source from '../sources/WizardSource'
 
 class WizardStore {
-  @observable data: WizardData = { schedules: [] }
+  @observable data: WizardData = {}
+  @observable schedules: Schedule[] = []
   @observable currentPage: WizardPage = wizardConfig.pages[0]
   @observable createdItem: ?MainItem = null
   @observable creatingItem: boolean = false
@@ -89,17 +90,11 @@ class WizardStore {
   }
 
   @action addSchedule(schedule: Schedule) {
-    if (!this.data.schedules) {
-      this.data.schedules = []
-    }
-    this.data.schedules.push({ id: new Date().getTime().toString(), schedule: schedule.schedule })
+    this.schedules.push({ id: new Date().getTime().toString(), schedule: schedule.schedule })
   }
 
   @action updateSchedule(scheduleId: string, data: Schedule) {
-    if (!this.data.schedules) {
-      return
-    }
-    this.data.schedules = this.data.schedules.map(schedule => {
+    this.schedules = this.schedules.map(schedule => {
       if (schedule.id !== scheduleId) {
         return schedule
       }
@@ -119,10 +114,7 @@ class WizardStore {
   }
 
   @action removeSchedule(scheduleId: string) {
-    if (!this.data.schedules) {
-      return
-    }
-    this.data.schedules = this.data.schedules.filter(s => s.id !== scheduleId)
+    this.schedules = this.schedules.filter(s => s.id !== scheduleId)
   }
 
   @action create(type: string, data: WizardData): Promise<void> {

src/types/WizardData.js

@@ -14,14 +14,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 // @flow
 
-import type { Schedule } from './Schedule'
 import type { Instance } from './Instance'
 import type { NetworkMap } from './Network'
 import type { Endpoint } from './Endpoint'
 
 export type WizardData = {
   options?: ?{ [string]: mixed },
-  schedules?: Schedule[],
   selectedInstances?: ?Instance[],
   networks?: ?NetworkMap[],
   source?: ?Endpoint,