From b8bfcddc11fc2bca6884d67bb3644a43aa0e6049 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@ess.eu>
Date: Tue, 30 Apr 2024 11:54:02 +0000
Subject: [PATCH] CE-2561: Fetch repos on query
---
src/components/IOC/CreateIOC/CreateIOC.js | 57 +++++++++--------
.../IOC/IOCDetailAdmin/IOCDetailAdmin.js | 62 +++++++++++--------
2 files changed, 68 insertions(+), 51 deletions(-)
diff --git a/src/components/IOC/CreateIOC/CreateIOC.js b/src/components/IOC/CreateIOC/CreateIOC.js
index e7f0ddb5..fde4c006 100644
--- a/src/components/IOC/CreateIOC/CreateIOC.js
+++ b/src/components/IOC/CreateIOC/CreateIOC.js
@@ -1,4 +1,4 @@
-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
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index 025ce948..ecc9ab6c 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
@@ -1,4 +1,10 @@
-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
--
GitLab