Add pending message screen for `deployment tasks`

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

src/@types/MainItem.ts

@@ -114,6 +114,7 @@ export type DeploymentItem = BaseItem & {
   type: "deployment";
   transfer_id: string;
   transfer_scenario_type: string;
+  deployer_id: string;
 };
 
 export type DeploymentItemOptions = DeploymentItem & {

src/components/modules/TransferModule/DeploymentDetailsContent/DeploymentDetailsContent.tsx

@@ -22,12 +22,16 @@ import { Network } from "@src/@types/Network";
 import DetailsNavigation from "@src/components/modules/NavigationModule/DetailsNavigation";
 import MainDetails from "@src/components/modules/TransferModule/MainDetails";
 import Tasks from "@src/components/modules/TransferModule/Tasks";
+import { ThemePalette } from "@src/components/Theme";
 import { ThemeProps } from "@src/components/Theme";
 import Button from "@src/components/ui/Button";
 
 import type { Instance } from "@src/@types/Instance";
 import type { Endpoint, StorageBackend } from "@src/@types/Endpoint";
 import type { Field } from "@src/@types/Field";
+
+import show_execution from "./images/show_execution.svg";
+
 const Wrapper = styled.div<any>`
   display: flex;
   justify-content: center;
@@ -43,6 +47,35 @@ const DetailsBody = styled.div<any>`
   ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `;
 
+const ShowExecution = styled.div<any>`
+  width: 96px;
+  height: 96px;
+  background: url("${show_execution}");
+  margin: 106px 0 43px 0;
+`;
+
+const PendingMessage = styled.div`
+  background: ${ThemePalette.grayscale[7]};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 74px;
+`;
+
+const NoPendingDeploymentTitle = styled.div<any>`
+  font-size: 18px;
+  margin-bottom: 10px;
+`;
+
+const ErrorMessage = styled.div<any>`
+  font-size: 18px;
+  margin-bottom: 10px;
+`;
+
+const StyledButton = styled(Button)`
+  margin-top: 20px;
+`;
+
 const NavigationItems = [
   {
     label: "Deployment",
@@ -70,6 +103,7 @@ type Props = {
   endpoints: Endpoint[];
   page: string;
   onDeleteDeploymentClick: () => void;
+  onShowExecutionClick: () => void;
 };
 @observer
 class DeploymentDetailsContent extends React.Component<Props> {
@@ -121,6 +155,39 @@ class DeploymentDetailsContent extends React.Component<Props> {
     );
   }
 
+  renderPendingMessage() {
+    const { item } = this.props;
+    if (!item) {
+      return null;
+    }
+
+    if (item.last_execution_status === "PENDING") {
+      return (
+        <PendingMessage>
+          <ShowExecution />
+          <NoPendingDeploymentTitle>
+            Current deployment is waiting for its deployer execution to finish.
+          </NoPendingDeploymentTitle>
+          <StyledButton onClick={this.props.onShowExecutionClick}>Show Execution</StyledButton>
+        </PendingMessage>
+      );
+    }
+
+    if (item.last_execution_status === "ERROR") {
+      return (
+        <PendingMessage>
+          <ShowExecution />
+          <ErrorMessage>
+            The deployer execution was not able to complete.
+          </ErrorMessage>
+          <StyledButton onClick={this.props.onShowExecutionClick}>Show Execution</StyledButton>
+        </PendingMessage>
+      );
+    }
+
+    return null;
+  }
+
   render() {
     return (
       <Wrapper>
@@ -133,6 +200,9 @@ class DeploymentDetailsContent extends React.Component<Props> {
         <DetailsBody>
           {this.renderMainDetails()}
           {this.renderTasks()}
+          {this.props.page === "tasks" && !this.props.item?.tasks ? (
+            this.renderPendingMessage()
+          ) : null}
         </DetailsBody>
       </Wrapper>
     );

src/components/modules/TransferModule/DeploymentDetailsContent/images/show_execution.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="96px" height="96px" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Icon/Execution/96" stroke="#0044CA" stroke-width="1.5">
+            <g id="Group" transform="translate(6.000000, 0.000000)">
+                <path d="M46.0613983,6.19384586 C44.7249018,6.06560529 43.3701124,6 42,6 C18.8040405,6 0,24.8040405 0,48 C0,60.8664574 5.78554753,72.3816277 14.8970235,80.085892 M36.1894906,89.6013306 C38.0887008,89.8641606 40.0284869,90 42,90 L42,90 C65.1959595,90 84,71.1959595 84,48 C84,35.2367569 78.3069031,23.8032079 69.321609,16.1002526" id="Oval-6"></path>
+                <polyline id="Stroke-9-Copy" stroke-linejoin="round" points="41 94.9284632 35.5192308 89.689779 40.7431781 84.1935484"></polyline>
+                <polyline id="Stroke-9-Copy-2" stroke-linejoin="round" transform="translate(43.740385, 6.206167) scale(-1, 1) translate(-43.740385, -6.206167) " points="46.4807692 11.5736245 41 6.33494027 46.2239473 0.838709677"></polyline>
+                <path d="M42,31 L42,65" id="Line"></path>
+                <path d="M25,48 L59,48" id="Line-Copy"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/smart/DeploymentDetailsPage/DeploymentDetailsPage.tsx

@@ -292,6 +292,15 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
     }
   }
 
+  handleShowExecutionClick() {
+    if (!deploymentStore.deploymentDetails?.deployer_id) {
+      return;
+    }
+    this.props.history.push(
+      `/transfers/${deploymentStore.deploymentDetails.transfer_id}/executions`
+    );
+  }
+
   handleRecreateClick() {
     if (!deploymentStore.deploymentDetails?.transfer_id) {
       this.setState({ showEditModal: true, pausePolling: true });
@@ -569,6 +578,9 @@ class DeploymentDetailsPage extends React.Component<Props, State> {
               onDeleteDeploymentClick={() => {
                 this.handleDeleteDeploymentClick();
               }}
+              onShowExecutionClick={() => {
+                this.handleShowExecutionClick();
+              }}
             />
           }
         />