workspace: add file search

mvidalgarcia · mvidalgarcia · commit 9db4cbf32c6c · 2022-01-12T18:39:55.000+01:00
- Extract out common `Search` component - Add search param to workspace endpoint closes reanahub#211
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -4,6 +4,8 @@ Changes
 Version 0.8.1 (UNRELEASED)
 ---------------------------
 
+- Adds support for HTML preview of workspace files.
+- Adds search by name in workflow file list page.
 - Changes cluster health status page to represent availability instead of usage.
 
 Version 0.8.0 (2021-11-22)
diff --git a/reana-ui/src/actions.js b/reana-ui/src/actions.js
@@ -298,11 +298,12 @@ export function fetchWorkflowLogs(id) {
   };
 }
 
-export function fetchWorkflowFiles(id, pagination) {
+export function fetchWorkflowFiles(id, pagination, search) {
   return async (dispatch) => {
     dispatch({ type: WORKFLOW_FILES_FETCH });
+    const nameSearch = search ? JSON.stringify({ name: [search] }) : search;
     return await client
-      .getWorkflowFiles(id, pagination)
+      .getWorkflowFiles(id, pagination, nameSearch)
       .then((resp) =>
         dispatch({
           type: WORKFLOW_FILES_RECEIVED,
diff --git a/reana-ui/src/client.js b/reana-ui/src/client.js
@@ -31,8 +31,8 @@ export const WORKFLOWS_URL = (params) =>
 export const WORKFLOW_LOGS_URL = (id) => `${api}/api/workflows/${id}/logs`;
 export const WORKFLOW_SPECIFICATION_URL = (id) =>
   `${api}/api/workflows/${id}/specification`;
-export const WORKFLOW_FILES_URL = (id, pagination) =>
-  `${api}/api/workflows/${id}/workspace?${stringifyQueryParams(pagination)}`;
+export const WORKFLOW_FILES_URL = (id, params) =>
+  `${api}/api/workflows/${id}/workspace?${stringifyQueryParams(params)}`;
 export const WORKFLOW_FILE_URL = (id, filename, preview = true) =>
   `${api}/api/workflows/${id}/workspace/${filename}?${stringifyQueryParams(
     preview
@@ -126,8 +126,8 @@ class Client {
     return this._request(WORKFLOW_LOGS_URL(id));
   }
 
-  getWorkflowFiles(id, pagination) {
-    return this._request(WORKFLOW_FILES_URL(id, pagination));
+  getWorkflowFiles(id, pagination, search) {
+    return this._request(WORKFLOW_FILES_URL(id, { ...pagination, search }));
   }
 
   getWorkflowFile(id, filename) {
diff --git a/reana-ui/src/components/Search.js b/reana-ui/src/components/Search.js
@@ -2,20 +2,20 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020 CERN.
+  Copyright (C) 2020, 2021, 2022 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 { unstable_batchedUpdates } from "react-dom";
 import { Input } from "semantic-ui-react";
 import debounce from "lodash/debounce";
 
 const TYPING_DELAY = 1000;
 
-export default function WorkflowSearch({ search }) {
+export default function Search({ search }) {
   const handleChange = debounce(search, TYPING_DELAY);
   return (
     <Input
@@ -27,6 +27,15 @@ export default function WorkflowSearch({ search }) {
   );
 }
 
-WorkflowSearch.propTypes = {
+Search.propTypes = {
   search: PropTypes.func.isRequired,
 };
+
+export const applyFilter = (filter, pagination, setPagination) => (value) => {
+  // FIXME: refactor once implemented by default in future versions of React
+  // https://github.com/facebook/react/issues/16387#issuecomment-521623662c
+  unstable_batchedUpdates(() => {
+    filter(value);
+    setPagination({ ...pagination, page: 1 });
+  });
+};
diff --git a/reana-ui/src/components/index.js b/reana-ui/src/components/index.js
@@ -20,3 +20,4 @@ export { default as JupyterNotebookIcon } from "./JupyterNotebookIcon";
 export { default as WorkflowDeleteModal } from "./WorkflowDeleteModal";
 export { default as WorkflowActionsPopup } from "./WorkflowActionsPopup";
 export { default as PieChart } from "./PieChart";
+export { default as Search } from "./Search";
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js b/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js
@@ -28,11 +28,15 @@ import {
   loadingDetails,
 } from "~/selectors";
 import { fetchWorkflowFiles } from "~/actions";
+import client, { WORKFLOW_FILE_URL } from "~/client";
 import { getMimeType } from "~/util";
-import { Pagination } from "~/components";
+import { Pagination, Search } from "~/components";
+import { applyFilter } from "~/components/Search";
 
 import styles from "./WorkflowFiles.module.scss";
-import client, { WORKFLOW_FILE_URL } from "~/client";
+
+const FILE_SIZE_LIMIT = 5 * 1024 ** 2; // 5MB
+const PAGE_SIZE = 15;
 
 const PREVIEW_MIME_PREFIX_WHITELIST = {
   "image/": {
@@ -74,9 +78,6 @@ const PREVIEW_MIME_PREFIX_WHITELIST = {
   },
 };
 
-const FILE_SIZE_LIMIT = 5 * 1024 ** 2; // 5MB
-const PAGE_SIZE = 15;
-
 export default function WorkflowFiles({ id }) {
   const dispatch = useDispatch();
   const loading = useSelector(loadingDetails);
@@ -88,10 +89,11 @@ export default function WorkflowFiles({ id }) {
   const [sorting, setSorting] = useState({ column: null, direction: null });
   const [displayContent, setDisplayContent] = useState(() => () => null);
   const [pagination, setPagination] = useState({ page: 1, size: PAGE_SIZE });
+  const [searchFilter, setSearchFilter] = useState();
 
   useEffect(() => {
-    dispatch(fetchWorkflowFiles(id, pagination));
-  }, [dispatch, id, pagination]);
+    dispatch(fetchWorkflowFiles(id, pagination, searchFilter));
+  }, [dispatch, id, pagination, searchFilter]);
 
   useEffect(() => {
     setFiles(_files);
@@ -197,91 +199,96 @@ export default function WorkflowFiles({ id }) {
     />
   );
 
-  if (loading) {
-    return <Loader active inline="centered" />;
-  }
-
   return !files ? (
     <Message
       icon="info circle"
       content="The workflow workspace was deleted."
       info
     />
   ) : (
-    <Segment>
-      <Table fixed compact basic="very">
-        <Table.Header className={styles["table-header"]}>
-          <Table.Row>
-            <Table.HeaderCell
-              sorted={sorting.column === "name" ? sorting.direction : null}
-              onClick={() => handleSort("name")}
-            >
-              Name {headerIcon("name")}
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              sorted={
-                sorting.column === "lastModified" ? sorting.direction : null
-              }
-              onClick={() => handleSort("lastModified")}
-            >
-              Modified {headerIcon("lastModified")}
-            </Table.HeaderCell>
-            <Table.HeaderCell
-              sorted={sorting.column === "size" ? sorting.direction : null}
-              onClick={() => handleSort("size")}
-            >
-              Size {headerIcon("size")}
-            </Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
+    <>
+      <Search
+        search={applyFilter(setSearchFilter, pagination, setPagination)}
+      />
+      {loading ? (
+        <Loader active inline="centered" />
+      ) : (
+        <Segment>
+          <Table fixed compact basic="very">
+            <Table.Header className={styles["table-header"]}>
+              <Table.Row>
+                <Table.HeaderCell
+                  sorted={sorting.column === "name" ? sorting.direction : null}
+                  onClick={() => handleSort("name")}
+                >
+                  Name {headerIcon("name")}
+                </Table.HeaderCell>
+                <Table.HeaderCell
+                  sorted={
+                    sorting.column === "lastModified" ? sorting.direction : null
+                  }
+                  onClick={() => handleSort("lastModified")}
+                >
+                  Modified {headerIcon("lastModified")}
+                </Table.HeaderCell>
+                <Table.HeaderCell
+                  sorted={sorting.column === "size" ? sorting.direction : null}
+                  onClick={() => handleSort("size")}
+                >
+                  Size {headerIcon("size")}
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Header>
 
-        <Table.Body>
-          {files &&
-            files.map(({ name, lastModified, size }) => (
-              <Modal
-                key={name}
-                onOpen={() => getFile(name, size.raw)}
-                closeIcon
-                trigger={
-                  <Table.Row className={styles["files-row"]}>
-                    <Table.Cell>
-                      <Icon name="file" />
-                      {name}
-                    </Table.Cell>
-                    <Table.Cell>{lastModified}</Table.Cell>
-                    <Table.Cell>{size.raw}</Table.Cell>
-                  </Table.Row>
-                }
-              >
-                <Modal.Header>{name}</Modal.Header>
-                <Modal.Content scrolling>
-                  {displayContent &&
-                    modalContent &&
-                    displayContent(modalContent, name)}
-                </Modal.Content>
-                <Modal.Actions>
-                  <Button primary as="a" href={getFileURL(name, false)}>
-                    <Icon name="download" /> Download
-                  </Button>
-                </Modal.Actions>
-              </Modal>
-            ))}
-        </Table.Body>
-      </Table>
-      {filesCount > PAGE_SIZE && (
-        <div className={styles["pagination-wrapper"]}>
-          <Pagination
-            activePage={pagination.page}
-            totalPages={Math.ceil(filesCount / PAGE_SIZE)}
-            onPageChange={(_, { activePage }) => {
-              setPagination({ ...pagination, page: activePage });
-              resetSort();
-            }}
-            size="mini"
-          />
-        </div>
+            <Table.Body>
+              {files &&
+                files.map(({ name, lastModified, size }) => (
+                  <Modal
+                    key={name}
+                    onOpen={() => getFile(name, size.raw)}
+                    closeIcon
+                    trigger={
+                      <Table.Row className={styles["files-row"]}>
+                        <Table.Cell>
+                          <Icon name="file" />
+                          {name}
+                        </Table.Cell>
+                        <Table.Cell>{lastModified}</Table.Cell>
+                        <Table.Cell>{size.raw}</Table.Cell>
+                      </Table.Row>
+                    }
+                  >
+                    <Modal.Header>{name}</Modal.Header>
+                    <Modal.Content scrolling>
+                      {displayContent &&
+                        modalContent &&
+                        displayContent(modalContent, name)}
+                    </Modal.Content>
+                    <Modal.Actions>
+                      <Button primary as="a" href={getFileURL(name, false)}>
+                        <Icon name="download" /> Download
+                      </Button>
+                    </Modal.Actions>
+                  </Modal>
+                ))}
+            </Table.Body>
+          </Table>
+          {filesCount > PAGE_SIZE && (
+            <div className={styles["pagination-wrapper"]}>
+              <Pagination
+                activePage={pagination.page}
+                totalPages={Math.ceil(filesCount / PAGE_SIZE)}
+                onPageChange={(_, { activePage }) => {
+                  setPagination({ ...pagination, page: activePage });
+                  resetSort();
+                }}
+                size="mini"
+              />
+            </div>
+          )}
+        </Segment>
       )}
-    </Segment>
+    </>
   );
 }
 
diff --git a/reana-ui/src/pages/workflowList/WorkflowList.js b/reana-ui/src/pages/workflowList/WorkflowList.js
@@ -10,7 +10,6 @@
 
 import moment from "moment";
 import { useEffect, useRef, useState } from "react";
-import { unstable_batchedUpdates } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { Container, Dimmer, Loader } from "semantic-ui-react";
 
@@ -25,15 +24,15 @@ import {
   userHasWorkflows,
   getWorkflowRefresh,
 } from "~/selectors";
-import BasePage from "../BasePage";
 import { Title } from "~/components";
+import { Pagination, Search } from "~/components";
+import { applyFilter } from "~/components/Search";
+import BasePage from "../BasePage";
 import Welcome from "./components/Welcome";
+import WorkflowFilters from "./components/WorkflowFilters";
 import WorkflowList from "./components/WorkflowList";
-import { Pagination } from "~/components";
 
 import styles from "./WorkflowList.module.scss";
-import WorkflowFilters from "./components/WorkflowFilters";
-import WorkflowSearch from "./components/WorkflowSearch";
 
 const PAGE_SIZE = 5;
 
@@ -107,15 +106,6 @@ function Workflows() {
     interval.current = null;
   };
 
-  const applyFilter = (filter) => (value) => {
-    // FIXME: refactor once implemented by default in future versions of React
-    // https://github.com/facebook/react/issues/16387#issuecomment-521623662
-    unstable_batchedUpdates(() => {
-      filter(value);
-      setPagination({ ...pagination, page: 1 });
-    });
-  };
-
   if (hideWelcomePage) {
     return (
       loading && (
@@ -142,12 +132,18 @@ function Workflows() {
           <span>Your workflows</span>
           <span className={styles.refresh}>Refreshed at {refreshedAt}</span>
         </Title>
-        <WorkflowSearch search={applyFilter(setSearchFilter)} />
+        <Search
+          search={applyFilter(setSearchFilter, pagination, setPagination)}
+        />
         <WorkflowFilters
           statusFilter={statusFilter}
-          setStatusFilter={applyFilter(setStatusFilter)}
+          setStatusFilter={applyFilter(
+            setStatusFilter,
+            pagination,
+            setPagination
+          )}
           sortDir={sortDir}
-          setSortDir={applyFilter(setSortDir)}
+          setSortDir={applyFilter(setSortDir, pagination, setPagination)}
         />
         <WorkflowList workflows={workflowArray} loading={loading} />
       </Container>
