add environment color

Signed-off-by: mathieu <mathieu.dreano@gmail.com>

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",

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;
 

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';
@@ -12,12 +12,20 @@ const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
   const dropdownTippyRef = useRef();
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
-  const { environments, activeEnvironmentUid } = collection;
+  const { activeEnvironmentUid } = collection;
+  const [environments, setEnvironments] = useState(collection.environments);
+  useEffect(() => {
+    console.log('useEffect EnvironmentSelector');
+  }, [environments]);
   const activeEnvironment = activeEnvironmentUid ? find(environments, (e) => e.uid === activeEnvironmentUid) : null;
 
   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>
@@ -52,7 +60,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 +83,14 @@ const EnvironmentSelector = ({ collection }) => {
           </div>
         </Dropdown>
       </div>
-      {openSettingsModal && <EnvironmentSettings collection={collection} onClose={() => setOpenSettingsModal(false)} />}
+      {openSettingsModal && (
+        <EnvironmentSettings
+          collection={collection}
+          environments={environments}
+          setEnvironments={setEnvironments}
+          onClose={() => setOpenSettingsModal(false)}
+        />
+      )}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useRef, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import { useTheme } from 'providers/Theme';
+import { useDispatch } from 'react-redux';
+import { saveEnvironmentColor } from 'providers/ReduxStore/slices/collections/actions';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { CirclePicker } from 'react-color';
+import { selectEnvironment as _selectEnvironment } from 'providers/ReduxStore/slices/collections';
+
+const EnvironmentColor = ({ environment, onColorChange, collection }) => {
+  const dispatch = useDispatch();
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      color: environment.color || ''
+    },
+    validationSchema: Yup.object({
+      color: Yup.string().optional()
+    }),
+    onSubmit: (values) => {
+      if (!formik.dirty) {
+        toast.error('Nothing to save');
+        return;
+      }
+      dispatch(saveEnvironmentColor(values.color, environment.uid, collection.uid))
+        .then(() => {
+          toast.success('Environment color changed successfully');
+          onColorChange(values.color);
+        })
+        .catch((e) => {
+          console.log(e);
+          toast.error('An error occurred while changing the environment color');
+        });
+    }
+  });
+
+  useEffect(() => {
+    if (formik.dirty) {
+      formik.handleSubmit();
+    }
+  }, [formik.values.color]);
+
+  return (
+    <CirclePicker
+      id="environment-color"
+      circleSize={12}
+      circleSpacing={5}
+      colors={[
+        '#f44336',
+        '#9c27b0',
+        '#3f51b5',
+        '#03a9f4',
+        '#009688',
+        '#8bc34a',
+        '#ffeb3b',
+        '#ff9800',
+        '#ff5722',
+        '#795548',
+        '#607d8b'
+      ]}
+      color={environment.color}
+      onChangeComplete={(color) => formik.setFieldValue('color', color.hex)}
+      value={formik.values.color || ''}
+    />
+  );
+};
+export default EnvironmentColor;

packages/bruno-app/src/components/Environments/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;
     }

packages/bruno-app/src/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, onColorChange, 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,8 @@ const EnvironmentDetails = ({ environment, collection }) => {
         </div>
       </div>
 
-      <div>
-        <EnvironmentVariables key={environment.uid} environment={environment} collection={collection} />
-      </div>
+      <EnvironmentColor onColorChange={onColorChange} environment={environment} collection={collection} />
+      <EnvironmentVariables environment={environment} collection={collection} />
     </div>
   );
 };

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js

@@ -8,7 +8,7 @@ import ImportEnvironment from '../ImportEnvironment';
 import ManageSecrets from '../ManageSecrets';
 import StyledWrapper from './StyledWrapper';
 
-const EnvironmentList = ({ collection }) => {
+const EnvironmentList = ({ collection, setEnvironments }) => {
   const { environments } = collection;
   const [selectedEnvironment, setSelectedEnvironment] = useState(null);
   const [openCreateModal, setOpenCreateModal] = useState(false);
@@ -18,6 +18,13 @@ const EnvironmentList = ({ collection }) => {
   const envUids = environments ? environments.map((env) => env.uid) : [];
   const prevEnvUids = usePrevious(envUids);
 
+  const onColorChange = (environment, color) => {
+    const updatedEnvironments = environments.map((e) => (e.uid === environment.uid ? { ...e, color: color } : e));
+    console.log('onColorChange', updatedEnvironments);
+    setSelectedEnvironment({ ...selectedEnvironment, color: color });
+    setEnvironments(updatedEnvironments);
+  };
+
   useEffect(() => {
     if (selectedEnvironment) {
       return;
@@ -85,7 +92,11 @@ const EnvironmentList = ({ collection }) => {
             </div>
           </div>
         </div>
-        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
+        <EnvironmentDetails
+          environment={selectedEnvironment}
+          onColorChange={(color) => onColorChange(selectedEnvironment, color)}
+          collection={collection}
+        />
       </div>
     </StyledWrapper>
   );

packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js

@@ -1,15 +1,19 @@
 import Modal from 'components/Modal/index';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
 import ImportEnvironment from './ImportEnvironment';
 
-const EnvironmentSettings = ({ collection, onClose }) => {
+const EnvironmentSettings = ({ collection, setEnvironments, onClose }) => {
   const { environments } = collection;
   const [openCreateModal, setOpenCreateModal] = useState(false);
   const [openImportModal, setOpenImportModal] = useState(false);
 
+  useEffect(() => {
+    console.log('useEffect EnvironmentSettings');
+  }, [collection]);
+
   if (!environments || !environments.length) {
     return (
       <StyledWrapper>
@@ -48,7 +52,7 @@ const EnvironmentSettings = ({ collection, onClose }) => {
 
   return (
     <Modal size="lg" title="Environments" handleCancel={onClose} hideFooter={true}>
-      <EnvironmentList collection={collection} />
+      <EnvironmentList collection={collection} setEnvironments={setEnvironments} />
     </Modal>
   );
 };

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -826,6 +826,29 @@ export const saveEnvironment = (variables, environmentUid, collectionUid) => (di
   });
 };
 
+export const saveEnvironmentColor = (color, environmentUid, collectionUid) => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const state = getState();
+    const collection = findCollectionByUid(state.collections.collections, collectionUid);
+    if (!collection) {
+      return reject(new Error('Collection not found'));
+    }
+
+    const collectionCopy = cloneDeep(collection);
+    const environment = findEnvironmentInCollection(collectionCopy, environmentUid);
+    if (!environment) {
+      return reject(new Error('Environment not found'));
+    }
+
+    const updatedEnvironment = { ...environment, color: color };
+    environmentSchema
+      .validate(updatedEnvironment)
+      .then(() => ipcRenderer.invoke('renderer:save-environment', collection.pathname, updatedEnvironment))
+      .then(resolve)
+      .catch(reject);
+  });
+};
+
 export const selectEnvironment = (environmentUid, collectionUid) => (dispatch, getState) => {
   return new Promise((resolve, reject) => {
     const state = getState();

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -126,14 +126,15 @@ export const collectionsSlice = createSlice({
       }
     },
     saveEnvironment: (state, action) => {
-      const { variables, environmentUid, collectionUid } = action.payload;
+      const { variables, color, environmentUid, collectionUid } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
 
       if (collection) {
         const environment = findEnvironmentInCollection(collection, environmentUid);
 
         if (environment) {
           environment.variables = variables;
+          environment.color = color;
         }
       }
     },

packages/bruno-lang/v2/src/envToJson.js

@@ -2,7 +2,7 @@ const ohm = require('ohm-js');
 const _ = require('lodash');
 
 const grammar = ohm.grammar(`Bru {
-  BruEnvFile = (vars | secretvars)*
+  BruEnvFile = (vars | secretvars | color)*
 
   nl = "\\r"? "\\n"
   st = " " | "\\t"
@@ -27,6 +27,7 @@ const grammar = ohm.grammar(`Bru {
 
   secretvars = "vars:secret" array
   vars = "vars" dictionary
+  color = "color:" any*
 }`);
 
 const mapPairListToKeyValPairs = (pairList = []) => {
@@ -84,7 +85,8 @@ const sem = grammar.createSemantics().addAttribute('ast', {
   BruEnvFile(tags) {
     if (!tags || !tags.ast || !tags.ast.length) {
       return {
-        variables: []
+        variables: [],
+        color: '#B80000'
       };
     }
 
@@ -151,6 +153,11 @@ const sem = grammar.createSemantics().addAttribute('ast', {
     return {
       variables: vars
     };
+  },
+  color: (_1, anystring) => {
+    return {
+      color: anystring.sourceString.trim()
+    };
   }
 });
 

packages/bruno-lang/v2/src/jsonToEnv.js

@@ -18,13 +18,16 @@ const envToJson = (json) => {
       return `  ${prefix}${name}`;
     });
 
+  const color = _.get(json, 'color', '');
+
+  let output = '';
+
   if (!variables || !variables.length) {
-    return `vars {
+    output += `vars {
 }
 `;
   }
 
-  let output = '';
   if (vars.length) {
     output += `vars {
 ${vars.join('\n')}
@@ -39,6 +42,12 @@ ${secretVars.join(',\n')}
 `;
   }
 
+  if (color !== undefined) {
+    console.log('jsonToEnv color', color);
+    output += `color: ${color}
+`;
+  }
+
   return output;
 };