Merge pull request #367 from smiclea/autocomplete

Dynamically change the networks to autocomplete CORWEB-207

src/components/organisms/WizardNetworks/WizardNetworks.jsx

@@ -18,6 +18,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
+import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import StatusImage from '../../atoms/StatusImage'
 import Dropdown from '../../molecules/Dropdown'
 
@@ -183,18 +184,30 @@ class WizardNetworks extends React.Component<Props> {
                 <NetworkSubtitle data-test-id={`wNetworks-connectedTo-${nic.id}`}>{`Connected to ${connectedTo.join(', ')}`}</NetworkSubtitle>
               </NetworkTitle>
               <ArrowImage />
-              <Dropdown
-                large
-                centered
-                noSelectionMessage="Select ..."
-                noItemsMessage={this.props.loading ? 'Loading ...' : 'No networks found'}
-                selectedItem={selectedNetwork ? selectedNetwork.targetNetwork : null}
-                items={this.props.networks}
-                labelField="name"
-                valueField="id"
-                onChange={(item: Network) => { this.props.onChange(nic, item) }}
-                data-test-id={`wNetworks-dropdown-${nic.id}`}
-              />
+              {this.props.networks.length > 10 ? (
+                <AutocompleteDropdown
+                  width={StyleProps.inputSizes.large.width}
+                  selectedItem={selectedNetwork ? selectedNetwork.targetNetwork : null}
+                  items={this.props.networks}
+                  onChange={(item: Network) => { this.props.onChange(nic, item) }}
+                  labelField="name"
+                  valueField="id"
+                />
+              ) :
+                (
+                  <Dropdown
+                    large
+                    centered
+                    noSelectionMessage="Select ..."
+                    noItemsMessage={this.props.loading ? 'Loading ...' : 'No networks found'}
+                    selectedItem={selectedNetwork ? selectedNetwork.targetNetwork : null}
+                    items={this.props.networks}
+                    labelField="name"
+                    valueField="id"
+                    onChange={(item: Network) => { this.props.onChange(nic, item) }}
+                    data-test-id={`wNetworks-dropdown-${nic.id}`}
+                  />
+                )}
             </Nic>
           )
         })}

src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -18,6 +18,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
+import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import Dropdown from '../../molecules/Dropdown'
 
 import Palette from '../../styleUtils/Palette'
@@ -195,18 +196,30 @@ class WizardStorage extends React.Component<Props> {
                   >{`Connected to ${connectedTo.join(', ')}`}</StorageSubtitle>
                 </StorageTitle>
                 <ArrowImage />
-                <Dropdown
-                  large
-                  centered
-                  noSelectionMessage="Default"
-                  noItemsMessage="No storage found"
-                  selectedItem={selectedItem}
-                  items={storageItems}
-                  labelField="name"
-                  valueField="id"
-                  onChange={(item: StorageBackend) => { this.props.onChange(disk, item, type) }}
-                  data-test-id={`${TEST_ID}-${type}-destination`}
-                />
+                {storageItems.length > 10 ? (
+                  <AutocompleteDropdown
+                    width={StyleProps.inputSizes.large.width}
+                    selectedItem={selectedItem}
+                    items={storageItems}
+                    onChange={(item: StorageBackend) => { this.props.onChange(disk, item, type) }}
+                    labelField="name"
+                    valueField="id"
+                  />
+                ) :
+                  (
+                    <Dropdown
+                      large
+                      centered
+                      noSelectionMessage="Default"
+                      noItemsMessage="No storage found"
+                      selectedItem={selectedItem}
+                      items={storageItems}
+                      labelField="name"
+                      valueField="id"
+                      onChange={(item: StorageBackend) => { this.props.onChange(disk, item, type) }}
+                      data-test-id={`${TEST_ID}-${type}-destination`}
+                    />
+                  )}
               </StorageItem>
             )
           })}