feat(ui): add dropdowns for filtering shared workflows (#375)

Closes #367

Author: DaanRosendal

AUTHORS.md

@@ -4,6 +4,7 @@ The list of contributors in alphabetical order:
 
 - [Alp Tuna](https://orcid.org/0009-0001-1915-3993)
 - [Audrius Mecionis](https://orcid.org/0000-0002-3759-1663)
+- [Daan Rosendal](https://orcid.org/0000-0002-3447-9000)
 - [Diego Rodriguez](https://orcid.org/0000-0003-0649-2002)
 - [Dinos Kousidis](https://orcid.org/0000-0002-4914-4289)
 - [Domenic Gosein](https://orcid.org/0000-0002-1546-0435)

reana-ui/src/actions.js

@@ -91,6 +91,19 @@ export const OPEN_INTERACTIVE_SESSION_MODAL = "Open interactive session modal";
 export const CLOSE_INTERACTIVE_SESSION_MODAL =
   "Close interactive session modal";
 
+export const USERS_SHARED_WITH_YOU_FETCH =
+  "Fetch users who shared workflows with you";
+export const USERS_SHARED_WITH_YOU_RECEIVED =
+  "Users who shared workflows with you received";
+export const USERS_SHARED_WITH_YOU_FETCH_ERROR =
+  "Fetch users who shared workflows with you error";
+export const USERS_YOU_SHARED_WITH_FETCH =
+  "Fetch users you shared workflows with";
+export const USERS_YOU_SHARED_WITH_RECEIVED =
+  "Users you shared workflows with received";
+export const USERS_YOU_SHARED_WITH_FETCH_ERROR =
+  "Fetch users you shared workflows with error";
+
 export function errorActionCreator(error, name) {
   const { status, data } = error?.response;
   const { message } = data;
@@ -262,6 +275,8 @@ export function fetchWorkflows({
   pagination,
   search,
   status,
+  ownedBy,
+  sharedWith,
   sort,
   showLoader = true,
   workflowIdOrName,
@@ -275,6 +290,8 @@ export function fetchWorkflows({
         pagination,
         search: formatSearch(search),
         status,
+        ownedBy,
+        sharedWith,
         sort,
         workflowIdOrName,
       })
@@ -522,3 +539,41 @@ export function closeInteractiveSession(id) {
       });
   };
 }
+
+export function fetchUsersSharedWithYou() {
+  return async (dispatch) => {
+    dispatch({ type: USERS_SHARED_WITH_YOU_FETCH });
+
+    return await client
+      .getUsersSharedWithYou()
+      .then((resp) => {
+        dispatch({
+          type: USERS_SHARED_WITH_YOU_RECEIVED,
+          users_shared_with_you: resp.data.users_shared_with_you,
+        });
+        return resp;
+      })
+      .catch((err) => {
+        dispatch(errorActionCreator(err, USERS_SHARED_WITH_YOU_FETCH_ERROR));
+      });
+  };
+}
+
+export function fetchUsersYouSharedWith() {
+  return async (dispatch) => {
+    dispatch({ type: USERS_YOU_SHARED_WITH_FETCH });
+
+    return await client
+      .getUsersYouSharedWith()
+      .then((resp) => {
+        dispatch({
+          type: USERS_YOU_SHARED_WITH_RECEIVED,
+          users_you_shared_with: resp.data.users_you_shared_with,
+        });
+        return resp;
+      })
+      .catch((err) => {
+        dispatch(errorActionCreator(err, USERS_YOU_SHARED_WITH_FETCH_ERROR));
+      });
+  };
+}

reana-ui/src/client.js

@@ -23,6 +23,8 @@ export const USER_SIGNIN_URL = `${api}/api/login`;
 export const USER_SIGNOUT_URL = `${api}/api/logout`;
 export const USER_REQUEST_TOKEN_URL = `${api}/api/token`;
 export const USER_CONFIRM_EMAIL_URL = `${api}/api/confirm-email`;
+export const USERS_SHARED_WITH_YOU_URL = `${api}/api/users/shared-with-you`;
+export const USERS_YOU_SHARED_WITH_URL = `${api}/api/users/you-shared-with`;
 export const CLUSTER_STATUS_URL = `${api}/api/status`;
 export const GITLAB_AUTH_URL = `${api}/api/gitlab/connect`;
 export const GITLAB_PROJECTS_URL = (params) =>
@@ -116,13 +118,31 @@ class Client {
     });
   }
 
-  getWorkflows({ pagination, search, status, sort, workflowIdOrName } = {}) {
+  getWorkflows({
+    pagination,
+    search,
+    status,
+    ownedBy,
+    sharedWith,
+    sort,
+    workflowIdOrName,
+  } = {}) {
+    let shared = false;
+    if (ownedBy === "anybody") {
+      ownedBy = undefined;
+      shared = true;
+    } else if (ownedBy === "you") {
+      ownedBy = undefined;
+    }
     return this._request(
       WORKFLOWS_URL({
         ...(pagination ?? {}),
         workflow_id_or_name: workflowIdOrName,
         search,
         status,
+        shared,
+        shared_by: ownedBy,
+        shared_with: sharedWith,
         sort,
       }),
     );
@@ -198,6 +218,14 @@ class Client {
       method: "post",
     });
   }
+
+  getUsersSharedWithYou() {
+    return this._request(USERS_SHARED_WITH_YOU_URL);
+  }
+
+  getUsersYouSharedWith() {
+    return this._request(USERS_YOU_SHARED_WITH_URL);
+  }
 }
 
 const client = new Client();

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

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2021, 2022 CERN.
+  Copyright (C) 2020, 2021, 2022, 2023 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.
@@ -51,6 +51,8 @@ function Workflows() {
   const [pagination, setPagination] = useState({ page: 1, size: PAGE_SIZE });
   const [statusFilter, setStatusFilter] = useState(NON_DELETED_STATUSES);
   const [searchFilter, setSearchFilter] = useState();
+  const [ownedByFilter, setOwnedByFilter] = useState();
+  const [sharedWithFilter, setSharedWithFilter] = useState();
   const [sortDir, setSortDir] = useState("desc");
   const dispatch = useDispatch();
   const config = useSelector(getConfig);
@@ -76,6 +78,8 @@ function Workflows() {
         pagination: { ...pagination },
         search: searchFilter,
         status: statusFilter,
+        ownedBy: ownedByFilter,
+        sharedWith: sharedWithFilter,
         sort: sortDir,
       }),
     );
@@ -88,6 +92,8 @@ function Workflows() {
             pagination: { ...pagination },
             search: searchFilter,
             status: statusFilter,
+            ownedBy: ownedByFilter,
+            sharedWith: sharedWithFilter,
             sort: sortDir,
             showLoader,
           }),
@@ -103,6 +109,8 @@ function Workflows() {
     reanaToken,
     searchFilter,
     statusFilter,
+    ownedByFilter,
+    sharedWithFilter,
     sortDir,
     workflowRefresh,
   ]);
@@ -133,7 +141,7 @@ function Workflows() {
 
   return (
     <div className={styles.container}>
-      <Container text>
+      <Container id={styles["workflow-list-container"]}>
         <Title className={styles.title}>
           <span>Your workflows</span>
           <span className={styles.refresh}>
@@ -155,6 +163,18 @@ function Workflows() {
             pagination,
             setPagination,
           )}
+          ownedByFilter={ownedByFilter}
+          setOwnedByFilter={applyFilter(
+            setOwnedByFilter,
+            pagination,
+            setPagination,
+          )}
+          sharedWithFilter={sharedWithFilter}
+          setSharedWithFilter={applyFilter(
+            setSharedWithFilter,
+            pagination,
+            setPagination,
+          )}
           sortDir={sortDir}
           setSortDir={applyFilter(setSortDir, pagination, setPagination)}
         />

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

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
+  Copyright (C) 2020, 2022, 2023 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.
@@ -41,3 +41,38 @@
 :global(.ui.pagination.menu).pagination {
   margin: 2em;
 }
+
+#workflow-list-container {
+  font-size: 1.14285714rem;
+  line-height: 1.5;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Mobile */
+@media only screen and (max-width: 767px) {
+  #workflow-list-container {
+    width: 500px;
+  }
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  #workflow-list-container {
+    width: 700px;
+  }
+}
+
+/* Small Monitor */
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  #workflow-list-container {
+    width: 800px;
+  }
+}
+
+/* Large Monitor */
+@media only screen and (min-width: 1200px) {
+  #workflow-list-container {
+    width: 825px;
+  }
+}

reana-ui/src/pages/workflowList/components/WorkflowFilters.js

@@ -2,7 +2,7 @@
   -*- coding: utf-8 -*-
 
   This file is part of REANA.
-  Copyright (C) 2020, 2022 CERN.
+  Copyright (C) 2020, 2022, 2023 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.
@@ -15,12 +15,17 @@ import WorkflowStatusFilter from "./WorkflowStatusFilter";
 import WorkflowSorting from "./WorkflowSorting";
 
 import styles from "./WorkflowFilters.module.scss";
+import WorkflowSharingFilters from "./WorkflowSharingFilter";
 
 export default function WorkflowFilters({
   statusFilter,
   setStatusFilter,
   sortDir,
   setSortDir,
+  ownedByFilter,
+  setOwnedByFilter,
+  sharedWithFilter,
+  setSharedWithFilter,
 }) {
   return (
     <div className={styles.container}>
@@ -29,7 +34,13 @@ export default function WorkflowFilters({
           statusFilter={statusFilter}
           filter={setStatusFilter}
         />
-        <Grid.Column floated="right" width={4}>
+        <WorkflowSharingFilters
+          ownedByFilter={ownedByFilter}
+          setOwnedByFilter={setOwnedByFilter}
+          sharedWithFilter={sharedWithFilter}
+          setSharedWithFilter={setSharedWithFilter}
+        />
+        <Grid.Column mobile={16} tablet={4} computer={3} floated="right">
           <WorkflowSorting value={sortDir} sort={setSortDir} />
         </Grid.Column>
       </Grid>
@@ -42,4 +53,8 @@ WorkflowFilters.propTypes = {
   setStatusFilter: PropTypes.func.isRequired,
   sortDir: PropTypes.string.isRequired,
   setSortDir: PropTypes.func.isRequired,
+  ownedByFilter: PropTypes.string,
+  setOwnedByFilter: PropTypes.func.isRequired,
+  sharedWithFilter: PropTypes.string,
+  setSharedWithFilter: PropTypes.func.isRequired,
 };