Add Simple / Advanced toggle to Openstack plugin

This toggle filters non-required fields.

src/components/atoms/ToggleButtonBar/index.jsx

@@ -55,6 +55,7 @@ type Props = {
   items: Array<ItemType>,
   selectedValue: string,
   onChange: (item: ItemType) => void,
+  className?: string,
 }
 class ToggleButtonBar extends React.Component<Props> {
   render() {
@@ -63,7 +64,7 @@ class ToggleButtonBar extends React.Component<Props> {
     }
 
     return (
-      <Wrapper>
+      <Wrapper className={this.props.className}>
         {this.props.items.map(item => {
           return (
             <Item

src/components/organisms/Endpoint/index.jsx

@@ -374,7 +374,7 @@ class Endpoint extends React.Component<Props, State> {
           handleCancelClick: () => { this.handleCancelClick() },
           scrollableRef: ref => { this.scrollableRef = ref },
           onRef: ref => { this.contentPluginRef = ref },
-          onResizeUpdate: (scrollableRef, scrollOffset) => { this.props.onResizeUpdate(this.scrollableRef, scrollOffset) },
+          onResizeUpdate: (scrollOffset: number) => { this.props.onResizeUpdate(this.scrollableRef, scrollOffset) },
         })}
         {this.renderButtons()}
         <Tooltip />

src/plugins/endpoint/azure/ContentPlugin.jsx

@@ -74,7 +74,7 @@ type Props = {
   cancelButtonText: string,
   validating: boolean,
   onRef: (contentPlugin: any) => void,
-  onResizeUpdate: (fieldsRef: HTMLElement, scrollOfset: number) => void,
+  onResizeUpdate: (scrollOfset: number) => void,
   scrollableRef: (ref: HTMLElement) => void,
 }
 type State = {
@@ -83,7 +83,6 @@ type State = {
 }
 class ContentPlugin extends React.Component<Props, State> {
   cloudProfileChanged: boolean
-  fieldsRef: HTMLElement
   lastBlurValue: string
 
   constructor() {
@@ -105,7 +104,7 @@ class ContentPlugin extends React.Component<Props, State> {
       if (prevState.showPasteInput !== this.state.showPasteInput && this.state.showPasteInput) {
         scrollOffset = 100
       }
-      this.props.onResizeUpdate(this.fieldsRef, scrollOffset)
+      this.props.onResizeUpdate(scrollOffset)
       this.cloudProfileChanged = false
     }
   }

src/plugins/endpoint/openstack/ContentPlugin.jsx

@@ -15,11 +15,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // @flow
 
 import React from 'react'
+import styled from 'styled-components'
 
+import ToggleButtonBar from '../../../components/atoms/ToggleButtonBar'
 import type { Field } from '../../../types/Field'
-
 import { Wrapper, Fields, FieldStyled, Row } from '../default/ContentPlugin'
 
+const ToggleButtonBarStyled = styled(ToggleButtonBar)`
+  margin-top: 16px;
+`
+
 type Props = {
   connectionInfoSchema: Field[],
   validation: { valid: boolean, validation: { message: string } },
@@ -30,16 +35,38 @@ type Props = {
   cancelButtonText: string,
   validating: boolean,
   onRef: (contentPlugin: any) => void,
+  onResizeUpdate: (scrollOfset: number) => void,
+  scrollableRef: (ref: HTMLElement) => void,
 }
-class ContentPlugin extends React.Component<Props> {
+type State = {
+  useAdvancedOptions: boolean,
+}
+class ContentPlugin extends React.Component<Props, State> {
+  constructor() {
+    super()
+    this.state = {
+      useAdvancedOptions: false,
+    }
+  }
+
   componentDidMount() {
     this.props.onRef(this)
   }
 
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (prevState.useAdvancedOptions !== this.state.useAdvancedOptions) {
+      this.props.onResizeUpdate(0)
+    }
+  }
+
   componentWillUnmount() {
     this.props.onRef(undefined)
   }
 
+  handleAdvancedOptionsToggle(useAdvancedOptions: boolean) {
+    this.setState({ useAdvancedOptions })
+  }
+
   findInvalidFields = () => {
     const apiVersion = this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === 'identity_api_version'))
     const invalidFields = this.props.connectionInfoSchema.filter(field => {
@@ -59,11 +86,41 @@ class ContentPlugin extends React.Component<Props> {
     return invalidFields
   }
 
+  filterSimpleAdvanced(): Field[] {
+    const apiVersion = this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === 'identity_api_version'))
+    const extraAdvancedFields = ['description', 'glance_api_version', 'identity_api_version']
+    return this.props.connectionInfoSchema.filter(field => {
+      if (this.state.useAdvancedOptions) {
+        return true
+      }
+      let required
+      if (typeof field.required === 'function') {
+        required = field.required(apiVersion)
+      } else {
+        required = field.required
+      }
+      return required || extraAdvancedFields.find(fieldName => field.name === fieldName)
+    })
+  }
+
+  renderSimpleAdvancedToggle() {
+    return (
+      <ToggleButtonBarStyled
+        items={[{ label: 'Simple', value: 'simple' }, { label: 'Advanced', value: 'advanced' }]}
+        selectedValue={this.state.useAdvancedOptions ? 'advanced' : 'simple'}
+        onChange={item => { this.handleAdvancedOptionsToggle(item.value === 'advanced') }}
+      />
+    )
+  }
+
   renderFields() {
     const rows = []
     let lastField
     let apiVersion = this.props.getFieldValue(this.props.connectionInfoSchema.find(n => n.name === 'identity_api_version'))
-    this.props.connectionInfoSchema.forEach((field, i) => {
+
+    let fields = this.filterSimpleAdvanced()
+
+    fields.forEach((field, i) => {
       const currentField = (
         <FieldStyled
           {...field}
@@ -94,7 +151,7 @@ class ContentPlugin extends React.Component<Props> {
     })
 
     return (
-      <Fields>
+      <Fields innerRef={ref => { this.props.scrollableRef(ref) }}>
         {rows}
       </Fields>
     )
@@ -103,6 +160,7 @@ class ContentPlugin extends React.Component<Props> {
   render() {
     return (
       <Wrapper>
+        {this.renderSimpleAdvancedToggle()}
         {this.renderFields()}
       </Wrapper>
     )