CE-2165: Modify autocomplete load

src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js

@@ -172,12 +172,12 @@ export default function ChangeHostAdmin({
               <Autocomplete
                 autoHighlight
                 id="host"
-                options={hosts?.csEntryHosts ?? []}
+                options={query ? hosts?.csEntryHosts ?? [] : []}
                 loading={loadingHosts}
                 clearOnBlur={false}
                 value={host}
                 getOptionLabel={(option) => {
-                  return option?.csEntryHost?.fqdn;
+                  return option?.csEntryHost?.fqdn ?? "";
                 }}
                 renderInput={(params) => (
                   <TextField

src/components/IOC/CreateIOC/CreateIOC.js

@@ -31,6 +31,7 @@ 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 client = useContext(apiContext);
@@ -38,8 +39,7 @@ export function CreateIOC() {
   const {
     value: allowedGitProjects,
     wrapper: getAllowedGitProjects,
-    loading: loadingAllowedGitProjects,
-    dataReady: dataReadyAllowedGitProjects
+    loading: loadingAllowedGitProjects
   } = useAPIMethod({
     fcn: client.apis.Git.listProjects,
     call: false
@@ -58,8 +58,7 @@ export function CreateIOC() {
   const {
     value: names,
     wrapper: getNames,
-    loading: loadingNames,
-    dataReady
+    loading: loadingNames
   } = useAPIMethod({
     fcn: client.apis.Naming.fetchIOCByName,
     call: false
@@ -72,15 +71,11 @@ export function CreateIOC() {
 
   // fetch new names when name query changes
   useEffect(() => {
-    getNames(nameQuery);
+    if (nameQuery) {
+      getNames(nameQuery);
+    }
   }, [nameQuery, getNames]);
 
-  // get the allowed git projects on initial load
-  // TODO unnecessary! Update the hook...
-  useEffect(() => {
-    getAllowedGitProjects();
-  }, [getAllowedGitProjects]);
-
   // create the ioc on form submit
   const onSubmit = (event) => {
     event.preventDefault();
@@ -117,11 +112,11 @@ export function CreateIOC() {
         <Autocomplete
           autoHighlight
           id="nameAutocomplete"
-          options={names ?? []}
-          loading={loadingNames || !dataReady}
+          options={nameQuery ? names ?? [] : []}
+          loading={loadingNames}
           clearOnBlur={false}
           getOptionLabel={(option) => {
-            return option?.name;
+            return option?.name ?? "";
           }}
           renderInput={(params) => (
             <TextField
@@ -133,7 +128,7 @@ export function CreateIOC() {
                 ...params.InputProps,
                 endAdornment: (
                   <React.Fragment>
-                    {loadingNames || !dataReady ? (
+                    {loadingNames ? (
                       <CircularProgress
                         color="inherit"
                         size={20}
@@ -159,19 +154,31 @@ export function CreateIOC() {
         <Autocomplete
           autoHighlight
           id="gitId"
-          options={allowedGitProjects ?? []}
-          loading={loadingAllowedGitProjects || !dataReadyAllowedGitProjects}
+          options={gitInput ? allowedGitProjects ?? [] : []}
+          loading={loadingAllowedGitProjects}
           clearOnBlur={false}
           defaultValue={{
             id: null,
             url: ""
           }}
           getOptionLabel={(option) => {
-            return option.url;
+            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);
+            }
+          }}
           renderInput={(params) => (
             <TextField
               {...params}
@@ -183,8 +190,7 @@ export function CreateIOC() {
                 ...params.InputProps,
                 endAdornment: (
                   <React.Fragment>
-                    {loadingAllowedGitProjects ||
-                    !dataReadyAllowedGitProjects ? (
+                    {loadingAllowedGitProjects ? (
                       <CircularProgress
                         color="inherit"
                         size={20}

src/components/IOC/IOCDeployDialog/IOCDeployDialog.js

@@ -241,12 +241,12 @@ export function IOCDeployDialog({
           <Autocomplete
             autoHighlight
             id="host"
-            options={hosts?.csEntryHosts}
+            options={query ? hosts?.csEntryHosts ?? [] : []}
             loading={loadingHosts}
             clearOnBlur={false}
             defaultValue={init}
             getOptionLabel={(option) => {
-              return option?.csEntryHost?.fqdn;
+              return option?.csEntryHost?.fqdn ?? "";
             }}
             renderInput={(params) => (
               <TextField

src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js

@@ -31,6 +31,7 @@ export default function IOCDetailAdmin({
     description: ioc.description,
     name: ioc.namingName
   });
+  const [gitInput, setGitInput] = useState(null);
 
   // for the dialog
   const [open, setOpen] = useState(false);
@@ -41,8 +42,7 @@ export default function IOCDetailAdmin({
   const {
     value: allowedGitProjects,
     wrapper: getAllowedGitProjects,
-    loading: loadingAllowedGitProjects,
-    dataReady: dataReadyAllowedGitProjects
+    loading: loadingAllowedGitProjects
   } = useAPIMethod({
     fcn: client.apis.Git.listProjects,
     call: false
@@ -51,8 +51,7 @@ export default function IOCDetailAdmin({
   const {
     value: names,
     wrapper: getNames,
-    loading: loadingNames,
-    dataReady
+    loading: loadingNames
   } = useAPIMethod({
     fcn: client.apis.Naming.fetchIOCByName,
     call: false
@@ -85,11 +84,16 @@ export default function IOCDetailAdmin({
   );
 
   useEffect(() => {
-    getAllowedGitProjects();
-  }, [getAllowedGitProjects]);
+    // fetch git repos only if user has entered a text and it wasn't previously fetched
+    if (gitInput && !allowedGitProjects) {
+      getAllowedGitProjects();
+    }
+  }, [gitInput, allowedGitProjects, getAllowedGitProjects]);
 
   useEffect(() => {
-    getNames(nameQuery);
+    if (nameQuery) {
+      getNames(nameQuery);
+    }
   }, [nameQuery, getNames]);
 
   // when user clicks Submit button a dialog should open
@@ -131,18 +135,18 @@ export default function IOCDetailAdmin({
 
   function nameAutocomplete(disabled) {
     const isDisabled = disabled || iocIsDeployed;
-    const loading = (loadingNames || !dataReady) && !isDisabled;
+    const loading = loadingNames && !isDisabled;
     return (
       <Tooltip title={nameDisabledTitle}>
         <Autocomplete
           autoHighlight
           id="namingName"
-          options={names ?? []}
+          options={nameQuery ? names ?? [] : []}
           loading={loading}
           clearOnBlur={false}
           defaultValue={name}
           getOptionLabel={(option) => {
-            return option?.name;
+            return option?.name ?? "";
           }}
           renderInput={(params) => (
             <TextField
@@ -182,14 +186,12 @@ export default function IOCDetailAdmin({
 
   function gitRepoAutocomplete(disabled) {
     const isDisabled = disabled || iocIsDeployed;
-    const loading =
-      (loadingAllowedGitProjects || !dataReadyAllowedGitProjects) &&
-      !isDisabled;
+    const loading = loadingAllowedGitProjects && !isDisabled;
     return (
       <Autocomplete
         autoHighlight
         id="gitId"
-        options={allowedGitProjects ?? []}
+        options={gitInput ? allowedGitProjects ?? [] : []}
         loading={loading}
         clearOnBlur={false}
         defaultValue={{
@@ -203,6 +205,13 @@ export default function IOCDetailAdmin({
           setGitId(value?.id);
           setError(null);
         }}
+        onInputChange={(event, value, reason) => {
+          if (reason === "input") {
+            setGitInput(value);
+          } else {
+            setGitInput(null);
+          }
+        }}
         renderInput={(params) => (
           <TextField
             {...params}