Add tooltip to Wizard's options

Available to fields which have a description in LabelDictionary
Currently only 'Separate / VM' field has a description

package.json

@@ -66,11 +66,11 @@
     "history": "^4.7.2",
     "html-webpack-plugin": "^2.30.1",
     "js-cookie": "^2.1.4",
-    "path": "^0.12.7",
-    "raw-loader": "^0.5.1",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
+    "path": "^0.12.7",
     "prop-types": "^15.6.0",
+    "raw-loader": "^0.5.1",
     "react": "^16.0.0",
     "react-collapse": "^4.0.3",
     "react-datetime": "^2.10.3",
@@ -81,6 +81,7 @@
     "react-motion": "^0.5.2",
     "react-notification-system": "^0.2.15",
     "react-router-dom": "^4.2.2",
+    "react-tooltip": "^3.4.0",
     "rimraf": "^2.6.2",
     "styled-components": "2.2.0",
     "styled-tools": "^0.2.2",

src/components/atoms/InfoIcon/InfoIcon.jsx

@@ -0,0 +1,42 @@
+/*
+Copyright (C) 2017  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/>.
+*/
+
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+import questionImage from './images/question.svg'
+
+const Wrapper = styled.div`
+  width: 16px;
+  height: 16px;
+  background: url('${questionImage}') center no-repeat;
+  display: inline-block;
+  margin-bottom: -4px;
+  margin-left: 4px;
+`
+
+class InfoIcon extends React.Component {
+  static propTypes = {
+    text: PropTypes.string,
+  }
+
+  render() {
+    return (
+      <Wrapper data-tip={this.props.text} />
+    )
+  }
+}
+
+export default InfoIcon

src/components/atoms/Tooltip/Tooltip.jsx

@@ -0,0 +1,49 @@
+/*
+Copyright (C) 2017  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/>.
+*/
+
+import React from 'react'
+import { injectGlobal } from 'styled-components'
+import ReactTooltip from 'react-tooltip'
+
+import Palette from '../../styleUtils/Palette'
+
+injectGlobal`
+  .reactTooltip {
+    color: ${Palette.grayscale[4]} !important;
+    background: ${Palette.grayscale[1]} !important;
+    width: 128px;
+    padding: 8px !important;
+    box-shadow: 0 0 9px 1px rgba(32, 34, 52, 0.1);
+    margin-left: 12px !important;
+    opacity: 1 !important;
+    &:after {
+      border-right-color: ${Palette.grayscale[1]} !important;
+      border-right-width: 8px !important;
+      left: -8px !important;
+      border-top-width: 8px !important;
+      border-bottom-width: 8px !important;
+      margin-top: -8px !important;
+    }
+  }
+`
+
+class Tooltip extends React.Component {
+  render() {
+    return (
+      <ReactTooltip place="right" effect="solid" className="reactTooltip" />
+    )
+  }
+}
+
+export default Tooltip

src/components/atoms/Tooltip/story.jsx

@@ -0,0 +1,32 @@
+/*
+Copyright (C) 2017  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/>.
+*/
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { WizardOptionsField } from 'components'
+
+import Tooltip from './Tooltip'
+
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <div>
+      <WizardOptionsField
+        name="separate_vm"
+        type="boolean"
+        value
+        onChange={() => { }}
+      />
+      <Tooltip />
+    </div>
+  ))

src/components/molecules/WizardOptionsField/WizardOptionsField.jsx

@@ -16,7 +16,7 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { Switch, TextInput, PropertiesTable, Dropdown } from 'components'
+import { Switch, TextInput, PropertiesTable, Dropdown, InfoIcon } from 'components'
 
 import StyleProps from '../../styleUtils/StyleProps'
 import LabelDictionary from '../../../utils/LabelDictionary'
@@ -141,7 +141,18 @@ class WizardOptionsField extends React.Component {
   }
 
   renderLabel() {
-    return <Label>{LabelDictionary.get(this.props.name)}</Label>
+    let description = LabelDictionary.getDescription(this.props.name)
+    let infoIcon = null
+    if (description) {
+      infoIcon = <InfoIcon text={description} />
+    }
+
+    return (
+      <Label>
+        {LabelDictionary.get(this.props.name)}
+        {infoIcon}
+      </Label>
+    )
   }
 
   render() {

src/components/organisms/WizardOptions/WizardOptions.jsx

@@ -16,7 +16,7 @@ import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
-import { ToggleButtonBar, WizardOptionsField } from 'components'
+import { ToggleButtonBar, WizardOptionsField, Tooltip } from 'components'
 
 import { executionOptions } from '../../../config'
 
@@ -142,6 +142,7 @@ class WizardOptions extends React.Component {
           <OneColumn>
             {fields.map(f => f.component)}
           </OneColumn>
+          <Tooltip />
         </Fields>
       )
     }
@@ -154,6 +155,7 @@ class WizardOptions extends React.Component {
         <Column right>
           {fields.map(f => f.column === 'right' && f.component)}
         </Column>
+        <Tooltip />
       </Fields>
     )
   }

src/components/organisms/WizardOptions/story.jsx

@@ -17,6 +17,10 @@ import { storiesOf } from '@storybook/react'
 import WizardOptions from './WizardOptions'
 
 let fields = [
+  {
+    name: 'separate_vm',
+    type: 'boolean',
+  },
   {
     name: 'string_field',
     type: 'string',

src/utils/LabelDictionary.js

@@ -86,25 +86,40 @@ class LabelDictionary {
     force: 'Force',
     skip_os_morphing: 'Skip OS Morphing',
     shutdown_instances: 'Shutdown Instances',
-    separate_vm: 'Separate Migration/VM?',
     aws: 'Amazon',
     openstack: 'OpenStack',
     oracle_vm: 'Oracle VM',
     opc: 'Oracle Cloud',
     azure: 'Azure',
     vmware_vsphere: 'VMware',
+    separate_vm: { label: 'Separate Migration/VM?', description: 'Separate migration per selected instance' },
   }
 
   static get(fieldName) {
-    let label = this.dictionary[fieldName]
-    if (label) {
-      return label
+    let labelInfo = this.dictionary[fieldName]
+    if (labelInfo) {
+      if (typeof labelInfo === 'string') {
+        return labelInfo
+      }
+      if (labelInfo.label) {
+        return labelInfo.label
+      }
     }
 
     let words = fieldName.split('_')
     words = words.map(word => word.charAt(0).toUpperCase() + word.substr(1))
     return words.join(' ')
   }
+
+  static getDescription(fieldName) {
+    let labelInfo = this.dictionary[fieldName]
+
+    if (labelInfo && typeof labelInfo === 'object') {
+      return labelInfo.description || ''
+    }
+
+    return ''
+  }
 }
 
 export default LabelDictionary

yarn.lock

@@ -4033,10 +4033,6 @@ is-windows@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
 
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -5180,12 +5176,6 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-opn@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
-  dependencies:
-    is-wsl "^1.1.0"
-
 optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -6118,6 +6108,13 @@ react-test-renderer@^16.0.0-0:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-tooltip@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.6.0"
+
 react-transition-group@^1.1.2:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"