From 5d0936e286c7d321a2ec6a5a869618c30ed2ba8b Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Tue, 10 Jun 2025 22:52:47 +0300
Subject: [PATCH] switch to default editor after update in Monaco editor

---
 .../monaco-editor/MonacoEditor.spec.tsx       | 37 +++++++++++++++++++
 .../monaco-editor/MonacoEditor.tsx            |  4 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.spec.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.spec.tsx
index e6fe514993..2d3916e3a3 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.spec.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.spec.tsx
@@ -1,10 +1,24 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { configureStore } from '@reduxjs/toolkit'
 import { Provider } from 'react-redux'
+import * as reactRedux from 'react-redux'
 
 import MonacoEditor from './MonacoEditor'
 
+const dispatchMock = jest.fn()
+jest.spyOn(reactRedux, 'useDispatch').mockReturnValue(dispatchMock)
+
+jest.mock('uiSrc/slices/browser/rejson', () => {
+  const originalModule = jest.requireActual('uiSrc/slices/browser/rejson')
+  return {
+    ...originalModule,
+    setEditorType: jest.fn(() => ({ type: 'mock/setEditorType' })),
+    setReJSONDataAction: jest.fn(() => ({ type: 'mock/setReJSONDataAction' })),
+  }
+})
+
 const mockStore = configureStore({
   reducer: () => ({
     browser: {
@@ -43,3 +57,26 @@ it('should preserve large numbers in Monaco editor', async () => {
 
   expect(editor.textContent).toContain(`${bigNumber}`)
 })
+
+it('should dispatch setReJSONDataAction and reset editor when submitted', async () => {
+  const data = { test: 'testing' }
+
+  renderWithRedux(<MonacoEditor data={data as any} {...commonProps} />)
+
+  const updateButton = await screen.findByTestId('json-data-update-btn')
+  const editorTextarea = await screen.findByRole('textbox')
+
+  // Next steps are needed to simulate a change in the input in order to make the
+  // update button enabled
+  await userEvent.clear(editorTextarea)
+  // this is escaped value as Monaco editor is not native HTML input
+  await userEvent.type(editorTextarea, '{{}"changed": true}')
+  await userEvent.click(updateButton)
+
+  expect(dispatchMock).toHaveBeenCalledWith(
+    expect.objectContaining({ type: 'mock/setReJSONDataAction' }),
+  )
+  expect(dispatchMock).toHaveBeenCalledWith(
+    expect.objectContaining({ type: 'mock/setEditorType' }),
+  )
+})
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx
index e87157869c..227cc0de7d 100644
--- a/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx
+++ b/redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx
@@ -8,7 +8,8 @@ import {
   MonacoEditor as Editor,
   useMonacoValidation,
 } from 'uiSrc/components/monaco-editor'
-import { setReJSONDataAction } from 'uiSrc/slices/browser/rejson'
+import { setEditorType, setReJSONDataAction } from 'uiSrc/slices/browser/rejson'
+import { EditorType } from 'uiSrc/slices/interfaces'
 import { BaseProps } from '../interfaces'
 import { useChangeEditorType } from '../../change-editor-type-button'
 
@@ -42,6 +43,7 @@ const MonacoEditor = (props: BaseProps) => {
 
   const submitUpdate = () => {
     dispatch(setReJSONDataAction(selectedKey, ROOT_PATH, value, false, length))
+    dispatch(setEditorType(EditorType.Default))
   }
 
   return (