workspace: add file search

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)

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12 as react-build
+FROM node:16 as react-build
 WORKDIR /code
 COPY . /code
 # hadolint ignore=DL3003

README.rst

@@ -27,9 +27,9 @@ to review production and historical workflows.
 Features
 ========
 
-- profile page containing REANA access token
-- list of personal workflows
-- workflow details page containing logs, files, specification
+- Profile page containing REANA access token
+- List of personal workflows
+- Workflow details page containing logs, files, specification
 - GitLab integration to load your workflow repositories
 
 Usage
@@ -45,14 +45,14 @@ Development
 
    $ git clone https://github.com/reanahub/reana-ui.git
    $ cd reana-ui/reana-ui
-   $ npm install
-   $ npm start # make sure REANA_SERVER_URL env var is set
+   $ yarn install
+   $ yarn start # make sure REANA_SERVER_URL env var is set
    $ firefox localhost:3000
 
 Useful links
 ============
 
-- `REANA project home page <http://www.reana.io/>`_
+- `REANA project home page <https://www.reana.io/>`_
 - `REANA user documentation <https://docs.reana.io>`_
 - `REANA user support forum <https://forum.reana.io>`_
 

reana-ui/package.json

@@ -3,11 +3,11 @@
   "version": "0.8.0",
   "private": true,
   "dependencies": {
-    "axios": "latest",
+    "axios": "^0.24.0",
     "lodash": "^4.17.15",
     "mime": "^2.4.4",
     "moment": "^2.24.0",
-    "node-sass": "^4.13.0",
+    "node-sass": "^6.0.0",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.4",
     "react": "^17.0.2",

reana-ui/src/actions.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2021 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.
@@ -21,7 +21,7 @@ import client, {
   INTERACTIVE_SESSIONS_OPEN_URL,
   INTERACTIVE_SESSIONS_CLOSE_URL,
 } from "~/client";
-import { parseWorkflows, parseLogs, parseFiles } from "~/util";
+import { parseWorkflows, parseLogs, parseFiles, formatSearch } from "~/util";
 import {
   getConfig,
   getWorkflow,
@@ -243,9 +243,8 @@ export function fetchWorkflows(
     if (showLoader) {
       dispatch({ type: WORKFLOWS_FETCH });
     }
-    const nameSearch = search ? JSON.stringify({ name: [search] }) : search;
     return await client
-      .getWorkflows(pagination, nameSearch, status, sort)
+      .getWorkflows(pagination, formatSearch(search), status, sort)
       .then((resp) =>
         dispatch({
           type: WORKFLOWS_RECEIVED,
@@ -298,11 +297,11 @@ export function fetchWorkflowLogs(id) {
   };
 }
 
-export function fetchWorkflowFiles(id, pagination) {
+export function fetchWorkflowFiles(id, pagination, search) {
   return async (dispatch) => {
     dispatch({ type: WORKFLOW_FILES_FETCH });
     return await client
-      .getWorkflowFiles(id, pagination)
+      .getWorkflowFiles(id, pagination, formatSearch(search))
       .then((resp) =>
         dispatch({
           type: WORKFLOW_FILES_RECEIVED,

reana-ui/src/client.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2021 CERN.
+  Copyright (C) 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.
@@ -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) {

reana-ui/src/pages/workflowList/components/WorkflowSearch.js → reana-ui/src/components/Search.js

@@ -2,31 +2,43 @@
   -*- 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";
 
+import styles from "./Search.module.scss";
+
 const TYPING_DELAY = 1000;
 
-export default function WorkflowSearch({ search }) {
+export default function Search({ search }) {
   const handleChange = debounce(search, TYPING_DELAY);
   return (
     <Input
       fluid
       icon="search"
       placeholder="Search..."
+      className={styles.input}
       onChange={(_, data) => handleChange(data.value)}
     />
   );
 }
 
-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 });
+  });
+};

reana-ui/src/components/Search.module.scss

@@ -0,0 +1,21 @@
+/*
+  -*- coding: utf-8 -*-
+
+  This file is part of REANA.
+  Copyright (C) 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 "@palette";
+
+:global(.ui.input).input {
+  :global(input)::placeholder {
+    color: $gray;
+  }
+
+  :global(input):focus::placeholder {
+    color: darken($gray, 30%);
+  }
+}

reana-ui/src/components/index.js

@@ -2,7 +2,7 @@
   -*- 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.
@@ -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";