This commit is contained in:
Laux Dev
2026-03-26 17:22:32 +08:00
parent 9f0392c9c2
commit 992d01ba9b
10 changed files with 134 additions and 71 deletions

View File

@@ -1,6 +1,7 @@
"use client";
import React, { useState } from "react";
import variableStyles from "./variableStyles.module.css";
import DeleteIcon from "@/app/components/icons/delete";
const Settings = ({
setTriggerAddVariable,
setTriggerAddVolume,
@@ -8,7 +9,29 @@ const Settings = ({
...props
}) => {
const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
const sampleData = [
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
{ id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
{
id: 2,
key: "DatabaseSettings:ConnectionString",
value:
"mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
},
];
return (
<div {...props}>
<div className={variableStyles.variablesHeader}>
@@ -111,16 +134,19 @@ const Settings = ({
</div>
</div>
<div className={variableStyles.variableList}>
<div className={variableStyles.emptyVariableList}>
{/* <div className={variableStyles.emptyVariableList}>
<div>
<p>No Environment Variables added</p>
</div>
</div>
{/* <div className={variableStyles.variable}>
<p>REQUEST_SERVICE_GRPC</p>
<p>request-service:50053</p>
<DeleteIcon />
</div> */}
</div> */}
{sampleData.map((data, key) => {
return (
<div className={variableStyles.variable}>
<p>{data.key}</p>
<p>{data.value}</p>
</div>
);
})}
</div>
</div>
</div>

View File

@@ -324,4 +324,10 @@
.resourceFields .inputGroup div {
width: 100%;
}
.projectDetailsHeader {
display: none;
}
.fieldsContainerCreateNew {
padding-top: 0;
}
}

View File

@@ -151,26 +151,7 @@
border-radius: 4px;
background: #1d1e2a;
}
.variable {
display: flex;
padding: 8px 0;
align-items: center;
align-self: stretch;
border-bottom: 0.5px solid #2e3042;
width: 100%;
}
.variable p {
display: flex;
align-items: center;
flex: 1 0 0;
align-self: stretch;
color: #d2d3e1;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.15px;
}
.environmentVariablesContainer {
display: flex;
min-height: 200px;
@@ -202,16 +183,18 @@
}
.envVariablesHeader {
display: flex;
flex-direction: column;
padding: 12px 24px;
align-items: flex-start;
width: 100%;
align-self: stretch;
flex-direction: column;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div {
display: flex;
padding: 12px 16px;
align-items: flex-start;
align-self: stretch;
border-bottom: 1px solid #2c2e3f;
}
.envVariablesHeader > div p {
display: flex;
@@ -226,16 +209,43 @@
}
.variableList {
display: flex;
padding: 0 16px 16px 16px;
padding: 24px 24px 0 24px;
padding-bottom: 24px;
flex-direction: column;
align-items: center;
align-items: flex-start;
gap: 10px;
width: 100%;
flex: 1 0 0;
}
.variable {
display: flex;
align-items: flex-start;
align-self: stretch;
justify-content: space-between;
gap: 5px;
width: 100%;
}
.variable p {
display: flex;
align-items: start;
flex: 1 0 0;
align-self: stretch;
overflow-wrap: anywhere;
color: #d2d3e1;
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 0.15px;
}
.emptyVariableList {
display: flex;
padding: 24px 16px 0 16px;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 10px;
flex: 1 0 0;
}
@@ -243,6 +253,7 @@
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
.emptyVariableList > div > div {

View File

@@ -332,4 +332,10 @@
.resourceFields .inputGroup div {
width: 100%;
}
.projectDetailsHeader {
display: none;
}
.fieldsContainerCreateNew {
padding-top: 0;
}
}