+
<span>Your workflows</span>
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowBadges.js b/reana-ui/src/pages/workflowList/components/WorkflowBadges.js
deleted file mode 100644
index 3bd4b2d8..00000000
--- a/reana-ui/src/pages/workflowList/components/WorkflowBadges.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import styles from "~/pages/workflowList/components/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 { getReanaToken } from "~/selectors";
-import { useSelector } from "react-redux";
-import { statusMapping } from "~/util";
-
-export default function WorkflowBadges({ workflow, withDivider = true }) {
- 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 (
- <>
- <Divider className={styles.divider}></Divider>
- <div className={styles["badges-and-actions"]}>
- <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>
- <div className={styles.actionsContainer}>
- <WorkflowActionsPopup
- workflow={workflow}
- className={`${styles.actions} ${styles["always-visible"]}`}
- />
- </div>
- </div>
- </>
- );
-}
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss b/reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss
deleted file mode 100644
index 538886f7..00000000
--- a/reana-ui/src/pages/workflowList/components/WorkflowBadges.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- -*- 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.
-*/
-
-.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;
-
- a.label {
- background-color: transparent;
- margin-left: 15px;
-
- &:hover {
- cursor: pointer;
- filter: opacity(0.8);
- }
-
- &:not(:first-child) {
- margin-left: 15px;
- }
- }
-}
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.js b/reana-ui/src/pages/workflowList/components/WorkflowList.js
index 43d181e5..f8bc70f4 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.js
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.js
@@ -8,15 +8,21 @@
under the terms of the MIT License; see LICENSE file for more details.
*/
-import { Loader, Message } from "semantic-ui-react";
+import { Loader, Message, Divider } from "semantic-ui-react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
-import { Box, WorkflowDeleteModal, WorkflowStopModal, InteractiveSessionModal } from "~/components";
+import {
+ Box,
+ WorkflowBadges,
+ WorkflowInfo,
+ WorkflowDeleteModal,
+ WorkflowStopModal,
+ WorkflowActionsPopup,
+ InteractiveSessionModal,
+} 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,10 +36,19 @@ 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} />
+ <Divider className={styles.divider}></Divider>
+ <div className={styles["badges-and-actions"]}>
+ <WorkflowBadges workflow={workflow} />
+ <div className={styles.actionsContainer}>
+ <WorkflowActionsPopup
+ workflow={workflow}
+ className={`${styles.actions} ${styles["always-visible"]}`}
+ />
+ </div>
+ </div>
</Box>
);
})}
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
index defe5a2e..ad8b5ddf 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
+++ b/reana-ui/src/pages/workflowList/components/WorkflowList.module.scss
@@ -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.
@@ -15,6 +15,31 @@
justify-content: space-between;
}
+.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;
+ cursor: pointer;
+
+ &:hover {
+ color: #d1d1d1;
+ }
+
+ &.always-visible {
+ visibility: visible;
+ }
+ }
+}
+
.workflow-details-container {
padding: 1em;
&:hover {