feat(ui): make details available for shared workflows (#375)

Closes reanahub/reana-server#651

Author: DaanRosendal

reana-ui/src/actions.js

@@ -293,11 +293,13 @@ export function fetchWorkflows({
   sort,
   showLoader = true,
   workflowIdOrName,
+  includeShared = false,
 }) {
   return async (dispatch) => {
     if (showLoader) {
       dispatch({ type: WORKFLOWS_FETCH });
     }
+
     return await client
       .getWorkflows({
         pagination,
@@ -307,15 +309,16 @@ export function fetchWorkflows({
         sharedWith,
         sort,
         workflowIdOrName,
+        includeShared,
       })
-      .then((resp) =>
+      .then((resp) => {
         dispatch({
           type: WORKFLOWS_RECEIVED,
           workflows: parseWorkflows(resp.data.items),
           total: resp.data.total,
           userHasWorkflows: resp.data.user_has_workflows,
-        }),
-      )
+        });
+      })
       .catch((err) => {
         dispatch(errorActionCreator(err, USER_INFO_URL));
         dispatch({ type: WORKFLOWS_FETCH_ERROR });
@@ -335,6 +338,7 @@ export function fetchWorkflow(id, { refetch = false, showLoader = true } = {}) {
         fetchWorkflows({
           workflowIdOrName: id,
           showLoader,
+          includeShared: true,
         }),
       );
     }

reana-ui/src/client.js

@@ -131,14 +131,16 @@ class Client {
     sharedWith,
     sort,
     workflowIdOrName,
+    includeShared = false,
   } = {}) {
     let shared = false;
-    if (ownedBy === "anybody") {
+    if (ownedBy === "anybody" || includeShared) {
       ownedBy = undefined;
       shared = true;
     } else if (ownedBy === "you") {
       ownedBy = undefined;
     }
+
     return this._request(
       WORKFLOWS_URL({
         ...(pagination ?? {}),

reana-ui/src/components/WorkflowActionsPopup.js

@@ -29,7 +29,11 @@ import styles from "./WorkflowActionsPopup.module.scss";
 
 const JupyterIcon = <JupyterNotebookIcon className={styles["jupyter-icon"]} />;
 
-export default function WorkflowActionsPopup({ workflow, className }) {
+export default function WorkflowActionsPopup({
+  workflow,
+  className,
+  insideClickableElement,
+}) {
   const dispatch = useDispatch();
   const [open, setOpen] = useState(false);
   const { id, size, status, session_status: sessionStatus } = workflow;
@@ -111,6 +115,17 @@ export default function WorkflowActionsPopup({ workflow, className }) {
     });
   }
 
+  if (workflow.owner_email !== "-") {
+    return (
+      <div
+        className={className || styles.container}
+        style={
+          insideClickableElement ? { cursor: "pointer" } : { cursor: "default" }
+        }
+      />
+    );
+  }
+
   return (
     <div className={className}>
       {menuItems.length > 0 && (
@@ -145,4 +160,5 @@ WorkflowActionsPopup.defaultProps = {
 WorkflowActionsPopup.propTypes = {
   workflow: workflowShape.isRequired,
   className: PropTypes.string,
+  insideClickableElement: PropTypes.bool,
 };

reana-ui/src/components/WorkflowBadges.js

@@ -9,7 +9,7 @@
 */
 
 import styles from "./WorkflowBadges.module.scss";
-import { Label } from "semantic-ui-react";
+import { Icon, Label, Popup } from "semantic-ui-react";
 import { JupyterNotebookIcon } from "~/components";
 import { INTERACTIVE_SESSION_URL } from "~/client";
 import { LauncherLabel } from "~/components";
@@ -29,36 +29,54 @@ export default function WorkflowBadges({ workflow }) {
 
   return (
     <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>
+      {workflow.owner_email === "-" ? (
+        <>
+          {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"
+            />
+          )}
+        </>
+      ) : (
+        <Popup
+          trigger={
+            <span className={styles.owner}>
+              <Icon name="eye" style={{ marginTop: "-3px" }} />
+              {workflow.owner_email}
+            </span>
+          }
+          position="top center"
+          content={
+            "This workflow is read-only shared with you by " +
+            workflow.owner_email
           }
-          as="a"
-          href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
-          target="_blank"
-          rel="noopener noreferrer"
         />
       )}
     </div>