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

Closes reanahub#151
Closes reanahub#395

Author: giuseppe-steduto

…kflowDetails/components/LauncherLabel.js reana-ui/src/components/LauncherLabel.jsreana-ui/src/pages/workflowDetails/components/LauncherLabel.js renamed to reana-ui/src/components/LauncherLabel.js reana-ui/src/pages/workflowDetails/components/LauncherLabel.js renamed to reana-ui/src/components/LauncherLabel.js

@@ -0,0 +1,66 @@
+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"
+            as="a"
+            href={"/details/" + id}
+            target="_blank"
+            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.js

@@ -8,30 +8,6 @@
   under the terms of the MIT License; see LICENSE file for more details.
 */
 
-.divider {
-  margin: 0 !important;
-  border-color: #f8f8f8 !important;
-}
-
-.badges-and-actions {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.75em 1em;
-
-  .actions {
-    min-width: 22px;
-
-    &:hover {
-      color: #d1d1d1;
-    }
-
-    &.always-visible {
-      visibility: visible;
-    }
-  }
-}
-
 .badgesContainer {
   display: flex;
 

…st/components/WorkflowBadges.module.scss …rc/components/WorkflowBadges.module.scssreana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss renamed to reana-ui/src/components/WorkflowBadges.module.scss reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss renamed to reana-ui/src/components/WorkflowBadges.module.scss

@@ -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,
 };

…rkflowList/components/WorkflowDetails.js reana-ui/src/components/WorkflowInfo.jsreana-ui/src/pages/workflowList/components/WorkflowDetails.js renamed to reana-ui/src/components/WorkflowInfo.js reana-ui/src/pages/workflowList/components/WorkflowDetails.js renamed to reana-ui/src/components/WorkflowInfo.js

@@ -17,6 +17,7 @@
 
 .workflow {
   color: $raven;
+  font-size: 1.15rem;
 
   /**FIXME visibility on hover is missing!*/
   &.hover {
@@ -73,7 +74,7 @@
     width: 210px;
     flex-shrink: 0;
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     text-align: right;
   }
 

…t/components/WorkflowDetails.module.scss …/src/components/WorkflowInfo.module.scssreana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss renamed to reana-ui/src/components/WorkflowInfo.module.scss reana-ui/src/pages/workflowList/components/WorkflowDetails.module.scss renamed to reana-ui/src/components/WorkflowInfo.module.scss

@@ -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.

…/components/WorkflowProgressCircleBar.js …/components/WorkflowProgressCircleBar.jsreana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js renamed to reana-ui/src/components/WorkflowProgressCircleBar.js reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.js renamed to reana-ui/src/components/WorkflowProgressCircleBar.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";

…ts/WorkflowProgressCircleBar.module.scss …ts/WorkflowProgressCircleBar.module.scssreana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.module.scss renamed to reana-ui/src/components/WorkflowProgressCircleBar.module.scss reana-ui/src/pages/workflowList/components/WorkflowProgressCircleBar.module.scss renamed to reana-ui/src/components/WorkflowProgressCircleBar.module.scss

@@ -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}