Merge pull request #373 from smiclea/fix-tooltips

Fix tooltips not always showing up

package.json

@@ -97,7 +97,7 @@
     "react-motion": "^0.5.2",
     "react-notification-system": "^0.2.15",
     "react-router-dom": "^4.2.2",
-    "react-tooltip": "^3.4.0",
+    "react-tooltip": "^3.10.0",
     "require-without-cache": "^0.0.6",
     "rimraf": "^2.6.2",
     "styled-components": "2.2.0",

src/components/App.jsx

@@ -36,6 +36,7 @@ import UsersPage from './pages/UsersPage'
 import UserDetailsPage from './pages/UserDetailsPage'
 import ProjectsPage from './pages/ProjectsPage'
 import ProjectDetailsPage from './pages/ProjectDetailsPage'
+import Tooltip from './atoms/Tooltip/Tooltip'
 
 import { navigationMenu } from '../constants'
 import Palette from './styleUtils/Palette'
@@ -117,6 +118,7 @@ class App extends React.Component<{}, State> {
           <Route component={NotFoundPage} />
         </Switch>
         <Notifications />
+        <Tooltip />
       </Wrapper >
     )
   }

src/components/atoms/Tooltip/Tooltip.jsx

@@ -20,6 +20,7 @@ import { injectGlobal } from 'styled-components'
 import ReactTooltip from 'react-tooltip'
 
 import Palette from '../../styleUtils/Palette'
+import StyleProps from '../../styleUtils/StyleProps'
 
 injectGlobal`
   .reactTooltip {
@@ -30,6 +31,8 @@ injectGlobal`
     box-shadow: 0 0 9px 1px rgba(32, 34, 52, 0.1);
     margin-left: 12px !important;
     opacity: 1 !important;
+    z-index: 999999;
+    transition: opacity ${StyleProps.animations.swift};
     &:after {
       border-right-color: ${Palette.grayscale[1]} !important;
       border-right-width: 8px !important;
@@ -43,14 +46,19 @@ injectGlobal`
 
 @observer
 class Tooltip extends React.Component<{}> {
-  static rebuild = () => {
-    ReactTooltip.rebuild()
+  intervalId: IntervalID
+
+  componentWillMount() {
+    if (this.intervalId) {
+      return
+    }
+    this.intervalId = setInterval(() => {
+      ReactTooltip.rebuild()
+    }, 1000)
   }
 
   render() {
-    return (
-      <ReactTooltip place="right" effect="solid" className="reactTooltip" />
-    )
+    return <ReactTooltip place="right" effect="solid" className="reactTooltip" />
   }
 }
 

src/components/organisms/AssessmentDetailsContent/AssessmentDetailsContent.jsx

@@ -26,7 +26,6 @@ import DropdownLink from '../../molecules/DropdownLink'
 import Table from '../../molecules/Table'
 import AssessedVmListItem from '../../molecules/AssessedVmListItem'
 import DropdownFilter from '../../molecules/DropdownFilter'
-import Tooltip from '../../atoms/Tooltip'
 import Checkbox from '../../atoms/Checkbox'
 import SmallLoading from '../../atoms/SmallLoading'
 
@@ -214,10 +213,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
     page: '',
   }
 
-  componentDidUpdate() {
-    Tooltip.rebuild()
-  }
-
   doesVmMatchSource(vm: VmItem) {
     if (!this.props.sourceEndpoint || !this.props.sourceEndpoint.connection_info) {
       return false
@@ -513,7 +508,6 @@ class AssessmentDetailsContent extends React.Component<Props> {
           {this.props.detailsLoading ? null : this.renderVmsTable()}
           {this.props.detailsLoading || this.props.instancesLoading ? null : this.renderNetworkTable()}
           {this.props.detailsLoading ? null : this.renderButtons()}
-          <Tooltip />
         </DetailsBody>
       </Wrapper>
     )

src/components/organisms/AssessmentMigrationOptions/AssessmentMigrationOptions.jsx

@@ -21,7 +21,6 @@ import styled from 'styled-components'
 import Button from '../../atoms/Button'
 import EndpointField from '../../molecules/EndpointField'
 import ToggleButtonBar from '../../../components/atoms/ToggleButtonBar'
-import Tooltip from '../../atoms/Tooltip'
 
 import type { Field } from '../../../types/Field'
 
@@ -122,7 +121,6 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     if (prevState.showAdvancedOptions !== this.state.showAdvancedOptions && this.props.onResizeUpdate) {
       this.props.onResizeUpdate(this.scrollableRef)
     }
-    Tooltip.rebuild()
   }
 
   handleValueChange(fieldName: string, value: any) {
@@ -237,7 +235,6 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
     return (
       <Fields innerRef={ref => { this.scrollableRef = ref }}>
         {rows}
-        <Tooltip />
       </Fields>
     )
   }

src/components/organisms/Endpoint/Endpoint.jsx

@@ -22,7 +22,6 @@ import { observe } from 'mobx'
 import EndpointLogos from '../../atoms/EndpointLogos'
 import StatusIcon from '../../atoms/StatusIcon'
 import CopyButton from '../../atoms/CopyButton'
-import Tooltip from '../../atoms/Tooltip'
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
 import LoadingButton from '../../molecules/LoadingButton'
@@ -404,8 +403,6 @@ class Endpoint extends React.Component<Props, State> {
           onResizeUpdate: (scrollOffset: number) => { this.props.onResizeUpdate(this.scrollableRef, scrollOffset) },
         })}
         {this.renderButtons()}
-        <Tooltip />
-        {Tooltip.rebuild()}
       </Content>
     )
   }

src/components/organisms/EndpointDuplicateOptions/EndpointDuplicateOptions.jsx

@@ -27,7 +27,6 @@ import type { Project } from '../../../types/Project'
 import Palette from '../../styleUtils/Palette'
 
 import duplicateImage from './images/duplicate.svg'
-import Tooltip from '../../atoms/Tooltip'
 
 const Wrapper = styled.div`
   display: flex;
@@ -131,8 +130,6 @@ class EndpointDuplicateOptions extends React.Component<Props, State> {
             onChange={projectId => { this.setState({ selectedProjectId: projectId }) }}
             width={318}
           />
-          <Tooltip />
-          {Tooltip.rebuild()}
         </Form>
         <Buttons>
           <Button secondary onClick={this.props.onCancelClick}>Cancel</Button>

src/components/organisms/MainList/MainList.jsx

@@ -20,7 +20,6 @@ import styled from 'styled-components'
 
 import StatusImage from '../../atoms/StatusImage'
 import Button from '../../atoms/Button'
-import Tooltip from '../../atoms/Tooltip'
 
 import type { MainItem } from '../../../types/MainItem'
 import Palette from '../../styleUtils/Palette'
@@ -181,16 +180,10 @@ class MainList extends React.Component<Props> {
       return this.renderList()
     }
 
-    let rebuildTooltip = () => {
-      setTimeout(() => { Tooltip.rebuild() }, 500)
-    }
-
     return (
       <Wrapper>
         {this.props.loading || this.props.items.length === 0 || this.props.showEmptyList ? <Separator /> : null}
         {renderContent()}
-        <Tooltip />
-        {rebuildTooltip()}
       </Wrapper>
     )
   }

src/components/organisms/WizardOptions/WizardOptions.jsx

@@ -19,7 +19,6 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 import autobind from 'autobind-decorator'
 
-import Tooltip from '../../atoms/Tooltip'
 import StyleProps from '../../styleUtils/StyleProps'
 import ToggleButtonBar from '../../atoms/ToggleButtonBar'
 import WizardOptionsField from '../../molecules/WizardOptionsField'
@@ -96,10 +95,6 @@ class WizardOptions extends React.Component<Props> {
     window.addEventListener('resize', this.handleResize)
   }
 
-  componentDidUpdate() {
-    Tooltip.rebuild()
-  }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize, false)
   }
@@ -222,7 +217,6 @@ class WizardOptions extends React.Component<Props> {
           <OneColumn>
             {fields.map(f => f.component)}
           </OneColumn>
-          <Tooltip />
         </Fields>
       )
     }
@@ -235,7 +229,6 @@ class WizardOptions extends React.Component<Props> {
         <Column right>
           {fields.map(f => f.column === 'right' && f.component)}
         </Column>
-        <Tooltip />
       </Fields>
     )
   }

yarn.lock

@@ -7288,9 +7288,10 @@ react-test-renderer@^16.0.0-0:
     react-is "^16.8.4"
     scheduler "^0.13.4"
 
-react-tooltip@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.4.0.tgz#037f38f797c3e6b1b58d2534ccc8c2c76af4f52d"
+react-tooltip@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.10.0.tgz#268b5ef519fd8a1369288d1f086f42c90d5da7ef"
+  integrity sha512-GGdxJvM1zSFztkTP7gCQbLTstWr1OOoMpJ5WZUGhimj0nhRY+MPz+92MpEnKmj0cftJ9Pd/M6FfSl0sfzmZWkg==
   dependencies:
     classnames "^2.2.5"
     prop-types "^15.6.0"