Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Validations added temporarily

Browse Source
This commit is contained in:
Laux Dev
2026-03-05 11:52:21 +08:00
parent 7f42f61431
commit dae12d74ee
13 changed files with 116 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/projects/add/page.jsx
View File

@@ -6,6 +6,7 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
import WarningIcon from "@/app/components/icons/warning";
import Prompts from "@/app/components/prompts/Prompts";
const AddProject = () => {
return (
<div className={globalStyle.section}>
@@ -20,7 +21,7 @@ const AddProject = () => {
/>
<div className={styles.contentContainer}>
<TopToolTip />
<div className={styles.createProjectFormContainer}>
<form className={styles.createProjectFormContainer} id="form">
<div className={styles.inputGroup}>
<div className={styles.label}>
<p>
@@ -28,11 +29,8 @@ const AddProject = () => {
</p>
</div>
<div className={styles.inputField}>
<TextField placeHolder="Enter project name" />
<div className={styles.prompts}>
<WarningIcon />
<p>The name is already in used. You can try another.</p>
</div>
<TextField placeHolder="Enter project name" required />
<Prompts show={true} />
</div>
</div>
<div className={styles.inputGroup}>
@@ -42,7 +40,7 @@ const AddProject = () => {
</p>
</div>
<div className={styles.inputField}>
<TextField placeHolder="Version" />
<TextField placeHolder="Version" required />
</div>
</div>
<div className={styles.inputGroup}>
@@ -79,7 +77,7 @@ const AddProject = () => {
/>
</div>
</div>
</div>
</form>
</div>
</div>
</div>

40
frontend/src/app/projects/add/styles.module.css
View File

@@ -52,45 +52,7 @@
gap: 8px;
align-self: stretch;
}
.inputField > input,
.inputField > select {
display: flex;
height: 44px;
padding: 12px 16px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 6px;
border: 1px solid #616583;
background-color: transparent;
color: white;
font-family: Inter;
font-size: 16px;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.inputField > input:focus {
border-radius: 6px;
border: 1px solid #959aff;
background: rgba(75, 79, 109, 0.25);
}
.inputField > input:hover {
background: rgba(75, 79, 109, 0.25);
}
.inputField > input::placeholder,
.inputField > select {
color: #85869b;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.prompts {
display: flex;
align-items: center;

62
frontend/src/app/projects/view/add-from-scratch/page.jsx
View File

@@ -19,6 +19,13 @@ const AddServices = () => {
const [disableScaling, setDisableScaling] = useState(true);
const [disableReadiness, setDisableReadiness] = useState(true);
const [disableLiveness, setDisableLiveness] = useState(true);
const [minPods, setMinPods] = useState("");
const [maxPods, setMaxPods] = useState("");
const [readinessPath, setReadinessPath] = useState("");
const [readinessPort, setReadinessPort] = useState("");
const [livenessPath, setLivenessPath] = useState("");
const [livenessPort, setLivenessPort] = useState("");
return (
<div className={globalStyle.section}>
{triggerAddVariable && (
@@ -40,7 +47,7 @@ const AddServices = () => {
requiredButtons={["title", "save"]}
/>
<div className={styles.contentContainer}>
<div className={styles.fieldsContainerCreateNew}>
<form className={styles.fieldsContainerCreateNew} id="form">
<div className={styles.projectDetails}>
<div className={styles.projectDetailsHeader}>
<p>Project Details</p>
@@ -59,11 +66,11 @@ const AddServices = () => {
<div>
<div>
<p>Name</p>
<TextField placeHolder="Enter service name" />
<TextField placeHolder="Enter service name" required />
</div>
<div>
<p>Version</p>
<TextField placeHolder="Service version" />
<TextField placeHolder="Service version" required />
</div>
</div>
<div>
@@ -71,13 +78,13 @@ const AddServices = () => {
<p>
Image <span>(Optional)</span>
</p>
<TextField placeHolder="Enter image name" />
<TextField placeHolder="Enter image name" required />
</div>
</div>
<div>
<div>
<p>Port</p>
<TextField placeHolder="Enter port" />
<TextField placeHolder="Enter port" required />
</div>
</div>
<div>
@@ -114,21 +121,21 @@ const AddServices = () => {
<div>
<div>
<p>CPU Request (MB)</p>
<TextField placeHolder="250" />
<TextField placeHolder="250" required />
</div>
<div>
<p>CPU Limit (MB)</p>
<TextField placeHolder="250" />
<TextField placeHolder="250" required />
</div>
</div>
<div>
<div>
<p>Memory Request (MB)</p>
<TextField placeHolder="250" />
<TextField placeHolder="250" required />
</div>
<div>
<p>Memory Limit (MB)</p>
<TextField placeHolder="500" />
<TextField placeHolder="500" required />
</div>
</div>
</div>
@@ -141,7 +148,11 @@ const AddServices = () => {
<p>Auto Scaling</p>
<CustomCheckbox
id="scalingCheckBox"
setChecked={() => setDisableScaling(!disableScaling)}
setChecked={() => {
setDisableScaling(!disableScaling);
setMinPods("");
setMaxPods("");
}}
/>
</div>
</div>
@@ -154,12 +165,18 @@ const AddServices = () => {
<TextField
placeHolder="1"
disabled={disableScaling}
required={maxPods.trim() !== ""}
onChange={(e) => setMinPods(e.target.value)}
value={minPods}
/>
</div>
<div>
<p>Maximum pods</p>
<TextField
placeHolder="1"
value={maxPods}
required={minPods.trim() !== ""}
onChange={(e) => setMaxPods(e.target.value)}
disabled={disableScaling}
/>
</div>
@@ -175,9 +192,11 @@ const AddServices = () => {
<p>Readiness</p>
<CustomCheckbox
id="readiNessCheckBox"
setChecked={() =>
setDisableReadiness(!disableReadiness)
}
setChecked={() => {
setDisableReadiness(!disableReadiness);
setReadinessPath("");
setReadinessPort("");
}}
/>
</div>
</div>
@@ -190,6 +209,9 @@ const AddServices = () => {
<TextField
placeHolder="Enter Readiness path"
disabled={disableReadiness}
value={readinessPath}
required={readinessPort.trim() !== ""}
onChange={(e) => setReadinessPath(e.target.value)}
/>
</div>
<div>
@@ -197,6 +219,9 @@ const AddServices = () => {
<TextField
placeHolder="Enter Readiness port"
disabled={disableReadiness}
value={readinessPort}
required={readinessPath.trim() !== ""}
onChange={(e) => setReadinessPort(e.target.value)}
/>
</div>
</div>
@@ -214,6 +239,8 @@ const AddServices = () => {
setChecked={() => {
console.log("alsdjhfkjas");
setDisableLiveness(!disableLiveness);
setLivenessPath("");
setLivenessPort("");
}}
/>
</div>
@@ -226,14 +253,19 @@ const AddServices = () => {
<TextField
placeHolder="Enter liveness path"
disabled={disableLiveness}
value={livenessPath}
required={livenessPort.trim() !== ""}
onChange={(e) => setLivenessPath(e.target.value)}
/>
</div>
<div>
<p>Liveness Port</p>
<TextField
placeHolder="Enter liveness port"
disabled={disableLiveness}
value={livenessPort}
required={livenessPath.trim() !== ""}
onChange={(e) => setLivenessPort(e.target.value)}
/>
</div>
</div>
@@ -242,7 +274,7 @@ const AddServices = () => {
</div>
</div>
</div>
</div>
</form>
<div className={variableStyles.variables}>
<div className={variableStyles.variablesHeader}>
<div>

27
frontend/src/app/projects/view/add-from-scratch/styles.module.css
View File

@@ -65,7 +65,7 @@
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
gap: 8px;
align-self: stretch;
}
.fieldsCreateNew > div:nth-child(1) {
@@ -98,30 +98,7 @@
.resourceFields > div > div p > span {
color: #85869b;
}
.fieldsCreateNew > div > div input,
.fieldsCreateNew > div > div select,
.resourceFields > div > div input,
.resourceFields > div > div select {
display: flex;
padding: 12px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 4px;
border: 1px solid #4b4f6d;
background-color: transparent;
color: white;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.16px;
}
.fieldsCreateNew > div > div input::placeholder,
.resourceFields > div > div input::placeholder {
color: #85869b;
}
.repositoryForm {
display: flex;
padding: 12px;

2
frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
View File

@@ -7,7 +7,7 @@ import AddIcon from "@/app/components/icons/add";
import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
import SelectField from "@/app/components/select/SelectField";
const AddVariableModal = (props) => {
const [isGeneric, setIsGeneric] = useState();
const [isGeneric, setIsGeneric] = useState(true);
return (
<div className={styles.container}>
<div className={styles.modal}>