Dynamically change the networks to autocomplete

If there are more than 10 items in the Networks Wizard Page or in the
Storage Wizard Page, change the input from Dropdown to
AutocompleteDropdown.

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>
             )
           })}