feat(joyent-ui-toolkit,joyent-cp-frontend): Quick actions show and hide

packages/cp-frontend/package.json

@@ -36,6 +36,7 @@
     "react-styled-flexboxgrid": "^1.1.2",
     "redux": "^3.6.0",
     "redux-actions": "^2.0.3",
+    "redux-batched-actions": "^0.2.0",
     "redux-form": "^6.7.0",
     "remcalc": "^1.0.5",
     "reselect": "^3.0.1",

packages/cp-frontend/src/components/services/index.js

@@ -1,3 +1,3 @@
 export { default as EmptyServices } from './empty';
 export { default as ServiceListItem } from './list-item';
-export { default as ServicesTooltip } from './tooltip';
+export { default as ServicesQuickActions } from './quick-actions';

packages/cp-frontend/src/components/services/list-item.js

@@ -21,6 +21,12 @@ import {
   // InstancesMultipleIcon
 } from 'joyent-ui-toolkit';
 
+import { ServicesQuickActions } from '@components/services';
+
+const StyledCardHeader = styled(CardHeader)`
+  position: relative;
+`;
+
 const TitleInnerContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -29,7 +35,9 @@ const TitleInnerContainer = styled.div`
 `;
 
 const ServiceListItem = ({
-  // OnQuickActions=() => {},
+  showQuickActions,
+  onQuickActionsClick = () => {},
+  onQuickActionsBlur = () => {},
   deploymentGroup = '',
   service = {}
 }) => {
@@ -61,13 +69,17 @@ const ServiceListItem = ({
 
   const subtitle = <CardSubTitle>{service.instances} instances</CardSubTitle>;
 
-  const onOptionsClick = evt => {
+  const handleCardOptionsClick = evt => {
-    // OnQuickActions(evt, service.uuid);
+    onQuickActionsClick({ service });
+  };
+
+  const handleQuickActionsBlur = evt => {
+    onQuickActionsBlur({ show: false });
   };
 
   const header = isChild
     ? null
-    : <CardHeader>
+    : <StyledCardHeader>
         <CardMeta>
           {title}
           <CardDescription>
@@ -82,8 +94,14 @@ const ServiceListItem = ({
           /> */}
           </CardDescription>
         </CardMeta>
-        <CardOptions onClick={onOptionsClick} />
+        <CardOptions onClick={handleCardOptionsClick} />
-      </CardHeader>;
+        <ServicesQuickActions
+          position={{ top: '47px', right: '-98px' }}
+          service={service}
+          show={showQuickActions}
+          onBlur={handleQuickActionsBlur}
+        />
+      </StyledCardHeader>;
 
   const view = children
     ? <CardGroupView>
@@ -117,7 +135,9 @@ const ServiceListItem = ({
 };
 
 ServiceListItem.propTypes = {
-  // OnQuickActions: PropTypes.func,
+  showQuickActions: PropTypes.bool,
+  onQuickActionsClick: PropTypes.func,
+  onQuickActionsBlur: PropTypes.func,
   deploymentGroup: PropTypes.string,
   service: PropTypes.object.isRequired // Define better
 };

packages/cp-frontend/src/components/services/quick-actions.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip, TooltipButton, TooltipDivider } from 'joyent-ui-toolkit';
+
+const ServicesQuickActions = ({ show, position, service, onBlur }) => {
+  if (!show) {
+    return null;
+  }
+
+  const p = Object.keys(position).reduce((p, key) => {
+    if (typeof position[key] === 'number') {
+      p[key] = `${position[key]}px`;
+    } else {
+      p[key] = position[key];
+    }
+    return p;
+  }, {});
+
+  return (
+    <Tooltip {...p} onBlur={onBlur}>
+      <TooltipButton onClick={() => {}}>Scale</TooltipButton>
+      <TooltipButton>Restart</TooltipButton>
+      <TooltipButton>Stop</TooltipButton>
+      <TooltipDivider />
+      <TooltipButton>Delete</TooltipButton>
+    </Tooltip>
+  );
+};
+
+ServicesQuickActions.propTypes = {
+  service: PropTypes.object,
+  position: PropTypes.object,
+  show: PropTypes.bool,
+  onBlur: PropTypes.func
+};
+
+export default ServicesQuickActions;

packages/cp-frontend/src/components/services/tooltip.js

@@ -1,41 +0,0 @@
-// Import React from 'react';
-import PropTypes from 'prop-types';
-
-// Import Tooltip, { TooltipButton, TooltipDivider } from 'joyent-ui-toolkit';
-
-const ServicesTooltip = ({ show, position, data, ...rest }) => {
-  if (!show) {
-    return null;
-  }
-
-  return null;
-
-  // Return (
-  //   <Tooltip {...position} {...rest}>
-  //     <li>
-  //       <TooltipButton>Scale</TooltipButton>
-  //     </li>
-  //     <li>
-  //       <TooltipButton>Start</TooltipButton>
-  //     </li>
-  //     <li>
-  //       <TooltipButton>Restart</TooltipButton>
-  //     </li>
-  //     <TooltipDivider />
-  //     <li>
-  //       <TooltipButton>Stop</TooltipButton>
-  //     </li>
-  //     <li>
-  //       <TooltipButton>Delete</TooltipButton>
-  //     </li>
-  //   </Tooltip>
-  // );
-};
-
-ServicesTooltip.propTypes = {
-  data: PropTypes.object,
-  position: PropTypes.object,
-  show: PropTypes.bool
-};
-
-export default ServicesTooltip;

packages/cp-frontend/src/containers/services/list.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import { compose, graphql } from 'react-apollo';
-// Import { connect } from 'react-redux';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
-// Import { Link } from 'react-router-dom';
 import ServicesQuery from '@graphql/Services.gql';
 
 import { processServices } from '@root/state/selectors';
+import { toggleServicesQuickActions } from '@root/state/actions';
 
 import { LayoutContainer } from '@components/layout';
 import { Loader, ErrorMessage } from '@components/messaging';
@@ -17,7 +17,14 @@ const StyledContainer = styled.div`
 
 class ServiceList extends Component {
   render() {
-    const { deploymentGroup, services, loading, error } = this.props;
+    const {
+      deploymentGroup,
+      services,
+      loading,
+      error,
+      servicesQuickActions,
+      toggleServicesQuickActions
+    } = this.props;
 
     if (loading) {
       return (
@@ -33,13 +40,25 @@ class ServiceList extends Component {
       );
     }
 
+    const handleQuickActionsClick = o => {
+      toggleServicesQuickActions(o);
+    };
+
+    const handleQuickActionsBlur = o => {
+      toggleServicesQuickActions(o);
+    };
+
     const serviceList = services.map(service => (
       <ServiceListItem
         key={service.uuid}
-        onQuickActions={null /* onQuickActions */}
         deploymentGroup={deploymentGroup.slug}
         service={service}
-        uiTooltip={null /* uiTooltip */}
+        showQuickActions={
+          servicesQuickActions.service &&
+            servicesQuickActions.service.uuid === service.uuid
+        }
+        onQuickActionsClick={handleQuickActionsClick}
+        onQuickActionsBlur={handleQuickActionsBlur}
       />
     ));
 
@@ -57,6 +76,16 @@ class ServiceList extends Component {
   }
 }
 
+const mapStateToProps = (state, ownProps) => ({
+  servicesQuickActions: state.ui.services.quickActions
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleServicesQuickActions: data => dispatch(toggleServicesQuickActions(data))
+});
+
+const UiConnect = connect(mapStateToProps, mapDispatchToProps);
+
 const ServicesGql = graphql(ServicesQuery, {
   options(props) {
     return {
@@ -75,6 +104,6 @@ const ServicesGql = graphql(ServicesQuery, {
   })
 });
 
-const ServiceListWithData = compose(ServicesGql)(ServiceList);
+const ServiceListWithData = compose(ServicesGql, UiConnect)(ServiceList);
 
 export default ServiceListWithData;

packages/cp-frontend/src/containers/services/topology.js

@@ -1,31 +1,38 @@
 import React from 'react';
 import { compose, graphql } from 'react-apollo';
-// Import { connect } from 'react-redux';
+import { connect } from 'react-redux';
 import styled from 'styled-components';
 import ServicesQuery from '@graphql/ServicesTopology.gql';
 import unitcalc from 'unitcalc';
 
 import { processServices } from '@root/state/selectors';
+import { toggleServicesQuickActions } from '@root/state/actions';
 
 import { LayoutContainer } from '@components/layout';
 import { Loader, ErrorMessage } from '@components/messaging';
-// Import { ServicesTooltip } from '@components/services';
+import { ServicesQuickActions } from '@components/services';
 
 import { Topology } from 'joyent-ui-toolkit';
-/* Import ServicesTooltip from '@components/services/tooltip';
-
-import { toggleTooltip } from '@state/actions'; */
 
 const StyledBackground = styled.div`
+  padding: ${unitcalc(4)};
   background-color: ${props => props.theme.whiteActive};
 `;
 
 const StyledContainer = styled.div`
   position: relative;
-  padding: ${unitcalc(4)};
 `;
 
-const ServicesTopology = ({ push, services, datacenter, loading, error }) => {
+const ServicesTopology = ({
+  url,
+  push,
+  services,
+  datacenter,
+  loading,
+  error,
+  servicesQuickActions,
+  toggleServicesQuickActions
+}) => {
   if (loading) {
     return (
       <LayoutContainer>
@@ -40,15 +47,48 @@ const ServicesTopology = ({ push, services, datacenter, loading, error }) => {
     );
   }
 
+  const handleQuickActionsClick = (evt, tooltipData) => {
+    toggleServicesQuickActions(tooltipData);
+  };
+
+  const handleTooltipBlur = evt => {
+    toggleServicesQuickActions({ show: false });
+  };
+
+  const handleNodeTitleClick = (evt, { service }) => {
+    push(`${url.split('/').slice(0, 3).join('/')}/services/${service.slug}`);
+  };
+
   return (
     <StyledBackground>
       <StyledContainer>
-        <Topology services={services} />
+        <Topology
+          services={services}
+          onQuickActionsClick={handleQuickActionsClick}
+          onNodeTitleClick={handleNodeTitleClick}
+        />
+        <ServicesQuickActions
+          show={servicesQuickActions.show}
+          position={servicesQuickActions.position}
+          onBlur={handleTooltipBlur}
+        />
       </StyledContainer>
     </StyledBackground>
   );
 };
 
+const mapStateToProps = (state, ownProps) => ({
+  servicesQuickActions: state.ui.services.quickActions,
+  url: ownProps.match.url,
+  push: ownProps.history.push
+});
+
+const mapDispatchToProps = dispatch => ({
+  toggleServicesQuickActions: data => dispatch(toggleServicesQuickActions(data))
+});
+
+const UiConnect = connect(mapStateToProps, mapDispatchToProps);
+
 const ServicesGql = graphql(ServicesQuery, {
   options(props) {
     return {
@@ -66,6 +106,8 @@ const ServicesGql = graphql(ServicesQuery, {
   })
 });
 
-const ServicesTopologyWithData = compose(ServicesGql)(ServicesTopology);
+const ServicesTopologyWithData = compose(ServicesGql, UiConnect)(
+  ServicesTopology
+);
 
 export default ServicesTopologyWithData;

packages/cp-frontend/src/state/actions.js

@@ -5,4 +5,6 @@ const APP = constantCase(process.env.APP_NAME);
 
 /** ***************************** UI ****************************** */
 
-export const addMemberToProject = createAction(`${APP}/PROJECT_ADD_MEMBER`);
+export const toggleServicesQuickActions = createAction(
+  `${APP}/TOGGLE_SERVICES_QUICK_ACTIONS`
+);

packages/cp-frontend/src/state/reducers/index.js

@@ -0,0 +1 @@
+export { default as ui } from './ui';

packages/cp-frontend/src/state/reducers/ui.js

@@ -0,0 +1,36 @@
+import { handleActions } from 'redux-actions';
+import { toggleServicesQuickActions } from '@state/actions';
+
+export default handleActions(
+  {
+    [toggleServicesQuickActions.toString()]: (state, action) => {
+      const { position, service, show } = action.payload;
+
+      const s = show === undefined
+        ? !state.services.quickActions.service ||
+            service.uuid !== state.services.quickActions.service.uuid
+        : show;
+
+      const quickActions = s
+        ? {
+            show: s,
+            position,
+            service
+          }
+        : {
+            show: false
+          };
+
+      return {
+        ...state,
+        services: {
+          ...state.services,
+          quickActions
+        }
+      };
+
+      return state;
+    }
+  },
+  {}
+);

packages/cp-frontend/src/state/state.js

@@ -21,6 +21,11 @@ const state = {
           name: 'Instances'
         }
       ]
+    },
+    services: {
+      quickActions: {
+        show: false
+      }
     }
   }
 };

packages/cp-frontend/src/state/store.js

@@ -1,6 +1,8 @@
 import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import { enableBatching } from 'redux-batched-actions';
 import { ApolloClient, createNetworkInterface } from 'react-apollo';
 import state from './state';
+import { ui } from './reducers';
 
 export const client = new ApolloClient({
   dataIdFromObject: o => {
@@ -22,12 +24,10 @@ export const client = new ApolloClient({
 
 export const store = createStore(
   combineReducers({
-    ui: s => {
+    ui,
-      return s ? s : state.ui;
-    },
     apollo: client.reducer()
   }),
-  {}, // Initial state
+  state, // Initial state
   compose(
     applyMiddleware(client.middleware()),
     // If you are using the devToolsExtension, you can add it here also

packages/ui-toolkit/src/index.js

@@ -12,7 +12,8 @@ export { default as Small } from './text/small';
 export { default as theme } from './theme';
 export { default as typography, fonts } from './typography';
 export { default as Topology } from './topology';
-export { default as Tooltip } from './tooltip';
+
+export { Tooltip, TooltipButton, TooltipDivider } from './tooltip';
 
 export {
   borderRadius,

packages/ui-toolkit/src/modal/index.js

@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+class Modal extends Component {
+  render() {
+    return (
+      <div>
+        <p>Modal</p>
+      </div>
+    );
+  }
+}
+
+export default Modal;

packages/ui-toolkit/src/tooltip/index.js

@@ -1,79 +1,3 @@
-import React from 'react';
+export { default as Tooltip } from './tooltip';
-import PropTypes from 'prop-types';
+export { default as TooltipButton } from './button';
-import styled from 'styled-components';
+export { default as TooltipDivider } from './divider';
-import unitcalc from 'unitcalc';
-import remcalc from 'remcalc';
-import theme from '../theme';
-import { border, borderRadius, tooltipShadow } from '../boxes';
-
-const StyledContainer = styled.div`
-  position: absolute;
-  top: ${props => props.top};
-  left: ${props => props.left};
-  bottom: ${props => props.bottoms};
-  right: ${props => props.right};
-`;
-
-const StyledList = styled.ul`
-  position: relative;
-  display: inline-block;
-  top: ${remcalc(5)};
-  left: -50%;
-  margin: 0;
-  padding: ${unitcalc(2)} 0;
-  list-style-type: none;
-  background-color: ${theme.white};
-  border: ${border.unchecked};
-  drop-shadow: ${tooltipShadow};
-  border-radius: ${borderRadius};
-  z-index: 1;
-
-  &:after, &:before {
-    content: "";
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    height: 0;
-    width: 0;
-    border: solid transparent;
-  }
-
-  &:after {
-    border-bottom-color: ${theme.white};
-    border-width: ${remcalc(3)};
-    margin-left: ${remcalc(-3)};
-  }
-
-  &:before {
-    border-bottom-color: ${theme.grey};
-    border-width: ${remcalc(5)};
-    margin-left: ${remcalc(-5)};
-  }
-`;
-
-/**
- * @example ./usage.md
- */
-const Tooltip = ({
-  children,
-  top = 'auto',
-  left = 'auto',
-  bottom = 'auto',
-  right = 'auto'
-}) => (
-  <StyledContainer top={top} left={left} bottom={bottom} right={right}>
-    <StyledList>
-      {children}
-    </StyledList>
-  </StyledContainer>
-);
-
-Tooltip.propTypes = {
-  children: PropTypes.node,
-  top: PropTypes.number,
-  left: PropTypes.number,
-  bottom: PropTypes.number,
-  right: PropTypes.number
-};
-
-export default Tooltip;

packages/ui-toolkit/src/tooltip/tooltip.js

@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import unitcalc from 'unitcalc';
+import remcalc from 'remcalc';
+import theme from '../theme';
+import { border, borderRadius, tooltipShadow } from '../boxes';
+
+const StyledContainer = styled.div`
+  position: absolute;
+  top: ${props => props.top};
+  left: ${props => props.left};
+  bottom: ${props => props.bottoms};
+  right: ${props => props.right};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledList = styled.ul`
+  position: relative;
+  display: inline-block;
+  top: ${remcalc(5)};
+  left: -50%;
+  margin: 0;
+  padding: ${unitcalc(2)} 0;
+  list-style-type: none;
+  background-color: ${theme.white};
+  border: ${border.unchecked};
+  box-shadow: ${tooltipShadow};
+  border-radius: ${borderRadius};
+  z-index: 1;
+
+  &:after, &:before {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    height: 0;
+    width: 0;
+    border: solid transparent;
+  }
+
+  &:after {
+    border-bottom-color: ${theme.white};
+    border-width: ${remcalc(3)};
+    margin-left: ${remcalc(-3)};
+  }
+
+  &:before {
+    border-bottom-color: ${theme.grey};
+    border-width: ${remcalc(5)};
+    margin-left: ${remcalc(-5)};
+  }
+`;
+
+/**
+ * @example ./usage.md
+ */
+class Tooltip extends Component {
+  componentDidMount() {
+    this.windowClickHandler = this.handleWindowClick.bind(this);
+    this.windowClickCounter = 0;
+    window.addEventListener('click', this.windowClickHandler);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.windowClickCounter = 0;
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('click', this.windowClickHandler);
+  }
+
+  handleWindowClick(evt) {
+    if (this.windowClickCounter) {
+      if (this.props.onBlur) {
+        this.props.onBlur();
+      }
+    }
+    this.windowClickCounter++;
+  }
+
+  render() {
+    const {
+      children,
+      top = 'auto',
+      left = 'auto',
+      bottom = 'auto',
+      right = 'auto'
+    } = this.props;
+
+    return (
+      <StyledContainer top={top} left={left} bottom={bottom} right={right}>
+        <StyledList>
+          {children}
+        </StyledList>
+      </StyledContainer>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.node,
+  top: PropTypes.string,
+  left: PropTypes.string,
+  bottom: PropTypes.string,
+  right: PropTypes.string,
+  onBlur: PropTypes.func
+};
+
+export default Tooltip;

packages/ui-toolkit/src/tooltip/usage.md

@@ -1,14 +1,14 @@
 ```
-const Tooltip = require('./index').default;
+const Tooltip = require('./tooltip').default;
 const TooltipButton = require('./button').default;
 const TooltipDivider = require('./divider').default;
 
 <div style={{ position: 'relative', height: '175px' }}>
-  <Tooltip top='5px' left='60px'>
+  <Tooltip top='5px' left='55px'>
     <TooltipButton>Scale</TooltipButton>
     <TooltipButton>Restart</TooltipButton>
-    <TooltipDivider />
     <TooltipButton>Stop</TooltipButton>
+    <TooltipDivider />
     <TooltipButton>Delete</TooltipButton>
   </Tooltip>
 </div>

packages/ui-toolkit/src/topology/index.js

@@ -119,7 +119,7 @@ class Topology extends React.Component {
   }
 
   render() {
-    const { onQuickActions, services } = this.props;
+    const { onQuickActionsClick, onNodeTitleClick, services } = this.props;
 
     const { nodes, links } = this.state;
 
@@ -197,17 +197,14 @@ class Topology extends React.Component {
       this.setDragInfo(false);
     };
 
-    const onTitleClick = serviceUUID =>
-      this.props.onNodeTitleClick(serviceUUID);
-
     const renderedNode = (n, index) => (
       <TopologyNode
         key={index}
         data={n}
         index={index}
         onDragStart={onDragStart}
-        onNodeTitleClick={onTitleClick}
+        onNodeTitleClick={onNodeTitleClick}
-        onQuickActions={onQuickActions}
+        onQuickActions={onQuickActionsClick}
         connected={n.id !== 'consul'}
       />
     );
@@ -288,7 +285,7 @@ class Topology extends React.Component {
 }
 
 Topology.propTypes = {
-  onQuickActions: PropTypes.func,
+  onQuickActionsClick: PropTypes.func,
   onNodeTitleClick: PropTypes.func,
   services: PropTypes.array
 };

packages/ui-toolkit/src/topology/node/button.js

@@ -27,6 +27,7 @@ const NodeButton = ({ connected, onButtonClick, index }) => {
   return (
     <g transform={`translate(${x}, ${y})`}>
       <GraphLine x1={0} y1={0} x2={0} y2={height} connected={connected} />
+      {buttonCircles}
       <GraphButtonRect
         height={height}
         onClick={onButtonClick}
@@ -35,7 +36,6 @@ const NodeButton = ({ connected, onButtonClick, index }) => {
         role="button"
         tabIndex={100 + index}
       />
-      {buttonCircles}
     </g>
   );
 };

packages/ui-toolkit/src/topology/node/index.js

@@ -42,7 +42,7 @@ const GraphNode = ({
     }
 
     const d = {
-      service: data.uuid,
+      service: data,
       position: {
         left: tooltipPosition.x,
         top: tooltipPosition.y
@@ -52,7 +52,7 @@ const GraphNode = ({
     onQuickActions(evt, d);
   };
 
-  const onTitleClick = () => onNodeTitleClick(data.uuid);
+  const onTitleClick = evt => onNodeTitleClick(evt, { service: data });
 
   const onStart = evt => {
     evt.preventDefault();

packages/ui-toolkit/src/topology/node/shapes.js

@@ -77,6 +77,10 @@ export const GraphText = styled.text`
 export const GraphButtonRect = styled.rect`
   opacity: 0;
   cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
 `;
 
 export const GraphButtonCircle = styled.circle`

packages/ui-toolkit/styleguide.config.js

@@ -63,7 +63,7 @@ module.exports = {
         'src/list/ul.js',
         'src/list/li.js',
         'src/topology/index.js',
-        'src/tooltip/index.js'
+        'src/tooltip/tooltip.js'
       ]
     },
     {

scripts/format

@@ -68,6 +68,8 @@ const staged = async () => {
     return;
   }
 
+  console.log('existing = ', existing);
+
   return run(existing);
 };