RI-7936 Add CommandView component by valkirilov · Pull Request #5411 · redis/RedisInsight

valkirilov · 2026-01-27T13:36:02Z

What

Created a simple component for showing code snippets, later to be used for the Vector Search feature:

a simple wrapper around Monaco editor
pass a command and render it in read-only mode
allow minimal customization of the component (show/hide line numbers)
allow inline copy of the command

PS: You can review the Storybook examples for more details and usage instructions.

yarn sb

And open http://localhost:6006/?path=/docs/pages-vector-search-components-commandview--docs in your browser.

Testing

The component comes with a very minimal API, you need to pass only the command:

<CommandView command="PASS THE COMMAND HERE" />

Light	Dark

Copy command

There is an inline button that lets you copy the command.

Optional: You can attach a callback handler as well.

<CommandView 
    command="PASS THE COMMAND HERE" 
    onCopy={() => null}
/>

Copy Tooltip	Copy Callback

Note

Low Risk
Low risk UI addition: new wrapper components and read-only Monaco configuration with unit tests/storybook; minimal impact beyond new exports in components/base.

Overview
Adds a new CodeEditor base component as a thin wrapper around react-monaco-editor, automatically deriving the Monaco theme from ThemeContext (with an override) and exporting it via components/base.

Introduces CommandView for Vector Search to display a command string in a read-only Monaco editor with optional line numbers and an inline CopyButton, plus Monaco option presets, Storybook stories, and unit tests covering rendering, language defaults/overrides, line-number toggling, and copy callback behavior.

^{Written by Cursor Bugbot for commit 0482118. This will update automatically on new commits. Configure here.}

- a simple wrapper around Monaco editor - pass a command and render it in read-only mode - allow minimal customization of the component (show/hide line numbers) - allow inline copy of the command re RI-7936

re #RI-7936

re RI-7936

github-actions · 2026-01-27T13:59:02Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.83%	21174/25563
🟡	Branches	68.11%	8949/13140
🟡	Functions	78.05%	5795/7425
🟢	Lines	83.23%	20737/24915

Test suite run success

5553 tests passing in 708 suites.

Report generated by 🧪jest coverage report action from 0482118

…ghlight

pawelangelow

Perfect!

pd-redis

None of the comments are deal-breakers, that is why I approve this PR

pd-redis · 2026-01-28T07:28:33Z

 import Router from 'uiSrc/Router'
 import { StyledContainer } from './helpers/styles'
 import { GlobalStyles } from 'uiSrc/styles/globalStyles'
+import MonacoEnvironmentInitializer from 'uiSrc/components/MonacoEnvironmentInitializer/MonacoEnvironmentInitializer'


I am OK with this being setup here, but just for information, you can do the same per story, not necessarily on global level

I agree, and initially tried that, but something failed. Anyway, I gave it another shot and now it worked as expected, so these helpers now live in the related story, instead of the global setup. c3e4a6a

Thanks for pointing it 👍

pd-redis · 2026-01-28T07:30:11Z

@@ -0,0 +1,47 @@
+import { monaco as monacoEditor } from 'react-monaco-editor'


I would much more prefer to have an abstraction around monaco.
I know we used on quite few places already

I agree completely with that. Initially, that's what I went for - to see whether we already have such a component. And I see there's already a MonacoEditor component, but it's quite complex with editing, inline editor, and dedicated editor features. For CommandView, we need something simpler - a read-only code display.

So, the way I see this abstraction layer:

it should be something simple

it should cover everything that can be accepted by Monaco Editor, at this point it should be a pass-through for all props

still, it should be the central point, where all the core logic lives

and serve as a layer where we can apply some specific customizations (now and in the future)

Still, I come up with this simple draft (which I'm not sure brings the value you wanted, so that’s why I put it in a separate pull request). #5417

But basically, this is how I see it at this point:

start with something simple

replace it later on all places where we use Monaco

and leave it as the single abstraction point in the codebase

pd-redis · 2026-01-28T07:34:21Z

+const withFlexContainer = (Story: React.ComponentType) => (
+  <div
+    style={{
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+    }}
+  >
+    <Story />
+  </div>
+)


You can just merge the 2 decorators

Yup, simplified it. Thanks :) ca20324

pd-redis · 2026-01-28T07:36:16Z

@@ -0,0 +1,64 @@
+import React, { useContext, useMemo, useRef } from 'react'
+import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor'


Same as above

pd-redis · 2026-01-28T07:38:59Z

+  const editorOptions = useMemo(
+    () =>
+      merge({}, defaultMonacoOptions, COMMAND_VIEW_EDITOR_OPTIONS, {
+        lineNumbers: showLineNumbers ? 'on' : 'off',
+      }),
+    [showLineNumbers],
+  )


Instead of use memo, why not just export 2 kind of options from constants and choose based on showLineNumbers

Thanks for the suggestion! You're right that with the current binary choice for showLineNumbers, exporting two pre-built variants from constants would be simpler and cleaner. And since this prop typically doesn't change during the component's lifecycle, useMemo is indeed a safeguard for a problem we may never encounter.

export const COMMAND_VIEW_OPTIONS = { withLineNumbers: { ...baseOptions, lineNumbers: 'on't }, withoutLineNumbers: { ...baseOptions, lineNumbers: 'off' }, }

However, I decided to keep the merge approach with prop overrides for extensibility. Right now we only have a single config override, but I want to make it easy to add more in the future. With this pattern, adding another override is just one more line:

merge({}, defaultMonacoOptions, COMMAND_VIEW_EDITOR_OPTIONS, { lineNumbers: showLineNumbers ? 'on' : 'off', // wordWrap: enableWordWrap ? 'on' : 'off', // easy to add // and many more... })

As for useMemo - normally I would drop it to keep things simpler, but I'm keeping it with the same reasoning. If we later introduce a prop that actually changes during the component's lifecycle, the safeguard is already in place.

pd-redis · 2026-01-28T07:40:55Z

+  }
+
+  return (
+    <S.EditorWrapper className={className} data-testid={dataTestId}>


I would not provide default test id, this makes it possible to have same test id on the same screen

Done 👍 87f470e

…nt setup - Updated the storybook for CommandView component to use a new decorator for Monaco environment initialization. - Removed the previous Redis commands initializer and replaced it with Monaco setup for syntax highlighting. - Ensured that Monaco components are properly rendered within the story context. re #RI-7936

…ators re #RI-7936

re #RI-7936

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

re #RI-7936

…r references - removed the editorRef and editorDidMount function as they were not utilized in this simple component re #RI-7936

…egration - Added CodeEditorWrapper component as a thin wrapper around the Monaco editor. - Created corresponding types for props to allow future customization. - Exported the new component and its types for use in other parts of the application. re #RI-7936

…react-monaco-editor re #RI-7936

valkirilov added 4 commits January 27, 2026 15:24

feat: add command view component

abe1a32

- a simple wrapper around Monaco editor - pass a command and render it in read-only mode - allow minimal customization of the component (show/hide line numbers) - allow inline copy of the command re RI-7936

test(ui): add unit tests for the command view component

40ae335

re #RI-7936

chore(ui): added storybook examples for the command view component

0ac9f08

re RI-7936

fix(ui): simplify styles

17f8972

re RI-7936

valkirilov marked this pull request as ready for review January 27, 2026 15:00

valkirilov requested review from ArtemHoruzhenko, DimoHG, KrumTy, dantovska, pawelangelow and pd-redis as code owners January 27, 2026 15:00

chore(ui): make the storybook for command view component show code hi…

bb5fbad

…ghlight

valkirilov self-assigned this Jan 27, 2026

pawelangelow previously approved these changes Jan 28, 2026

View reviewed changes

pd-redis previously approved these changes Jan 28, 2026

View reviewed changes

valkirilov added 3 commits January 28, 2026 12:07

chore(ui): streamline CommandView stories by removing redundant decor…

ca20324

…ators re #RI-7936

docs(ui): add 'With onCopy callback' story to CommandView

3d70aa7

re #RI-7936

valkirilov dismissed stale reviews from pd-redis and pawelangelow via 3d70aa7 January 28, 2026 10:09

cursor Bot reviewed Jan 28, 2026

View reviewed changes

Comment thread redisinsight/ui/src/pages/vector-search/components/CommandView/CommandView.tsx Outdated

Comment thread redisinsight/ui/src/pages/vector-search/components/CommandView/CommandView.tsx Outdated

valkirilov added 8 commits January 28, 2026 12:38

fix(ui): remove default value for data-testid

87f470e

re #RI-7936

test(ui): add tests for showLineNumbers prop in CommandView component

a8f41c5

re #RI-7936

test(ui): organize language prop tests in CommandView component

1f746a1

re #RI-7936

refactor(ui): simplify CommandView component by removing unused edito…

f58d9d4

…r references - removed the editorRef and editorDidMount function as they were not utilized in this simple component re #RI-7936

refactor(ui): update CommandView to use CodeEditorWrapper instead of …

50c67db

…react-monaco-editor re #RI-7936

fix(ui): handle code editor theme by default on a component level

afae61c

reafctor(ui): move the code editor to the base components folder

0482118

pd-redis approved these changes Jan 29, 2026

View reviewed changes

valkirilov merged commit f7e0704 into main Jan 29, 2026
18 checks passed

valkirilov deleted the fe/feature/RI-7936/command-view-component branch January 29, 2026 15:23

		@@ -0,0 +1,47 @@
		import { monaco as monacoEditor } from 'react-monaco-editor'

		@@ -0,0 +1,64 @@
		import React, { useContext, useMemo, useRef } from 'react'
		import ReactMonacoEditor, { monaco as monacoEditor } from 'react-monaco-editor'

Conversation

valkirilov commented Jan 27, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Testing

Copy command

Uh oh!

github-actions Bot commented Jan 27, 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!

pawelangelow left a comment

Choose a reason for hiding this comment

Uh oh!

pd-redis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

valkirilov commented Jan 27, 2026 •

edited by cursor Bot

Loading

github-actions Bot commented Jan 27, 2026 •

edited

Loading