From b3e481f4d3c39cedb91532087c3926e0d3eafc1e Mon Sep 17 00:00:00 2001 From: mathieu Date: Mon, 27 Nov 2023 00:07:41 +0100 Subject: [PATCH 1/9] associate environment to a color Signed-off-by: mathieu use StyledWrapper Signed-off-by: mathieu don't save anything for color if it is not set Signed-off-by: mathieu use redux store instead of local state remove logs fix selectedEnvironment cleanup add bottom border on active tab --- package.json | 1 + .../EnvironmentSelector/StyledWrapper.js | 2 +- .../Environments/EnvironmentSelector/index.js | 7 +- .../EnvironmentColor/index.js | 67 +++++++++++++++++++ .../EnvironmentDetails/index.js | 13 ++-- .../EnvironmentList/index.js | 42 ++++++------ .../Environments/EnvironmentSettings/index.js | 14 ++-- .../components/RequestTabs/StyledWrapper.js | 1 + .../src/components/RequestTabs/index.js | 5 +- .../ReduxStore/slices/collections/actions.js | 21 ++++++ .../ReduxStore/slices/collections/index.js | 12 ++++ packages/bruno-lang/v2/src/envToJson.js | 8 ++- packages/bruno-lang/v2/src/jsonToEnv.js | 11 ++- .../bruno-schema/src/collections/index.js | 3 +- 14 files changed, 163 insertions(+), 44 deletions(-) create mode 100644 packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js diff --git a/package.json b/package.json index ebe1af53f6..31ea49d77c 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "jest": "^29.2.0", "pretty-quick": "^3.1.3", "randomstring": "^1.2.2", + "react-color": "^2.19.3", "rimraf": "^6.0.1", "ts-jest": "^29.0.5" }, diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index b1c09d5f24..6c013b684d 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` .current-environment { - background-color: ${(props) => props.theme.sidebar.badge.bg}; + background-color: ${(props) => props.color ?? props.theme.sidebar.badge.bg}; border-radius: 15px; .caret { diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js index 8bfbb075eb..8e7a7d9880 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js @@ -50,11 +50,11 @@ const EnvironmentSelector = ({ collection }) => { }; return ( - +
} placement="bottom-end">
Collection Environments
- {environments && environments.length + {environments?.length ? environments.map((e) => (
{ dropdownTippyRef.current.hide(); }} > - {e.name} + + {e.name}
)) : null} diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js new file mode 100644 index 0000000000..cee2b91e92 --- /dev/null +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { useEffect } from 'react'; +import toast from 'react-hot-toast'; +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, collectionUid }) => { + 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, collectionUid)) + .then(() => { + toast.success('Environment color changed successfully'); + }) + .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 ( + formik.setFieldValue('color', color.hex)} + value={formik.values.color || ''} + /> + ); +}; +export default EnvironmentColor; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js index f9fca74ec8..96423edbff 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js @@ -4,6 +4,7 @@ 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, setIsModified }) => { const [openEditModal, setOpenEditModal] = useState(false); @@ -11,7 +12,10 @@ const EnvironmentDetails = ({ environment, collection, setIsModified }) => { const [openCopyModal, setOpenCopyModal] = useState(false); return ( -
+
{openEditModal && ( setOpenEditModal(false)} environment={environment} collection={collection} /> )} @@ -27,7 +31,7 @@ const EnvironmentDetails = ({ environment, collection, setIsModified }) => { )}
- + {environment.name}
@@ -37,9 +41,8 @@ const EnvironmentDetails = ({ environment, collection, setIsModified }) => {
-
- -
+ +
); }; 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 4517bd8d3f..95f9832f2d 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js @@ -9,8 +9,9 @@ import ManageSecrets from '../ManageSecrets'; import StyledWrapper from './StyledWrapper'; import ConfirmSwitchEnv from './ConfirmSwitchEnv'; -const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collection, isModified, setIsModified }) => { +const EnvironmentList = ({ collection, isModified, setIsModified }) => { const { environments } = collection; + const [selectedEnvironment, setSelectedEnvironment] = useState(null); const [openCreateModal, setOpenCreateModal] = useState(false); const [openImportModal, setOpenImportModal] = useState(false); const [openManageSecretsModal, setOpenManageSecretsModal] = useState(false); @@ -18,12 +19,13 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti const [switchEnvConfirmClose, setSwitchEnvConfirmClose] = useState(false); const [originalEnvironmentVariables, setOriginalEnvironmentVariables] = useState([]); - const envUids = environments ? environments.map((env) => env.uid) : []; + const envUids = environments?.map((env) => env.uid) ?? []; const prevEnvUids = usePrevious(envUids); useEffect(() => { if (selectedEnvironment) { setOriginalEnvironmentVariables(selectedEnvironment.variables); + setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid)); return; } @@ -31,22 +33,24 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti if (environment) { setSelectedEnvironment(environment); } else { - setSelectedEnvironment(environments && environments.length ? environments[0] : null); + setSelectedEnvironment(environments?.length ? environments[0] : null); } - }, [collection, environments, selectedEnvironment]); + }, [collection, selectedEnvironment]); useEffect(() => { - if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) { + // check env add + if (prevEnvUids?.length && envUids.length > prevEnvUids.length) { const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid)); if (newEnv) { setSelectedEnvironment(newEnv); } } - if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) { - setSelectedEnvironment(environments && environments.length ? environments[0] : null); + // check env delete + if (prevEnvUids?.length && envUids.length < prevEnvUids.length) { + setSelectedEnvironment(environments?.length ? environments[0] : null); } - }, [envUids, environments, prevEnvUids]); + }, [envUids, collection, prevEnvUids]); const handleEnvironmentClick = (env) => { if (!isModified) { @@ -100,18 +104,16 @@ const EnvironmentList = ({ selectedEnvironment, setSelectedEnvironment, collecti
)}
- {environments && - environments.length && - environments.map((env) => ( -
handleEnvironmentClick(env)} // Use handleEnvironmentClick to handle clicks - > - {env.name} -
- ))} -
handleCreateEnvClick()}> + {environments?.map((env) => ( +
handleEnvironmentClick(env)} + > + {env.name} +
+ ))} +
handleCreateEnvClick(true)}> + Create
diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js index 3a17e2ecd0..104905987e 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js @@ -44,10 +44,10 @@ const DefaultTab = ({ setTab }) => { const EnvironmentSettings = ({ collection, onClose }) => { const [isModified, setIsModified] = useState(false); - const { environments } = collection; - const [selectedEnvironment, setSelectedEnvironment] = useState(null); const [tab, setTab] = useState('default'); - if (!environments || !environments.length) { + const [openCreateModal, setOpenCreateModal] = useState(false); + const [openImportModal, setOpenImportModal] = useState(false); + if (!collection.environments?.length) { return ( @@ -66,13 +66,7 @@ const EnvironmentSettings = ({ collection, onClose }) => { return ( - + ); }; diff --git a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js index 93829cca94..0f35845a29 100644 --- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js @@ -39,6 +39,7 @@ const Wrapper = styled.div` &.active { background: ${(props) => props.theme.requestTabs.active.bg}; + border-bottom: 3px solid ${(props) => props.color ?? props.theme.sidebar.badge.bg}; font-weight: 500; } diff --git a/packages/bruno-app/src/components/RequestTabs/index.js b/packages/bruno-app/src/components/RequestTabs/index.js index d0cd0b459c..ff384bf19e 100644 --- a/packages/bruno-app/src/components/RequestTabs/index.js +++ b/packages/bruno-app/src/components/RequestTabs/index.js @@ -6,6 +6,7 @@ import { IconChevronRight, IconChevronLeft } from '@tabler/icons'; import { useSelector, useDispatch } from 'react-redux'; import { focusTab } from 'providers/ReduxStore/slices/tabs'; import NewRequest from 'components/Sidebar/NewRequest'; +import { findEnvironmentInCollection } from 'utils/collections'; import CollectionToolBar from './CollectionToolBar'; import RequestTab from './RequestTab'; import StyledWrapper from './StyledWrapper'; @@ -75,9 +76,11 @@ const RequestTabs = () => { 'has-chevrons': showChevrons }); }; + + const activeEnvironment = findEnvironmentInCollection(activeCollection, activeCollection.activeEnvironmentUid); // Todo: Must support ephemeral requests return ( - + {newRequestModalOpen && ( setNewRequestModalOpen(false)} /> )} diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js index 066889d682..39f50eb4f7 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js @@ -30,6 +30,7 @@ import { removeCollection as _removeCollection, selectEnvironment as _selectEnvironment, sortCollections as _sortCollections, + saveEnvironmentColor as _saveEnvironmentColor, requestCancelled, resetRunResults, responseReceived, @@ -979,6 +980,26 @@ export const saveEnvironment = (variables, environmentUid, collectionUid) => (di }); }; +export const saveEnvironmentColor = (color, environmentUid, collectionUid) => (dispatch, getState) => { + return new Promise((resolve, reject) => { + const collection = + findCollectionByUid(getState().collections.collections, collectionUid) ?? + reject(new Error('Collection not found')); + const environment = + findEnvironmentInCollection(collection, environmentUid) ?? reject(new Error('Environment not found')); + const updatedEnvironment = { ...environment, color: color }; + + environmentSchema + .validate(updatedEnvironment) + // save to file + .then(() => ipcRenderer.invoke('renderer:save-environment', collection.pathname, updatedEnvironment)) + // update store + .then(() => dispatch(_saveEnvironmentColor({ color, environmentUid, collectionUid }))) + .then(resolve) + .catch(reject); + }); +}; + export const selectEnvironment = (environmentUid, collectionUid) => (dispatch, getState) => { return new Promise((resolve, reject) => { const state = getState(); diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js index b7ef2f86e5..b4f7fe0d19 100644 --- a/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js +++ b/packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js @@ -135,6 +135,17 @@ export const collectionsSlice = createSlice({ if (environment) { environment.variables = variables; + environment.color = color; + } + } + }, + saveEnvironmentColor: (state, action) => { + const { color, environmentUid, collectionUid } = action.payload; + const collection = findCollectionByUid(state.collections, collectionUid); + if (collection) { + const environment = findEnvironmentInCollection(collection, environmentUid); + if (environment) { + environment.color = color; } } }, @@ -1749,6 +1760,7 @@ export const { updatedFolderSettingsSelectedTab, collectionUnlinkEnvFileEvent, saveEnvironment, + saveEnvironmentColor, selectEnvironment, newItem, deleteItem, diff --git a/packages/bruno-lang/v2/src/envToJson.js b/packages/bruno-lang/v2/src/envToJson.js index eef4de375d..c20b229862 100644 --- a/packages/bruno-lang/v2/src/envToJson.js +++ b/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 = []) => { @@ -151,6 +152,11 @@ const sem = grammar.createSemantics().addAttribute('ast', { return { variables: vars }; + }, + color: (_1, anystring) => { + return { + color: anystring.sourceString.trim() + }; } }); diff --git a/packages/bruno-lang/v2/src/jsonToEnv.js b/packages/bruno-lang/v2/src/jsonToEnv.js index 42d0a4281d..4cea76f403 100644 --- a/packages/bruno-lang/v2/src/jsonToEnv.js +++ b/packages/bruno-lang/v2/src/jsonToEnv.js @@ -18,13 +18,16 @@ const envToJson = (json) => { return ` ${prefix}${name}`; }); + const color = _.get(json, 'color', undefined); + + let output = ''; + if (!variables || !variables.length) { - return `vars { + output += `vars { } `; } - let output = ''; if (vars.length) { output += `vars { ${vars.join('\n')} @@ -36,6 +39,10 @@ ${vars.join('\n')} output += `vars:secret [ ${secretVars.join(',\n')} ] +`; + } + if (color) { + output += `color: ${color} `; } diff --git a/packages/bruno-schema/src/collections/index.js b/packages/bruno-schema/src/collections/index.js index 11561c5284..cadeeff45d 100644 --- a/packages/bruno-schema/src/collections/index.js +++ b/packages/bruno-schema/src/collections/index.js @@ -15,7 +15,8 @@ const environmentVariablesSchema = Yup.object({ const environmentSchema = Yup.object({ uid: uidSchema, name: Yup.string().min(1).required('name is required'), - variables: Yup.array().of(environmentVariablesSchema).required('variables are required') + variables: Yup.array().of(environmentVariablesSchema).required('variables are required'), + color: Yup.string().optional() }) .noUnknown(true) .strict(); From aec069613c39fd45a3e6b3020686d960b10ab697 Mon Sep 17 00:00:00 2001 From: mathieu Date: Thu, 25 Jul 2024 01:06:24 +0200 Subject: [PATCH 2/9] associate environment to a color Signed-off-by: mathieu --- .../EnvironmentSettings/EnvironmentList/index.js | 7 ++++++- .../components/Environments/EnvironmentSettings/index.js | 3 ++- 2 files changed, 8 insertions(+), 2 deletions(-) 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 95f9832f2d..b6dab0f2e8 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js @@ -25,7 +25,6 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => { useEffect(() => { if (selectedEnvironment) { setOriginalEnvironmentVariables(selectedEnvironment.variables); - setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid)); return; } @@ -37,6 +36,12 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => { } }, [collection, selectedEnvironment]); + useEffect(() => { + if (selectedEnvironment) { + setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid)); + } + }, [environments]); + useEffect(() => { // check env add if (prevEnvUids?.length && envUids.length > prevEnvUids.length) { diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js index 104905987e..dc878aaec9 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js @@ -43,11 +43,12 @@ const DefaultTab = ({ setTab }) => { }; const EnvironmentSettings = ({ collection, onClose }) => { + const { environments } = collection; const [isModified, setIsModified] = useState(false); const [tab, setTab] = useState('default'); const [openCreateModal, setOpenCreateModal] = useState(false); const [openImportModal, setOpenImportModal] = useState(false); - if (!collection.environments?.length) { + if (!environments?.length) { return ( From 70349b18a2e41a1f4c67752e4aa0d795bdb59bb6 Mon Sep 17 00:00:00 2001 From: mathieu Date: Thu, 25 Jul 2024 01:42:13 +0200 Subject: [PATCH 3/9] fix error during mergeconflict Signed-off-by: mathieu --- .../Environments/EnvironmentSettings/EnvironmentList/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b6dab0f2e8..86b92fb313 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js @@ -118,7 +118,7 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => { {env.name}
))} -
handleCreateEnvClick(true)}> +
handleCreateEnvClick()}> + Create
From bc85bc51720960f2df2831e8053d01c50be199f1 Mon Sep 17 00:00:00 2001 From: mathieu Date: Wed, 23 Oct 2024 22:03:17 +0200 Subject: [PATCH 4/9] move dependency to appropriate package.json Signed-off-by: mathieu --- package.json | 2 -- packages/bruno-app/package.json | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 31ea49d77c..cae0c5a2c7 100644 --- a/package.json +++ b/package.json @@ -20,13 +20,11 @@ "@jest/globals": "^29.2.0", "@playwright/test": "^1.27.1", "@types/jest": "^29.5.11", - "concurrently": "^8.2.2", "fs-extra": "^11.1.1", "husky": "^8.0.3", "jest": "^29.2.0", "pretty-quick": "^3.1.3", "randomstring": "^1.2.2", - "react-color": "^2.19.3", "rimraf": "^6.0.1", "ts-jest": "^29.0.5" }, diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json index 29bf7e71fa..9d161569f6 100644 --- a/packages/bruno-app/package.json +++ b/packages/bruno-app/package.json @@ -58,6 +58,7 @@ "qs": "^6.11.0", "query-string": "^7.0.1", "react": "18.2.0", + "react-color": "^2.19.3", "react-copy-to-clipboard": "^5.1.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", From 2beec87ad8a75ea6f7fa1970c133eeffa36e87d6 Mon Sep 17 00:00:00 2001 From: mathieu Date: Wed, 23 Oct 2024 22:08:45 +0200 Subject: [PATCH 5/9] remove unused code Signed-off-by: mathieu --- .../src/components/Environments/EnvironmentSettings/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js index dc878aaec9..9edf11e2d8 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js @@ -46,8 +46,6 @@ const EnvironmentSettings = ({ collection, onClose }) => { const { environments } = collection; const [isModified, setIsModified] = useState(false); const [tab, setTab] = useState('default'); - const [openCreateModal, setOpenCreateModal] = useState(false); - const [openImportModal, setOpenImportModal] = useState(false); if (!environments?.length) { return ( From d1edc8ef29aa2bb5925d8f360f1c7e4b032373f5 Mon Sep 17 00:00:00 2001 From: mathieu Date: Wed, 23 Oct 2024 22:32:14 +0200 Subject: [PATCH 6/9] use border instead of background color Signed-off-by: mathieu --- .../Environments/EnvironmentSelector/StyledWrapper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index 6c013b684d..f8656d761f 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` .current-environment { - background-color: ${(props) => props.color ?? props.theme.sidebar.badge.bg}; + border: 2px solid ${(props) => props.color ?? props.theme.sidebar.badge.bg}; border-radius: 15px; .caret { From 1ce499f95b3a688897efa695c51a2c8be4304d33 Mon Sep 17 00:00:00 2001 From: mathieu Date: Wed, 23 Oct 2024 22:48:57 +0200 Subject: [PATCH 7/9] simplify onColorChange Signed-off-by: mathieu --- .../EnvironmentColor/index.js | 61 ++++--------------- 1 file changed, 12 insertions(+), 49 deletions(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js index cee2b91e92..5277ecfb4f 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js @@ -1,66 +1,29 @@ import React from 'react'; -import { useEffect } from 'react'; +import { useCallback } from 'react'; import toast from 'react-hot-toast'; 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, collectionUid }) => { 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, collectionUid)) - .then(() => { - toast.success('Environment color changed successfully'); - }) - .catch((e) => { - console.log(e); - toast.error('An error occurred while changing the environment color'); - }); - } - }); - - useEffect(() => { - if (formik.dirty) { - formik.handleSubmit(); - } - }, [formik.values.color]); + const onColorChange = useCallback( + (color) => ( + dispatch(saveEnvironmentColor(color, environment.uid, collectionUid)) + .then(() => toast.success('Environment color changed successfully')) + .catch((e) => toast.error('An error occurred while changing the environment color')) + ) + ); return ( formik.setFieldValue('color', color.hex)} - value={formik.values.color || ''} + onChangeComplete={(color) => onColorChange(color.hex)} /> ); }; From d863c5424392d40d57fc60649022dfd7dbad5aaa Mon Sep 17 00:00:00 2001 From: mathieu Date: Wed, 23 Oct 2024 23:06:00 +0200 Subject: [PATCH 8/9] add black, keep backgound on unselected color Signed-off-by: mathieu --- .../Environments/EnvironmentSelector/StyledWrapper.js | 1 + .../EnvironmentDetails/EnvironmentColor/index.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js index f8656d761f..25b418c54e 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js @@ -2,6 +2,7 @@ import styled from 'styled-components'; const Wrapper = styled.div` .current-environment { + background-color: ${(props) => props.color ? undefined : props.theme.sidebar.badge.bg}; border: 2px solid ${(props) => props.color ?? props.theme.sidebar.badge.bg}; border-radius: 15px; diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js index 5277ecfb4f..9fa9a5e8b9 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js @@ -21,7 +21,7 @@ const EnvironmentColor = ({ environment, collectionUid }) => { id="environment-color" circleSize={14} circleSpacing={3} - colors={['#9c27b0','#3f51b5','#03a9f4','#009688','#8bc34a','#ffeb3b','#ff9800','#ff5722','#795548','#607d8b']} + colors={['#000000','#9c27b0','#3f51b5','#03a9f4','#009688','#8bc34a','#ffeb3b','#ff9800','#ff5722','#795548','#607d8b']} color={environment.color} onChangeComplete={(color) => onColorChange(color.hex)} /> From 1a60d777c54ad019bf766f9bfddbc3661c4ba8a8 Mon Sep 17 00:00:00 2001 From: mathieu Date: Thu, 24 Oct 2024 00:28:20 +0200 Subject: [PATCH 9/9] fix conflicts Signed-off-by: mathieu --- package-lock.json | 49 +++++++++++++++++++ package.json | 1 + .../EnvironmentList/index.js | 2 - 3 files changed, 50 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index f1020d97da..fbd184108b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3136,6 +3136,15 @@ "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==" }, + "node_modules/@icons/material": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", + "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", @@ -13808,6 +13817,12 @@ "node": ">=10" } }, + "node_modules/material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==", + "license": "ISC" + }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -16155,6 +16170,24 @@ "node": ">=0.10.0" } }, + "node_modules/react-color": { + "version": "2.19.3", + "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz", + "integrity": "sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==", + "license": "MIT", + "dependencies": { + "@icons/material": "^0.2.4", + "lodash": "^4.17.15", + "lodash-es": "^4.17.15", + "material-colors": "^1.2.1", + "prop-types": "^15.5.10", + "reactcss": "^1.2.0", + "tinycolor2": "^1.4.1" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-copy-to-clipboard": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", @@ -16415,6 +16448,15 @@ "react-dom": ">=16.14.0" } }, + "node_modules/reactcss": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", + "integrity": "sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==", + "license": "MIT", + "dependencies": { + "lodash": "^4.0.1" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -18643,6 +18685,12 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "node_modules/tinycolor2": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz", + "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==", + "license": "MIT" + }, "node_modules/tippy.js": { "version": "6.3.7", "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", @@ -19649,6 +19697,7 @@ "qs": "^6.11.0", "query-string": "^7.0.1", "react": "18.2.0", + "react-color": "^2.19.3", "react-copy-to-clipboard": "^5.1.0", "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", diff --git a/package.json b/package.json index cae0c5a2c7..ebe1af53f6 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@jest/globals": "^29.2.0", "@playwright/test": "^1.27.1", "@types/jest": "^29.5.11", + "concurrently": "^8.2.2", "fs-extra": "^11.1.1", "husky": "^8.0.3", "jest": "^29.2.0", 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 86b92fb313..0cf040aebf 100644 --- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js +++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js @@ -43,7 +43,6 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => { }, [environments]); useEffect(() => { - // check env add if (prevEnvUids?.length && envUids.length > prevEnvUids.length) { const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid)); if (newEnv) { @@ -51,7 +50,6 @@ const EnvironmentList = ({ collection, isModified, setIsModified }) => { } } - // check env delete if (prevEnvUids?.length && envUids.length < prevEnvUids.length) { setSelectedEnvironment(environments?.length ? environments[0] : null); }