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%);