feat(ui): add persistent page size selector (reanahub#442)

- Replaced native select with Semantic UI Dropdown
- Updated default page size from 5 to 10
- Pagination and results per page dropdown aligned on same row
- Added new SCSS styles
- Removed unnecessary overflow in WorkflowSharingFilter style

Author: Michael Buchar

reana-ui/src/components/App.js

@@ -105,7 +105,7 @@ export default function App() {
             }
           />
           <Route
-            path="/details/:id"
+            path="/details/:id/:tab?/:job?"
             element={
               <RequireAuth>
                 <RedirectDetailsToWorkflows />

reana-ui/src/components/Search.js

@@ -10,8 +10,6 @@
 
 import PropTypes from "prop-types";
 import { Input, Icon } from "semantic-ui-react";
-import isEqual from "lodash/isEqual";
-
 import styles from "./Search.module.scss";
 
 export default function Search({
@@ -64,13 +62,3 @@ Search.propTypes = {
   loading: PropTypes.bool,
   search: PropTypes.func,
 };
-
-export const applyFilter = (setFilter, resetPage) => (nextValue) => {
-  setFilter((prevValue) => {
-    if (isEqual(prevValue, nextValue)) {
-      return prevValue;
-    }
-    resetPage();
-    return nextValue;
-  });
-};

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

@@ -12,7 +12,7 @@ import moment from "moment";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { Container, Dimmer, Icon, Loader } from "semantic-ui-react";
+import { Container, Dimmer, Dropdown, Icon, Loader } from "semantic-ui-react";
 import isEqual from "lodash/isEqual";
 
 import { fetchWorkflows } from "~/actions";
@@ -34,7 +34,12 @@ import WorkflowFilters from "./components/WorkflowFilters";
 import WorkflowList from "./components/WorkflowList";
 import styles from "./WorkflowList.module.scss";
 
-const PAGE_SIZE = 5;
+const pageSizeOptions = [10, 20, 50, 100].map((size) => ({
+  key: size,
+  text: String(size),
+  value: size,
+}));
+const DEFAULT_PAGE_SIZE = pageSizeOptions[0].value;
 
 export default function WorkflowListPage() {
   return (
@@ -61,10 +66,17 @@ function Workflows() {
   const { pollingSecs } = config;
 
   const page = useMemo(() => {
-    const n = parseInt(searchParams.get("page") || "", 10);
+    const n = parseInt(searchParams.get("page") || "");
     return Number.isFinite(n) && n > 0 ? n : 1;
   }, [searchParams]);
-  const pagination = useMemo(() => ({ page, size: PAGE_SIZE }), [page]);
+  const [pageSize, setPageSize] = useState(() => {
+    const n = parseInt(searchParams.get("page-size") || "");
+    return Number.isFinite(n) && n > 0 ? n : DEFAULT_PAGE_SIZE;
+  });
+  const pagination = useMemo(
+    () => ({ page, size: pageSize }),
+    [page, pageSize],
+  );
   const initialSearch = searchParams.get("search") || "";
   const [searchText, setSearchText] = useState(initialSearch);
   const [committedSearch, setCommittedSearch] = useState(initialSearch);
@@ -215,7 +227,7 @@ function Workflows() {
   // 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 n = parseInt(raw || "");
     const shouldRemovePage =
       searchParams.has("page") &&
       (!raw || // page=empty string
@@ -393,15 +405,52 @@ function Workflows() {
           setSharedWithModeInUrl={setSharedWithModeInUrl}
         />
         <WorkflowList workflows={workflowArray} loading={loading} />
+        {!loading && (
+          <div className={styles.paginationRow}>
+            {/* To emulate size of page-size dropdown and ensure page buttons stay in middle of screen */}
+            <div className={styles.pageSizeNotVisible}>
+              <span className={styles.pageSizeLabel}>Results per page:</span>
+              <Dropdown
+                selection
+                compact
+                options={pageSizeOptions}
+                value={pageSize}
+              />
+            </div>
+            {workflowsCount > pageSize && (
+              <Pagination
+                className={styles.pagination}
+                activePage={page}
+                totalPages={Math.ceil(workflowsCount / pageSize)}
+                onPageChange={(_, { activePage }) => gotoPage(activePage)}
+              />
+            )}
+            <div className={styles.pageSize}>
+              <span className={styles.pageSizeLabel}>Results per page:</span>
+              <Dropdown
+                selection
+                compact
+                options={pageSizeOptions}
+                value={pageSize}
+                onChange={(_, { value }) => {
+                  const newSize = Number(value);
+                  setPageSize(newSize);
+                  setSearchParams((prev) => {
+                    const qp = new URLSearchParams(prev);
+                    if (newSize !== DEFAULT_PAGE_SIZE) {
+                      qp.set("page-size", String(newSize));
+                    } else {
+                      qp.delete("page-size");
+                    }
+                    qp.delete("page"); // reset to page 1
+                    return qp;
+                  });
+                }}
+              />
+            </div>
+          </div>
+        )}
       </Container>
-      {workflowsCount > PAGE_SIZE && !loading && (
-        <Pagination
-          className={styles.pagination}
-          activePage={page}
-          totalPages={Math.ceil(workflowsCount / PAGE_SIZE)}
-          onPageChange={(_, { activePage }) => gotoPage(activePage)}
-        />
-      )}
     </div>
   );
 }

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

@@ -45,3 +45,43 @@
 :global(.ui.text.container).workflow-list-container {
   max-width: 825px !important;
 }
+
+.paginationRow {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.pageSizeNotVisible {
+  grid-column: 1;
+  display: inline-flex;
+  gap: 0.5rem;
+  visibility: hidden;
+
+  :global(.ui.selection.dropdown > .text) {
+    font-size: 1rem;
+  }
+}
+
+.pagination {
+  grid-column: 2;
+  justify-self: center;
+}
+
+.pageSize {
+  grid-column: 3;
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 2em;
+  margin-bottom: 2em;
+
+  :global(.ui.selection.dropdown > .text) {
+    font-size: 1rem;
+  }
+}
+
+.pageSizeLabel {
+  font-size: 1rem;
+}

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

@@ -14,14 +14,13 @@
 }
 
 :global(.ui.selection.dropdown).selected-user-dropdown {
-  border-top-left-radius: 0%;
-  border-bottom-left-radius: 0%;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
   border-left: 0;
 
   > div[aria-atomic="true"] {
     max-width: 100%;
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
   }
 }