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

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

docs(readme): update local development instructions (#432)

Write more comprehensive docs on how to run REANA-UI locally,
especially for macOS developers.

Author: Michael Buchar

AUTHORS.md

@@ -5,6 +5,7 @@ The list of contributors in alphabetical order:
 - [Alastair Lyall](https://orcid.org/0009-0000-4955-8935)
 - [Alp Tuna](https://orcid.org/0009-0001-1915-3993)
 - [Audrius Mecionis](https://orcid.org/0000-0002-3759-1663)
+- [Cameron McClymont](https://orcid.org/0009-0002-0176-5251)
 - [Daan Rosendal](https://orcid.org/0000-0002-3447-9000)
 - [Diego Rodriguez](https://orcid.org/0000-0003-0649-2002)
 - [Dinos Kousidis](https://orcid.org/0000-0002-4914-4289)

README.md

@@ -27,15 +27,49 @@ The detailed information on how to install and use REANA can be found in
 
 ## Development
 
+If you would like to develop this `reana-ui` package locally on your laptop
+(without compiling new container images of this component), you can proceed
+as follows.
+
+Install a local REANA instance on your laptop, following [REANA developer
+wiki](https://github.com/reanahub/reana/wiki/Using-live-code-reload-and-debug-mode).
+
+Install Node version 18 and Yarn version 4. If you are on macOS, beware that
+Yarn v4 may not be available in brew, so use the official upstream
+installation technique. For example:
+
+```
+mise use -g node@18
+open https://yarnpkg.com/getting-started/install
+```
+
+Clone this repository if you haven't already and go into the React package
+directory:
+
+```console
+git clone https://github.com/reanahub/reana-ui.git
+cd reana-ui/reana-ui
+```
+
+We can now install dependencies and start the development server:
+
+```console
+yarn
+export REANA_SERVER_URL=https://localhost:30443
+yarn start
+```
+
+You can now visit `https://localhost:3000` to see your local development
+interface and start seeing your code changes live.
+
+Note that if you are using macOS and are having trouble running `yarn`, you may
+need to install several dependent packages:
+
 ```console
-$ git clone https://github.com/reanahub/reana-ui.git
-$ cd reana-ui/reana-ui
-$ yarn
-$ yarn start # make sure REANA_SERVER_URL env var is set
-$ firefox localhost:3000
+brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman
 ```
 
-## Yarn scripts
+Available Yarn scripts:
 
 - `start`: start a development server with live reload
 - `build`: build a production-ready bundle in the `build` folder

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