From 22cadf6ac267df9675528595b2325aa7158f986e Mon Sep 17 00:00:00 2001
From: Giuseppe Steduto <giuseppe@steduto.it>
Date: Mon, 15 May 2023 15:52:42 +0200
Subject: [PATCH] wf-details: display workspace size

---
 CHANGES.rst                                       |  1 +
 .../workflowDetails/components/WorkflowInfo.js    | 15 +++++++++++++++
 .../components/WorkflowInfo.module.scss           | 10 ++++++++++
 3 files changed, 26 insertions(+)

diff --git a/CHANGES.rst b/CHANGES.rst
index e2556b7e..3739bbbe 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -7,6 +7,7 @@ Version 0.9.1 (UNRELEASED)
 - Changes the interactive session notification by adding a message stating that the session will be closed after a specified number of days inactivity.
 - Adds an extra button for login with custom third-party Keycloak SSO authentication services.
 - Changes the workflow-details page to make it possible to scroll through the list of workflow steps in the job logs section.
+- Changes the workflow-details page to show the workflow's workspace size.
 
 Version 0.9.0 (2023-01-19)
 --------------------------
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
index 72fc34f4..bd0dcf06 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
@@ -34,11 +34,15 @@ export default function WorkflowInfo({ workflow }) {
     completed,
     total,
     status,
+    size,
     launcherURL,
     session_uri: sessionUri,
     session_status: sessionStatus,
   } = workflow;
   const reanaToken = useSelector(getReanaToken);
+  const isDeleted = status === "deleted";
+  const hasDiskUsage = size.raw > 0;
+  const isDeletedUsingWorkspace = isDeleted && hasDiskUsage;
   const isSessionOpen = sessionStatus === "created";
   return (
     <div className={styles.workflow}>
@@ -65,6 +69,17 @@ export default function WorkflowInfo({ workflow }) {
             <span className={styles["launcher-label"]}>
               <LauncherLabel url={launcherURL} />
             </span>
+            <div>
+              {hasDiskUsage && (
+                <span
+                  className={`${styles.size} ${
+                    isDeletedUsingWorkspace ? styles.highlight : ""
+                  }`}
+                >
+                  <Icon name="hdd" /> {size.human_readable}
+                </span>
+              )}
+            </div>
             <Popup
               trigger={
                 <div>
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
index 26436375..1f47816b 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
@@ -24,6 +24,16 @@
     .details-box {
       display: flex;
       align-items: baseline;
+
+      .size {
+        color: $light-gray;
+        font-size: 0.75em;
+        margin-right: 0.75em;
+
+        &.highlight {
+          color: $sui-red;
+        }
+      }
     }
   }