diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js index 9c033943b8d7c7aa4172b54204ae735d8aa54ef9..2d3cdc3ec986fd4b5e910c0ce99839a10a5179d4 100644 --- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js +++ b/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 diff --git a/src/components/IOC/CreateIOC/CreateIOC.js b/src/components/IOC/CreateIOC/CreateIOC.js index 0263fa30b729e287f19abcee53501e0ce2d25315..e7f0ddb531349b83c5bf46317112bc9d37c4dbbf 100644 --- a/src/components/IOC/CreateIOC/CreateIOC.js +++ b/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} diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js index 3f380f26caba9d0385ca0ad3496e5fc6967dc19a..7cc9380459b19854a44e0f801e0f00d6f78fa491 100644 --- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js +++ b/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 diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js index 9d07405d3ed1183fc2e62b0be2bc2aef30a1fd4a..3efa1bf0185d96febfc21b71b5ba5287166eb9ad 100644 --- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js +++ b/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}