RI-8181 Visual environment indicators in DB list + header by KrumTy · Pull Request #5965 · redis/RedisInsight

KrumTy · 2026-05-22T12:52:55Z

What

Adds the visual layer of the Prod vs non-prod modes epic (RI-6594):

Databases list — each row's leading status slot renders the red PROD badge for environment === Production or the neutral Development label for environment === Development. Existing temporary indicators (cloud unused-db warning, "New" dot) take precedence — DbStatus now owns that decision through a fallback prop, so there's no duplicated logic.
Instance header — the active connection's environment badge is pinned next to the database name, and the container picks up a subtle left-tinted red gradient (styled-component using the @redis-ui/styles semantic.color.background.danger100/200 tokens) when the connection is Production.
Telemetry — the CONFIG_DATABASES_OPEN_DATABASE event now carries environment from all three emission sites (databases list, OAuth connect-free-db, instances navigation popover).

All visuals are gated by the existing dev-prodMode feature flag.

Testing

Toggle the dev-prodMode flag on. Open Add/Edit Database, set Environment to Production → verify the PROD badge appears in the list row and next to the connection name in the top header, and the header picks up the red gradient.
Set Environment to Development → verify the neutral Development label appears in both places and the gradient is gone.
Set Environment to Unspecified → no badge, no gradient.
Toggle the flag off → no badges anywhere even if the stored env is Production.
For an unused free cloud db (or a "new" db) with Environment = Production → verify the cloud/new icon wins (temp indicator precedence).
Open a database → verify the CONFIG_DATABASES_OPEN_DATABASE telemetry event payload includes environment.

Automated:

yarn lint:ui clean
New specs: EnvironmentBadge.spec.tsx, DatabasesListCellName.spec.tsx, fallback cases added to DbStatus.spec.tsx, environment cases added to InstanceHeader.spec.tsx, payload assertions updated in handlers.spec.ts and OAuthConnectFreeDb.spec.tsx.

Closes #RI-8181

🤖 Generated with Claude Code

Note

Low Risk
UI-only, feature-flagged labeling and telemetry field additions with no auth or data-path changes in this diff.

Overview
Introduces a shared EnvironmentBadge (PROD / DEV labels with tooltips) behind the devProdMode feature flag, and wires it into the databases list row name cell and the instance header next to the active database name.

The header also exposes data-environment, applies a production danger background tint when connected to Production, and resolves environment via useDatabaseEnvironment (so the badge hides when the flag is off). CONFIG_DATABASES_OPEN_DATABASE telemetry now includes environment when opening a DB from the list, OAuth free-db connect, and the instances navigation popover.

Tests cover the badge, list cell, header environment cases, and updated telemetry payloads.

^{Reviewed by Cursor Bugbot for commit c94afde. Bugbot is set up for automated code reviews on this repo. Configure here.}

Adds PROD badge and Development label, gated by the dev-prodMode feature flag, in the databases-list rows and the top instance header. Renders a subtle red gradient on the InstanceHeader container when the active connection is classified as Production. Extends the connect-to-database telemetry event with the database environment. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

jit-ci · 2026-05-22T12:54:36Z

🛡️ Jit Security Scan Results

✅ No security findings were detected in this PR

^{Security scan by Jit}

The styled.div<P> generic in styled-components v5 needs the props type to extend HTMLAttributes<HTMLDivElement> for children to be allowed. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

…eader spec Avoids the leading-semicolon ;(... as jest.Mock) pattern at each call site by typing the mocked selectors once at the top of the file. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

github-actions · 2026-05-22T13:29:32Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.93%	24831/29942
🟡	Branches	68.16%	10433/15306
🟡	Functions	78.17%	6702/8574
🟢	Lines	83.39%	24246/29077

Test suite run success

7003 tests passing in 804 suites.

Report generated by 🧪jest coverage report action from c94afde

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Replaces the InstanceHeader linear gradient with a flat danger100 tint across the entire top bar for the production environment. Drops the fallback-prop precedence between DbStatus and EnvironmentBadge so both indicators render together in the list cell. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

OAuthConnectFreeDb was pulling environment from the currently connected instance, but the telemetry event reports the opening of a different (target) database. Source environment from firstFreeInstance so analytics reflect the actual classification of the free DB being launched. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

… drop inline style - Move EnvironmentBadgeProps and EnvironmentBadgeConfig to EnvironmentBadge.types.ts; tooltip strings and BADGE_CONFIG to EnvironmentBadge.constants.ts, per the style guide. - Replace hardcoded 'production' strings with Environment.Production in the OAuth and handlers specs. - Replace the inline paddingLeft on the InstanceHeader env-badge slot with a styled FlexItem in InstanceHeader.styles.ts. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 3b596e8. Configure here.}

EnvironmentBadgeSlot now hides via :empty when EnvironmentBadge returns null (feature flag off, environment unspecified), so the 8px padding no longer reserves space in the header for users without a badge. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

KrumTy added the AI-Made label May 22, 2026

KrumTy and others added 4 commits May 22, 2026 16:02

fix(ui): allow children on InstanceHeaderContainer styled component

0ba7b19

The styled.div<P> generic in styled-components v5 needs the props type to extend HTMLAttributes<HTMLDivElement> for children to be allowed. References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

refactor(ui): drop verbose fallback prop comment on DbStatus

b043b47

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

style(ui): apply prettier formatting on InstanceHeader spec constants

c95f17e

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

refactor(ui): shorten development badge label to DEV

c71e8e7

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

KrumTy marked this pull request as ready for review May 22, 2026 13:48

KrumTy requested a review from a team as a code owner May 22, 2026 13:48

KrumTy and others added 2 commits May 26, 2026 14:36

chore(ui): drop no-op edit to DbStatus.tsx

a254a17

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

cursor Bot reviewed May 26, 2026

View reviewed changes

Comment thread redisinsight/ui/src/components/oauth/oauth-connect-free-db/OAuthConnectFreeDb.tsx Outdated

KrumTy and others added 3 commits May 26, 2026 14:49

ci: retrigger workflow

ce119e8

chore(ui): drop explanatory comments from OAuthConnectFreeDb env fix

1817b5b

References: #RI-8181 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

valkirilov reviewed May 27, 2026

View reviewed changes

KrumTy requested a review from valkirilov May 27, 2026 07:49

cursor Bot reviewed May 27, 2026

View reviewed changes

Comment thread redisinsight/ui/src/components/instance-header/InstanceHeader.styles.ts

valkirilov approved these changes May 27, 2026

View reviewed changes

KrumTy merged commit bacb93b into main May 27, 2026
20 checks passed

KrumTy deleted the fe/feature/RI-8181/visual-environment-indicators branch May 27, 2026 09:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-8181 Visual environment indicators in DB list + header#5965

RI-8181 Visual environment indicators in DB list + header#5965
KrumTy merged 13 commits into
mainfrom
fe/feature/RI-8181/visual-environment-indicators

KrumTy commented May 22, 2026 •

edited by cursor Bot

Loading

Uh oh!

jit-ci Bot commented May 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

KrumTy commented May 22, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Testing

Uh oh!

jit-ci Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛡️ Jit Security Scan Results

Uh oh!

github-actions Bot commented May 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage - Frontend unit tests

Test suite run success

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

KrumTy commented May 22, 2026 •

edited by cursor Bot

Loading

jit-ci Bot commented May 22, 2026 •

edited

Loading

github-actions Bot commented May 22, 2026 •

edited

Loading