Add support for array fields in wizard options

Currently only 'security_groups' field in Openstack is of type 'array'.

src/components/molecules/WizardOptionsField/index.jsx

@@ -161,6 +161,30 @@ class WizardOptionsField extends React.Component<Props> {
     )
   }
 
+  renderArrayDropdown() {
+    let items = this.props.enum.map(e => {
+      if (typeof e !== 'string' && e.separator === true) {
+        return e
+      }
+
+      return {
+        label: typeof e === 'string' ? LabelDictionary.get(e) : e.name,
+        value: typeof e === 'string' ? e : e.id,
+      }
+    })
+    let selectedItems = this.props.value || []
+    return (
+      <Dropdown
+        multipleSelection
+        items={items}
+        selectedItems={selectedItems}
+        width={this.props.width || StyleProps.inputSizes.wizard.width}
+        noSelectionMessage="Choose values"
+        onChange={item => this.props.onChange(item.value)}
+      />
+    )
+  }
+
   renderField() {
     let field = null
     switch (this.props.type) {
@@ -180,6 +204,9 @@ class WizardOptionsField extends React.Component<Props> {
       case 'object':
         field = this.renderObjectTable()
         break
+      case 'array':
+        field = this.renderArrayDropdown()
+        break
       default:
     }
 

src/components/organisms/MainDetails/index.jsx

@@ -79,7 +79,7 @@ const ValueLink = styled.a`
   text-decoration: none;
   cursor: pointer;
 `
-const TableStyled = styled(Table) `
+const TableStyled = styled(Table)`
   margin-top: 89px;
   margin-bottom: 48px;
 `
@@ -252,7 +252,13 @@ class MainDetails extends React.Component<Props> {
       let value = this.props.item ? this.props.item.destination_environment[pn] : ''
       let label = LabelDictionary.get(pn)
 
-      if (value && typeof value === 'object') {
+      if (value && value.join) {
+        // $FlowIgnore
+        value.forEach((v, i) => {
+          let useLabel = i === 0 ? label : ''
+          properties.push({ label: useLabel, value: v })
+        })
+      } else if (value && typeof value === 'object') {
         properties = properties.concat(Object.keys(value).map(p => {
           return {
             label: `${label} - ${LabelDictionary.get(p)}`,

src/components/organisms/WizardOptions/index.jsx

@@ -124,6 +124,12 @@ class WizardOptions extends React.Component<Props> {
     this.setState({})
   }
 
+  shouldRenderField(field: Field) {
+    return (field.type !== 'array' || (field.enum && field.enum.length && field.enum.length > 0)) &&
+      (field.type !== 'integer' || (field.minimum && field.maximum)) &&
+      (field.type !== 'object' || field.properties)
+  }
+
   renderOptionsField(field: Field) {
     let additionalProps
     if (field.type === 'object' && field.properties) {
@@ -161,7 +167,7 @@ class WizardOptions extends React.Component<Props> {
     }
 
     let executeNowColumn
-    let fields = fieldsSchema.filter(f => f.type !== 'array' && f.type !== 'integer' && (f.type !== 'object' || f.properties)).map((field, i) => {
+    let fields = fieldsSchema.filter(f => this.shouldRenderField(f)).map((field, i) => {
       let column = i % 2 === 0 ? 'left' : 'right'
       if (field.name === 'execute_now') {
         executeNowColumn = column

src/components/organisms/WizardSummary/index.jsx

@@ -215,11 +215,12 @@ class WizardSummary extends React.Component<Props> {
     if (value === true) {
       return 'Yes'
     }
-
     if (value === false) {
       return 'No'
     }
-
+    if (value.join) {
+      return value.join(', ')
+    }
     return value
   }
 

src/plugins/endpoint/default/OptionsSchemaPlugin.js

@@ -29,6 +29,9 @@ export const defaultFillFieldValues = (field: Field, option: DestinationOption)
       field.default = typeof option.config_default === 'string' ? option.config_default : option.config_default.id
     }
   }
+  if (field.type === 'array') {
+    field.enum = [...option.values]
+  }
 }
 
 export const defaultFillMigrationImageMapValues = (field: Field, option: DestinationOption): boolean => {
@@ -85,6 +88,7 @@ export const defaultGetDestinationEnv = (data: WizardData): any => {
       }
     })
   }
+  return env
 }
 
 export const defaultGetNetworkMap = (data: WizardData) => {

src/sources/WizardSource.js

@@ -37,7 +37,6 @@ class WizardSource {
         destination_environment: parser.getDestinationEnv(data),
         instances: data.selectedInstances ? data.selectedInstances.map(i => i.instance_name) : 'null',
         notes: '',
-        security_groups: ['testgroup'],
       }
 
       if (data.options && data.options.skip_os_morphing !== null && data.options.skip_os_morphing !== undefined) {

src/stores/WizardStore.js

@@ -65,7 +65,18 @@ class WizardStore {
     this.data.options = {
       ...this.data.options,
     }
-    this.data.options[data.field.name] = data.value
+    if (data.field.type === 'array') {
+      let oldValues: string[] = this.data.options[data.field.name] || []
+      if (oldValues.find(v => v === data.value)) {
+        // $FlowIssue
+        this.data.options[data.field.name] = oldValues.filter(v => v !== data.value)
+      } else {
+        // $FlowIssue
+        this.data.options[data.field.name] = [...oldValues, data.value]
+      }
+    } else {
+      this.data.options[data.field.name] = data.value
+    }
   }
 
   @action updateNetworks(network: NetworkMap) {