fix(workflow-list): show shared workflows for brand new users (#429)

Closes #413

Author: Michael Buchar

reana-ui/src/actions.js

@@ -282,6 +282,7 @@ export function fetchWorkflows({
   showLoader = true,
   workflowIdOrName,
   shared = false,
+  type,
 }) {
   return async (dispatch) => {
     if (showLoader) {
@@ -298,6 +299,7 @@ export function fetchWorkflows({
         sort,
         workflowIdOrName,
         shared,
+        ...(type ? { type } : {}),
       })
       .then((resp) =>
         dispatch({

reana-ui/src/client.js

@@ -134,6 +134,7 @@ class Client {
     sort,
     workflowIdOrName,
     shared,
+    type,
   } = {}) {
     return this._request(
       WORKFLOWS_URL({
@@ -145,6 +146,7 @@ class Client {
         shared_by: sharedBy,
         shared_with: sharedWith,
         sort,
+        type,
       }),
     );
   }

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

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Container, Dimmer, Dropdown, Icon, Loader } from "semantic-ui-react";
 import isEqual from "lodash/isEqual";
 
-import { fetchWorkflows } from "~/actions";
+import { fetchUsersSharedWithYou, fetchWorkflows } from "~/actions";
 import {
   getConfig,
   getReanaToken,
@@ -25,6 +25,7 @@ import {
   loadingWorkflows,
   userHasWorkflows,
   getWorkflowRefresh,
+  getUsersSharedWithYou,
 } from "~/selectors";
 import { NON_DELETED_STATUSES } from "~/config";
 import { Title, Pagination, Search } from "~/components";
@@ -58,6 +59,7 @@ function Workflows() {
   const workflows = useSelector(getWorkflows);
   const workflowsCount = useSelector(getWorkflowsCount);
   const hasUserWorkflows = useSelector(userHasWorkflows);
+  const usersSharedWithYou = useSelector(getUsersSharedWithYou);
   const workflowRefresh = useSelector(getWorkflowRefresh);
   const loading = useSelector(loadingWorkflows);
   const reanaToken = useSelector(getReanaToken);
@@ -82,17 +84,27 @@ function Workflows() {
   const [committedSearch, setCommittedSearch] = useState(initialSearch);
 
   // Owned by derived from URL
-  const ownedByFilter = useMemo(
-    () => (searchParams.get("shared") === "true" ? "anybody" : "you"),
-    [searchParams],
-  );
+  const ownedByFilter = useMemo(() => {
+    const sharedBy = searchParams.get("shared-by");
+    if (sharedBy) {
+      // Explicit owner selected, e.g. [email protected]
+      return sharedBy;
+    }
+    // Fallback to "you" vs "anybody" based on `shared`
+    return searchParams.get("shared") === "true" ? "anybody" : "you";
+  }, [searchParams]);
 
   // Shared with flag from URL
   const sharedWithMode = useMemo(
     () => searchParams.get("shared-with") === "true",
     [searchParams],
   );
 
+  // Load information about users who have shared workflows with you
+  useEffect(() => {
+    dispatch(fetchUsersSharedWithYou());
+  }, [dispatch]);
+
   const [sharedWithFilter, setSharedWithFilter] = useState(() =>
     searchParams.get("shared-with") === "true" ? "anybody" : undefined,
   );
@@ -114,6 +126,26 @@ function Workflows() {
     () => searchParams.get("sort") || "desc",
     [searchParams],
   );
+  const interactiveOnlyFilter = useMemo(
+    () => searchParams.get("open-sessions") === "true",
+    [searchParams],
+  );
+
+  const setInteractiveOnlyFilterInUrl = (on) => {
+    setSearchParams(
+      (prev) => {
+        const qp = new URLSearchParams(prev);
+        if (on) {
+          qp.set("open-sessions", "true");
+        } else {
+          qp.delete("open-sessions");
+        }
+        qp.delete("page"); // reset pagination when filter changes
+        return qp;
+      },
+      { replace: false },
+    );
+  };
 
   // URL writers
   const setStatusFilterInUrl = (nextStatus) => {
@@ -157,8 +189,19 @@ function Workflows() {
       (prev) => {
         const qp = new URLSearchParams(prev);
         qp.delete("shared-with"); // ensure shared-with mode is off
-        if (next === "anybody") qp.set("shared", "true");
-        else qp.delete("shared"); // default is "you"
+        if (next === "anybody") {
+          // Show anybody's workflows
+          qp.set("shared", "true");
+          qp.delete("shared-by");
+        } else if (!next || next === "you") {
+          // Back to "you": default view
+          qp.delete("shared");
+          qp.delete("shared-by");
+        } else {
+          // Specific owner selected, e.g. [email protected]
+          qp.delete("shared");
+          qp.set("shared-by", next);
+        }
         qp.delete("page");
         return qp;
       },
@@ -172,6 +215,7 @@ function Workflows() {
         if (on) {
           qp.set("shared-with", "true");
           qp.delete("shared");
+          qp.delete("shared-by");
         } else {
           qp.delete("shared-with");
         }
@@ -246,12 +290,19 @@ function Workflows() {
     // owned-by vs shared-with
     const inSharedWith = sharedWithMode;
 
+    // owned-by -> shared / shared_by mapping:
+    // - owned_by=you          -> shared=false,  shared_by undefined
+    // - owned_by=anybody      -> shared=true,   shared_by=null
+    // - owned_by=<user@email> -> shared=false,  shared_by=<user@email>
     let shared, sharedBy;
     if (!inSharedWith) {
       if (ownedByFilter === "anybody") {
         shared = true;
         sharedBy = null;
-      } else if (ownedByFilter && ownedByFilter !== "you") {
+      } else if (!ownedByFilter || ownedByFilter === "you") {
+        shared = false;
+      } else {
+        shared = false;
         sharedBy = ownedByFilter;
       }
     }
@@ -282,6 +333,7 @@ function Workflows() {
       sharedBy,
       sharedWith: sharedWithParam,
       sort: sortDir,
+      ...(interactiveOnlyFilter ? { type: "interactive" } : {}),
     };
   }, [
     pagination,
@@ -293,6 +345,7 @@ function Workflows() {
     sharedWithFilter,
     sharedWithMode,
     sortDir,
+    interactiveOnlyFilter,
   ]);
 
   const lastParamsRef = useRef();
@@ -365,7 +418,9 @@ function Workflows() {
     );
   }
 
-  if (!hasUserWorkflows) return <Welcome />;
+  if (!hasUserWorkflows && usersSharedWithYou.length === 0) {
+    return <Welcome />;
+  }
 
   // Flatten workflows object to array for rendering
   const workflowArray = Object.values(workflows || {});
@@ -395,6 +450,8 @@ function Workflows() {
           showDeleted={showDeletedMode}
           setShowDeleted={setShowDeletedInUrl}
           statusExplicit={statusExplicit}
+          interactiveOnlyFilter={interactiveOnlyFilter}
+          setInteractiveOnlyFilter={setInteractiveOnlyFilterInUrl}
           ownedByFilter={ownedByFilter}
           setOwnedByFilter={setOwnedByFilter}
           sharedWithFilter={sharedWithFilter}

reana-ui/src/pages/workflowList/WorkflowList.module.scss

@@ -43,7 +43,7 @@
 }
 
 :global(.ui.text.container).workflow-list-container {
-  max-width: 825px !important;
+  max-width: 1200px !important;
 }
 
 .paginationRow {

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

@@ -16,6 +16,7 @@ import WorkflowSorting from "./WorkflowSorting";
 
 import styles from "./WorkflowFilters.module.scss";
 import WorkflowSharingFilters from "./WorkflowSharingFilter";
+import WorkflowSessionFilters from "./WorkflowSessionFilters";
 
 export default function WorkflowFilters({
   statusFilter,
@@ -31,6 +32,8 @@ export default function WorkflowFilters({
   sharedWithMode,
   setSharedWithFilter,
   setSharedWithModeInUrl,
+  interactiveOnlyFilter,
+  setInteractiveOnlyFilter,
 }) {
   return (
     <div className={styles.container}>
@@ -42,6 +45,10 @@ export default function WorkflowFilters({
           setShowDeleted={setShowDeleted}
           statusExplicit={statusExplicit}
         />
+        <WorkflowSessionFilters
+          enabled={interactiveOnlyFilter}
+          filter={setInteractiveOnlyFilter}
+        />
         <WorkflowSharingFilters
           ownedByFilter={ownedByFilter}
           setOwnedByFilter={setOwnedByFilter}
@@ -71,4 +78,6 @@ WorkflowFilters.propTypes = {
   sharedWithFilter: PropTypes.string,
   sharedWithMode: PropTypes.bool,
   setSharedWithFilter: PropTypes.func.isRequired,
+  interactiveOnlyFilter: PropTypes.bool.isRequired,
+  setInteractiveOnlyFilter: PropTypes.func.isRequired,
 };

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

@@ -0,0 +1,30 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 2025 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 PropTypes from "prop-types";
+import { Checkbox, Grid } from "semantic-ui-react";
+
+export default function WorkflowSessionFilters({ enabled, filter }) {
+  return (
+    <Grid.Column mobile={16} tablet={4} computer={3} className="center aligned">
+      <Checkbox
+        toggle
+        label="Open sessions"
+        checked={enabled}
+        onChange={(_, { checked }) => filter(!!checked)}
+      />
+    </Grid.Column>
+  );
+}
+
+WorkflowSessionFilters.propTypes = {
+  enabled: PropTypes.bool.isRequired,
+  filter: PropTypes.func.isRequired,
+};

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

@@ -121,7 +121,7 @@ export default function WorkflowSharingFilters({
   };
 
   return (
-    <Grid.Column mobile={16} tablet={7} computer={6}>
+    <Grid.Column mobile={16} tablet={7} computer={4}>
       <div style={{ display: "flex" }}>
         <Dropdown
           fluid

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

@@ -21,6 +21,8 @@
   > div[aria-atomic="true"] {
     max-width: 100%;
     white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
+    line-height: 1.2em; /* slightly taller line to prevent clipping of "y" */
   }
 }

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

@@ -64,8 +64,8 @@ export default function WorkflowStatusFilters({
       </Grid.Column>
       <Grid.Column
         mobile={16}
-        tablet={5}
-        computer={4}
+        tablet={4}
+        computer={3}
         className="center aligned"
       >
         <Checkbox