feat(gitlab): add search bar to filter gitlab projects (reanahub#403)

Closes reanahub/reana-server#518
mdonadoni · Mar 19, 2024 · 9113bfc · 9113bfc
1 parent 43ced0c
commit 9113bfc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/reana-ui/src/client.js b/reana-ui/src/client.js
@@ -25,7 +25,8 @@ export const USER_REQUEST_TOKEN_URL = `${api}/api/token`;
 export const USER_CONFIRM_EMAIL_URL = `${api}/api/confirm-email`;
 export const CLUSTER_STATUS_URL = `${api}/api/status`;
 export const GITLAB_AUTH_URL = `${api}/api/gitlab/connect`;
-export const GITLAB_PROJECTS_URL = `${api}/api/gitlab/projects`;
+export const GITLAB_PROJECTS_URL = (params) =>
+  `${api}/api/gitlab/projects?${stringifyQueryParams(params)}`;
 export const GITLAB_WEBHOOK_URL = `${api}/api/gitlab/webhook`;
 export const WORKFLOWS_URL = (params) =>
   `${api}/api/workflows?verbose=true&${stringifyQueryParams(params)}`;
@@ -174,8 +175,8 @@ class Client {
     });
   }
 
-  getGitlabProjects() {
-    return this._request(GITLAB_PROJECTS_URL);
+  getGitlabProjects({ search } = {}) {
+    return this._request(GITLAB_PROJECTS_URL({ search }));
   }
 
   toggleGitlabProject(method, data) {

diff --git a/reana-ui/src/components/Search.js b/reana-ui/src/components/Search.js
@@ -16,7 +16,7 @@ import styles from "./Search.module.scss";
 
 const TYPING_DELAY = 1000;
 
-export default function Search({ search }) {
+export default function Search({ search, loading = false }) {
   const handleChange = debounce(search, TYPING_DELAY);
   return (
     <Input
@@ -25,12 +25,14 @@ export default function Search({ search }) {
       placeholder="Search..."
       className={styles.input}
       onChange={(_, data) => handleChange(data.value)}
+      loading={loading}
     />
   );
 }
 
 Search.propTypes = {
   search: PropTypes.func.isRequired,
+  loading: PropTypes.bool,
 };
 
 export const applyFilter = (filter, pagination, setPagination) => (value) => {

diff --git a/reana-ui/src/pages/profile/components/GitLabProjects.js b/reana-ui/src/pages/profile/components/GitLabProjects.js
@@ -9,41 +9,51 @@
 */
 
 import isEmpty from "lodash/isEmpty";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Button, List, Loader, Radio, Message, Icon } from "semantic-ui-react";
 
 import client, { GITLAB_AUTH_URL } from "~/client";
+import { Search } from "~/components";
 
 import styles from "./GitLabProjects.module.scss";
 
 export default function GitLabProjects() {
   const [projects, setProjects] = useState(null);
   const [fetchingProjects, setFetchingProjects] = useState(false);
+  const [searchFilter, setSearchFilter] = useState(null);
+
+  // keep track of last fetch request in order to avoid
+  // updating the state with out-of-order responses
+  const lastFetchRequest = useRef(null);
 
   useEffect(() => {
-    /**
-     * Gets data from the specified API
-     */
-    const getProjects = () => {
-      setFetchingProjects(true);
-      client
-        .getGitlabProjects()
-        .then((res) => {
-          let newProjects = {};
-          for (const [id, details] of Object.entries(res.data)) {
-            newProjects[id] = { ...details, toggling: false };
-          }
-          setProjects(newProjects);
-          setFetchingProjects(false);
-        })
-        .catch((e) => {
-          setProjects(null);
-          setFetchingProjects(false);
-        });
-    };
-
-    getProjects();
-  }, []);
+    // Fetch project list
+    setFetchingProjects(true);
+    let request = client.getGitlabProjects({ search: searchFilter });
+    lastFetchRequest.current = request;
+
+    request
+      .then((res) => {
+        if (request !== lastFetchRequest.current) {
+          // this is not the last request, so ignore it
+          return;
+        }
+        let newProjects = {};
+        for (const [id, details] of Object.entries(res.data)) {
+          newProjects[id] = { ...details, toggling: false };
+        }
+        setProjects(newProjects);
+        setFetchingProjects(false);
+      })
+      .catch((e) => {
+        if (lastFetchRequest.current !== request) {
+          // this is not the last request, so ignore it
+          return;
+        }
+        setProjects(null);
+        setFetchingProjects(false);
+      });
+  }, [searchFilter]);
 
   const setToggling = (projectId, toggling) => {
     setProjects((currentProjects) => ({
@@ -91,7 +101,8 @@ export default function GitLabProjects() {
       });
   };
 
-  if (fetchingProjects) {
+  if (fetchingProjects && projects === null) {
+    // projects were never fetched before, show spinner
     return (
       <Loader active inline="centered">
         Fetching projects...
@@ -125,6 +136,7 @@ export default function GitLabProjects() {
   } else {
     return (
       <>
+        <Search search={setSearchFilter} loading={fetchingProjects} />
         {!isEmpty(projects) ? (
           <>
             <List>
@@ -162,13 +174,14 @@ export default function GitLabProjects() {
             <Message.Content>
               <Message.Header>No GitLab projects found</Message.Header>
               <p>
-                If you would like to use REANA with GitLab, please{" "}
+                If you would like to use REANA with GitLab, please adjust your
+                search query or{" "}
                 <a
                   href="https://gitlab.cern.ch/projects/new"
                   rel="noopener noreferrer"
                   target="_blank"
                 >
-                  create a project
+                  create a new project
                 </a>{" "}
                 and come back.
               </p>