Skip to content

Commit 09cddc4

Browse files
neel1996neel1996
committed
tweak remote management component based on api schema
1 parent 46f1dc4 commit 09cddc4

File tree

5 files changed

+696
-713
lines changed

5 files changed

+696
-713
lines changed

‎ui/package-lock.json‎

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"axios": "^0.21.1",
2020
"date-fns": "^2.16.1",
2121
"lodash.debounce": "^4.0.8",
22-
"postcss": "^8.2.5",
22+
"postcss": "^8.2.6",
2323
"prismjs": "^1.22.0",
2424
"react": "^17.0.1",
2525
"react-dom": "^17.0.1",

‎ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/RemoteConfigComponent/AddRemoteRepoFormComponent.js‎

Lines changed: 139 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,139 @@
1-
import React, { useRef } from "react";
2-
import axios from "axios";
3-
import { globalAPIEndpoint } from "../../../../../../../util/env_config";
4-
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
5-
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6-
7-
export default function AddRemoteRepoFormComponent(props) {
8-
const {
9-
setReloadView,
10-
setRemoteForm,
11-
setFieldMissing,
12-
setInvalidUrl,
13-
setAddNewRemote,
14-
setAddRemoteStatus,
15-
repoId,
16-
setStatusCheck,
17-
setRemoteOperation,
18-
} = props;
19-
const remoteNameRef = useRef();
20-
const remoteUrlRef = useRef();
21-
22-
const formAddRemote = (formId, placeholder) => {
23-
return (
24-
<input
25-
type="text"
26-
autoComplete="off"
27-
id={formId}
28-
className={`rounded w-full py-2 border-2 text-center xl:text-lg lg:text-lg md:text-base text-base items-center text-gray-800 bg-white`}
29-
style={{ borderColor: "rgb(113 166 196 / 33%)" }}
30-
placeholder={placeholder}
31-
ref={formId === "remoteName" ? remoteNameRef : remoteUrlRef}
32-
onChange={(event) => {
33-
setFieldMissing(false);
34-
setAddRemoteStatus(false);
35-
setInvalidUrl(false);
36-
const remoteNameVal = event.target.value;
37-
if (
38-
event.target.id === "remoteName" &&
39-
remoteNameVal.match(/[\s\\//*]/gi)
40-
) {
41-
event.target.value = remoteNameVal.replace(/[\s\\//*]/gi, "-");
42-
}
43-
}}
44-
></input>
45-
);
46-
};
47-
48-
const addRemote = () => {
49-
let remoteName = remoteNameRef.current.value.trim();
50-
let remoteUrl = remoteUrlRef.current.value.trim();
51-
52-
if (remoteName && remoteUrl && remoteUrl.match(/[^ ]*/g)) {
53-
if (remoteUrl.match(/(\s)/g)) {
54-
setInvalidUrl(true);
55-
} else {
56-
let status = "success";
57-
58-
axios({
59-
url: globalAPIEndpoint,
60-
method: "POST",
61-
data: {
62-
query: `
63-
mutation {
64-
addRemote(repoId: "${repoId}", remoteName: "${remoteName}", remoteUrl: ${remoteUrl}"){
65-
status
66-
}
67-
}
68-
`,
69-
},
70-
})
71-
.then((res) => {
72-
status = res.data.data;
73-
if (status === "success") {
74-
setRemoteForm(false);
75-
setAddNewRemote(true);
76-
setReloadView(true);
77-
remoteNameRef.current.value = "";
78-
remoteUrlRef.current.value = "";
79-
} else {
80-
setAddRemoteStatus(true); //status === "failed"
81-
}
82-
setStatusCheck(false);
83-
setRemoteOperation(" ");
84-
})
85-
.catch(() => {
86-
setStatusCheck(true);
87-
setRemoteOperation("add");
88-
// setRemoteDetails([...remoteDetails, {
89-
// remoteName: remoteName,
90-
// remoteUrl: remoteUrl,
91-
// }]);
92-
93-
// setRemoteForm(false);
94-
// setAddNewRemote(true);
95-
// setReloadView(true);
96-
// remoteNameRef.current.value = "";
97-
// remoteUrlRef.current.value = "";
98-
});
99-
}
100-
} else {
101-
setAddNewRemote(false);
102-
setInvalidUrl(false);
103-
setFieldMissing(true);
104-
}
105-
};
106-
107-
return (
108-
<form className="flex items-center w-full my-6 form--data">
109-
<div className="w-1/4 mx-auto">
110-
{formAddRemote("remoteName", "Remote name")}
111-
</div>
112-
<div className="w-1/2 mx-auto">
113-
{formAddRemote("remoteURL", "Remote URL")}
114-
</div>
115-
<div
116-
className="flex items-center text-center justify-evenly"
117-
style={{ outline: "none", width: "22%" }}
118-
>
119-
<div
120-
className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-blue-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-700"
121-
onClick={() => {
122-
addRemote();
123-
}}
124-
>
125-
<FontAwesomeIcon
126-
icon={faCheck}
127-
className="text-white"
128-
></FontAwesomeIcon>
129-
</div>
130-
<div
131-
className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-red-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-red-600"
132-
onClick={() => {
133-
setAddNewRemote(true);
134-
setRemoteForm(false);
135-
setFieldMissing(false);
136-
setInvalidUrl(false);
137-
setAddRemoteStatus(false);
138-
}}
139-
>
140-
<FontAwesomeIcon
141-
icon={faTimes}
142-
className="text-white"
143-
></FontAwesomeIcon>
144-
</div>
145-
</div>
146-
</form>
147-
);
148-
}
1+
import React, { useRef } from "react";
2+
import axios from "axios";
3+
import { globalAPIEndpoint } from "../../../../../../../util/env_config";
4+
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
5+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6+
7+
export default function AddRemoteRepoFormComponent(props) {
8+
const {
9+
setReloadView,
10+
setRemoteForm,
11+
setFieldMissing,
12+
setInvalidUrl,
13+
setAddNewRemote,
14+
setAddRemoteStatus,
15+
repoId,
16+
setStatusCheck,
17+
setRemoteOperation,
18+
} = props;
19+
20+
const remoteNameRef = useRef();
21+
const remoteUrlRef = useRef();
22+
23+
const formAddRemote = (formId, placeholder) => {
24+
return (
25+
<input
26+
type="text"
27+
autoComplete="off"
28+
id={formId}
29+
className={`rounded w-full py-2 border-2 text-center xl:text-lg lg:text-lg md:text-base text-base items-center text-gray-800 bg-white`}
30+
style={{ borderColor: "rgb(113 166 196 / 33%)" }}
31+
placeholder={placeholder}
32+
ref={formId === "remoteName" ? remoteNameRef : remoteUrlRef}
33+
onChange={(event) => {
34+
setFieldMissing(false);
35+
setAddRemoteStatus(false);
36+
setInvalidUrl(false);
37+
const remoteNameVal = event.target.value;
38+
if (
39+
event.target.id === "remoteName" &&
40+
remoteNameVal.match(/[\s\\//*]/gi)
41+
) {
42+
event.target.value = remoteNameVal.replace(/[\s\\//*]/gi, "-");
43+
}
44+
}}
45+
></input>
46+
);
47+
};
48+
49+
const addRemote = () => {
50+
let remoteName = remoteNameRef.current.value.trim();
51+
let remoteUrl = remoteUrlRef.current.value.trim();
52+
53+
if (remoteName && remoteUrl && remoteUrl.match(/[^ ]*/g)) {
54+
if (remoteUrl.match(/(\s)/g)) {
55+
setInvalidUrl(true);
56+
} else {
57+
axios({
58+
url: globalAPIEndpoint,
59+
method: "POST",
60+
data: {
61+
query: `
62+
mutation {
63+
addRemote(repoId: "${repoId}", remoteName: "${remoteName}", remoteUrl: "${remoteUrl}"){
64+
status
65+
}
66+
}
67+
`,
68+
},
69+
})
70+
.then((res) => {
71+
const { status } = res.data.data.addRemote;
72+
if (status === "REMOTE_ADD_SUCCESS") {
73+
remoteNameRef.current.value = "";
74+
remoteUrlRef.current.value = "";
75+
76+
setRemoteForm(false);
77+
setAddNewRemote(true);
78+
setReloadView(true);
79+
} else {
80+
setAddRemoteStatus(true);
81+
}
82+
setStatusCheck(false);
83+
setRemoteOperation(" ");
84+
})
85+
.catch((err) => {
86+
console.log(err);
87+
setStatusCheck(true);
88+
setRemoteOperation("add");
89+
});
90+
}
91+
} else {
92+
setAddNewRemote(false);
93+
setInvalidUrl(false);
94+
setFieldMissing(true);
95+
}
96+
};
97+
98+
return (
99+
<form className="flex items-center w-full my-6 form--data">
100+
<div className="w-1/4 mx-auto">
101+
{formAddRemote("remoteName", "Remote name")}
102+
</div>
103+
<div className="w-1/2 mx-auto">
104+
{formAddRemote("remoteURL", "Remote URL")}
105+
</div>
106+
<div
107+
className="flex items-center text-center justify-evenly"
108+
style={{ outline: "none", width: "22%" }}
109+
>
110+
<div
111+
className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-blue-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-blue-700"
112+
onClick={() => {
113+
addRemote();
114+
}}
115+
>
116+
<FontAwesomeIcon
117+
icon={faCheck}
118+
className="text-white"
119+
></FontAwesomeIcon>
120+
</div>
121+
<div
122+
className="items-center w-5/12 p-1 py-2 mx-auto text-base font-semibold bg-red-500 rounded cursor-pointer xl:text-lg lg:text-lg md:text-base hover:bg-red-600"
123+
onClick={() => {
124+
setAddNewRemote(true);
125+
setRemoteForm(false);
126+
setFieldMissing(false);
127+
setInvalidUrl(false);
128+
setAddRemoteStatus(false);
129+
}}
130+
>
131+
<FontAwesomeIcon
132+
icon={faTimes}
133+
className="text-white"
134+
></FontAwesomeIcon>
135+
</div>
136+
</div>
137+
</form>
138+
);
139+
}

0 commit comments

Comments
 (0)