Merge pull request #227 from smiclea/fix-openstack-fields

Fix issues with editing Openstack V3 endpoint

src/components/molecules/DropdownLink/index.jsx

@@ -251,7 +251,14 @@ class DropdownLink extends React.Component<Props, State> {
     let tipHeight = this.tipRef.offsetHeight
     const tipOffset = 7
     let arrowOffset = this.arrowRef.getBoundingClientRect()
-    this.listRef.style.top = `${arrowOffset.top + window.pageYOffset + arrowHeight + tipHeight}px`
+
+    // If a modal is opened, body scroll is removed and body top is set to replicate scroll position
+    let scrollOffset = 0
+    if (document.body && parseInt(document.body.style.top, 10) < 0) {
+      scrollOffset = -parseInt(document.body && document.body.style.top, 10)
+    }
+
+    this.listRef.style.top = `${arrowOffset.top + (window.pageYOffset || scrollOffset) + arrowHeight + tipHeight}px`
     this.listRef.style.left = `${arrowOffset.left + tipOffset + (arrowWidth - listWidth)}px`
   }
 

src/components/molecules/EndpointField/index.jsx

@@ -159,15 +159,16 @@ class Field extends React.Component<Props> {
         label: field.label || LabelDictionary.get(field.name),
       }
     })
+    let fieldName = this.props.value || items[0].value
 
     return (
       <DropdownInput
         items={items}
-        selectedItem={this.props.value}
+        selectedItem={fieldName}
         onItemChange={item => { if (this.props.onChange) this.props.onChange(item.value) }}
-        inputValue={this.props.getFieldValue ? this.props.getFieldValue(this.props.value) : ''}
-        onInputChange={value => { if (this.props.onFieldChange) this.props.onFieldChange(this.props.value, value) }}
-        placeholder={LabelDictionary.get(this.props.value)}
+        inputValue={this.props.getFieldValue ? this.props.getFieldValue(fieldName) : ''}
+        onInputChange={value => { if (this.props.onFieldChange) this.props.onFieldChange(fieldName, value) }}
+        placeholder={LabelDictionary.get(fieldName)}
         required={this.props.required}
         highlight={this.props.highlight}
         disabled={this.props.disabled}

src/plugins/endpoint/openstack/ContentPlugin.jsx

@@ -67,22 +67,49 @@ class ContentPlugin extends React.Component<Props, State> {
     return this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === 'identity_api_version'))
   }
 
+  getFieldValue(field: ?Field) {
+    let fieldValue = this.props.getFieldValue(field)
+    if (fieldValue) {
+      return fieldValue
+    }
+
+    let getInputChoiceValue = (fieldBaseName: string): string => {
+      let id = this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === `${fieldBaseName}_id`))
+      let previouslySelected = this.previouslySelectedChoices.find(f => f === `${fieldBaseName}_id`)
+      if (id || previouslySelected) {
+        if (!previouslySelected) this.previouslySelectedChoices.push(`${fieldBaseName}_id`)
+        return `${fieldBaseName}_id`
+      }
+      return `${fieldBaseName}_name`
+    }
+    if (field && field.name === 'user_domain') {
+      return getInputChoiceValue('user_domain')
+    }
+    if (field && field.name === 'project_domain') {
+      return getInputChoiceValue('project_domain')
+    }
+
+    return fieldValue
+  }
+
   handleAdvancedOptionsToggle(useAdvancedOptions: boolean) {
     this.setState({ useAdvancedOptions })
   }
 
+  previouslySelectedChoices: string[] = []
+
   findInvalidFields = () => {
     let inputChoices = ['user_domain', 'project_domain']
 
     const invalidFields = this.props.connectionInfoSchema.filter(field => {
       if (field.required) {
-        let value = this.props.getFieldValue(field)
+        let value = this.getFieldValue(field)
         return !value
       }
       let inputChoice = inputChoices.find(c => c === field.name)
       if (inputChoice && this.getApiVersion() > 2) {
-        let selectionValue = this.props.getFieldValue(this.props.connectionInfoSchema.find(f => f.name === inputChoice))
-        let itemValue = this.props.getFieldValue(this.props.connectionInfoSchema.find(f => f.name === selectionValue))
+        let selectionValue = this.getFieldValue(this.props.connectionInfoSchema.find(f => f.name === inputChoice))
+        let itemValue = this.getFieldValue(this.props.connectionInfoSchema.find(f => f.name === selectionValue))
         return !itemValue
       }
 
@@ -130,9 +157,9 @@ class ContentPlugin extends React.Component<Props, State> {
           disabled={this.props.disabled}
           password={field.name === 'password'}
           highlight={this.props.invalidFields.findIndex(fn => fn === field.name) > -1}
-          value={this.props.getFieldValue(field)}
+          value={this.getFieldValue(field)}
           onChange={value => { this.props.handleFieldChange(field, value) }}
-          getFieldValue={fieldName => this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === fieldName))}
+          getFieldValue={fieldName => this.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === fieldName))}
           onFieldChange={(fieldName, fieldValue) => { this.props.handleFieldChange(this.props.connectionInfoSchema.find(n => n.name === fieldName), fieldValue) }}
         />
       )

src/plugins/endpoint/openstack/SchemaPlugin.js

@@ -66,7 +66,6 @@ export default class ConnectionSchemaParser {
           name,
           type: 'input-choice',
           items: [field1, field2],
-          default: field1Name,
         }
         fields.push(field)
       }