feat(ui): persist workflow page tabs and filters in URLs (reanahub#440)

Added persistent ?page= parameters in WorkflowDetails
and WorkFlowList.
Changed /details/<id> to /workflows/<id> and added redirect.
Improved WorkflowFiles to synchronize search and pagination in URL.
Enhanced WorkflowLogs with step persistence using ?step= parameter.
Made URL the source of truth for search/page/status/show-deleted
/shared/shared-with/sort.
Made status single select with no deleted status in dropdown.
Deletion toggle fully controls the deleted status workflows.
Prevented duplicate fetches and stabilized polling.
Use job ids instead of job names in the URL.
Use URL args instead of URL paths for tabs.
Use Service Logs component in URL.

Closes reanahub#437

Author: Michael Buchar

reana-ui/src/components/App.js

@@ -14,6 +14,7 @@ import {
   BrowserRouter,
   Route,
   Routes,
+  useParams,
   useLocation,
 } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -51,6 +52,12 @@ function RequireAuth({ children }) {
   }
 }
 
+function RedirectDetailsToWorkflows() {
+  const { id } = useParams();
+  const location = useLocation();
+  return <Navigate to={`/workflows/${id}${location.search}`} replace />;
+}
+
 export default function App() {
   const userLoading = useSelector(loadingUser);
   const configLoading = useSelector(loadingConfig);
@@ -90,13 +97,21 @@ export default function App() {
             }
           />
           <Route
-            path="/details/:id"
+            path="/workflows/:id/:tab?/:job?"
             element={
               <RequireAuth>
                 <WorkflowDetails />
               </RequireAuth>
             }
           />
+          <Route
+            path="/details/:id"
+            element={
+              <RequireAuth>
+                <RedirectDetailsToWorkflows />
+              </RequireAuth>
+            }
+          />
           <Route
             path="/profile"
             element={

reana-ui/src/components/Search.js

@@ -9,33 +9,68 @@
 */
 
 import PropTypes from "prop-types";
-import { Input } from "semantic-ui-react";
-import debounce from "lodash/debounce";
+import { Input, Icon } from "semantic-ui-react";
+import isEqual from "lodash/isEqual";
 
 import styles from "./Search.module.scss";
 
-const TYPING_DELAY = 1000;
+export default function Search({
+  value = "",
+  onChange,
+  onSubmit,
+  loading = false,
+}) {
+  const handleChange = (text) => {
+    if (typeof onChange === "function") {
+      onChange(text);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && typeof onSubmit === "function") {
+      onSubmit();
+    }
+  };
+
+  const handleClick = () => {
+    if (typeof onSubmit === "function") {
+      onSubmit();
+    }
+  };
 
-export default function Search({ search, loading = false }) {
-  const handleChange = debounce(search, TYPING_DELAY);
   return (
     <Input
       fluid
       icon="search"
       placeholder="Search..."
+      value={value}
       className={styles.input}
       onChange={(_, data) => handleChange(data.value)}
+      onKeyDown={handleKeyDown}
+      iconPosition="right"
       loading={loading}
-    />
+      aria-label="Search workflows"
+    >
+      <input />
+      <Icon name="search" link onClick={handleClick} title="Search" />
+    </Input>
   );
 }
 
 Search.propTypes = {
-  search: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onSubmit: PropTypes.func,
   loading: PropTypes.bool,
+  search: PropTypes.func,
 };
 
-export const applyFilter = (filter, pagination, setPagination) => (value) => {
-  filter(value);
-  setPagination({ ...pagination, page: 1 });
+export const applyFilter = (setFilter, resetPage) => (nextValue) => {
+  setFilter((prevValue) => {
+    if (isEqual(prevValue, nextValue)) {
+      return prevValue;
+    }
+    resetPage();
+    return nextValue;
+  });
 };

reana-ui/src/pages/workflowDetails/WorkflowDetails.js

@@ -10,7 +10,7 @@
 
 import { useCallback, useEffect, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams, useNavigate } from "react-router-dom";
 import { Container, Dimmer, Icon, Loader, Tab } from "semantic-ui-react";
 
 import { fetchWorkflow, fetchWorkflowLogs } from "~/actions";
@@ -43,8 +43,13 @@ import styles from "./WorkflowDetails.module.scss";
 const FINISHED_STATUSES = ["finished", "failed", "stopped", "deleted"];
 
 export default function WorkflowDetails() {
-  const { id: workflowId } = useParams();
-
+  const {
+    id: workflowId,
+    tab: tabFromPath = "",
+    job: jobFromPath,
+  } = useParams();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
   const dispatch = useDispatch();
   const workflow = useSelector(getWorkflow(workflowId));
   const loading = useSelector(loadingWorkflows);
@@ -53,6 +58,43 @@ export default function WorkflowDetails() {
   const interval = useRef(null);
   const workflowRefresh = useSelector(getWorkflowRefresh);
 
+  const getPageFromUrl = () => {
+    const n = parseInt(searchParams.get("page") || "", 10);
+    return Number.isFinite(n) && n > 0 ? n : 1;
+  };
+
+  const page = getPageFromUrl();
+
+  // if ?page= param is not in a valid format, or page is 1, remove page from URL
+  useEffect(() => {
+    const raw = searchParams.get("page");
+    const n = parseInt(raw || "", 10);
+    const shouldRemovePage =
+      searchParams.has("page") &&
+      (!raw || // page=empty string
+        !Number.isFinite(n) || // page=abc
+        n <= 1); // page=1, page=0
+
+    if (shouldRemovePage) {
+      const next = new URLSearchParams(searchParams);
+      next.delete("page");
+      setSearchParams(next, { replace: true });
+    }
+  }, [searchParams, setSearchParams]);
+
+  const gotoPage = (nextPage) => {
+    // Merge with existing params - keeps search, tab, etc.
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (nextPage > 1) next.set("page", String(nextPage));
+        else next.delete("page"); // if page 1, remove param
+        return next;
+      },
+      { replace: false },
+    );
+  };
+
   const refetchWorkflow = useCallback(() => {
     const options = { refetch: true, showLoader: false };
     dispatch(fetchWorkflow(workflowId, options));
@@ -129,7 +171,14 @@ export default function WorkflowDetails() {
         icon: "folder outline",
         content: "Workspace",
       },
-      render: () => <WorkflowFiles title="Workspace" id={workflow.id} />,
+      render: () => (
+        <WorkflowFiles
+          title="Workspace"
+          id={workflow.id}
+          page={page}
+          onPageChange={gotoPage}
+        />
+      ),
     },
     {
       menuItem: {
@@ -141,14 +190,20 @@ export default function WorkflowDetails() {
     },
   ];
 
-  // If the workflow has finished and it did not fail, then engine logs are shown.
+  // If the workflow has finished, and it did not fail, then engine logs are shown.
   // Otherwise, job logs are displayed.
   const hasFinished = FINISHED_STATUSES.includes(workflow.status);
   let defaultActiveIndex = 1; // job logs
   if (hasFinished && workflow.status !== "failed") {
     defaultActiveIndex = 0; // engine logs
   }
 
+  // If URL has a /:tab value, use it to find the index
+  const tabKeys = panes.map((p) => p.menuItem.key);
+  const activeTabIndex = tabFromPath
+    ? Math.max(tabKeys.indexOf(tabFromPath), 0)
+    : defaultActiveIndex;
+
   const pageTitle = `${workflow.name} #${workflow.run}`;
 
   return (
@@ -174,7 +229,27 @@ export default function WorkflowDetails() {
         <Tab
           menu={{ secondary: true, pointing: true }}
           panes={panes}
-          defaultActiveIndex={defaultActiveIndex}
+          activeIndex={activeTabIndex}
+          onTabChange={(_, data) => {
+            const nextKey = tabKeys[data.activeIndex];
+            // Preserve query params only if needed (page and search are only meaningful for workspace)
+            const keepQuery =
+              nextKey === "workspace"
+                ? (() => {
+                    const q = new URLSearchParams(searchParams);
+                    return q.toString() ? `?${q.toString()}` : "";
+                  })()
+                : "";
+
+            // Build new path, for job-logs, preserve current :job path segment if present.
+            const base = `/workflows/${workflowId}`;
+            const path =
+              nextKey === "job-logs"
+                ? `${base}/job-logs${jobFromPath ? `/${jobFromPath}` : ""}`
+                : `${base}/${nextKey}`;
+
+            navigate(`${path}${keepQuery}`, { replace: false });
+          }}
         />
         <InteractiveSessionModal />
         <WorkflowDeleteModal />

reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js

@@ -10,13 +10,13 @@
 
 import sortBy from "lodash/sortBy";
 import PropTypes from "prop-types";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { Icon, Loader, Message, Segment, Table } from "semantic-ui-react";
 
 import { fetchWorkflowFiles } from "~/actions";
 import { Pagination, Search } from "~/components";
-import { applyFilter } from "~/components/Search";
 import {
   getWorkflowFiles,
   getWorkflowFilesCount,
@@ -29,21 +29,36 @@ import styles from "./WorkflowFiles.module.scss";
 
 const PAGE_SIZE = 15;
 
-export default function WorkflowFiles({ id }) {
+export default function WorkflowFiles({ id, page = 1, onPageChange }) {
   const dispatch = useDispatch();
   const loading = useSelector(loadingDetails);
   const _files = useSelector(getWorkflowFiles(id));
   const filesCount = useSelector(getWorkflowFilesCount(id));
 
   const [files, setFiles] = useState();
   const [sorting, setSorting] = useState({ column: null, direction: null });
-  const [pagination, setPagination] = useState({ page: 1, size: PAGE_SIZE });
-  const [searchFilter, setSearchFilter] = useState();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchText, setSearchText] = useState(
+    () => searchParams.get("search") || "",
+  );
+  const searchQuery = (searchParams.get("search") || "").trim();
   const [filePreview, setFilePreview] = useState(null);
 
+  // Use pagination from parent-controlled URL page (memoized to avoid extra effects)
+  const pagination = useMemo(
+    () => ({ page: page || 1, size: PAGE_SIZE }),
+    [page],
+  );
+
+  // Keep input in sync when URL changes
   useEffect(() => {
-    dispatch(fetchWorkflowFiles(id, pagination, searchFilter));
-  }, [dispatch, id, pagination, searchFilter]);
+    const urlSearch = searchParams.get("search") || "";
+    setSearchText((prev) => (prev !== urlSearch ? urlSearch : prev));
+  }, [searchParams]);
+
+  useEffect(() => {
+    dispatch(fetchWorkflowFiles(id, pagination, searchQuery));
+  }, [dispatch, id, pagination, searchQuery]);
 
   useEffect(() => {
     setFiles(_files);
@@ -81,6 +96,23 @@ export default function WorkflowFiles({ id }) {
     />
   );
 
+  // Submit search on Enter/click, then reset to page 1 (remove ?page)
+  const submitSearch = () => {
+    const q = searchText.trim();
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev);
+        if (q) next.set("search", q);
+        else next.delete("search");
+        // Reset to first page by removing page param
+        next.delete("page");
+        return next;
+      },
+      { replace: true },
+    );
+    resetSort();
+  };
+
   return files === null ? (
     <Message
       icon="info circle"
@@ -91,7 +123,9 @@ export default function WorkflowFiles({ id }) {
     <>
       <WorkflowRetentionRules id={id} />
       <Search
-        search={applyFilter(setSearchFilter, pagination, setPagination)}
+        value={searchText}
+        onChange={setSearchText}
+        onSubmit={submitSearch}
       />
       {loading ? (
         <Loader active inline="centered" className={styles["loader"]} />
@@ -163,7 +197,9 @@ export default function WorkflowFiles({ id }) {
                 activePage={pagination.page}
                 totalPages={Math.ceil(filesCount / PAGE_SIZE)}
                 onPageChange={(_, { activePage }) => {
-                  setPagination({ ...pagination, page: activePage });
+                  if (typeof onPageChange === "function") {
+                    onPageChange(activePage);
+                  }
                   resetSort();
                 }}
                 size="mini"
@@ -178,4 +214,6 @@ export default function WorkflowFiles({ id }) {
 
 WorkflowFiles.propTypes = {
   id: PropTypes.string.isRequired,
+  page: PropTypes.number, // Current page coming from the URL
+  onPageChange: PropTypes.func, // Notify parent to update the URL when user paginates
 };