feat(ui-toolkit, cp-frontend, cp-gql-mock-server): Mock deleting a deployment group and filter out deleted dgs and services on frontend

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

@@ -34,9 +34,9 @@ const TitleInnerContainer = styled.div`
 const ServiceListItem = ({
   onQuickActionsClick = () => {},
   deploymentGroup = '',
-  service = {}
+  service = {},
+  isChild = false
 }) => {
-  const isChild = Boolean(service.parent);
 
   const children = service.children
     ? service.children.map(service =>
@@ -44,13 +44,14 @@ const ServiceListItem = ({
           key={service.id}
           deploymentGroup={deploymentGroup}
           service={service}
+          isChild
         />
       )
     : null;
 
   const to = `/deployment-groups/${deploymentGroup}/services/${service.slug}`;
 
-  const title = service.parent
+  const title = isChild
     ? <CardTitle>
         {service.name}
       </CardTitle>

packages/cp-frontend/src/containers/deployment-group/delete.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose, graphql } from 'react-apollo';
-import DeploymentGroupsDeleteMutation from '@graphql/DeploymentGroupsDeleteMutation.gql';
+import DeploymentGroupDeleteMutation from '@graphql/DeploymentGroupDeleteMutation.gql';
 import DeploymentGroupQuery from '@graphql/DeploymentGroup.gql';
 import { Loader, ErrorMessage } from '@components/messaging';
 import { DeploymentGroupDelete as DeploymentGroupDeleteComponent } from '@components/deployment-group';
@@ -18,7 +18,7 @@ class DeploymentGroupDelete extends Component {
       );
     }
 
-    const { deploymentGroup, deleteDeploymentGroups, history, match } = this.props;
+    const { deploymentGroup, deleteDeploymentGroup, history, match } = this.props;
 
     const handleCloseClick = evt => {
       const closeUrl = match.url.split('/').slice(0, -2).join('/');
@@ -26,7 +26,8 @@ class DeploymentGroupDelete extends Component {
     };
 
     const handleConfirmClick = evt => {
-      deleteDeploymentGroups(deploymentGroup.id).then(() => handleCloseClick());
+      console.log('deploymentGroup = ', deploymentGroup);
+      deleteDeploymentGroup(deploymentGroup.id).then(() => handleCloseClick());
     };
 
     return (
@@ -44,14 +45,14 @@ class DeploymentGroupDelete extends Component {
 DeploymentGroupDelete.propTypes = {
   deploymentGroup: PropTypes.object,
   history: PropTypes.object,
-  deleteDeploymentGroups: PropTypes.func.isRequired
+  deleteDeploymentGroup: PropTypes.func.isRequired
 };
 
-const DeleteDeploymentGroupsGql = graphql(DeploymentGroupsDeleteMutation, {
+const DeleteDeploymentGroupGql = graphql(DeploymentGroupDeleteMutation, {
   props: ({ mutate }) => ({
-    deleteDeploymentGroups: deploymentGroupId =>
+    deleteDeploymentGroup: deploymentGroupId =>
       mutate({
-        variables: { ids: [deploymentGroupId] }
+        variables: { id: deploymentGroupId }
       })
   })
 });
@@ -73,7 +74,7 @@ const DeploymentGroupGql = graphql(DeploymentGroupQuery, {
   })
 });
 
-const DeploymentGroupDeleteWithData = compose(DeleteDeploymentGroupsGql, DeploymentGroupGql)(
+const DeploymentGroupDeleteWithData = compose(DeleteDeploymentGroupGql, DeploymentGroupGql)(
   DeploymentGroupDelete
 );
 

packages/cp-frontend/src/containers/deployment-groups/list.js

@@ -22,7 +22,6 @@ const DGsRows = Row.extend`
   margin-top: ${remcalc(-7)};
 `;
 
-// const Box = Col.withComponent(Link).extend`
 const Box = styled.div`
   position: relative;
   text-decoration: none;
@@ -44,11 +43,6 @@ const Box = styled.div`
 
 const BoxCreate = Box.extend`
   background-color: ${props => props.theme.disabled};
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  display: flex;
 
   &:hover {
     background-color: ${props => props.theme.white};
@@ -85,6 +79,14 @@ const StyledLink = styled(Link)`
   color: ${props => props.theme.secondary};
 `;
 
+const StyledCreateLink = styled(StyledLink)`
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  display: flex;
+`;
+
 const DeleteButtonContainer = styled.div`
   position: absolute;
   right: 0;
@@ -140,17 +142,21 @@ const DeploymentGroupList = ({
 
   const create = [
     <Col xs={12} sm={4} md={3} lg={3} key="~create">
-      <BoxCreate to={`${match.path}/~create`}>
+      <BoxCreate>
-        <Oval>+</Oval>
+        <StyledCreateLink to={`${match.path}/~create`}>
-        <CreateTitle>Create new deployment group</CreateTitle>
+          <Oval>+</Oval>
+          <CreateTitle>Create new deployment group</CreateTitle>
+        </StyledCreateLink>
       </BoxCreate>
     </Col>
   ].concat(
     forceArray(importable).map(({ slug, name }) =>
       <Col xs={12} sm={4} md={3} lg={3} key={slug}>
-        <BoxCreate to={`${match.path}/~import/${slug}`}>
+        <BoxCreate>
-          <Oval>&#10549;</Oval>
+          <StyledCreateLink to={`${match.path}/~import/${slug}`}>
-          <CreateTitle>{name}</CreateTitle>
+            <Oval>&#10549;</Oval>
+            <CreateTitle>{name}</CreateTitle>
+          </StyledCreateLink>
         </BoxCreate>
       </Col>
     )
@@ -184,7 +190,9 @@ export default compose(
       pollInterval: 1000
     },
     props: ({ data: { deploymentGroups, loading, error } }) => ({
-      deploymentGroups,
+      deploymentGroups: deploymentGroups && deploymentGroups.length
+        ? deploymentGroups.filter(dg => dg.status !== 'DELETED')
+        : null,
       loading,
       error
     })

packages/cp-frontend/src/graphql/DeploymentGroupDeleteMutation.gql

@@ -0,0 +1,7 @@
+#import "./DeploymentGroupInfo.gql"
+
+mutation DeleteDeploymentGroup($id: ID!) {
+  deleteDeploymentGroup(id: $id) {
+    ...DeploymentGroupInfo
+  }
+}

packages/cp-frontend/src/graphql/DeploymentGroupsDeleteMutation.gql

@@ -1,7 +0,0 @@
-#import "./DeploymentGroupInfo.gql"
-
-mutation DeleteDeploymentGroups($ids: [ID]!) {
-  deleteDeploymentGroups(ids: $ids) {
-    ...DeploymentGroupInfo
-  }
-}

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

@@ -132,14 +132,13 @@ const getService = (service, index) => {
 
 const processServices = services => {
   return forceArray(services).reduce((ss, s, i) => {
-    const serviceIndex = ss.findIndex(existingS => existingS.id === s.id);
+
-    if (serviceIndex === -1) {
+    if(s.status !== 'DELETED') {
-      ss.push(getService(s, i));
+      const service = getService(s, i);
-    } else {
+      if(s.branches && s.branches.length) {
-      ss.splice(serviceIndex, 1, {
+        service.children = processServices(s.branches)
-        ...ss[serviceIndex],
+      }
-        ...getService(s, i)
+      ss.push(service);
-      });
     }
 
     return ss;

packages/cp-gql-mock-server/src/resolvers.js

@@ -119,6 +119,34 @@ const createDeploymentGroup = ({ name }) => {
   return Promise.resolve(dg);
 };
 
+const deleteDeploymentGroup = options => {
+  const dgId = options.id;
+  const deleteDeploymentGroup = getServices({ deploymentGroupId: dgId})
+    .then(services => Promise.all(
+      services.map(service => handleStatusUpdateRequest(
+        service.id,
+        'DELETING',
+        'STOPPING',
+        'DELETED',
+        'DELETED'
+      ))
+    ))
+    .then(() => {
+      const deploymentGroup = deploymentGroups.filter(dg => dg.id === dgId).shift();
+      deploymentGroup.status = 'DELETING';
+      return deploymentGroup;
+      return ({ deploymentGroupId: dgId });
+      return getDeploymentGroups({id: dgId});
+    });
+
+  const timeout = setTimeout(() => {
+    const deploymentGroup = deploymentGroups.filter(dg => dg.id === dgId).shift();
+    deploymentGroup.status = 'DELETED';
+  }, 5000);
+
+  return Promise.resolve(deleteDeploymentGroup);
+};
+
 const createServicesFromManifest = ({ deploymentGroupId, raw }) => {
   const manifest = yaml.safeLoad(raw);
 
@@ -308,6 +336,7 @@ module.exports = {
       type: options.type,
       format: options.format
     })),
+  deleteDeploymentGroup: (options, request, fn) => fn(null, deleteDeploymentGroup(options)),
   deleteServices: (options, request, fn) => fn(null, deleteServices(options)),
   scale: (options, reguest, fn) => fn(null, scale(options)),
   restartServices: (options, request, fn) => fn(null, restartServices(options)),

packages/cp-gql-schema/schema.gql

@@ -230,4 +230,5 @@ type Mutation {
   restartInstances(ids: [ID]!): [Instance]
 
   importDeploymentGroup(deploymentGroupSlug: String!): DeploymentGroup
+  deleteDeploymentGroup(id: ID!): DeploymentGroup
 }

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

@@ -15,6 +15,6 @@ const alignsFromProps = props =>
     .join(';\n');
 
 export default Component =>
-  /* Component.extend
+  Component.extend
     ? Component.extend`${alignsFromProps}`
-    : */ styled(Component)`${alignsFromProps}`;
+    : styled(Component)`${alignsFromProps}`;

packages/ui-toolkit/src/icon-button/index.js

@@ -110,13 +110,6 @@ const IconButton = props => {
   );
 };
 
-/* ({ children, ...rest }) =>
-  <StyledIconButton {...rest}>
-    <StyledDiv>
-      {children}
-    </StyledDiv>
-  </StyledIconButton>; */
-
 IconButton.propTypes = {
   children: PropTypes.node,
   onClick: PropTypes.func

yarn.lock

@@ -3723,11 +3723,11 @@ extsprintf@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
 
-extsprintf@1.2.0:
+extsprintf@1.2.0, extsprintf@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.2.0.tgz#5ad946c22f5b32ba7f8cd7426711c6e8a3fc2529"
 
-extsprintf@1.3.0, extsprintf@^1.2.0:
+extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
@@ -8425,7 +8425,7 @@ squad@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/squad/-/squad-1.1.3.tgz#da09f68d1e0b0a60dca172878fe1f3c9e5272401"
 
-sshpk-agent@1.4.2:
+sshpk-agent@1.4.2, sshpk-agent@^1.3.0:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/sshpk-agent/-/sshpk-agent-1.4.2.tgz#5739cc08f48f98c53950a1715d20872a53804541"
   dependencies:
@@ -8434,16 +8434,7 @@ sshpk-agent@1.4.2:
     readable-stream "^2.1.4"
     sshpk ">=1.9.1 < 1.11.0"
 
-sshpk-agent@^1.3.0:
+sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0", sshpk@^1.7.0, sshpk@^1.8.3:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/sshpk-agent/-/sshpk-agent-1.6.0.tgz#56da869e02ad757991c247327e80b261682399af"
-  dependencies:
-    assert-plus "^1.0.0"
-    mooremachine "^2.0.1"
-    readable-stream "^2.1.4"
-    sshpk ">=1.13.0 < 1.14.0"
-
-sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0":
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.2.tgz#d5a804ce22695515638e798dbe23273de070a5fa"
   dependencies:
@@ -8458,20 +8449,6 @@ sshpk@1.10.2, "sshpk@>=1.9.1 < 1.11.0":
     jsbn "~0.1.0"
     tweetnacl "~0.14.0"
 
-"sshpk@>=1.13.0 < 1.14.0", sshpk@^1.7.0, sshpk@^1.8.3:
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
-    bcrypt-pbkdf "^1.0.0"
-    ecc-jsbn "~0.1.1"
-    jsbn "~0.1.0"
-    tweetnacl "~0.14.0"
-
 stack-utils@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"