feat(ui-toolkit, cp-frontend): Disable quick actions menu remove services filter add service

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

@@ -47,6 +47,8 @@ const ServicesQuickActions = ({
     onDeleteClick(evt, service);
   };
 
+  const disabled = service.transitionalStatus;
+
   const status = service.instances.reduce((status, instance) => {
     return status
       ? instance.status === status ? status : 'MIXED'
@@ -55,20 +57,20 @@ const ServicesQuickActions = ({
 
   const startService = status === 'RUNNING'
     ? null
-    : <TooltipButton onClick={handleStartClick}>Start</TooltipButton>;
+    : <TooltipButton onClick={handleStartClick} disabled={disabled}>Start</TooltipButton>;
 
   const stopService = status === 'STOPPED'
     ? null
-    : <TooltipButton onClick={handleStopClick}>Stop</TooltipButton>;
+    : <TooltipButton onClick={handleStopClick} disabled={disabled}>Stop</TooltipButton>;
 
   return (
     <Tooltip {...p} onBlur={onBlur}>
-      <TooltipButton onClick={handleScaleClick}>Scale</TooltipButton>
-      <TooltipButton onClick={handleRestartClick}>Restart</TooltipButton>
+      <TooltipButton onClick={handleScaleClick} disabled={disabled}>Scale</TooltipButton>
+      <TooltipButton onClick={handleRestartClick} disabled={disabled}>Restart</TooltipButton>
       {startService}
       {stopService}
       <TooltipDivider />
-      <TooltipButton onClick={handleDeleteClick}>Delete</TooltipButton>
+      <TooltipButton onClick={handleDeleteClick} disabled={disabled}>Delete</TooltipButton>
     </Tooltip>
   );
 };

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

@@ -1,13 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// Import { connect } from 'react-redux';
 import { Col, Row } from 'react-styled-flexboxgrid';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import unitcalc from 'unitcalc';
-
 import { LayoutContainer } from '@components/layout';
-// Import { EmptyServices } from '@components/services';
+
 import {
   Button,
   H2,
@@ -18,8 +16,6 @@ import {
   Legend
 } from 'joyent-ui-toolkit';
 
-// Import { servicesForTopologySelector } from '@state/selectors';
-
 const StyledLegend = Legend.extend`
   float: left;
   padding-top: ${unitcalc(2)};
@@ -36,10 +32,6 @@ const StyledForm = FormGroup.extend`
   margin: 0;
 `;
 
-// Const StyledButton = styled(Button)`
-//   margin-left: ${remcalc(48)};
-// `;
-
 const StyledFilter = styled(Input)`
   margin: 0;
 `;
@@ -47,11 +39,6 @@ const StyledFilter = styled(Input)`
 const handleAddService = () => console.log('Adding a service...');
 
 const ServicesMenu = ({ location, history: { push } }) => {
-  /* If(!services || !services.length) {
-    return (
-      <EmptyServices />
-    );
-  } */
 
   const toggleValue = location.pathname.split('-').pop();
 
@@ -77,16 +64,6 @@ const ServicesMenu = ({ location, history: { push } }) => {
             </ToggleList>
           </FormGroup>
         </Col>
-        <Col xs={5}>
-          <StyledForm name="topology-filter">
-            <StyledFilter placeholder="Filter" />
-          </StyledForm>
-        </Col>
-        <Col xs={2}>
-          <Button secondary onClick={handleAddService}>
-            Add a service
-          </Button>
-        </Col>
       </PaddedRow>
     </LayoutContainer>
   );

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import unitcalc from 'unitcalc';
+import is from 'styled-is';
 import theme from '../theme';
 import Button from '../button';
 
@@ -32,6 +33,15 @@ const StyledButton = styled(Button)`
     color: ${theme.primary};
     border: none;
   }
+
+  &[disabled] {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  ${is('disabled')`
+    color: ${props => props.theme.grey};
+  `}
 `;
 
 const TooltipButton = props =>