associate colors to environments

Signed-off-by: mathieu <mathieu.dreano@gmail.com>
usebruno · Nov 25, 2023 · c831150 · c831150
1 parent f0d5cde
commit c831150
Show file tree

Hide file tree

Showing 13 changed files with 189 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,13 @@
     "@faker-js/faker": "^7.6.0",
     "@jest/globals": "^29.2.0",
     "@playwright/test": "^1.27.1",
+    "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
     "jest": "^29.2.0",
     "pretty-quick": "^3.1.3",
     "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "fs-extra": "^11.1.1"
+    "react-color": "^2.19.3",
+    "ts-jest": "^29.0.5"
   },
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  .current-enviroment {
+  .current-environment {
     background-color: ${(props) => props.theme.sidebar.badge.bg};
     border-radius: 15px;
 

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useState } from 'react';
+import React, { useRef, forwardRef, useState, useEffect } from 'react';
 import find from 'lodash/find';
 import Dropdown from 'components/Dropdown';
 import { selectEnvironment } from 'providers/ReduxStore/slices/collections/actions';
@@ -13,11 +13,21 @@ const EnvironmentSelector = ({ collection }) => {
   const dropdownTippyRef = useRef();
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const { environments, activeEnvironmentUid } = collection;
-  const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
+  const [activeEnvironment, setActiveEnvironment] = useState(
+    activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null
+  );
+
+  useEffect(() => {
+    //rerender to change database icon color
+  }, [activeEnvironment]);
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="current-enviroment flex items-center justify-center pl-3 pr-2 py-1 select-none">
+      <div
+        ref={ref}
+        style={{ background: activeEnvironment?.color }}
+        className="current-environment flex items-center justify-center pl-3 pr-2 py-1 select-none"
+      >
         {activeEnvironment ? activeEnvironment.name : 'No Environment'}
         <IconCaretDown className="caret" size={14} strokeWidth={2} />
       </div>
@@ -30,6 +40,7 @@ const EnvironmentSelector = ({ collection }) => {
     dispatch(selectEnvironment(environment ? environment.uid : null, collection.uid))
       .then(() => {
         if (environment) {
+          setActiveEnvironment(environment);
           toast.success(`Environment changed to ${environment.name}`);
         } else {
           toast.success(`No Environments are active now`);
@@ -52,7 +63,8 @@ const EnvironmentSelector = ({ collection }) => {
                     dropdownTippyRef.current.hide();
                   }}
                 >
-                  <IconDatabase size={18} strokeWidth={1.5} /> <span className="ml-2">{e.name}</span>
+                  <IconDatabase color={e.color} size={18} strokeWidth={1.5} />
+                  <span className="ml-2">{e.name}</span>
                 </div>
               ))
             : null}
@@ -74,7 +86,14 @@ const EnvironmentSelector = ({ collection }) => {
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={() => setOpenSettingsModal(false)} />}
+      {openSettingsModal && (
+        <EnvironmentSettings
+          collection={collection}
+          activeEnvironment={activeEnvironment}
+          setActiveEnvironment={setActiveEnvironment}
+          onClose={() => setOpenSettingsModal(false)}
+        />
+      )}
     </StyledWrapper>
   );
 };

diff --git a/...ents/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/...ents/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -52,7 +52,6 @@ const EnvironmentVariables = ({ environment, collection }) => {
 
   const ErrorMessage = ({ name }) => {
     const meta = formik.getFieldMeta(name);
-    console.log(name, meta);
     if (!meta.error) {
       return null;
     }

diff --git a/...c/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/...c/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,17 +1,26 @@
 import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import CopyEnvironment from '../../CopyEnvironment';
 import DeleteEnvironment from '../../DeleteEnvironment';
 import RenameEnvironment from '../../RenameEnvironment';
 import EnvironmentVariables from './EnvironmentVariables';
+import EnvironmentColor from '../EnvironmentDetails/EnvironmentColor';
 
-const EnvironmentDetails = ({ environment, collection }) => {
+const EnvironmentDetails = ({ environment, setSelectedEnvironment, collection }) => {
   const [openEditModal, setOpenEditModal] = useState(false);
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [openCopyModal, setOpenCopyModal] = useState(false);
+  const [iconDatabaseColor, setIconDatabaseColor] = useState(environment.color);
+
+  useEffect(() => {
+    setIconDatabaseColor(environment.color);
+  }, [environment]);
 
   return (
-    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
+    <div
+      className="px-6 flex-grow flex flex-col pt-6"
+      style={{ maxWidth: '700px', flexDirection: 'column', rowGap: '0.5em' }}
+    >
       {openEditModal && (
         <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
       )}
@@ -27,7 +36,7 @@ const EnvironmentDetails = ({ environment, collection }) => {
       )}
       <div className="flex">
         <div className="flex flex-grow items-center">
-          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
+          <IconDatabase className="cursor-pointer" color={iconDatabaseColor} size={20} strokeWidth={1.5} />
           <span className="ml-1 font-semibold">{environment.name}</span>
         </div>
         <div className="flex gap-x-4 pl-4">
@@ -37,9 +46,12 @@ const EnvironmentDetails = ({ environment, collection }) => {
         </div>
       </div>
 
-      <div>
-        <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
-      </div>
+      <EnvironmentColor
+        onColorChange={(color) => setSelectedEnvironment({ ...environment, color: color })}
+        environment={environment}
+        collection={collection}
+      />
+      <EnvironmentVariables environment={environment} collection={collection} />
     </div>
   );
 };

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -8,29 +8,15 @@ import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 
-const EnvironmentList = ({ collection }) => {
+const EnvironmentList = ({ collection, selectedEnvironment, setSelectedEnvironment }) => {
   const { environments } = collection;
-  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 prevEnvUids = usePrevious(envUids);
 
-  useEffect(() => {
-    if (selectedEnvironment) {
-      return;
-    }
-
-    const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-    if (environment) {
-      setSelectedEnvironment(environment);
-    } else {
-      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
-  }, [collection, environments, selectedEnvironment]);
-
   useEffect(() => {
     // check env add
     if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
@@ -46,7 +32,7 @@ const EnvironmentList = ({ collection }) => {
     }
   }, [envUids, environments, prevEnvUids]);
 
-  if (!selectedEnvironment) {
+  if (!collection.activeEnvironmentUid) {
     return null;
   }
 
@@ -85,7 +71,11 @@ const EnvironmentList = ({ collection }) => {
             </div>
           </div>
         </div>
-        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
+        <EnvironmentDetails
+          environment={selectedEnvironment}
+          setSelectedEnvironment={setSelectedEnvironment}
+          collection={collection}
+        />
       </div>
     </StyledWrapper>
   );

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -5,7 +5,7 @@ import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
 import ImportEnvironment from './ImportEnvironment';
 
-const EnvironmentSettings = ({ collection, onClose }) => {
+const EnvironmentSettings = ({ collection, activeEnvironment, setActiveEnvironment, onClose }) => {
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
@@ -48,7 +48,11 @@ const EnvironmentSettings = ({ collection, onClose }) => {
 
   return (
     <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList collection={collection} />
+      <EnvironmentList
+        collection={collection}
+        selectedEnvironment={activeEnvironment}
+        setSelectedEnvironment={setActiveEnvironment}
+      />
     </Modal>
   );
 };