Show wizard instances page info tooltip

If a provider has source options, show an info tooltip about the
relation between source options and instances listing.

src/components/atoms/InfoIcon/InfoIcon.jsx

@@ -20,11 +20,12 @@ import styled from 'styled-components'
 
 import questionImage from './images/question.svg'
 import warningImage from './images/warning.svg'
+import questionFilledImage from './images/question-filled.svg'
 
 const Wrapper = styled.div`
   width: 16px;
   height: 16px;
-  background: url('${props => props.warning ? warningImage : questionImage}') center no-repeat;
+  background: url('${props => props.warning ? warningImage : props.filled ? questionFilledImage : questionImage}') center no-repeat;
   display: inline-block;
   margin-left: ${props => props.marginLeft != null ? `${props.marginLeft}px` : '4px'};
   margin-bottom: ${props => props.marginBottom != null ? `${props.marginBottom}px` : '-4px'};
@@ -35,6 +36,7 @@ type Props = {
   marginBottom?: ?number,
   className?: string,
   warning?: boolean,
+  filled?: boolean,
 }
 @observer
 class InfoIcon extends React.Component<Props> {
@@ -46,6 +48,7 @@ class InfoIcon extends React.Component<Props> {
         marginBottom={this.props.marginBottom}
         className={this.props.className}
         warning={this.props.warning}
+        filled={this.props.filled}
       />
     )
   }

src/components/organisms/WizardInstances/WizardInstances.jsx

@@ -25,6 +25,7 @@ import HorizontalLoading from '../../atoms/HorizontalLoading'
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
 import SearchInput from '../../molecules/SearchInput'
+import InfoIcon from '../../atoms/InfoIcon'
 
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
@@ -111,6 +112,10 @@ const FiltersWrapper = styled.div`
   display: flex;
   justify-content: space-between;
 `
+const SearchInputInfo = styled.div`
+  display: flex;
+  align-items: center;
+`
 const FilterInfo = styled.div`
   display: flex;
   color: ${Palette.grayscale[4]};
@@ -196,6 +201,7 @@ type Props = {
   searching: boolean,
   searchNotFound: boolean,
   reloading: boolean,
+  hasSourceOptions: boolean,
   onSearchInputChange: (value: string) => void,
   onReloadClick: () => void,
   onInstanceClick: (instance: InstanceType) => void,
@@ -334,14 +340,24 @@ class WizardInstances extends React.Component<Props, State> {
 
     return (
       <FiltersWrapper>
-        <SearchInput
-          alwaysOpen
-          onChange={searchText => { this.handleSeachInputChange(searchText) }}
-          value={this.state.searchText}
-          loading={this.props.searching}
-          placeholder="Search VMs"
-          data-test-id="wInstances-searchInput"
-        />
+        <SearchInputInfo>
+          <SearchInput
+            alwaysOpen
+            onChange={searchText => { this.handleSeachInputChange(searchText) }}
+            value={this.state.searchText}
+            loading={this.props.searching}
+            placeholder="Search VMs"
+            data-test-id="wInstances-searchInput"
+          />
+          {this.props.hasSourceOptions ? (
+            <InfoIcon
+              text="Some platforms require pre-inputting parameters like location or resource containers for listing instances. Please check that all of the options from the previous screen are correct."
+              marginBottom={0}
+              marginLeft={8}
+              filled
+            />
+          ) : null}
+        </SearchInputInfo>
         <FilterInfo>
           <SelectionInfo data-test-id="wInstances-selInfo">{count} instance{plural} selected</SelectionInfo>
           <FilterSeparator>|</FilterSeparator>

src/components/organisms/WizardPageContent/WizardPageContent.jsx

@@ -141,6 +141,7 @@ type Props = {
   schedules: ScheduleType[],
   storageMap: StorageMap[],
   hasStorageMap: boolean,
+  hasSourceOptions: boolean,
   pages: WizardPage[],
   onTypeChange: (isReplicaChecked: ?boolean) => void,
   onBackClick: () => void,
@@ -330,6 +331,7 @@ class WizardPageContent extends React.Component<Props, State> {
             onInstanceClick={this.props.onInstanceClick}
             onPageClick={this.props.onInstancePageClick}
             selectedInstances={this.props.wizardData.selectedInstances}
+            hasSourceOptions={this.props.hasSourceOptions}
           />
         )
         break

src/components/pages/WizardPage/WizardPage.jsx

@@ -566,6 +566,7 @@ class WizardPage extends React.Component<Props, State> {
             endpointStore={endpointStore}
             wizardData={wizardStore.data}
             hasStorageMap={Boolean(this.pages.find(p => p.id === 'storage'))}
+            hasSourceOptions={Boolean(this.pages.find(p => p.id === 'source-options'))}
             storageMap={wizardStore.storageMap}
             schedules={wizardStore.schedules}
             nextButtonDisabled={this.state.nextButtonDisabled}