CE-2561: Fetch repos on query

src/components/IOC/CreateIOC/CreateIOC.js

-import React, { useEffect, useState, useContext } from "react";
+import React, { useMemo, useEffect, useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
@@ -27,21 +27,33 @@ const renderErrorMessage = (error) => {
   }`;
 };
 
+const createRequestParams = (query) => {
+  return {
+    query: query
+  };
+};
+
 export function CreateIOC() {
   const navigate = useNavigate();
   const [name, setName] = useState();
   const [gitId, setGitId] = useState(null);
-  const [gitInput, setGitInput] = useState(null);
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
+  const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 });
 
   const client = useContext(apiContext);
 
+  const requestParams = useMemo(
+    () => createRequestParams(repoQuery),
+    [repoQuery]
+  );
+
   const {
     value: allowedGitProjects,
     wrapper: getAllowedGitProjects,
     loading: loadingAllowedGitProjects
   } = useAPIMethod({
     fcn: client.apis.Git.listProjects,
+    params: requestParams,
     call: false
   });
 
@@ -69,13 +81,6 @@ export function CreateIOC() {
     navigate("/");
   };
 
-  // fetch new names when name query changes
-  useEffect(() => {
-    if (nameQuery) {
-      getNames(nameQuery);
-    }
-  }, [nameQuery, getNames]);
-
   // create the ioc on form submit
   const onSubmit = (event) => {
     event.preventDefault();
@@ -90,6 +95,19 @@ export function CreateIOC() {
     );
   };
 
+  // fetch new names when name query changes
+  useEffect(() => {
+    if (nameQuery) {
+      getNames(nameQuery);
+    }
+  }, [nameQuery, getNames]);
+
+  useEffect(() => {
+    if (repoQuery) {
+      getAllowedGitProjects();
+    }
+  }, [repoQuery, getAllowedGitProjects]);
+
   // navigate home once ioc created
   useEffect(() => {
     if (ioc) {
@@ -145,7 +163,7 @@ export function CreateIOC() {
           onChange={(event, value, reason) => {
             setName(value);
           }}
-          onInputChange={(event, value, reason) => {
+          onInputChange={(event) => {
             event && onNameKeyUp(event.nativeEvent);
           }}
           autoSelect
@@ -154,30 +172,17 @@ export function CreateIOC() {
         <Autocomplete
           autoHighlight
           id="gitId"
-          options={gitInput ? allowedGitProjects ?? [] : []}
+          options={repoQuery || gitId ? allowedGitProjects ?? [] : []}
           loading={loadingAllowedGitProjects}
           clearOnBlur={false}
-          defaultValue={{
-            id: null,
-            url: ""
-          }}
           getOptionLabel={(option) => {
             return option?.url ?? "";
           }}
           onChange={(event, value, reason) => {
             setGitId(value?.id);
           }}
-          onInputChange={(event, value, reason) => {
-            if (reason === "input") {
-              setGitInput(value);
-
-              // load the git projects only if user entered text and data is not (being) fetched
-              if (!allowedGitProjects && !loadingAllowedGitProjects) {
-                getAllowedGitProjects();
-              }
-            } else {
-              setGitInput(null);
-            }
+          onInputChange={(event) => {
+            event && onRepoKeyUp(event.nativeEvent);
           }}
           renderInput={(params) => (
             <TextField

src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js

-import React, { useState, useEffect, useCallback, useContext } from "react";
+import React, {
+  useState,
+  useMemo,
+  useEffect,
+  useCallback,
+  useContext
+} from "react";
 import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common";
 import {
   Box,
@@ -14,6 +20,12 @@ import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 import AccessControl from "../../auth/AccessControl";
 import { apiContext } from "../../../api/DeployApi";
 
+const createRequestParams = (query) => {
+  return {
+    query: query
+  };
+};
+
 export default function IOCDetailAdmin({
   ioc,
   getIOC,
@@ -22,27 +34,31 @@ export default function IOCDetailAdmin({
   setButtonDisabled
 }) {
   const [gitId, setGitId] = useState(ioc.gitProjectId);
-
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
+  const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 });
   const [name, setName] = useState({
     uuid: ioc.namingUuid,
     description: ioc.description,
     name: ioc.namingName
   });
-  const [gitInput, setGitInput] = useState(null);
 
   // for the dialog
   const [open, setOpen] = useState(false);
   const [error, setError] = useState();
-
   const client = useContext(apiContext);
 
+  const requestParams = useMemo(
+    () => createRequestParams(repoQuery),
+    [repoQuery]
+  );
+
   const {
     value: allowedGitProjects,
     wrapper: getAllowedGitProjects,
     loading: loadingAllowedGitProjects
   } = useAPIMethod({
     fcn: client.apis.Git.listProjects,
+    params: requestParams,
     call: false
   });
 
@@ -82,19 +98,6 @@ export default function IOCDetailAdmin({
     [gitId, name, ioc]
   );
 
-  useEffect(() => {
-    // fetch git repos only if user has entered a text and it wasn't previously fetched
-    if (gitInput && !allowedGitProjects) {
-      getAllowedGitProjects();
-    }
-  }, [gitInput, allowedGitProjects, getAllowedGitProjects]);
-
-  useEffect(() => {
-    if (nameQuery) {
-      getNames(nameQuery);
-    }
-  }, [nameQuery, getNames]);
-
   // when user clicks Submit button a dialog should open
   const onSubmit = (event) => {
     event.preventDefault();
@@ -126,6 +129,19 @@ export default function IOCDetailAdmin({
     }
   }, [uioc, getIOC, resetTab, setButtonDisabled]);
 
+  useEffect(() => {
+    // fetch git repos only if user has entered a text and it wasn't previously fetched
+    if (repoQuery) {
+      getAllowedGitProjects();
+    }
+  }, [repoQuery, getAllowedGitProjects]);
+
+  useEffect(() => {
+    if (nameQuery) {
+      getNames(nameQuery);
+    }
+  }, [nameQuery, getNames]);
+
   const iocIsDeployed = Boolean(ioc.activeDeployment);
 
   let nameDisabledTitle = "";
@@ -175,7 +191,7 @@ export default function IOCDetailAdmin({
             setName(value);
             setError(null);
           }}
-          onInputChange={(event, value, reason) => {
+          onInputChange={(event) => {
             event && onNameKeyUp(event.nativeEvent);
           }}
           disabled={isDisabled}
@@ -192,7 +208,7 @@ export default function IOCDetailAdmin({
       <Autocomplete
         autoHighlight
         id="gitId"
-        options={gitInput ? allowedGitProjects ?? [] : []}
+        options={repoQuery || gitId ? allowedGitProjects ?? [] : []}
         loading={loading}
         clearOnBlur={false}
         defaultValue={{
@@ -206,12 +222,8 @@ export default function IOCDetailAdmin({
           setGitId(value?.id);
           setError(null);
         }}
-        onInputChange={(event, value, reason) => {
-          if (reason === "input") {
-            setGitInput(value);
-          } else {
-            setGitInput(null);
-          }
+        onInputChange={(event) => {
+          event && onRepoKeyUp(event.nativeEvent);
         }}
         renderInput={(params) => (
           <TextField