[Feature Request]: Add Environment Color Coded Banner to UI
- Dominant language
- TypeScript
- Stars
- 431
- Forks
- 179
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 71
Description
Is your feature request related to a problem? Please describe.
As an engineering team that is self hosting the temporal UI to support multiple environments (dev, staging, production) it is not particularly obvious to engineers on the team which environment they are accessing temporal in.
Describe the solution you'd like
I think it could be beneficial if there was a color coded banner at the top of the UI that we could control via environment variables. If a feature like that existed we could set red for production, yellow for staging, and green for dev so that if an engineer opens a tab in the wrong environment that tab will stand out more.
Additionally, it may be nice to be able to configure the environment name in the banner as well since I imagine different users of temporal may use different terms for their environments.
Describe alternatives you've considered
We currently use different domains for each environment which does allow team members to check the url to verify they are in the right environment before managing a workflow. But as people often have lots of tabs open at once and switch tabs quickly I find this not to be particularly obvious.
Additional context
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing linked pull request #3020, which is already addressing this request. Compare its implementation with the requested environment-controlled color and name, then verify that the banner is visible and distinguishable across configured environments.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100