From a269b64900d573eb02b3ad6450f2c16f40b0b891 Mon Sep 17 00:00:00 2001
From: Imre Toth <imre.toth@ess.eu>
Date: Wed, 11 Oct 2023 09:18:44 +0000
Subject: [PATCH] CE-2165: Modify autocomplete load
---
.../IOC/ChangeHostAdmin/ChangeHostAdmin.js | 4 +-
src/components/IOC/CreateIOC/CreateIOC.js | 46 +++++++++++--------
.../IOC/IOCDeployDialog/IOCDeployDialog.js | 4 +-
.../IOC/IOCDetailAdmin/IOCDetailAdmin.js | 37 +++++++++------
4 files changed, 53 insertions(+), 38 deletions(-)
diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
index 9c033943..2d3cdc3e 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 0263fa30..e7f0ddb5 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 3f380f26..7cc93804 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 9d07405d..3efa1bf0 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}
--
GitLab