Created a base for OpenStack Plugin

Currently the base is just the default provider plugin.

src/plugins/endpoint/index.js

@@ -18,6 +18,7 @@ import DefaultSchemaPlugin from './default/SchemaPlugin'
 import AzureSchemaPlugin from './azure/SchemaPlugin'
 import DefaultContentPlugin from './default/ContentPlugin'
 import AzureContentPlugin from './azure/ContentPlugin'
+import OpenstackContentPlugin from './openstack/ContentPlugin'
 
 export const SchemaPlugin = {
   default: DefaultSchemaPlugin,
@@ -27,4 +28,5 @@ export const SchemaPlugin = {
 export const ContentPlugin = {
   default: DefaultContentPlugin,
   azure: AzureContentPlugin,
+  openstack: OpenstackContentPlugin,
 }

src/plugins/endpoint/openstack/ContentPlugin.jsx

@@ -0,0 +1,126 @@
+/*
+Copyright (C) 2017  Cloudbase Solutions SRL
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+import { EndpointField } from '../../../components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`
+export const Fields = styled.div`
+  display: flex;
+  margin-top: 32px;
+  flex-direction: column;
+  overflow: auto;
+`
+export const FieldStyled = styled(EndpointField) `
+  min-width: 224px;
+  max-width: 224px;
+  margin-bottom: 16px;
+`
+export const Row = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+`
+
+class ContentPlugin extends React.Component {
+  static propTypes = {
+    connectionInfoSchema: PropTypes.array,
+    validation: PropTypes.object,
+    invalidFields: PropTypes.array,
+    getFieldValue: PropTypes.func,
+    handleFieldChange: PropTypes.func,
+    disabled: PropTypes.bool,
+    cancelButtonText: PropTypes.string,
+    validating: PropTypes.bool,
+    handleValidateClick: PropTypes.func,
+    handleCancelClick: PropTypes.func,
+    onRef: PropTypes.func,
+  }
+
+  componentDidMount() {
+    this.props.onRef(this)
+  }
+
+  componentWillUnmount() {
+    this.props.onRef(undefined)
+  }
+
+  findInvalidFields = () => {
+    const invalidFields = this.props.connectionInfoSchema.filter(field => {
+      if (field.required) {
+        let value = this.props.getFieldValue(field)
+        return !value
+      }
+      return false
+    }).map(f => f.name)
+
+    return invalidFields
+  }
+
+  renderFields() {
+    const rows = []
+    let lastField
+    this.props.connectionInfoSchema.forEach((field, i) => {
+      const currentField = (
+        <FieldStyled
+          {...field}
+          large
+          disabled={this.props.disabled}
+          password={field.name === 'password'}
+          highlight={this.props.invalidFields.findIndex(fn => fn === field.name) > -1}
+          value={this.props.getFieldValue(field)}
+          onChange={value => { this.props.handleFieldChange(field, value) }}
+        />
+      )
+      if (i % 2 !== 0) {
+        rows.push((
+          <Row key={field.name}>
+            {lastField}
+            {currentField}
+          </Row>
+        ))
+      } else if (i === this.props.connectionInfoSchema.length - 1) {
+        rows.push((
+          <Row key={field.name}>
+            {currentField}
+          </Row>
+        ))
+      }
+      lastField = currentField
+    })
+
+    return (
+      <Fields>
+        {rows}
+      </Fields>
+    )
+  }
+
+  render() {
+    return (
+      <Wrapper>
+        {this.renderFields()}
+      </Wrapper>
+    )
+  }
+}
+
+export default ContentPlugin