feat:Add key tabs to the Browser key details panel by chenbuxiuu · Pull Request #6586 · redis/RedisInsight

chenbuxiuu · 2026-11-10T05:41:11Z

What

Adds browser-style tabs to the Browser key details panel. Before this, viewing another key replaced the details of the previous one.

Every key the user views (from the list, after Add key, after a rename) opens as a tab above the key details. Clicking a tab shows that key.
A tab is removed only when the user closes it (× button or middle click). Closing the active tab activates its right neighbour, otherwise the left one. Closing the last tab closes the panel.
Deleted or expired keys keep their tab. Selecting it goes through the existing key-not-found handling (error notification, empty placeholder).
Tabs live in the app context slice (browser.keyTabs). They survive switching between Browser/Workbench/etc. and are cleared on DB index or database change.

Switching tabs re-fetches the key instead of caching its data per tab: each key type keeps its value in its own slice, and re-fetching always shows current data.

Testing

Open a database in Browser and click several keys: each one opens a tab; clicking a tab switches the details.
Close tabs with × and middle click; check which tab becomes active.
Delete a key that has an open tab (from the list or the details header): the tab stays; clicking it shows the not-found notification.
Rename a key: its tab updates in place.
Switch to Workbench and back: tabs are kept. Change the DB index: tabs are cleared.

Unit tests: KeyTabs.spec.tsx, BrowserRightPanel.spec.tsx, slices/tests/app/context.spec.ts.

🤖 Generated with Claude Code

Note

Medium Risk
Touches central Browser selection/context state and tab-close navigation; regressions could affect which key is shown or stale tabs after DB switches, though behavior is covered by new unit tests.

Overview
Adds browser-style tabs above the Browser key details panel so users can keep multiple keys open and switch between them instead of replacing the current view each time.

State and wiring: Open tabs live in app context as browser.keyTabs, with Redux actions to open (dedupe), close, rename (including deduping when renamed to an already-open key), and clear (on DB index change). BrowserPage opens a tab whenever a key is selected, wires tab select/close with neighbor activation when closing the active tab, and passes tab data into the right panel.

UI: New KeyTabs component (click, Enter/Space, ×, middle-click) with i18n for close button aria labels. BrowserRightPanel renders tabs above KeyDetails / Add key / bulk actions and updates tab labels on rename.

Tests cover tab reducers, KeyTabs interactions, and right-panel callback wiring.

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

Viewing another key used to replace the details of the previous one. Every viewed key now opens as a browser-style tab above the key details; tabs stay until closed by the user (close button or middle click) and survive page switches. Deleted or expired keys keep their tab, and selecting it follows the existing key-not-found handling. Tabs are cleared on DB index or database change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-11-10T05:41:24Z

Codex Review Summary: ✅ Completed

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-11-10T05:48:18.258702Z	`bc2e592`	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

Copilot

🟡 Changes recommended

Unresolved tab-state bugs retain stale tabs across database-index changes, hide remaining tabs in collapsed layouts, and leave an empty details pane when the last tab is closed.

3 open issues

What changed in this PR

Adds browser-style key tabs to RedisInsight’s Browser details panel, allowing users to revisit keys without replacing their previous selections.

Changes:

Adds app-context state and actions for opening, closing, renaming, and clearing key tabs.
Integrates tab selection, neighbor activation on close, and rename handling into the Browser.
Adds tab styling, localized close labels, and reducer/component tests.

File	Description
`redisinsight/ui/src/slices/tests/app/context.spec.ts`	Tests tab lifecycle reducers and reset behavior.
`redisinsight/ui/src/slices/interfaces/app.ts`	Defines browser key-tab state.
`redisinsight/ui/src/slices/app/context.ts`	Adds tab actions and selector.
`redisinsight/ui/src/pages/browser/components/key-tabs/KeyTabs.tsx`	Implements tab rendering and interactions.
`redisinsight/ui/src/pages/browser/components/key-tabs/KeyTabs.styles.ts`	Styles the scrollable tab strip and active tabs.
`redisinsight/ui/src/pages/browser/components/key-tabs/KeyTabs.spec.tsx`	Tests tab rendering, selection, and closing.
`redisinsight/ui/src/pages/browser/components/key-tabs/index.ts`	Exports the tab component and props.
`redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx`	Displays tabs above details and updates renamed tabs.
`redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.styles.ts`	Adds tab-and-content panel layout.
`redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.spec.tsx`	Tests tab callback wiring.
`redisinsight/ui/src/pages/browser/BrowserPage.tsx`	Coordinates tab state, selection, closing, and index resets.
`redisinsight/ui/src/i18n/locales/en.json`	Adds English close-tab label.
`redisinsight/ui/src/i18n/locales/bg.json`	Adds Bulgarian close-tab label.

_{Review effort: Balanced}

  }, [db])

  const onChangeDbIndex = () => {
+    dispatch(clearBrowserKeyTabs())


+
+    dispatch(closeBrowserKeyTab(keyName))
+
+    if (!isEqualBuffers(keyName, selectedKeyRef.current)) return


                handleAddKeyPanel={handleAddKeyPanel}
                handleBulkActionsPanel={handleBulkActionsPanel}
                closeRightPanels={closeRightPanels}
+                keyTabs={keyTabs}


chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bc2e592d29

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-11-10T05:48:15Z

  }, [db])

  const onChangeDbIndex = () => {
+    dispatch(clearBrowserKeyTabs())


Clear tabs in the global DB-index change handler

Move this reset into the successful global DB-index change path (for example, InstanceHeader.handleChangeDbIndex). InstancePageTemplate keeps InstanceHeader mounted on Workbench and other instance routes, so a user can open tabs, navigate away from Browser, change the index there, and return; because BrowserPage was unmounted, this effect never ran and prevDbIndex is initialized to the already-new index on remount, leaving the old-index tabs available to inspect or mutate a same-named key in the new DB.

Useful? React with 👍 / 👎.

cursor

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

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

cursor · 2026-11-10T05:54:54Z

  }, [db])

  const onChangeDbIndex = () => {
+    dispatch(clearBrowserKeyTabs())


DB change leaves stale key tabs

High Severity

clearBrowserKeyTabs only runs inside BrowserPage, so it is skipped when the DB index changes from Workbench or any other view. On return, prevDbIndex is initialized to the new index and never detects a change. Tabs from the previous database stay open and can fetch or edit keys in the wrong DB.

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

chenbuxiuu requested a review from a team as a code owner November 10, 2026 05:41

Copilot AI balanced review requested due to automatic review settings November 10, 2026 05:41

Copilot started reviewing on behalf of chenbuxiuu November 10, 2026 05:41

View session

chenbuxiuu changed the title ~~Add key tabs to the Browser key details panel~~ feat:Add key tabs to the Browser key details panel Nov 10, 2026

Copilot AI reviewed Nov 10, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed Nov 10, 2026

View reviewed changes

cursor Bot reviewed Nov 10, 2026

View reviewed changes

Navigation Menu

Repository navigation

feat:Add key tabs to the Browser key details panel - #6586

feat:Add key tabs to the Browser key details panel#6586
chenbuxiuu wants to merge 1 commit into
redis:mainfrom
chenbuxiuu:fe/feature/browser-key-tabs

chenbuxiuu commented Nov 10, 2026 •

edited by cursor Bot

Loading

Uh oh!

chatgpt-codex-connector Bot commented Nov 10, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Nov 10, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Nov 10, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		dispatch(closeBrowserKeyTab(keyName))

		if (!isEqualBuffers(keyName, selectedKeyRef.current)) return

Conversation

chenbuxiuu commented Nov 10, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Testing

Uh oh!

chatgpt-codex-connector Bot commented Nov 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Nov 10, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Nov 10, 2026

Choose a reason for hiding this comment

DB change leaves stale key tabs

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

chenbuxiuu commented Nov 10, 2026 •

edited by cursor Bot

Loading

chatgpt-codex-connector Bot commented Nov 10, 2026 •

edited

Loading