diff --git a/CHANGES.rst b/CHANGES.rst
index 13bc32c9..48ca21c9 100644
--- 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/Dockerfile b/Dockerfile
index 45a42960..25a7ed51 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12 as react-build
+FROM node:16 as react-build
WORKDIR /code
COPY . /code
# hadolint ignore=DL3003
diff --git a/README.rst b/README.rst
index f295d8c3..54e1a848 100644
--- a/README.rst
+++ b/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 `_
+- `REANA project home page `_
- `REANA user documentation `_
- `REANA user support forum `_
diff --git a/reana-ui/package.json b/reana-ui/package.json
index 6400e902..93321c20 100644
--- a/reana-ui/package.json
+++ b/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",
diff --git a/reana-ui/src/actions.js b/reana-ui/src/actions.js
index d7713afa..4c0f9d2a 100644
--- a/reana-ui/src/actions.js
+++ b/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,
diff --git a/reana-ui/src/client.js b/reana-ui/src/client.js
index 759cc41f..6d5e7ddc 100644
--- a/reana-ui/src/client.js
+++ b/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) {
diff --git a/reana-ui/src/pages/workflowList/components/WorkflowSearch.js b/reana-ui/src/components/Search.js
similarity index 51%
rename from reana-ui/src/pages/workflowList/components/WorkflowSearch.js
rename to reana-ui/src/components/Search.js
index b2b2fef9..86a6b0d9 100644
--- a/reana-ui/src/pages/workflowList/components/WorkflowSearch.js
+++ b/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 (
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 });
+ });
+};
diff --git a/reana-ui/src/components/Search.module.scss b/reana-ui/src/components/Search.module.scss
new file mode 100644
index 00000000..7f6dbd8f
--- /dev/null
+++ b/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%);
+ }
+}
diff --git a/reana-ui/src/components/index.js b/reana-ui/src/components/index.js
index f95d02df..a4efa121 100644
--- a/reana-ui/src/components/index.js
+++ b/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";
diff --git a/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js b/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js
index 4c50b537..30fcf521 100644
--- a/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.js
+++ b/reana-ui/src/pages/workflowDetails/components/WorkflowFiles.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.
@@ -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,10 +199,6 @@ export default function WorkflowFiles({ id }) {
/>
);
- if (loading) {
- return ;
- }
-
return !files ? (
) : (
-
-
-
-
- handleSort("name")}
- >
- Name {headerIcon("name")}
-
- handleSort("lastModified")}
- >
- Modified {headerIcon("lastModified")}
-
- handleSort("size")}
- >
- Size {headerIcon("size")}
-
-
-
+ <>
+
+ {loading ? (
+
+ ) : (
+
+
+
+
+ handleSort("name")}
+ >
+ Name {headerIcon("name")}
+
+ handleSort("lastModified")}
+ >
+ Modified {headerIcon("lastModified")}
+
+ handleSort("size")}
+ >
+ Size {headerIcon("size")}
+
+
+
-
- {files &&
- files.map(({ name, lastModified, size }) => (
- getFile(name, size.raw)}
- closeIcon
- trigger={
-
-
-
- {name}
-
- {lastModified}
- {size.raw}
-
- }
- >
- {name}
-
- {displayContent &&
- modalContent &&
- displayContent(modalContent, name)}
-
-
-
-
-
- ))}
-
-
- {filesCount > PAGE_SIZE && (
-
-
{
- setPagination({ ...pagination, page: activePage });
- resetSort();
- }}
- size="mini"
- />
-
+ {filesCount > PAGE_SIZE && (
+
+
{
+ setPagination({ ...pagination, page: activePage });
+ resetSort();
+ }}
+ size="mini"
+ />
+