From 95de1333d4219f566b8f48fff5674e1a1d19e729 Mon Sep 17 00:00:00 2001
From: Zoltan Runyo <zoltan.runyo@ess.eu>
Date: Thu, 2 Feb 2023 14:25:50 +0100
Subject: [PATCH] ICSHWI-11562: Remove duplicated deployment/job details banner

---
 src/components/Job/JobDetails.js              | 61 +++++++++++++++----
 .../deployments/DeploymentDetails.js          | 61 +++++++++++--------
 2 files changed, 85 insertions(+), 37 deletions(-)

diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index c01f109f..eb4bac34 100644
--- a/src/components/Job/JobDetails.js
+++ b/src/components/Job/JobDetails.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import {
   Grid,
   Typography,
@@ -20,6 +20,7 @@ import AccessControl from "../auth/AccessControl";
 import { theme } from "../../style/Theme";
 import { AWXJobDetails } from "../../api/DataTypes";
 import { Alert } from "@material-ui/lab";
+import AlertMessages from "../IOC/AlertMessages";
 
 const useStyles = makeStyles((theme) => ({
   csentryIdInvalid: {
@@ -27,27 +28,55 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-function createAlert(operation, job) {
+function createAlert(operation, job, finishedSuccessfully) {
   const jobDetails = new AWXJobDetails(operation.type, job);
   const message = jobDetails.message();
   const severity = jobDetails.severity();
   return (
-    <Alert
-      severity={severity}
-      variant="standard"
-    >
-      {message}
-    </Alert>
+    !finishedSuccessfully && (
+      <Alert
+        severity={severity}
+        variant="standard"
+      >
+        {message}
+      </Alert>
+    )
   );
 }
 
 export function JobDetails({ operation, job }) {
   const classes = useStyles(theme);
-  const [alert, setAlert] = useState(createAlert(operation, job));
+
+  let jobAlert = useMemo(() => operation.alerts ?? [], [operation]);
+
+  const successfulJob = useMemo(
+    () =>
+      operation &&
+      jobAlert?.length === 0 &&
+      job?.status.toLowerCase() === "successful",
+    [operation, jobAlert, job]
+  );
+
+  const [alert, setAlert] = useState(
+    createAlert(operation, job, successfulJob)
+  );
+
+  const jobDetails = useMemo(
+    () => new AWXJobDetails(operation.type, job),
+    [operation, job]
+  );
 
   useEffect(() => {
-    setAlert(createAlert(operation, job));
-  }, [setAlert, operation, job]);
+    setAlert(createAlert(operation, job, successfulJob));
+
+    // show SUCCESS message only to successful deployments (where no warnings came back from BE)
+    if (successfulJob) {
+      jobAlert.push({
+        type: "SUCCESS",
+        message: jobDetails.typeLabel() + " was successful!"
+      });
+    }
+  }, [successfulJob, jobAlert, operation, job, jobDetails]);
 
   function calculateHostText() {
     // host is resolvable => show link for users
@@ -110,6 +139,14 @@ export function JobDetails({ operation, job }) {
       container
       spacing={1}
     >
+      {jobAlert && (
+        <Grid
+          item
+          xs={12}
+        >
+          <AlertMessages alerts={jobAlert} />
+        </Grid>
+      )}
       <Grid
         item
         xs={12}
@@ -142,7 +179,7 @@ export function JobDetails({ operation, job }) {
                     "successful"
                   ].indexOf(job.status.toLowerCase())}
                   deploymentStart={operation.startDate}
-                  jobDetails={new AWXJobDetails(operation.type, job)}
+                  jobDetails={jobDetails}
                 />
               )}
             </div>
diff --git a/src/components/deployments/DeploymentDetails.js b/src/components/deployments/DeploymentDetails.js
index c96dfd28..1c744efc 100644
--- a/src/components/deployments/DeploymentDetails.js
+++ b/src/components/deployments/DeploymentDetails.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   Grid,
   Typography,
@@ -22,17 +22,19 @@ import { AWXJobDetails, DeploymentStatus } from "../../api/DataTypes";
 import { theme } from "../../style/Theme";
 import AlertMessages from "../IOC/AlertMessages";
 
-function createAlert(deployment, deploymentJob) {
+function createAlert(deployment, deploymentJob, finishedSuccessfully) {
   const deploymentStatus = new DeploymentStatus(deployment, deploymentJob);
   const message = deploymentStatus.message();
   const severity = deploymentStatus.severity();
   return (
-    <Alert
-      severity={severity}
-      variant="standard"
-    >
-      {message}
-    </Alert>
+    !finishedSuccessfully && (
+      <Alert
+        severity={severity}
+        variant="standard"
+      >
+        {message}
+      </Alert>
+    )
   );
 }
 
@@ -43,28 +45,42 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export function DeploymentDetails({ deployment, deploymentJob }) {
-  const [alert, setAlert] = useState(createAlert(deployment, deploymentJob));
-
   const classes = useStyles(theme);
 
   let deplAlert = deployment.alerts;
 
+  const successfulJob = useMemo(
+    () =>
+      deployment &&
+      deplAlert?.length === 0 &&
+      deploymentJob?.status.toLowerCase() === "successful",
+    [deployment, deplAlert, deploymentJob]
+  );
+
+  const [alert, setAlert] = useState(
+    createAlert(deployment, deploymentJob, successfulJob)
+  );
+
+  const jobDetails = useMemo(
+    () =>
+      new AWXJobDetails(
+        deployment.undeployment ? "UNDEPLOY" : "DEPLOY",
+        deploymentJob
+      ),
+    [deployment, deploymentJob]
+  );
+
   useEffect(() => {
-    setAlert(createAlert(deployment, deploymentJob));
+    setAlert(createAlert(deployment, deploymentJob, successfulJob));
 
     // show SUCCESS message only to successful deployments (where no warnings came back from BE)
-    if (
-      deployment &&
-      deplAlert?.length === 0 &&
-      !deployment.undeployment &&
-      deploymentJob?.status.toLowerCase() === "successful"
-    ) {
+    if (successfulJob) {
       deplAlert.push({
         type: "SUCCESS",
-        message: "Deployment was successful!"
+        message: jobDetails.typeLabel() + " was successful!"
       });
     }
-  }, [deployment, deploymentJob, deplAlert]);
+  }, [successfulJob, deplAlert, deployment, deploymentJob, jobDetails]);
 
   function calculateHostText() {
     // host is resolvable => show link for users
@@ -174,12 +190,7 @@ export function DeploymentDetails({ deployment, deploymentJob }) {
                     "successful"
                   ].indexOf(deploymentJob.status.toLowerCase())}
                   deploymentStart={deployment.startDate}
-                  jobDetails={
-                    new AWXJobDetails(
-                      deployment.undeployment ? "UNDEPLOY" : "DEPLOY",
-                      deploymentJob
-                    )
-                  }
+                  jobDetails={jobDetails}
                 />
               )}
             </div>
-- 
GitLab