Change the layout of the 'Default Storage' option

This should make the 'Default Storage' option fit better with the rest
of the elements in the Wizard Storage screen.

src/components/organisms/EditReplica/EditReplica.jsx

@@ -530,6 +530,7 @@ class EditReplica extends React.Component<Props, State> {
         onChange={(s, t, type) => { this.handleStorageChange(s, t, type) }}
         style={{ padding: '32px 32px 0 32px', width: 'calc(100% - 64px)' }}
         titleWidth={160}
+        onScrollableRef={ref => { this.scrollableRef = ref }}
       />
     )
   }

src/components/organisms/WizardStorage/WizardStorage.jsx

@@ -20,7 +20,6 @@ import styled from 'styled-components'
 
 import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import Dropdown from '../../molecules/Dropdown'
-import FieldInput from '../../molecules/FieldInput'
 import InfoIcon from '../../atoms/InfoIcon'
 
 import Palette from '../../styleUtils/Palette'
@@ -39,9 +38,6 @@ const Wrapper = styled.div`
   flex-direction: column;
   overflow: auto;
 `
-const DefaultStorageWrapper = styled.div`
-  margin-bottom: 32px;
-`
 const Mapping = styled.div`
   display: flex;
   flex-direction: column;
@@ -161,6 +157,7 @@ export type Props = {
   storageConfigDefault: ?string,
   onDefaultStorageChange: (value: ?string) => void,
   onChange: (sourceStorage: Disk, targetStorage: StorageBackend, type: 'backend' | 'disk') => void,
+  onScrollableRef?: (ref: HTMLElement) => void,
   style?: any,
   titleWidth?: number,
 }
@@ -315,28 +312,68 @@ class WizardStorage extends React.Component<Props> {
       return null
     }
 
-    return (
-      <DefaultStorageWrapper>
-        <FieldInput
-          layout={this.props.defaultStorageLayout}
-          name="default_storage"
-          type="string"
-          description="Storage type on the destination to default to"
-          enum={this.props.storageBackends.map(s => s.name)}
-          addNullValue
-          width={StyleProps.inputSizes.regular.width}
-          value={this.props.defaultStorage !== undefined ? this.props.defaultStorage : this.props.storageConfigDefault}
-          onChange={value => { this.props.onDefaultStorageChange(value) }}
+    const renderDropdown = () => {
+      let items = this.props.storageBackends.map(s => ({
+        label: s.name,
+        value: s.name,
+      }))
+      items = [
+        { label: 'Choose a value', value: null },
+        ...items,
+      ]
+      let selectedItem = items.find(i => i.value === (
+        this.props.defaultStorage !== undefined ? this.props.defaultStorage : this.props.storageConfigDefault
+      ))
+      let commonProps = {
+        width: StyleProps.inputSizes.regular.width,
+        selectedItem,
+        items,
+        onChange: item => this.props.onDefaultStorageChange(item.value),
+      }
+      return items.length > 10 ? (
+        <AutocompleteDropdown
+          {...commonProps}
+          dimNullValue
         />
-      </DefaultStorageWrapper>
+      ) :
+        (
+          <Dropdown
+            {...commonProps}
+            noSelectionMessage="Choose a value"
+            dimFirstItem
+          />
+        )
+    }
+
+    return (
+      <StorageWrapper>
+        <StorageSection>
+          Default Storage
+          <InfoIcon
+            text="Storage type on the destination to default to"
+            marginLeft={8}
+            marginBottom={0}
+          />
+        </StorageSection>
+        <StorageItems>
+          <StorageItem>
+            <StorageImage backend="backend" />
+            <StorageTitle width={this.props.titleWidth || 320}>
+              <StorageName>
+                {renderDropdown()}
+              </StorageName>
+            </StorageTitle>
+          </StorageItem>
+        </StorageItems>
+      </StorageWrapper>
     )
   }
 
   render() {
     return (
-      <Wrapper style={this.props.style}>
-        {this.renderDefaultStorage()}
+      <Wrapper style={this.props.style} innerRef={this.props.onScrollableRef}>
         <Mapping>
+          {this.renderDefaultStorage()}
           {this.renderBackendMapping()}
           {this.renderDiskMapping()}
         </Mapping>

src/components/organisms/WizardStorage/story.jsx

@@ -0,0 +1,90 @@
+/*
+Copyright (C) 2020  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/>.
+*/
+
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import WizardStorage from '.'
+
+let instancesDetails = [
+  {
+    id: '1',
+    devices: {
+      nics: [],
+      disks: [
+        {
+          id: 'disk-1',
+          name: 'Disk 1',
+          storage_backend_identifier: 'backend-1',
+        },
+      ],
+    },
+    instance_name: 'Instance name 1',
+    flavor_name: 'Instance name 1',
+    name: 'Instance name 1',
+    num_cpu: 2,
+    memory_mb: 1024,
+    os_type: 'windows',
+  },
+  {
+    id: '2',
+    devices: {
+      nics: [],
+      disks: [],
+    },
+    instance_name: 'Instance name 2',
+    flavor_name: 'Instance name 2',
+    name: 'Instance name 2',
+    num_cpu: 4,
+    memory_mb: 2048,
+    os_type: 'linux',
+  },
+]
+let storageBackends = [
+  {
+    id: 'backend-1',
+    name: 'Backend 1',
+  },
+  {
+    id: 'backend-2',
+    name: 'Backend 2',
+  },
+]
+storiesOf('WizardStorage', module)
+  .add('page', () => (
+    <WizardStorage
+      storageBackends={storageBackends}
+      instancesDetails={instancesDetails}
+      storageMap={null}
+      defaultStorageLayout="page"
+      defaultStorage="backend-1"
+      storageConfigDefault={null}
+      onDefaultStorageChange={() => { }}
+      onChange={() => { }}
+    />
+  ))
+  .add('modal', () => (
+    <WizardStorage
+      storageBackends={storageBackends}
+      instancesDetails={instancesDetails}
+      storageMap={null}
+      defaultStorageLayout="modal"
+      defaultStorage="backend-1"
+      storageConfigDefault={null}
+      onDefaultStorageChange={() => { }}
+      onChange={() => { }}
+    />
+  ))