feat(#304) Environments color 🎨 by MathieuDreano · Pull Request #1053 · usebruno/bruno

MathieuDreano · 2023-11-25T03:30:55Z

Description

associated issue: close #304

Associate a color to each environment, for quick visualization (and avoid calling your production environment by mistake...)

environment selection:

environment settings

env.bru format

highlight on request tab

Contribution Checklist:

The pull request only addresses one issue or adds one feature.
The pull request does not introduce any breaking changes --> well, I hope so
I have added screenshots or gifs to help explain the change if applicable.
I have read the contribution guidelines.
Create an issue and link to the pull request.

Summary by CodeRabbit

New Features
- In-app environment color picker and persistent environment colors
- Color indicators displayed next to environments and in the active environment UI
Refactor
- Improved environment selection state handling for more reliable behavior
- Environment import/export and file format extended to include color
Style
- Updated selector and active tab visuals to reflect environment colors

_{✏️ Tip: You can customize this high-level summary in your review settings.}

edbrannin · 2023-11-28T00:34:17Z

It would be nice if this could tint more than just the Environment button in the corner, but that's probably best left as a follow-up.

(Also, why all the force-pushes?)

aphexcx · 2024-02-09T00:39:26Z

Hi! When will this be merged? This one feature is the only thing stopping us from moving from Insomnia to Bruno LOL

MathieuDreano · 2024-02-15T09:02:57Z

quite some changes, using redux store.
I think it's ready, feel free to try it out. I personally use it in my daily job.

MathieuDreano · 2024-02-15T10:31:32Z

As requested, added visual aid on request tab

aphexcx · 2024-03-12T22:43:58Z

Following up on this, really appreciate seeing the progress:)

aphexcx · 2024-03-21T23:08:18Z

Checking in again:)

aphexcx · 2024-04-11T19:47:52Z

Friendly ping:)

bobzomer · 2024-05-08T10:31:30Z

Friendly ping:)

I would also love it to see it merged and available in my beloved bruno!

aphexcx · 2024-05-30T19:01:15Z

Beep 🤖

florianlacreuse · 2024-07-03T10:09:23Z

Any updates on this PR? It would be nice to have it in Bruno. Thanks!

aeris · 2024-07-24T20:43:33Z

If something interested, I rebase this PR on v1.23.0
https://git.imirhil.fr/aeris/bruno/src/branch/feature/environment-color

MathieuDreano · 2024-07-24T23:45:58Z

Hello there, I rebased the work onto main branch. (not something I will do every month, fixing conflicts..)

peterkeppert-anasoft · 2024-08-01T08:23:39Z

Hello, could somebody from Bruno maintainers please indicate what is the expected timeframe of this feature's integration or what are the next steps with this pull request?

Certainly for our team (and I believe many others) used to Insomnia's environment colors, this represents a significant and eagerly awaited UX improvement. Thanks!

SZubarev · 2024-09-11T14:21:16Z

Any updates on this feature?

…ings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com>

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

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

27-45: Potential infinite loop and redundant logic in the effect.

This effect has selectedEnvironment in its dependency array while also calling setSelectedEnvironment inside. This can cause repeated re-runs. Additionally, lines 29-33 already find and set _selectedEnvironment, but line 35 immediately overwrites it with another lookup—this appears redundant.

Consider consolidating the logic:

🐛 Proposed fix

  useEffect(() => {
    if (selectedEnvironment) {
-     const _selectedEnvironment = environments?.find(env => env?.uid === selectedEnvironment?.uid);
-     const hasSelectedEnvironmentChanged = !isEqual(selectedEnvironment, _selectedEnvironment);
-     if (hasSelectedEnvironmentChanged) {
-       setSelectedEnvironment(_selectedEnvironment);
-     }
-     setOriginalEnvironmentVariables(selectedEnvironment.variables);
-     setSelectedEnvironment(findItem(environments, selectedEnvironment.uid));
+     const updatedEnv = findItem(environments, selectedEnvironment.uid);
+     if (updatedEnv && !isEqual(selectedEnvironment, updatedEnv)) {
+       setSelectedEnvironment(updatedEnv);
+       setOriginalEnvironmentVariables(updatedEnv.variables);
+     }
      return;
    }

    const environment = findItem(environments, activeEnvironmentUid);
    if (environment) {
      setSelectedEnvironment(environment);
    } else {
      setSelectedEnvironment(environments?.length ? environments[0] : null);
    }
- }, [activeEnvironmentUid, selectedEnvironment]);
+ }, [activeEnvironmentUid, environments]);

🧹 Nitpick comments (2)

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js (2)
47-51: Redundant effect—already handled above.

This effect syncs selectedEnvironment when environments changes, but the first effect (lines 27-45) should already handle this if its dependencies are corrected. Consider removing this effect to avoid duplicate re-renders and potential race conditions between effects.
♻️ Proposed removal
- useEffect(() => {
-   if (selectedEnvironment) {
-     setSelectedEnvironment(findEnvironmentInCollection(collection, selectedEnvironment.uid));
-   }
- }, [environments]);
2-2: Inconsistent usage of findItem vs findEnvironmentInCollection.

Line 35 uses findItem(environments, ...) while line 49 uses findEnvironmentInCollection(collection, ...). Both accomplish the same goal but with different signatures. Pick one approach for consistency—findItem operates on the array directly, while findEnvironmentInCollection expects the collection object.

Also applies to: 35-35, 49-49

Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com>

sid-bruno · 2026-01-29T06:44:37Z

Hey, @MathieuDreano thanks for the contribution, there's internal work going on to improve and polish your PR, would you mind if the contributors adopted this PR and merged it in?

mdreano · 2026-01-29T08:14:38Z

Hello @sid-bruno good to know you're working on it, I leave it to you ! You can merge as much as you want !

sid-bruno · 2026-01-29T09:24:11Z

Cool, i'll merge this in and then we'll take it from there

mostly because of design consistency

mdreano · 2026-01-29T10:42:52Z

@sid-bruno one thing that would be nice and I didn't have the time to look up, use oklch to better handle light/dark theme.

Cool, i'll merge this in and then we'll take it from there

mostly because of design consistency

…nment-color

sid-bruno · 2026-01-29T10:51:27Z

@sid-bruno one thing that would be nice and I didn't have the time to look up, use oklch to better handle light/dark theme.

Cool, i'll merge this in and then we'll take it from there
mostly because of design consistency

Probably over time, currently the theme structure has just gotten hardened and is on RGB, will take this up as we get more time to polish the color accuracy

* associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> use StyledWrapper Signed-off-by: mathieu <mathieu.dreano@gmail.com> don't save anything for color if it is not set Signed-off-by: mathieu <mathieu.dreano@gmail.com> use redux store instead of local state remove logs fix selectedEnvironment cleanup add bottom border on active tab * associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * move dependency to appropriate package.json Signed-off-by: mathieu <mathieu.dreano@gmail.com> * use border instead of background color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * simplify onColorChange Signed-off-by: mathieu <mathieu.dreano@gmail.com> * add black, keep backgound on unselected color Signed-off-by: mathieu <mathieu.dreano@gmail.com> * fix conflicts Signed-off-by: mathieu <mathieu.dreano@gmail.com> * associate environment to a color Signed-off-by: mathieu <mathieu.dreano@gmail.com> use StyledWrapper Signed-off-by: mathieu <mathieu.dreano@gmail.com> don't save anything for color if it is not set Signed-off-by: mathieu <mathieu.dreano@gmail.com> use redux store instead of local state remove logs fix selectedEnvironment cleanup add bottom border on active tab # Conflicts: # packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js # packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js # packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js # packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js * Update packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * unused selectedEnvironment prop in EnvironmentList Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> * RequestTab, avoid unnecessary call if undefined activeCollection Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> * use @uiw/reac-color instead of react-color Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> --------- Signed-off-by: mathieu <mathieu.dreano@gmail.com> Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com> Co-authored-by: Mathieu D <mathieu.dreano@decathlon.com> Co-authored-by: Anoop M D <anoop@usebruno.com> Co-authored-by: Mathieu DREANO <122891400+mdreano@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

…nded feat(#304) Environments color 🎨 (#1053)

sid-bruno · 2026-01-30T12:00:10Z

Merged into main #6970

Thanks @mdreano

MathieuDreano · 2026-01-30T19:59:17Z

You're welcome, I looked at your "polish", you did like 90% of the job 😅
Congratulations to you.

sid-bruno · 2026-02-02T10:18:48Z

You're welcome, I looked at your "polish", you did like 90% of the job 😅 Congratulations to you.

Even if it was one line from you, it's still a contribution and I wouldn't want to take that away from you. This should be available in the next release

…and refactor License component to remove unnecessary props (#1053)

MathieuDreano marked this pull request as draft November 25, 2023 17:30

MathieuDreano changed the title ~~[WIP] associate colors to environments~~ feat(#304) Environments color Nov 25, 2023

MathieuDreano mentioned this pull request Nov 25, 2023

feature request: colored environments #304

Closed

MathieuDreano force-pushed the feature/environment-color branch from c831150 to 10e7f14 Compare November 26, 2023 14:04

MathieuDreano marked this pull request as ready for review November 26, 2023 19:45

MathieuDreano force-pushed the feature/environment-color branch from eb02a3c to 0bf21d1 Compare November 26, 2023 23:08

MathieuDreano marked this pull request as draft November 28, 2023 09:37

MathieuDreano force-pushed the feature/environment-color branch from 0f443d6 to 339687a Compare February 14, 2024 20:56

MathieuDreano marked this pull request as ready for review February 15, 2024 09:02

MathieuDreano changed the title ~~feat(#304) Environments color~~ feat(#304) Environments color 🔴🔵🟡 Feb 15, 2024

MathieuDreano changed the title ~~feat(#304) Environments color 🔴🔵🟡~~ feat(#304) Environments color 🎨 Feb 15, 2024

mdreano approved these changes Feb 28, 2024

View reviewed changes

sanjai0py added the pr-feature label May 8, 2024

sanjai0py self-assigned this May 8, 2024

helloanoop added the long-term-goal label May 10, 2024

MathieuDreano force-pushed the feature/environment-color branch from 2709a60 to 77c6714 Compare July 24, 2024 23:06

mdreano and others added 3 commits January 28, 2026 07:15

Update packages/bruno-app/src/components/Environments/EnvironmentSett…

d1def0d

…ings/EnvironmentList/EnvironmentDetails/EnvironmentColor/index.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

unused selectedEnvironment prop in EnvironmentList

f36ea93

Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com>

RequestTab, avoid unnecessary call if undefined activeCollection

b8c9a84

Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com>

coderabbitai bot reviewed Jan 28, 2026

View reviewed changes

use @uiw/reac-color instead of react-color

ba7c918

Signed-off-by: Mathieu D <mathieu.dreano@decathlon.com>

sid-bruno added the adopted-by-maintainers PR needs additional work and is now being worked on by the maintainers label Jan 29, 2026

sid-bruno removed the adopted-by-maintainers PR needs additional work and is now being worked on by the maintainers label Jan 29, 2026

sid-bruno added the adopted-by-maintainers PR needs additional work and is now being worked on by the maintainers label Jan 29, 2026

sid-bruno changed the base branch from main to feature/environment-color-extended January 29, 2026 10:33

Merge branch 'feature/environment-color-extended' into feature/enviro…

2faac4b

…nment-color

sid-bruno merged commit fc4dcc9 into usebruno:feature/environment-color-extended Jan 29, 2026
2 checks passed

sid-bruno mentioned this pull request Jan 29, 2026

feat(#304) Environments color 🎨 (#1053) #6970

Merged

coderabbitai bot mentioned this pull request Jan 29, 2026

feat(#304) Environments color 🎨 (#1053) #6974

Merged

6 tasks

sid-bruno pushed a commit that referenced this pull request Jan 30, 2026

feat(#304) Environments color 🎨 (#1053) (#6974)

ad8b7b7

sid-bruno pushed a commit that referenced this pull request Jan 30, 2026

feat(#304) Environments color 🎨 (#1053) (#6974)

a04ff3e

sid-bruno added a commit that referenced this pull request Jan 30, 2026

Merge pull request #6970 from usebruno/feature/environment-color-exte…

eb5dc12

…nded feat(#304) Environments color 🎨 (#1053)

coderabbitai bot mentioned this pull request Feb 2, 2026

Add: dotenv visual editor #6964

Merged

6 tasks

coderabbitai bot mentioned this pull request Feb 5, 2026

fix: persist environment color on import/export #7045

Merged

6 tasks

coderabbitai bot mentioned this pull request Feb 13, 2026

tests: fix breaking tests #7132

Merged

6 tasks

bijin-bruno pushed a commit that referenced this pull request Feb 13, 2026

feat: enhance Preferences component to support default tab selection …

ad8a255

…and refactor License component to remove unnecessary props (#1053)

coderabbitai bot mentioned this pull request Mar 3, 2026

Scripts remove environment colors #7348

Open

5 tasks

Conversation

MathieuDreano commented Nov 25, 2023 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Contribution Checklist:

Summary by CodeRabbit

Uh oh!

edbrannin commented Nov 28, 2023

Uh oh!

aphexcx commented Feb 9, 2024

Uh oh!

MathieuDreano commented Feb 15, 2024

Uh oh!

MathieuDreano commented Feb 15, 2024

Uh oh!

aphexcx commented Mar 12, 2024

Uh oh!

aphexcx commented Mar 21, 2024

Uh oh!

aphexcx commented Apr 11, 2024

Uh oh!

bobzomer commented May 8, 2024

Uh oh!

aphexcx commented May 30, 2024

Uh oh!

florianlacreuse commented Jul 3, 2024

Uh oh!

aeris commented Jul 24, 2024

Uh oh!

MathieuDreano commented Jul 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

peterkeppert-anasoft commented Aug 1, 2024

Uh oh!

SZubarev commented Sep 11, 2024

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

sid-bruno commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mdreano commented Jan 29, 2026

Uh oh!

sid-bruno commented Jan 29, 2026

Uh oh!

mdreano commented Jan 29, 2026

Uh oh!

sid-bruno commented Jan 29, 2026

Uh oh!

Uh oh!

sid-bruno commented Jan 30, 2026

Uh oh!

MathieuDreano commented Jan 30, 2026

Uh oh!

sid-bruno commented Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

14 participants

MathieuDreano commented Nov 25, 2023 •

edited by coderabbitai bot

Loading

MathieuDreano commented Jul 24, 2024 •

edited

Loading

sid-bruno commented Jan 29, 2026 •

edited

Loading