ui: make details available for shared workflows

Closes reanahub/reana-server#651
reanahub · Mar 13, 2024 · 497886f · 497886f
1 parent a61bdfd
commit 497886f
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 36 deletions.
diff --git a/reana-ui/src/actions.js b/reana-ui/src/actions.js
@@ -290,11 +290,13 @@ export function fetchWorkflows({
   sort,
   showLoader = true,
   workflowIdOrName,
+  includeShared = false,
 }) {
   return async (dispatch) => {
     if (showLoader) {
       dispatch({ type: WORKFLOWS_FETCH });
     }
+
     return await client
       .getWorkflows({
         pagination,
@@ -304,15 +306,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 });
@@ -332,6 +335,7 @@ export function fetchWorkflow(id, { refetch = false, showLoader = true } = {}) {
         fetchWorkflows({
           workflowIdOrName: id,
           showLoader,
+          includeShared: true,
         }),
       );
     }

diff --git a/reana-ui/src/client.js b/reana-ui/src/client.js
@@ -130,14 +130,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 ?? {}),

diff --git a/reana-ui/src/components/WorkflowActionsPopup.js b/reana-ui/src/components/WorkflowActionsPopup.js
@@ -31,7 +31,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 config = useSelector(getConfig);
   const [open, setOpen] = useState(false);
@@ -133,6 +137,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 || styles.container}>
       {menuItems.length > 0 && (
@@ -167,4 +182,5 @@ WorkflowActionsPopup.defaultProps = {
 WorkflowActionsPopup.propTypes = {
   workflow: workflowShape.isRequired,
   className: PropTypes.string,
+  insideClickableElement: PropTypes.bool,
 };
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js b/reana-ui/src/pages/workflowDetails/components/WorkflowInfo.js
@@ -51,20 +51,43 @@ export default function WorkflowInfo({ workflow }) {
           <div>
             <span className={styles["name"]}>{name}</span>
             <span className={styles["run"]}>#{run}</span>
-            {isSessionOpen && (
-              <a
-                href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-                className={styles.notebook}
-              >
-                <JupyterNotebookIcon />
-              </a>
-            )}
+
             <span className={styles["launcher-label"]}>
               <LauncherLabel url={launcherURL} />
             </span>
+
+            {workflow.owner_email === "-" ? (
+              <>
+                {isSessionOpen && (
+                  <a
+                    href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className={styles.notebook}
+                  >
+                    <JupyterNotebookIcon />
+                  </a>
+                )}
+              </>
+            ) : (
+              <Popup
+                trigger={
+                  <span className={styles.owner}>
+                    <Icon
+                      name="eye"
+                      size="large"
+                      style={{ marginTop: "-5px" }}
+                    />
+                  </span>
+                }
+                position="top center"
+                content={
+                  "This workflow is read-only shared with you by " +
+                  workflow.owner_email
+                }
+              />
+            )}
             <Popup
               trigger={
                 <div>
@@ -106,7 +129,10 @@ export default function WorkflowInfo({ workflow }) {
               step {completed}/{total}
             </div>
           </div>
-          <WorkflowActionsPopup workflow={workflow} />
+          <WorkflowActionsPopup
+            workflow={workflow}
+            style={{ cursor: "default" }}
+          />
         </div>
       </section>
       <WorkflowProgress workflow={workflow} />

diff --git a/reana-ui/src/pages/workflowList/components/WorkflowList.js b/reana-ui/src/pages/workflowList/components/WorkflowList.js
@@ -76,25 +76,46 @@ export default function WorkflowList({ workflows, loading }) {
                   <span className={styles.name}>{name}</span>
                   <span className={styles.run}>#{run}</span>
                   <div>
-                    {hasDiskUsage && (
-                      <span
-                        className={`${styles.size} ${
-                          isDeletedUsingWorkspace ? styles.highlight : ""
-                        }`}
-                      >
-                        <Icon name="hdd" /> {size.human_readable}
-                      </span>
-                    )}
-                    {isSessionOpen && (
-                      <a
-                        href={INTERACTIVE_SESSION_URL(sessionUri, reanaToken)}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        onClick={(e) => e.stopPropagation()}
-                        className={styles.notebook}
-                      >
-                        <JupyterNotebookIcon />
-                      </a>
+                    {workflow.owner_email === "-" ? (
+                      <>
+                        {hasDiskUsage && (
+                          <span
+                            className={`${styles.size} ${
+                              isDeletedUsingWorkspace ? styles.highlight : ""
+                            }`}
+                          >
+                            <Icon name="hdd" /> {size.human_readable}
+                          </span>
+                        )}
+                        {isSessionOpen && (
+                          <a
+                            href={INTERACTIVE_SESSION_URL(
+                              sessionUri,
+                              reanaToken,
+                            )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            onClick={(e) => e.stopPropagation()}
+                            className={styles.notebook}
+                          >
+                            <JupyterNotebookIcon />
+                          </a>
+                        )}
+                      </>
+                    ) : (
+                      <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
+                        }
+                      />
                     )}
                   </div>
                   <Popup
@@ -131,6 +152,7 @@ export default function WorkflowList({ workflows, loading }) {
               <WorkflowActionsPopup
                 workflow={workflow}
                 className={styles.actions}
+                insideClickableElement
               />
             </Box>
           </Link>