From 4b021727482a84bfbe8997890f3f31f34e787a9b Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Tue, 11 Jun 2024 08:55:49 +0200
Subject: [PATCH] handle api call with create repo request and clear fields on
repo option change
---
src/components/IOC/CreateIOC/CreateIOC.js | 54 ++++++++++-------------
1 file changed, 24 insertions(+), 30 deletions(-)
diff --git a/src/components/IOC/CreateIOC/CreateIOC.js b/src/components/IOC/CreateIOC/CreateIOC.js
index 80e498e0..40186ad1 100644
--- a/src/components/IOC/CreateIOC/CreateIOC.js
+++ b/src/components/IOC/CreateIOC/CreateIOC.js
@@ -26,8 +26,8 @@ const createRequestParams = (query) => {
export function CreateIOC() {
const navigate = useNavigate();
- const [name, setName] = useState();
- const [gitId, setGitId] = useState(null);
+ const [namingEntity, setNamingEntity] = useState({});
+ const [gitProject, setGitProject] = useState({});
const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 });
const [selectedRepoOption, setSelectedRepoOption] = useState(WITHOUT_REPO);
@@ -69,11 +69,6 @@ export function CreateIOC() {
call: false
});
- // Return home on cancel
- const handleCancel = () => {
- navigate("/");
- };
-
// create the ioc on form submit
const onSubmit = (event) => {
event.preventDefault();
@@ -81,13 +76,20 @@ export function CreateIOC() {
{},
{
requestBody: {
- gitProjectId: gitId,
- namingUuid: name ? name.uuid : undefined
+ gitProjectId: gitProject.id,
+ namingUuid: namingEntity ? namingEntity.uuid : undefined,
+ repository_name: repoName ? repoName : undefined
}
}
);
};
+ const handleSelectRepoOption = (option) => {
+ setSelectedRepoOption(option);
+ setNamingEntity({});
+ setGitProject({});
+ };
+
// fetch new names when name query changes
useEffect(() => {
if (nameQuery) {
@@ -122,17 +124,16 @@ export function CreateIOC() {
<Typography variant="h2">Create new IOC</Typography>
<RepositoryOptions
selectedRepoOption={selectedRepoOption}
- onSelectRepoOption={(option) => setSelectedRepoOption(option)}
+ onSelectRepoOption={handleSelectRepoOption}
/>
<Autocomplete
autoHighlight
id="nameAutocomplete"
+ value={namingEntity}
options={nameQuery ? names ?? [] : []}
loading={loadingNames}
clearOnBlur={false}
- getOptionLabel={(option) => {
- return option?.name ?? "";
- }}
+ getOptionLabel={(option) => option?.name ?? ""}
renderInput={(params) => (
<TextField
{...params}
@@ -154,33 +155,26 @@ export function CreateIOC() {
)
}}
disabled={loading}
- helperText={name ? name.description : ""}
+ helperText={namingEntity ? namingEntity.description : ""}
/>
)}
- onChange={(event, value, reason) => {
- setName(value);
- }}
- onInputChange={(event) => {
- event && onNameKeyUp(event.nativeEvent);
- }}
+ onChange={(_, value) => setNamingEntity(value)}
+ onInputChange={(event) => event && onNameKeyUp(event.nativeEvent)}
autoSelect
/>
{selectedRepoOption === WITHOUT_REPO ? (
<Autocomplete
autoHighlight
id="gitId"
- options={repoQuery || gitId ? allowedGitProjects ?? [] : []}
+ value={gitProject}
+ options={repoQuery || gitProject ? allowedGitProjects ?? [] : []}
loading={loadingAllowedGitProjects}
clearOnBlur={false}
getOptionLabel={(option) => {
return option?.url ?? "";
}}
- onChange={(event, value, reason) => {
- setGitId(value?.id);
- }}
- onInputChange={(event) => {
- event && onRepoKeyUp(event.nativeEvent);
- }}
+ onChange={(_, value) => setGitProject(value)}
+ onInputChange={(event) => event && onRepoKeyUp(event.nativeEvent)}
renderInput={(params) => (
<TextField
{...params}
@@ -224,7 +218,7 @@ export function CreateIOC() {
justifyContent="flex-end"
>
<Button
- onClick={handleCancel}
+ onClick={() => navigate("/")}
color="primary"
disabled={loading}
>
@@ -235,8 +229,8 @@ export function CreateIOC() {
variant="contained"
type="submit"
disabled={
- loading || !name || selectedRepoOption === WITHOUT_REPO
- ? !gitId
+ loading || !namingEntity || selectedRepoOption === WITHOUT_REPO
+ ? !gitProject
: !repoName
}
>
--
GitLab