refactor: centralize workflow info/badges in list, details pages (rea…

…nahub#394)

Closes reanahub#151
Closes reanahub#395

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

@@ -1,8 +1,8 @@
-import styles from "~/pages/workflowList/components/WorkflowBadges.module.scss";
+import styles from "./WorkflowBadges.module.scss";
 import { Divider, Label } from "semantic-ui-react";
 import { JupyterNotebookIcon, WorkflowActionsPopup } from "~/components";
 import { INTERACTIVE_SESSION_URL } from "~/client";
-import { LauncherLabel } from "~/pages/workflowDetails/components";
+import { LauncherLabel } from "~/components";
 import { getReanaToken } from "~/selectors";
 import { useSelector } from "react-redux";
 import { statusMapping } from "~/util";
@@ -21,7 +21,7 @@ export default function WorkflowBadges({ workflow, withDivider = true }) {
 
   return (
     <>
-      <Divider className={styles.divider}></Divider>
+      {withDivider && <Divider className={styles.divider}></Divider>}
       <div className={styles["badges-and-actions"]}>
         <div className={styles.badgesContainer}>
           {workflow.duration && (

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,6 +17,7 @@
 
 .workflow {
   color: $raven;
+  font-size: 1.15rem;
 
   /**FIXME visibility on hover is missing!*/
   &.hover {

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,17 @@ import {
 import BasePage from "../BasePage";
 import {
   Notification,
+  WorkflowInfo,
+  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 +141,9 @@ export default function WorkflowDetails() {
 
   return (
     <BasePage title={pageTitle}>
-      <Container>
+      <Container className={styles["workflow-details-container"]}>
         <WorkflowInfo workflow={workflow} />
+        <WorkflowBadges workflow={workflow} withDivider={false} />
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}

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

@@ -0,0 +1,3 @@
+.workflow-details-container {
+  padding-top: 2rem;
+}

reana-ui/src/pages/workflowDetails/components/index.js

@@ -2,16 +2,14 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 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.
 */
 
 export { default as WorkflowLogs } from "./WorkflowLogs";
-export { default as WorkflowInfo } from "./WorkflowInfo";
 export { default as WorkflowFiles } from "./WorkflowFiles";
 export { default as WorkflowProgress } from "./WorkflowProgress";
 export { default as WorkflowRetentionRules } from "./WorkflowRetentionRules";
 export { default as WorkflowSpecification } from "./WorkflowSpecification";
-export { default as LauncherLabel } from "./LauncherLabel";

reana-ui/src/pages/workflowList/components/WorkflowList.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.
@@ -12,11 +12,15 @@ import { Loader, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
-import { Box, WorkflowDeleteModal, WorkflowStopModal } from "~/components";
+import {
+  Box,
+  WorkflowBadges,
+  WorkflowInfo,
+  WorkflowDeleteModal,
+  WorkflowStopModal,
+} from "~/components";
 
 import styles from "./WorkflowList.module.scss";
-import WorkflowDetails from "~/pages/workflowList/components/WorkflowDetails";
-import WorkflowBadges from "~/pages/workflowList/components/WorkflowBadges";
 
 export default function WorkflowList({ workflows, loading }) {
   if (loading) return <Loader active />;
@@ -30,7 +34,7 @@ export default function WorkflowList({ workflows, loading }) {
           <Box padding={false} flex={false}>
             <Link key={workflow.id} to={`/details/${workflow.id}`}>
               <div className={styles["workflow-details-container"]}>
-                <WorkflowDetails workflow={workflow} actionsOnHover={true} />
+                <WorkflowInfo workflow={workflow} actionsOnHover={true} />
               </div>
             </Link>
             <WorkflowBadges workflow={workflow} />

reana-ui/src/pages/workflowList/components/WorkflowList.module.scss

@@ -16,7 +16,7 @@
 }
 
 .workflow-details-container {
-  padding: 1em;
+  padding: 1em 1em 0 1em;
   &:hover {
     background-color: lighten($sepia, 3%);
     border-color: darken($sepia, 10%);