refactor: centralize workflow info/badges in list, details pages (#394)

Closes #151
Closes #395

reana-ui/src/components/WorkflowBadges.js

@@ -0,0 +1,63 @@
+import styles from "./WorkflowBadges.module.scss";
+import { Label } from "semantic-ui-react";
+import { JupyterNotebookIcon } from "~/components";
+import { INTERACTIVE_SESSION_URL } from "~/client";
+import { LauncherLabel } from "~/components";
+import { getReanaToken } from "~/selectors";
+import { useSelector } from "react-redux";
+import { statusMapping } from "~/util";
+
+export default function WorkflowBadges({ workflow }) {
+  const reanaToken = useSelector(getReanaToken);
+  const {
+    id,
+    size,
+    launcherURL,
+    session_uri: sessionUri,
+    session_status: sessionStatus,
+  } = workflow;
+  const hasDiskUsage = size.raw > 0;
+  const isSessionOpen = sessionStatus === "created";
+
+  return (
+    <>
+      <div className={styles.badgesContainer}>
+        {workflow.duration && (
+          <Label
+            size="tiny"
+            content={workflow.duration}
+            icon="clock"
+            rel="noopener noreferrer"
+            color={statusMapping[workflow.status].color}
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        {hasDiskUsage && (
+          <Label
+            size="tiny"
+            content={size.human_readable}
+            icon="hdd"
+            as="a"
+            href={"/details/" + id}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        {isSessionOpen && (
+          <Label
+            size="tiny"
+            content={"Notebook"}
+            icon={<JupyterNotebookIcon size={12} />}
+            as="a"
+            href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+          />
+        )}
+        <LauncherLabel url={launcherURL} />
+      </div>
+    </>
+  );
+}

reana-ui/src/components/WorkflowBadges.module.scss

@@ -0,0 +1,23 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2023 CERN.
+
+  REANA is free software; you can redistribute it and/or modify it
+  under the terms of the MIT License; see LICENSE file for more details.
+*/
+
+.badgesContainer {
+  display: flex;
+
+  a:global(.label) {
+    margin-left: 15px;
+    gap: 10px;
+
+    &:hover {
+      cursor: pointer;
+      filter: opacity(0.8);
+    }
+  }
+}

reana-ui/src/pages/workflowList/components/WorkflowDetails.js → reana-ui/src/components/WorkflowInfo.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2023 CERN.
+  Copyright (C) 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -13,10 +13,10 @@ import PropTypes from "prop-types";
 
 import { statusMapping } from "~/util";
 
-import styles from "./WorkflowDetails.module.scss";
-import WorkflowProgressCircleBar from "~/pages/workflowList/components/WorkflowProgressCircleBar";
+import styles from "./WorkflowInfo.module.scss";
+import { WorkflowProgressCircleBar } from "~/components";
 
-export default function WorkflowDetails({ workflow }) {
+export default function WorkflowInfo({ workflow }) {
   const {
     name,
     run,
@@ -87,6 +87,6 @@ export default function WorkflowDetails({ workflow }) {
   );
 }
 
-WorkflowDetails.propTypes = {
+WorkflowInfo.propTypes = {
   workflow: PropTypes.object.isRequired,
 };

reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss → reana-ui/src/components/WorkflowInfo.module.scss

@@ -17,13 +17,7 @@
 
 .workflow {
   color: $raven;
-
-  /**FIXME visibility on hover is missing!*/
-  &.hover {
-    .actions {
-      visibility: visible !important;
-    }
-  }
+  font-size: 1.15rem;
 
   &.deleted {
     opacity: 0.5;
@@ -47,16 +41,6 @@
     .run {
       padding-left: 0.8em;
     }
-
-    .size {
-      color: $light-gray;
-      font-size: 0.75em;
-      margin-right: 0.75em;
-
-      &.highlight {
-        color: $sui-red;
-      }
-    }
   }
 
   .name,
@@ -73,17 +57,12 @@
     width: 210px;
     flex-shrink: 0;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     text-align: right;
   }
 
   .progressbar-container {
     width: 80px;
-    padding: 10px;
-    padding-top: 0;
-  }
-
-  .notebook {
-    font-size: 0.85em;
+    padding: 0 10px;
   }
 }

reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js → reana-ui/src/components/WorkflowProgressCircleBar.js

@@ -16,7 +16,7 @@ export default function WorkflowProgressCircleBar({ workflow }) {
 
   const size = 80;
   const strokeWidth = 10;
-  const radius = size / 2 - strokeWidth;
+  const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
 
   let lengthFinishedArc = (completed / total) * circumference;

reana-ui/src/pages/workflowDetails/components/__tests__/LauncherLabel.test.js → reana-ui/src/components/__tests__/LauncherLabel.test.js

@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.

reana-ui/src/components/index.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2021, 2022, 2023 CERN.
+  Copyright (C) 2020, 2021, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -16,10 +16,14 @@ export { default as Pagination } from "./Pagination";
 export { default as Title } from "./Title";
 export { default as TopHeader } from "./TopHeader";
 export { default as TooltipIfTruncated } from "./TooltipIfTruncated";
+export { default as LauncherLabel } from "./LauncherLabel";
 export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";
 export { default as WorkflowDeleteModal } from "./WorkflowDeleteModal";
+export { default as WorkflowInfo } from "./WorkflowInfo";
+export { default as WorkflowBadges } from "./WorkflowBadges";
 export { default as WorkflowStopModal } from "./WorkflowStopModal";
 export { default as WorkflowActionsPopup } from "./WorkflowActionsPopup";
+export { default as WorkflowProgressCircleBar } from "./WorkflowProgressCircleBar";
 export { default as PieChart } from "./PieChart";
 export { default as Search } from "./Search";
 export { default as Box } from "./Box";

reana-ui/src/pages/workflowDetails/WorkflowDetails.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022, 2023 CERN.
+  Copyright (C) 2020, 2022, 2023, 2024 CERN.
 
   REANA is free software; you can redistribute it and/or modify it
   under the terms of the MIT License; see LICENSE file for more details.
@@ -24,15 +24,18 @@ import {
 import BasePage from "../BasePage";
 import {
   Notification,
+  WorkflowInfo,
+  WorkflowActionsPopup,
+  WorkflowBadges,
   WorkflowDeleteModal,
   WorkflowStopModal,
 } from "~/components";
 import {
-  WorkflowInfo,
   WorkflowLogs,
   WorkflowFiles,
   WorkflowSpecification,
 } from "./components";
+import styles from "./WorkflowDetails.module.scss";
 
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
@@ -139,8 +142,14 @@ export default function WorkflowDetails() {
 
   return (
     <BasePage title={pageTitle}>
-      <Container>
+      <Container className={styles["workflow-details-container"]}>
         <WorkflowInfo workflow={workflow} />
+        <div className={styles["badges-and-actions"]}>
+          <WorkflowBadges workflow={workflow} withDivider={false} />
+          <div className={styles.actionsContainer}>
+            <WorkflowActionsPopup workflow={workflow} />
+          </div>
+        </div>
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}

reana-ui/src/pages/workflowDetails/WorkflowDetails.module.scss

@@ -0,0 +1,10 @@
+.workflow-details-container {
+  padding-top: 2rem;
+}
+
+.badges-and-actions {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 0.75rem 1rem 1rem;
+}