refactor(workflow-badges): make interface design subtler (reanahub#394)

- Make non-clickable badges more subtle. - Make progress bar smaller and place it close to the step counter. - Fix alignment and spacing of some elements.
giuseppe-steduto · Aug 9, 2024 · 5a86a8f · 5a86a8f
1 parent fa65bb5
commit 5a86a8f
Show file tree

Hide file tree

Showing 16 changed files with 264 additions and 255 deletions.
diff --git a/reana-ui/src/components/Box.js b/reana-ui/src/components/Box.js
@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 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.

diff --git a/reana-ui/src/components/Box.module.scss b/reana-ui/src/components/Box.module.scss
@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 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,7 +12,6 @@
   color: $raven;
   border: 5px solid $sepia;
   margin: 1rem 0;
-  padding: 0;
 
   &.padding {
     padding: 1em 1em;
@@ -22,8 +21,4 @@
     display: flex;
     justify-content: space-between;
   }
-
-  &.wrap {
-    flex-wrap: wrap;
-  }
 }
diff --git a/reana-ui/src/components/LauncherLabel.js b/reana-ui/src/components/LauncherLabel.js
@@ -1,6 +1,6 @@
 /*
   This file is part of REANA.
-  Copyright (C) 2022 CERN.
+  Copyright (C) 2022, 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.

diff --git a/reana-ui/src/components/WorkflowActionsPopup.js b/reana-ui/src/components/WorkflowActionsPopup.js
@@ -47,7 +47,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openInteractiveSessionModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -60,7 +59,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(closeInteractiveSession(id));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -73,7 +71,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openStopWorkflowModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -86,7 +83,6 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(openDeleteWorkflowModal(workflow));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
@@ -99,23 +95,22 @@ export default function WorkflowActionsPopup({ workflow, className }) {
       onClick: (e) => {
         dispatch(deleteWorkflow(id));
         setOpen(false);
-        e.stopPropagation();
       },
     });
   }
 
   return (
-    <div className={className || styles.container}>
+    <div className={className}>
       {menuItems.length > 0 && (
         <Popup
           basic
           trigger={
             <Icon
+              link
               name="ellipsis vertical"
               className={styles.icon}
               onClick={(e) => {
                 setOpen(true);
-                e.preventDefault();
               }}
             />
           }

diff --git a/reana-ui/src/components/WorkflowActionsPopup.module.scss b/reana-ui/src/components/WorkflowActionsPopup.module.scss
@@ -2,32 +2,14 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
+  Copyright (C) 2020, 2022, 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.
 */
 
 @import "@palette";
 
-:global(.icon).icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: $gray;
-
-  &:hover {
-    color: $dark-gray;
-  }
-}
-
-.container {
-  cursor: pointer;
-  min-width: 22px;
-  margin-left: 2em;
-}
-
 .jupyter-icon {
   width: 1.18em;
   float: right;

diff --git a/reana-ui/src/components/WorkflowBadges.js b/reana-ui/src/components/WorkflowBadges.js
@@ -1,16 +1,24 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  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.
+*/
+
 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,
@@ -20,44 +28,39 @@ export default function WorkflowBadges({ workflow }) {
   const isSessionOpen = sessionStatus === "created";
 
   return (
-    <>
-      <div className={styles.badgesContainer}>
-        {workflow.duration && (
-          <Label
-            size="tiny"
-            content={workflow.duration}
-            icon="clock"
-            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.badgesContainer}>
+      {workflow.duration && (
+        <Label
+          basic
+          size="tiny"
+          content={`CPU ${workflow.duration}`}
+          icon="clock"
+        />
+      )}
+      {hasDiskUsage && (
+        <Label
+          basic
+          size="tiny"
+          content={`Disk ${size.human_readable}`}
+          icon="hdd"
+        />
+      )}
+      <LauncherLabel url={launcherURL} />
+      {isSessionOpen && (
+        <Label
+          size="tiny"
+          content={"Notebook"}
+          icon={
+            <i className="icon">
+              <JupyterNotebookIcon size={12} />
+            </i>
+          }
+          as="a"
+          href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
+          target="_blank"
+          rel="noopener noreferrer"
+        />
+      )}
+    </div>
   );
 }
diff --git a/reana-ui/src/components/WorkflowBadges.module.scss b/reana-ui/src/components/WorkflowBadges.module.scss
@@ -2,22 +2,18 @@
   -*- 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.
 */
+@import "@palette";
 
 .badgesContainer {
   display: flex;
+  gap: 5px;
 
-  a:global(.label) {
-    margin-left: 15px;
-    gap: 10px;
-
-    &:hover {
-      cursor: pointer;
-      filter: opacity(0.8);
-    }
+  :global(.ui.basic.label) {
+    color: $raven;
   }
 }
diff --git a/reana-ui/src/components/WorkflowInfo.js b/reana-ui/src/components/WorkflowInfo.js
@@ -32,55 +32,47 @@ export default function WorkflowInfo({ workflow }) {
   } = 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
+    <div className={styles["workflow-info"]}>
+      <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
-                    ? startedDate
-                    : createdDate
-              }
-            />
-          </div>
+                    ? `Started ${friendlyStarted}`
+                    : `Created ${friendlyCreated}`}
+              </div>
+            }
+            content={
+              friendlyFinished
+                ? finishedDate
+                : friendlyStarted
+                  ? startedDate
+                  : createdDate
+            }
+          />
         </div>
-        <div className={styles["status-box"]}>
-          <div>
-            <span
-              className={`${styles["status"]} sui-${statusMapping[status].color}`}
-            >
-              {status}
-            </span>{" "}
-            <div>
-              step {completed}/{total}
-            </div>
-          </div>
-          <div className={styles["progressbar-container"]}>
-            <WorkflowProgressCircleBar workflow={workflow} />
-          </div>
+      </div>
+      <div className={styles["status-box"]}>
+        <span
+          className={`${styles["status"]} sui-${statusMapping[status].color}`}
+        >
+          {status}
+        </span>
+        <div className={styles["progress-box"]}>
+          <span>
+            step {completed}/{total}
+          </span>
+          <WorkflowProgressCircleBar workflow={workflow} />
         </div>
       </div>
     </div>