Switch to default editor after update in Monaco editor

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' }),
+  )
+})

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 (