add task cancellations in the UI

src/components/CancelDeployment/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 
+import { notification } from 'antd';
 import Button from 'components/Button';
 import gql from 'graphql-tag';
 
@@ -10,20 +11,28 @@ const CANCEL_DEPLOYMENT_MUTATION = gql`
   }
 `;
 
-export const CancelDeploymentButton = ({ action, success, loading, error, beforeText, afterText }) => (
-  <>
-    <Button action={action} disabled={loading || success}>
-      {success ? afterText || 'Cancellation requested' : beforeText || 'Cancel deployment'}
-    </Button>
+export const CancelDeploymentButton = ({ action, success, loading, error, beforeText, afterText }) => {
+  const [api, contextHolder] = notification.useNotification();
 
-    {error && (
-      <div className="deploy_result">
-        <p>There was a problem cancelling deployment.</p>
-        <p>{error.message}</p>
-      </div>
-    )}
-  </>
-);
+  const openNotificationWithIcon = errorMessage => {
+    api['error']({
+      message: 'There was a problem cancelling deployment.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+  return (
+    <>
+      {contextHolder}
+      <Button action={action} loading={loading} disabled={loading || success}>
+        {success ? afterText || 'Cancellation requested' : beforeText || 'Cancel deployment'}
+      </Button>
+      {error && openNotificationWithIcon(error.message)}
+    </>
+  );
+};
 
 const CancelDeployment = ({ deployment, beforeText, afterText }) => (
   <Mutation

src/components/CancelTask/index.tsx

@@ -0,0 +1,106 @@
+import React, { FC } from 'react';
+import { Mutation } from 'react-apollo';
+
+import { notification } from 'antd';
+import { ApolloError } from 'apollo-client';
+import Button from 'components/Button';
+import gql from 'graphql-tag';
+
+const CANCEL_TASK_MUTATION = gql`
+  mutation cancelTask($taskName: String!, $taskId: Int!, $environmentId: Int!, $projectId: Int!) {
+    cancelTask(
+      input: {
+        task: { id: $taskId, taskName: $taskName, environment: { id: $environmentId, project: { id: $projectId } } }
+      }
+    )
+  }
+`;
+interface CancelTaskProps {
+  task: {
+    id: string;
+    taskName: string;
+    name?: string;
+    adminOnlyView?: boolean;
+  };
+  environmentId: number;
+  projectId: number;
+  beforeText: string;
+  afterText: string;
+}
+
+interface CancelTaskButtonProps {
+  action: () => void;
+  success: boolean;
+  loading: boolean;
+  error: ApolloError | undefined;
+  beforeText: string;
+  afterText: string;
+}
+
+export const CancelTaskButton: FC<CancelTaskButtonProps> = ({
+  action,
+  success,
+  loading,
+  error,
+  beforeText,
+  afterText,
+}) => {
+  const [api, contextHolder] = notification.useNotification();
+
+  const openNotificationWithIcon = (errorMessage: string) => {
+    api['error']({
+      message: 'There was a problem cancelling a task.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+
+  return (
+    <>
+      {contextHolder}
+      <Button action={action} disabled={loading || success} loading={loading}>
+        {success ? afterText : beforeText}
+      </Button>
+
+      {error && openNotificationWithIcon(error.message)}
+    </>
+  );
+};
+
+const CancelTask: FC<CancelTaskProps> = ({
+  task,
+  environmentId,
+  projectId,
+  beforeText = 'Cancel',
+  afterText = 'Cancelled',
+}) => (
+  <Mutation<{
+    cancelTask: string;
+  }>
+    mutation={CANCEL_TASK_MUTATION}
+    variables={{
+      taskId: task.id,
+      taskName: task.taskName,
+      environmentId,
+      projectId,
+    }}
+    onError={(e: ApolloError) => console.error(e.message)}
+  >
+    {(cancelTask, { loading, error, data }) => (
+      <CancelTaskButton
+        action={() => {
+          void cancelTask();
+        }}
+        success={(data && data.cancelTask === 'success') || false}
+        loading={loading}
+        error={error}
+        beforeText={beforeText}
+        afterText={afterText}
+      />
+    )}
+  </Mutation>
+);
+
+export default CancelTask;

src/components/Deployments/DeploymentsSkeleton.tsx

@@ -7,18 +7,23 @@ const DeploymentsSkeleton = () => {
   const numberOfDeploymentFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
   const skeletonItem = (
-    <div className="data-row">
-      <div className="name">
-        <Skeleton />
+    <div className="deploymentRow">
+      <div className="data-row">
+        <div className="name">
+          <Skeleton />
+        </div>
+        <div className="started">
+          <Skeleton />
+        </div>
+        <div className="status">
+          <Skeleton width={'80%'} />
+        </div>
+        <div className="duration">
+          <Skeleton width={'80%'} />
+        </div>
       </div>
-      <div className="started">
-        <Skeleton />
-      </div>
-      <div className="status">
-        <Skeleton width={'50%'} />
-      </div>
-      <div className="duration">
-        <Skeleton width={'50%'} />
+      <div className="cancel-button">
+        <Skeleton width={'80%'} />
       </div>
     </div>
   );

src/components/Deployments/StyledDeployments.tsx

@@ -3,12 +3,12 @@ import styled from 'styled-components';
 
 export const StyledDeployments = styled.div`
   .header {
+    width: 90%;
     @media ${bp.tinyUp} {
       align-items: center;
       display: flex;
       justify-content: space-between;
       margin: 0 0 14px;
-      padding-right: 40px;
     }
     @media ${bp.smallOnly} {
       flex-wrap: wrap;
@@ -18,9 +18,10 @@ export const StyledDeployments = styled.div`
     }
 
     label {
+      width:25%;
       display: none;
-      padding-left: 20px;
-      width: 25%;
+      display:inline-block;
+      padding-left:20px;
       @media ${bp.tinyUp} {
         display: block;
       }
@@ -45,6 +46,36 @@ export const StyledDeployments = styled.div`
     border-radius: 3px;
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
 
+    .deploymentRow {
+      display: flex;
+      align-items: center;
+      border: 1px solid ${props => props.theme.borders.tableRow};
+      transition: all 0.2s ease;
+      transition: all 0.3s ease;
+      &:hover {
+        border: 1px solid #2bc0d8;
+      }
+      & > :nth-child(1) {
+        width: 90% !important;
+      }
+      & > :nth-child(2) {
+        padding: unset;
+        height: 30px;
+        &.btn--disabled {
+          margin-right: unset;
+        }
+      }
+      .cancel-button {
+        width: 10%;
+        button {
+          width:90%;
+          padding:0 !important;
+          margin-right: unset !important;
+          height:30px;
+        }
+        max-height: 100px;
+      }
+    }
     .data-none {
       border: 1px solid ${props => props.theme.borders.tableRow};
       border-bottom: 1px solid ${props => props.theme.borders.tableRow};
@@ -56,33 +87,24 @@ export const StyledDeployments = styled.div`
     }
 
     .data-row {
-      background-image: url('/static/images/right-arrow.svg');
-      background-position: right 20px center;
-      background-repeat: no-repeat;
-      background-size: 18px 11px;
-      border: 1px solid ${props => props.theme.borders.tableRow};
-      border-bottom: 1px solid ${props => props.theme.borders.tableRow};
+      border: 0px transparent;
+      border-bottom: 0px solid transparent;
       border-radius: 0;
       line-height: 1.5rem;
       padding: 8px 0 7px 0;
-      transition: all 0.3s ease;
       @media ${bp.tinyUp} {
         display: flex;
         justify-content: space-between;
-        padding-right: 40px;
       }
 
       & > div {
         padding-left: 20px;
-        @media ${bp.tinyUp} {
-          width: 25%;
-        }
+        width: 25%;
       }
 
       &:hover {
-        border: 1px solid ${color.brightBlue};
+        border-width: 0px !important;
       }
-
       &:first-child {
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;

src/components/Deployments/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 
+import CancelDeployment from 'components/CancelDeployment';
 import { getDeploymentDuration } from 'components/Deployment';
 import BulkDeploymentLink from 'components/link/BulkDeployment';
 import DeploymentLink from 'components/link/Deployment';
@@ -32,28 +33,38 @@ const Deployments: FC<DeploymentsProps> = ({ deployments, environmentSlug, proje
     <div className="data-table">
       {!deployments.length && <div className="data-none">No Deployments</div>}
       {deployments.map(deployment => (
-        <DeploymentLink
-          deploymentSlug={deployment.name}
-          environmentSlug={environmentSlug}
-          projectSlug={projectSlug}
-          key={deployment.id}
-        >
-          <div className="data-row" data-deployment={deployment.id}>
-            <div className="name">
-              {deployment.name}
-              {deployment.bulkId && (
-                <label className="bulk-label">
-                  <BulkDeploymentLink bulkIdSlug={deployment.bulkId}>bulk</BulkDeploymentLink>
-                </label>
-              )}
+        <div className="deploymentRow" key={deployment.id}>
+          <DeploymentLink
+            deploymentSlug={deployment.name}
+            environmentSlug={environmentSlug}
+            projectSlug={projectSlug}
+            key={deployment.id}
+          >
+            <div className="data-row" data-deployment={deployment.id}>
+              <div className="name">
+                {deployment.name}
+                {deployment.bulkId && (
+                  <label className="bulk-label">
+                    <BulkDeploymentLink bulkIdSlug={deployment.bulkId}>bulk</BulkDeploymentLink>
+                  </label>
+                )}
+              </div>
+              <div className="started">
+                {moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+              </div>
+              <div className={`status ${deployment.status}`}>
+                {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
+              </div>
+              <div className="duration">{getDeploymentDuration(deployment)} </div>
             </div>
-            <div className="started">{moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}</div>
-            <div className={`status ${deployment.status}`}>
-              {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
-            </div>
-            <div className="duration">{getDeploymentDuration(deployment)}</div>
+          </DeploymentLink>
+
+          <div className="cancel-button">
+            {['new', 'pending', 'queued', 'running'].includes(deployment.status) && (
+              <CancelDeployment deployment={deployment} afterText="Cancelled" beforeText="Cancel" />
+            )}
           </div>
-        </DeploymentLink>
+        </div>
       ))}
     </div>
   </StyledDeployments>

src/components/Task/StyledTask.tsx

@@ -30,6 +30,13 @@ export const StyledTask = styled.div`
     }
 
     .field-wrapper {
+      .cancel-button {
+        button {
+          margin-right: unset !important;
+        }
+        max-height: 100px;
+        max-width: 120px;
+      }
       & > div:first-of-type {
         margin-left: 14px;
       }