+
{openEditModal && (
setOpenEditModal(false)} environment={environment} collection={collection} />
)}
@@ -27,7 +31,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
)}
-
+
{environment.name}
@@ -37,9 +41,8 @@ const EnvironmentDetails = ({ environment, collection }) => {
-
-
-
+
+
);
};
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
index 9886b54bb4..537423c049 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -8,16 +8,23 @@ import ImportEnvironment from '../ImportEnvironment';
import ManageSecrets from '../ManageSecrets';
import StyledWrapper from './StyledWrapper';
-const EnvironmentList = ({ collection }) => {
- const { environments } = collection;
+const EnvironmentList = ({ collection, setEnvironments }) => {
const [selectedEnvironment, setSelectedEnvironment] = useState(null);
const [openCreateModal, setOpenCreateModal] = useState(false);
const [openImportModal, setOpenImportModal] = useState(false);
const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false);
- const envUids = environments ? environments.map((env) => env.uid) : [];
+ const envUids = collection?.environments?.map((env) => env.uid) ?? [];
const prevEnvUids = usePrevious(envUids);
+ const onColorChange = (environment, color) => {
+ const updatedEnvironments = collection.environments.map((e) =>
+ e.uid === environment.uid ? { ...e, color: color } : e
+ );
+ setSelectedEnvironment({ ...selectedEnvironment, color: color });
+ setEnvironments(updatedEnvironments);
+ };
+
useEffect(() => {
if (selectedEnvironment) {
return;
@@ -27,24 +34,24 @@ const EnvironmentList = ({ collection }) => {
if (environment) {
setSelectedEnvironment(environment);
} else {
- setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+ setSelectedEnvironment(collection?.environments?.length ? collection.environments[0] : null);
}
- }, [collection, environments, selectedEnvironment]);
+ }, [collection, selectedEnvironment]);
useEffect(() => {
// check env add
- if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
- const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
+ if (prevEnvUids?.length && envUids.length > prevEnvUids.length) {
+ const newEnv = collection.environments.find((env) => !prevEnvUids.includes(env.uid));
if (newEnv) {
setSelectedEnvironment(newEnv);
}
}
// check env delete
- if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
- setSelectedEnvironment(environments && environments.length ? environments[0] : null);
+ if (prevEnvUids?.length && envUids.length < prevEnvUids.length) {
+ setSelectedEnvironment(collection.environments?.length ? collection.environments[0] : null);
}
- }, [envUids, environments, prevEnvUids]);
+ }, [envUids, collection, prevEnvUids]);
if (!selectedEnvironment) {
return null;
@@ -58,17 +65,15 @@ const EnvironmentList = ({ collection }) => {
- {environments &&
- environments.length &&
- environments.map((env) => (
-
setSelectedEnvironment(env)}
- >
- {env.name}
-
- ))}
+ {collection?.environments?.map((env) => (
+
setSelectedEnvironment(env)}
+ >
+ {env.name}
+
+ ))}
setOpenCreateModal(true)}>
+ Create
@@ -85,7 +90,11 @@ const EnvironmentList = ({ collection }) => {
-
+
onColorChange(selectedEnvironment, color)}
+ collection={collection}
+ />