feat(list): display interactive sessions (#436)

Add Only with sessions toggle bar to display only workflows that
have interactive sessions opened.

Closes #435

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

@@ -50,6 +50,7 @@ function Workflows() {
   const [refreshedAt, setRefreshedAt] = useState(currentUTCTime());
   const [pagination, setPagination] = useState({ page: 1, size: PAGE_SIZE });
   const [statusFilter, setStatusFilter] = useState(NON_DELETED_STATUSES);
+  const [sessionFilter, setSessionFilter] = useState(false);
   const [searchFilter, setSearchFilter] = useState();
   const [ownedByFilter, setOwnedByFilter] = useState();
   const [sharedWithFilter, setSharedWithFilter] = useState();
@@ -91,6 +92,7 @@ function Workflows() {
         sharedBy,
         sharedWith: sharedWithFilter,
         sort: sortDir,
+        ...(sessionFilter ? { type: "interactive" } : {}),
       }),
     );
 
@@ -108,6 +110,7 @@ function Workflows() {
             sharedWith: sharedWithFilter,
             sort: sortDir,
             showLoader,
+            ...(sessionFilter ? { type: "interactive" } : {}),
           }),
         );
         setRefreshedAt(currentUTCTime());
@@ -125,6 +128,7 @@ function Workflows() {
     sharedWithFilter,
     sortDir,
     workflowRefresh,
+    sessionFilter,
   ]);
 
   const cleanPolling = () => {
@@ -175,6 +179,12 @@ function Workflows() {
             pagination,
             setPagination,
           )}
+          sessionFilter={sessionFilter}
+          setSessionFilter={applyFilter(
+            setSessionFilter,
+            pagination,
+            setPagination,
+          )}
           ownedByFilter={ownedByFilter}
           setOwnedByFilter={applyFilter(
             setOwnedByFilter,

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

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

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 "~/pages/workflowList/components/WorkflowSessionFilters";
 
 export default function WorkflowFilters({
   statusFilter,
@@ -26,6 +27,8 @@ export default function WorkflowFilters({
   setOwnedByFilter,
   sharedWithFilter,
   setSharedWithFilter,
+  sessionFilter,
+  setSessionFilter,
 }) {
   return (
     <div className={styles.container}>
@@ -34,6 +37,10 @@ export default function WorkflowFilters({
           statusFilter={statusFilter}
           filter={setStatusFilter}
         />
+        <WorkflowSessionFilters
+          enabled={sessionFilter}
+          filter={setSessionFilter}
+        />
         <WorkflowSharingFilters
           ownedByFilter={ownedByFilter}
           setOwnedByFilter={setOwnedByFilter}
@@ -57,4 +64,6 @@ WorkflowFilters.propTypes = {
   setOwnedByFilter: PropTypes.func.isRequired,
   sharedWithFilter: PropTypes.string,
   setSharedWithFilter: PropTypes.func.isRequired,
+  sessionFilter: PropTypes.bool,
+  setSessionFilter: PropTypes.func.isRequired,
 };

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

@@ -0,0 +1,58 @@
+/*
+  -*- 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 isEqual from "lodash/isEqual";
+import PropTypes from "prop-types";
+import { useEffect, useState } from "react";
+import { Checkbox, Grid } from "semantic-ui-react";
+
+export default function WorkflowSessionFilters({
+  enabled: enabledProp,
+  filter,
+}) {
+  const [enabled, setEnabled] = useState(false);
+
+  useEffect(() => {
+    // Keep local UI in sync with the parent value
+    if (!isEqual(enabled, enabledProp)) {
+      setEnabled(enabledProp);
+    }
+  }, [enabledProp]);
+
+  useEffect(() => {
+    // Notify parent when the toggle changes
+    if (!isEqual(enabled, enabledProp)) {
+      filter(enabled);
+    }
+  }, [enabled, enabledProp]);
+
+  return (
+    <>
+      <Grid.Column
+        mobile={16}
+        tablet={4}
+        computer={3}
+        className="center aligned"
+      >
+        <Checkbox
+          toggle
+          label="Only with sessions"
+          checked={enabled}
+          onChange={(_, { checked }) => setEnabled(!!checked)}
+        />
+      </Grid.Column>
+    </>
+  );
+}
+
+WorkflowSessionFilters.propTypes = {
+  enabled: PropTypes.bool.isRequired,
+  filter: PropTypes.func.isRequired,
+};

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

@@ -108,7 +108,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/WorkflowStatusFilter.js

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