feat(workflow-list): unify badges style and remove nested links (rean…

…ahub#394)

Change the style of the workflow badges (Jupyter notebook, GitHub, ...)
to unify their style. Move the workflow duration to another badge in the
bottom section of the workflow box. Move the actions button to the same
section to avoid having nested interactive element and comply with the
W3 HTML specifications.

reana-ui/src/components/Box.js

@@ -8,9 +8,18 @@
 
 import styles from "./Box.module.scss";
 
-export default function Box({ children, className, wrap = false }) {
+export default function Box({
+  children,
+  className,
+  padding = true,
+  flex = true,
+}) {
   return (
-    <div className={`${styles.box} ${className} ${wrap ? styles.wrap : ""}`}>
+    <div
+      className={`${styles.box} ${className} ${padding ? styles.padding : ""} ${
+        flex ? styles.flex : ""
+      }`}
+    >
       {children}
     </div>
   );

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

@@ -9,12 +9,19 @@
 @import "@palette";
 
 .box {
-  display: flex;
-  justify-content: space-between;
   color: $raven;
   border: 5px solid $sepia;
   margin: 1rem 0;
-  padding: 1em 1em;
+  padding: 0;
+
+  &.padding {
+    padding: 1em 1em;
+  }
+
+  &.flex {
+    display: flex;
+    justify-content: space-between;
+  }
 
   &.wrap {
     flex-wrap: wrap;

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

@@ -32,13 +32,11 @@ export default function LauncherLabel({ url }) {
         trigger={
           <Label
             size="tiny"
-            color="grey"
             as="a"
             href={url}
             target="_blank"
             rel="noopener noreferrer"
             {...getProps(url)}
-            basic
           />
         }
         content={url}

reana-ui/src/pages/workflowList/WorkflowList.js

@@ -132,7 +132,7 @@ function Workflows() {
   );
 
   return (
-    <div className={styles.container}>
+    <div className={`${styles.container} ${styles["workflow-list-container"]}`}>
       <Container text>
         <Title className={styles.title}>
           <span>Your workflows</span>

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

@@ -0,0 +1,75 @@
+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>
+    </>
+  );
+}

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

@@ -0,0 +1,51 @@
+/*
+  -*- 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;
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+/*
+  -*- 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.
+*/
+
+import { Icon, Popup } from "semantic-ui-react";
+import PropTypes from "prop-types";
+
+import { WorkflowActionsPopup } from "~/components";
+import { statusMapping } from "~/util";
+
+import styles from "./WorkflowDetails.module.scss";
+
+export default function WorkflowDetails({ workflow, actionsOnHover = false }) {
+  const {
+    name,
+    run,
+    createdDate,
+    startedDate,
+    finishedDate,
+    friendlyCreated,
+    friendlyStarted,
+    friendlyFinished,
+    duration,
+    completed,
+    total,
+    status,
+  } = workflow;
+
+  return (
+    <div>
+      <div
+        className={`${styles.flexbox} ${styles.workflow} ${
+          status === "deleted" ? styles.deleted : ""
+        }`}
+      >
+        <div className={styles["details-box"]}>
+          <Icon
+            className={styles["status-icon"]}
+            name={statusMapping[status].icon}
+            color={statusMapping[status].color}
+          />
+          <div>
+            <span className={styles.name}>{name}</span>
+            <span className={styles.run}>#{run}</span>
+            <Popup
+              trigger={
+                <div>
+                  {friendlyFinished
+                    ? `Finished ${friendlyFinished}`
+                    : friendlyStarted
+                      ? `Started ${friendlyStarted}`
+                      : `Created ${friendlyCreated}`}
+                </div>
+              }
+              content={
+                friendlyFinished
+                  ? finishedDate
+                  : friendlyStarted
+                    ? startedDate
+                    : createdDate
+              }
+            />
+          </div>
+        </div>
+        <div className={styles["status-box"]}>
+          <span
+            className={`${styles["status"]} sui-${statusMapping[status].color}`}
+          >
+            {status}
+          </span>{" "}
+          {statusMapping[status].preposition} {duration}
+          <div>
+            step {completed}/{total}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+WorkflowDetails.propTypes = {
+  workflow: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,92 @@
+/*
+  -*- 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.
+*/
+
+@import "@palette";
+
+.flexbox {
+  display: flex;
+  justify-content: space-between;
+}
+
+.workflow {
+  color: $raven;
+
+  /**FIXME visibility on hover is missing!*/
+  &.hover {
+    .actions {
+      visibility: visible !important;
+    }
+  }
+
+  &.deleted {
+    opacity: 0.5;
+  }
+
+  .details-box {
+    display: flex;
+    align-items: baseline;
+    flex-grow: 1;
+    margin-right: 1em;
+    word-wrap: anywhere;
+
+    .status-icon {
+      padding-right: 20px;
+    }
+
+    .name {
+      font-size: 1.3em;
+    }
+
+    .run {
+      padding-left: 0.8em;
+    }
+
+    .size {
+      color: $light-gray;
+      font-size: 0.75em;
+      margin-right: 0.75em;
+
+      &.highlight {
+        color: $sui-red;
+      }
+    }
+  }
+
+  .name,
+  .status {
+    font-weight: bold;
+  }
+
+  .status,
+  .run {
+    font-size: 1.2em;
+  }
+
+  .status-box {
+    width: 210px;
+    flex-shrink: 0;
+  }
+
+  .actions {
+    min-width: 22px;
+
+    &:hover {
+      color: darken($sepia, 30%);
+    }
+
+    &.always-visible {
+      visibility: visible;
+    }
+  }
+
+  .notebook {
+    font-size: 0.85em;
+  }
+}