hide tooltip when blured

fixes #385

frontend/src/components/header/index.js

@@ -78,22 +78,18 @@ const arrowPosition = {
 
 const Header = ({
   account,
-  handleToggle,
+  onHeaderToggle,
   tooltip,
   ...props
 }) => {
-  const handleToggleClick = (ev) => {
+  const handleHeaderToggle = (ev) => {
     ev.preventDefault();
-    handleToggle(!tooltip);
+    onHeaderToggle();
-  };
-
-  const handleHideToggle = (ev) => {
-    ev.preventDefault();
-    handleToggle(false);
   };
 
   const tooltipComponent = !tooltip ? null : (
     <Tooltip
+      onBlur={handleHeaderToggle}
       arrowPosition={arrowPosition}
       right={0}
       top={39}
@@ -111,12 +107,7 @@ const Header = ({
   );
 
   return (
-    <StyledHeader
+    <StyledHeader name='application-header' {...props}>
-      name='application-header'
-      onBlur={handleHideToggle}
-      onFocus={handleHideToggle}
-      {...props}
-    >
       <Row>
         <Column lg={10} xs={8}>
           <Link to='/'>
@@ -126,7 +117,7 @@ const Header = ({
         <Column lg={2} xs={4}>
           <StyledProfileWrapper>
             <StyledAvatarWrapper toggled={tooltip}>
-              <EmptyButton onClick={handleToggleClick}>
+              <EmptyButton onClick={handleHeaderToggle}>
                 <StyledName>
                   {account.name}
                 </StyledName>
@@ -147,7 +138,7 @@ const Header = ({
 
 Header.propTypes = {
   account: PropTypes.account,
-  handleToggle: React.PropTypes.func,
+  onHeaderToggle: React.PropTypes.func,
   tooltip: React.PropTypes.bool
 };
 

frontend/src/components/services/tooltip.js

@@ -1,41 +1,41 @@
 import React from 'react';
 import Tooltip, { TooltipButton, TooltipDivider } from '@ui/components/tooltip';
 
+// eslint-disable-next-line max-len
+const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
+
 const ServicesTooltip = ({
   show,
-  position
+  position,
-}) => {
+  ...rest
-  // eslint-disable-next-line max-len
+}) => show ? (
-  const scaleLink = 'https://projects.invisionapp.com/share/YDAKI8CW4#/screens/221841542_Deployed_Services_1-8';
+  <Tooltip {...position} {...rest}>
-  return show ? (
+    <li>
-    <Tooltip {...position}>
+      <TooltipButton href={scaleLink}>
-      <li>
+        Scale
-        <TooltipButton href={scaleLink}>
+      </TooltipButton>
-          Scale
+    </li>
-        </TooltipButton>
+    <li>
-      </li>
+      <TooltipButton>Rollback</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Rollback</TooltipButton>
+    <li>
-      </li>
+      <TooltipButton>Reprovision</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Reprovision</TooltipButton>
+    <li>
-      </li>
+      <TooltipButton>Transfer</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Transfer</TooltipButton>
+    <li>
-      </li>
+      <TooltipButton>Setup metrics</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Setup metrics</TooltipButton>
+    <TooltipDivider />
-      </li>
+    <li>
-      <TooltipDivider />
+      <TooltipButton>Stop</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Stop</TooltipButton>
+    <li>
-      </li>
+      <TooltipButton>Delete</TooltipButton>
-      <li>
+    </li>
-        <TooltipButton>Delete</TooltipButton>
+  </Tooltip>
-      </li>
+) : null;
-    </Tooltip>
-  ) : null;
-};
 
 ServicesTooltip.propTypes = {
   position: React.PropTypes.object,

frontend/src/components/services/view.js

@@ -5,15 +5,10 @@ import Row from '@ui/components/row';
 import Column from '@ui/components/column';
 import { LayoutContainer } from '@components/layout';
 import { H2 } from '@ui/components/base-elements';
-import {
+import { FormGroup, Toggle, ToggleList, Legend } from '@ui/components/form';
-  FormGroup,
-  Toggle,
-  ToggleList,
-  Legend
-} from '@ui/components/form';
 import TopologyFilter from '@components/services/topology-filter';
-import styled from 'styled-components';
 import { unitcalc, remcalc } from '@ui/shared/functions';
+import styled from 'styled-components';
 
 const StyledLegend = styled(Legend)`
   float: left;
@@ -37,6 +32,7 @@ const ServicesView = ({
     evt.preventDefault();
 
     const value = evt.target.value;
+
     if(value !== toggleValue) {
       onToggle(value);
     }

frontend/src/containers/header/index.js

@@ -10,7 +10,7 @@ const mapStateToProps = (state, ownProps) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  handleToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
+  onHeaderToggle: (bool) => dispatch(toggleHeaderTooltip(bool))
 });
 
 export default connect(

frontend/src/containers/services/list.js

@@ -25,7 +25,6 @@ const duration = '1 hour';
 const interval = '2 minutes';
 
 class Services extends React.Component {
-
   // we DON'T want to unsubscribe once we started going
   componentWillMount() {
     this.props.subscribeMetric(interval);
@@ -66,7 +65,7 @@ class Services extends React.Component {
       });
     };
 
-    const instances = null;
+    const handleTooltipBlur = (evt) => onQuickActions(evt, uiTooltip.service);
 
     const serviceList = services.map((service) => (
       <ServiceItem
@@ -79,13 +78,19 @@ class Services extends React.Component {
       />
     ));
 
+    // TODO replace `false` with a check for existence unmanaged instances
+    // eslint-disable-next-line no-constant-condition
+    const unmanagedInstances = false ? (
+      <UnmanagedInstances instances={0} />
+    ) : null;
+
     return (
       <LayoutContainer>
-        { instances && <UnmanagedInstances instances={instances} /> }
+        {unmanagedInstances}
         <StyledContainer>
           <div ref={this.ref('container')}>
             {serviceList}
-            <ServicesTooltip {...uiTooltip} />
+            <ServicesTooltip {...uiTooltip} onBlur={handleTooltipBlur} />
           </div>
         </StyledContainer>
       </LayoutContainer>

frontend/src/state/reducers/account.js

@@ -6,7 +6,7 @@ export default handleActions({
     ...state,
     ui: {
       ...state.ui,
-      tooltip: action.payload
+      tooltip: !state.ui.tooltip
     }
   })
 }, {});

frontend/src/state/reducers/services.js

@@ -48,13 +48,13 @@ export default handleActions({
     )
   }),
   [toggleTooltip.toString()]: (state, action) => {
-
     const {
       position,
       service
     } = action.payload;
 
     const show = state.ui.tooltip.service !== service;
+
     const tooltip = show ? {
       show: true,
       position: {

ui/src/components/tooltip/index.js

@@ -1,7 +1,7 @@
 import { remcalc, unitcalc } from '../../shared/functions';
 import { boxes, colors } from '../../shared/constants';
 import styled from 'styled-components';
-import React from 'react';
+import React, { Component } from 'react';
 
 import {
   absolutePosition,
@@ -12,12 +12,12 @@ import {
   getMeasurement
 } from '../../shared/composers';
 
-
-const ItemPadder = 9;
-const WrapperPadder = 24;
-
 const StyledContainer = styled.div`
   ${(props) => absolutePosition(props)}
+
+  &:focus {
+    outline: none;
+  }
 `;
 
 const StyledList = styled.ul`
@@ -29,7 +29,6 @@ const StyledList = styled.ul`
   list-style-type: none;
   margin: 0;
   padding: ${unitcalc(2)} 0;
-  /*min-width: ${remcalc(200)};*/
 
   position: absolute;
   top: ${remcalc(4)};
@@ -42,6 +41,7 @@ const StyledList = styled.ul`
   }};
 
   ${props => props.styles}
+
   ${baseBox({
     shadow: boxes.tooltipShadow
   })}
@@ -50,15 +50,6 @@ const StyledList = styled.ul`
     amount: 1
   })}
 
-  /*& > * {
-
-    padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
-
-    &:hover {
-      background: ${colors.base.grey};
-    }
-  }*/
-
   &:after, &:before {
     border: solid transparent;
     height: 0;
@@ -73,6 +64,7 @@ const StyledList = styled.ul`
     border-width: ${remcalc(3)};
     margin-left: ${remcalc(-3)};
   }
+
   &:before {
     border-color: rgba(216, 216, 216, 0);
     border-bottom-color: ${colors.base.grey};
@@ -81,20 +73,42 @@ const StyledList = styled.ul`
   }
 `;
 
-const Tooltip = ({
+class Tooltip extends Component {
-  children,
+  componentDidMount() {
-  arrowPosition = {
+    this._refs.ul.focus();
-    bottom: '100%',
+  }
-    left: '50%'
+
-  },
+  ref(name) {
-  ...props
+    this._refs = this._refs || {};
-}) => (
+
-  <StyledContainer {...props}>
+    return (el) => {
-    <StyledList arrowPosition={arrowPosition} {...props}>
+      this._refs[name] = el;
-      {children}
+    };
-    </StyledList>
+  }
-  </StyledContainer>
+
-);
+  render() {
+    const {
+      children,
+      arrowPosition = {
+        bottom: '100%',
+        left: '50%'
+      },
+      ...rest
+    } = this.props;
+
+    return (
+      <StyledContainer
+        innerRef={this.ref('ul')}
+        tabIndex={-1}
+        {...rest}
+      >
+        <StyledList arrowPosition={arrowPosition} {...rest}>
+          {children}
+        </StyledList>
+      </StyledContainer>
+    );
+  }
+}
 
 Tooltip.propTypes = {
   arrowPosition: React.PropTypes.object,