From d89181c6014b50f4280593cc7dd05a3340ca3bf7 Mon Sep 17 00:00:00 2001
From: Giuseppe Steduto <giuseppe@steduto.it>
Date: Mon, 8 May 2023 13:58:40 +0200
Subject: [PATCH] wf-details: display workflow size

Both `WorkflowList` and `WorkflowDetails` now use the same `WorkflowInfo` component. To account for small differences between the ways in which this component should be rendered in the two pages, a new `.workflow-details` class has been added, with some rules that are only applied in the workflow-details page (e.g. display the launcher label).

Closes #151
---
 CHANGES.rst                                   |   1 +
 reana-ui/src/components/Box.js                |  16 ++-
 reana-ui/src/components/Box.module.scss       |   4 +
 .../src/components/WorkflowActionsPopup.js    |   2 +-
 .../pages/workflowDetails/WorkflowDetails.js  |   7 +-
 .../components/WorkflowInfo.js                | 120 ++++++++++--------
 .../components/WorkflowInfo.module.scss       |  59 +++++++--
 .../workflowList/components/WorkflowList.js   | 103 ++-------------
 .../components/WorkflowList.module.scss       |  62 ---------
 9 files changed, 153 insertions(+), 221 deletions(-)

diff --git a/CHANGES.rst b/CHANGES.rst
index e2556b7e..9de95e92 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -5,6 +5,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.
+- Changes the workflow-details page to show the workflow's workspace size.
 - 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.
 
diff --git a/reana-ui/src/components/Box.js b/reana-ui/src/components/Box.js
index 59b23bf9..6c261c7f 100644
--- a/reana-ui/src/components/Box.js
+++ b/reana-ui/src/components/Box.js
@@ -8,9 +8,21 @@
 
 import styles from "./Box.module.scss";
 
-export default function Box({ children, className, wrap = false }) {
+export default function Box({
+  children,
+  className,
+  wrap = false,
+  flex = true,
+}) {
   return (
-    <div className={`${styles.box} ${className} ${wrap ? styles.wrap : ""}`}>
+    <div
+      className={`
+        ${styles.box} 
+        ${className} 
+        ${wrap ? styles.wrap : ""} 
+        ${!flex ? styles["no-flex"] : ""}
+      `}
+    >
       {children}
     </div>
   );
diff --git a/reana-ui/src/components/Box.module.scss b/reana-ui/src/components/Box.module.scss
index 17c79b08..11f71096 100644
--- a/reana-ui/src/components/Box.module.scss
+++ b/reana-ui/src/components/Box.module.scss
@@ -19,4 +19,8 @@
   &.wrap {
     flex-wrap: wrap;
   }
+
+  &.no-flex {
+    display: block !important;
+  }
 }
diff --git a/reana-ui/src/components/WorkflowActionsPopup.js b/reana-ui/src/components/WorkflowActionsPopup.js
index 449d877c..7c62c9c1 100644
--- a/reana-ui/src/components/WorkflowActionsPopup.js
+++ b/reana-ui/src/components/WorkflowActionsPopup.js
@@ -107,7 +107,7 @@ export default function WorkflowActionsPopup({ workflow, className }) {
   }
 
   return (
-    <div className={className || styles.container}>
+    <div className={`${className} ${styles.container}`}>
       {menuItems.length > 0 && (
         <Popup
           basic
diff --git a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
index 0e67396e..6f4923ba 100644
--- a/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
+++ b/reana-ui/src/pages/workflowDetails/WorkflowDetails.js
@@ -28,7 +28,9 @@ import {
   WorkflowLogs,
   WorkflowFiles,
   WorkflowSpecification,
+  WorkflowProgress,
 } from "./components";
+import styles from "~/pages/workflowDetails/components/WorkflowInfo.module.scss";
 
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
@@ -136,7 +138,10 @@ export default function WorkflowDetails() {
   return (
     <BasePage title={pageTitle}>
       <Container>
-        <WorkflowInfo workflow={workflow} />
+        <div className={`${styles.workflow} ${styles["workflow-details"]}`}>
+          <WorkflowInfo workflow={workflow} withBottomPadding={true} />
+          <WorkflowProgress workflow={workflow} />
+        </div>
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
index 72fc34f4..522e821f 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
@@ -16,7 +16,7 @@ import { INTERACTIVE_SESSION_URL } from "~/client";
 import { NON_FINISHED_STATUSES } from "~/config";
 import { getReanaToken } from "~/selectors";
 import { statusMapping } from "~/util";
-import { LauncherLabel, WorkflowProgress } from "../components";
+import { LauncherLabel } from "../components";
 import { JupyterNotebookIcon, WorkflowActionsPopup } from "~/components";
 import styles from "./WorkflowInfo.module.scss";
 
@@ -33,24 +33,40 @@ export default function WorkflowInfo({ workflow }) {
     duration,
     completed,
     total,
+    size,
     status,
     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}>
-      <section className={styles.info}>
-        <div className={styles["details-box"]}>
-          <Icon
-            name={statusMapping[status].icon}
-            color={statusMapping[status].color}
-          />
+    <section className={styles.info}>
+      <div className={styles["details-box"]}>
+        <Icon
+          name={statusMapping[status].icon}
+          color={statusMapping[status].color}
+        />
+        <div>
+          <span className={styles.name}>{name}</span>
+          <span className={styles.run}>#{run}</span>
+          <span className={styles["launcher-label"]}>
+            <LauncherLabel url={launcherURL} />
+          </span>
           <div>
-            <span className={styles["name"]}>{name}</span>
-            <span className={styles["run"]}>#{run}</span>
+            {hasDiskUsage && (
+              <span
+                className={`${styles["size"]} ${
+                  isDeletedUsingWorkspace ? styles["highlight"] : ""
+                }`}
+              >
+                <Icon name="hdd" /> {size.human_readable}
+              </span>
+            )}
             {isSessionOpen && (
               <a
                 href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
@@ -62,55 +78,51 @@ export default function WorkflowInfo({ workflow }) {
                 <JupyterNotebookIcon />
               </a>
             )}
-            <span className={styles["launcher-label"]}>
-              <LauncherLabel url={launcherURL} />
-            </span>
-            <Popup
-              trigger={
-                <div>
-                  {friendlyFinished
-                    ? `Finished ${friendlyFinished}`
-                    : friendlyStarted
-                    ? `Started ${friendlyStarted}`
-                    : `Created ${friendlyCreated}`}
-                </div>
-              }
-              content={
-                friendlyFinished
-                  ? finishedDate
-                  : friendlyStarted
-                  ? startedDate
-                  : createdDate
-              }
-            />
           </div>
+          <Popup
+            trigger={
+              <div>
+                {friendlyFinished
+                  ? `Finished ${friendlyFinished}`
+                  : friendlyStarted
+                  ? `Started ${friendlyStarted}`
+                  : `Created ${friendlyCreated}`}
+              </div>
+            }
+            content={
+              friendlyFinished
+                ? finishedDate
+                : friendlyStarted
+                ? startedDate
+                : createdDate
+            }
+          />
         </div>
-        <div className={styles.info}>
+      </div>
+      <div className={styles["status-box"]}>
+        <div>
+          <div className={styles["first-row"]}>
+            <span
+              className={`${styles["status"]} sui-${statusMapping[status].color}`}
+            >
+              {status}
+            </span>{" "}
+            {statusMapping[status].preposition} {duration}
+            {NON_FINISHED_STATUSES.includes(status) && (
+              <Icon
+                name="refresh"
+                className={styles.refresh}
+                onClick={() => window.location.reload()}
+              />
+            )}
+          </div>
           <div>
-            <div className={styles["first-row"]}>
-              <span
-                className={`${styles["status"]} sui-${statusMapping[status].color}`}
-              >
-                {status}
-              </span>{" "}
-              {statusMapping[status].preposition} {duration}
-              {NON_FINISHED_STATUSES.includes(status) && (
-                <Icon
-                  name="refresh"
-                  className={styles.refresh}
-                  onClick={() => window.location.reload()}
-                />
-              )}
-            </div>
-            <div>
-              step {completed}/{total}
-            </div>
+            step {completed}/{total}
           </div>
-          <WorkflowActionsPopup workflow={workflow} />
         </div>
-      </section>
-      <WorkflowProgress workflow={workflow} />
-    </div>
+      </div>
+      <WorkflowActionsPopup workflow={workflow} className={styles.actions} />
+    </section>
   );
 }
 
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
index 26436375..b8b6fccf 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.module.scss
@@ -12,18 +12,34 @@
 
 .workflow {
   color: $raven;
-  margin: 2rem 0;
   font-size: 16px;
+  line-height: 1.5;
 
   .info {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 1em;
     flex-shrink: 0;
 
     .details-box {
       display: flex;
       align-items: baseline;
+      flex-grow: 1;
+      margin-right: 1em;
+    }
+
+    .status-box {
+      width: 210px;
+      flex-shrink: 0;
+    }
+
+    .size {
+      color: $light-gray;
+      font-size: 0.75em;
+      margin-right: 0.75em;
+
+      &.highlight {
+        color: $sui-red;
+      }
     }
   }
 
@@ -51,18 +67,45 @@
     margin-left: 1em;
     position: relative;
     top: 10px;
+    display: none;
+  }
+
+  .launcher-label {
+    vertical-align: bottom;
+    display: none;
+  }
+
+  .actions {
+    visibility: hidden;
+    margin-left: 0;
+  }
 
-    &:hover {
-      color: $dark-gray;
+  &:hover {
+    .actions {
+      visibility: visible;
     }
   }
+}
 
-  .notebook {
-    margin-left: 1em;
-    margin: 0.7em;
+/**
+  These styles are only applied in the "workflow-details" page
+ */
+.workflow-details {
+  margin: 2rem 0;
+
+  .info {
+    padding-bottom: 1em;
   }
 
   .launcher-label {
-    vertical-align: bottom;
+    display: inline-block;
+  }
+
+  .refresh {
+    display: inline-block;
+  }
+
+  .actions {
+    visibility: visible;
   }
 }
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.js b/reana-ui/src/pages/workflowList/components/WorkflowList.js
index 98aaa762..51a12214 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.js
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.js
@@ -23,7 +23,9 @@ import {
 } from "~/components";
 import { statusMapping } from "~/util";
 
-import styles from "./WorkflowList.module.scss";
+import workflowListStyles from "./WorkflowList.module.scss";
+import styles from "~/pages/workflowDetails/components/WorkflowInfo.module.scss";
+import { WorkflowInfo } from "~/pages/workflowDetails/components";
 
 export default function WorkflowList({ workflows, loading }) {
   const reanaToken = useSelector(getReanaToken);
@@ -35,101 +37,16 @@ export default function WorkflowList({ workflows, loading }) {
   return (
     <>
       {workflows.map((workflow) => {
-        const {
-          id,
-          name,
-          run,
-          createdDate,
-          startedDate,
-          finishedDate,
-          friendlyCreated,
-          friendlyStarted,
-          friendlyFinished,
-          duration,
-          completed,
-          total,
-          size,
-          status,
-          session_uri: sessionUri,
-          session_status: sessionStatus,
-        } = workflow;
-        const isDeleted = status === "deleted";
-        const hasDiskUsage = size.raw > 0;
-        const isDeletedUsingWorkspace = isDeleted && hasDiskUsage;
-        const isSessionOpen = sessionStatus === "created";
+        const isDeleted = workflow.status === "deleted";
         return (
-          <Link key={id} to={`/details/${id}`}>
+          <Link key={workflow.id} to={`/details/${workflow.id}`}>
             <Box
-              className={`${styles.workflow} ${
-                isDeleted ? styles["deleted"] : ""
-              }`}
+              className={`${workflowListStyles.workflow} ${
+                isDeleted ? workflowListStyles["deleted"] : ""
+              } ${styles.workflow}`}
+              flex={false}
             >
-              <div className={styles["details-box"]}>
-                <Icon
-                  className={styles["status-icon"]}
-                  name={statusMapping[status].icon}
-                  color={statusMapping[status].color}
-                />
-                <div>
-                  <span className={styles.name}>{name}</span>
-                  <span className={styles.run}>#{run}</span>
-                  <div>
-                    {hasDiskUsage && (
-                      <span
-                        className={`${styles.size} ${
-                          isDeletedUsingWorkspace ? styles.highlight : ""
-                        }`}
-                      >
-                        <Icon name="hdd" /> {size.human_readable}
-                      </span>
-                    )}
-                    {isSessionOpen && (
-                      <a
-                        href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        onClick={(e) => e.stopPropagation()}
-                        className={styles.notebook}
-                      >
-                        <JupyterNotebookIcon />
-                      </a>
-                    )}
-                  </div>
-                  <Popup
-                    trigger={
-                      <div>
-                        {friendlyFinished
-                          ? `Finished ${friendlyFinished}`
-                          : friendlyStarted
-                          ? `Started ${friendlyStarted}`
-                          : `Created ${friendlyCreated}`}
-                      </div>
-                    }
-                    content={
-                      friendlyFinished
-                        ? finishedDate
-                        : friendlyStarted
-                        ? startedDate
-                        : createdDate
-                    }
-                  />
-                </div>
-              </div>
-              <div className={styles["status-box"]}>
-                <span
-                  className={`${styles["status"]} sui-${statusMapping[status].color}`}
-                >
-                  {status}
-                </span>{" "}
-                {statusMapping[status].preposition} {duration}
-                <div>
-                  step {completed}/{total}
-                </div>
-              </div>
-              <WorkflowActionsPopup
-                workflow={workflow}
-                className={styles.actions}
-              />
+              <WorkflowInfo workflow={workflow} />
             </Box>
           </Link>
         );
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
index d631ecc7..c97f2bf8 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
@@ -16,71 +16,9 @@
     border-color: darken($sepia, 10%);
     cursor: pointer;
     color: $raven;
-
-    .actions {
-      visibility: visible;
-    }
   }
 
   &.deleted {
     opacity: 0.5;
   }
-
-  .details-box {
-    display: flex;
-    align-items: baseline;
-    flex-grow: 1;
-    margin-right: 1em;
-    word-wrap: anywhere;
-
-    .status-icon {
-      padding-right: 20px;
-    }
-
-    .name {
-      font-size: 1.3em;
-    }
-
-    .run {
-      padding-left: 0.8em;
-    }
-
-    .size {
-      color: $light-gray;
-      font-size: 0.75em;
-      margin-right: 0.75em;
-
-      &.highlight {
-        color: $sui-red;
-      }
-    }
-  }
-
-  .name,
-  .status {
-    font-weight: bold;
-  }
-
-  .status,
-  .run {
-    font-size: 1.2em;
-  }
-
-  .status-box {
-    width: 210px;
-    flex-shrink: 0;
-  }
-
-  .actions {
-    visibility: hidden;
-    min-width: 22px;
-
-    &:hover {
-      color: darken($sepia, 30%);
-    }
-  }
-
-  .notebook {
-    font-size: 0.85em;
-  }
 }