From 37e5b44b20d40b4cc4d986b36f2e057eb3de75d7 Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Fri, 30 May 2025 11:40:01 +0300
Subject: [PATCH 1/5] wip: use monaco editor for edit

---
 .../EditEntireItemAction.tsx                  | 36 +++++++++----------
 .../rejson-details/styles.module.scss         | 18 ++++++----
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
index 41920eec..e6219649 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
@@ -1,16 +1,15 @@
-import React, { ChangeEvent, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import cx from 'classnames'
 import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
 import { VscCheck, VscChromeClose } from 'react-icons/vsc'
 import useOnclickOutside from 'react-cool-onclickoutside'
 import { GoAlert } from 'react-icons/go'
-import * as l10n from '@vscode/l10n'
 
 import { FieldMessage } from 'uiSrc/components'
 import { Nullable } from 'uiSrc/interfaces'
 import { Keys } from 'uiSrc/constants'
-import { TextArea } from 'uiSrc/ui'
 
+import { MonacoJson } from 'uiSrc/components/monaco-editor'
 import { isValidJSON } from '../../utils'
 import { JSONErrors } from '../../constants'
 
@@ -23,15 +22,13 @@ export interface Props {
 }
 
 export const EditEntireItemAction = (props: Props) => {
-  const {
-    initialValue,
-    onCancel,
-    onSubmit,
-  } = props
+  const { initialValue, onCancel, onSubmit } = props
   const [value, setValue] = useState<string>(initialValue)
   const [error, setError] = useState<Nullable<string>>(null)
 
-  const handleClickOutside = () => { onCancel?.() }
+  const handleClickOutside = () => {
+    onCancel?.()
+  }
 
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
@@ -66,16 +63,13 @@ export const EditEntireItemAction = (props: Props) => {
           onKeyDown={handleKeyDown}
         >
           <div className="grow">
-            <TextArea
-              autoFocus
-              inputRef={textareaRef}
-              invalid={!!error}
-              className={styles.fullWidthTextArea}
-              value={value}
-              placeholder={l10n.t('Enter JSON value')}
-              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}
-              data-testid="json-value"
-            />
+            <div className="h-[300px]">
+              <MonacoJson
+                wrapperClassName={'h-[300px]'}
+                value={value}
+                onChange={setValue}
+              />
+            </div>
           </div>
           <div className={cx(styles.controls, styles.controlsBottom)}>
             <VSCodeButton
@@ -100,7 +94,9 @@ export const EditEntireItemAction = (props: Props) => {
           </div>
         </form>
         {error && (
-          <div className={cx(styles.errorMessage, styles.errorMessageForTextArea)}>
+          <div
+            className={cx(styles.errorMessage, styles.errorMessageForTextArea)}
+          >
             <FieldMessage
               scrollViewOnAppear
               Icon={<GoAlert />}
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss b/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
index 27aee409..9f10c318 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
+++ b/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
@@ -44,7 +44,7 @@
 }
 
 .row {
-  @apply min-h-[25px] relative flex items-end;
+  @apply relative flex items-end;
 
   &:last-child {
     @apply pb-3;
@@ -52,7 +52,7 @@
 
   &:before {
     @apply block absolute h-full top-0 left-0 right-0 z-0 mx-[-16px];
-    content: "";
+    content: '';
   }
 
   &:nth-child(2n):before {
@@ -63,11 +63,13 @@
     background-color: var(--vscode-panelStickyScroll-shadow);
   }
 
-  > div, span, button {
+  > div,
+  span,
+  button {
     @apply z-[1];
   }
 
-  div, input {
+  input {
     @apply min-h-[25px];
   }
 }
@@ -123,7 +125,7 @@
 }
 
 .stringStyle {
-  @apply break-all
+  @apply break-all;
 }
 
 .quoted {
@@ -133,7 +135,8 @@
   }
 }
 
-.actionButtons, .deleteBtn {
+.actionButtons,
+.deleteBtn {
   @apply ml-4 flex items-center min-w-6;
 }
 
@@ -153,6 +156,7 @@
   @apply h-[150px] w-full pb-[30px] max-w-none scroll-pb-5;
 }
 
-.buttonStyle, .jsonButtonStyle {
+.buttonStyle,
+.jsonButtonStyle {
   @apply z-[1];
 }

From 2ff665ec4d2097b8d9ab31336328437f9b6f28ec Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Fri, 30 May 2025 13:54:59 +0300
Subject: [PATCH 2/5] fix styles

---
 .../edit-entire-item-action/EditEntireItemAction.tsx      | 4 ++--
 .../components/rejson-details/styles.module.scss          | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
index e6219649..e043b6d4 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
@@ -63,9 +63,9 @@ export const EditEntireItemAction = (props: Props) => {
           onKeyDown={handleKeyDown}
         >
           <div className="grow">
-            <div className="h-[300px]">
+            <div className={styles.editor}>
               <MonacoJson
-                wrapperClassName={'h-[300px]'}
+                wrapperClassName={styles.editorWrapper}
                 value={value}
                 onChange={setValue}
               />
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss b/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
index 9f10c318..f41f5ee9 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
+++ b/src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss
@@ -152,8 +152,12 @@
   }
 }
 
-.fullWidthTextArea {
-  @apply h-[150px] w-full pb-[30px] max-w-none scroll-pb-5;
+.editor {
+  @apply h-[200px] w-full pb-[30px] max-w-none scroll-pb-5;
+}
+
+.editorWrapper {
+  @apply h-[200px];
 }
 
 .buttonStyle,

From 23ed38b5a8ad7ce9272e942db8397e60d98b85df Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Fri, 30 May 2025 17:01:14 +0300
Subject: [PATCH 3/5] fix tests

---
 .../EditEntireItemAction.spec.tsx             | 63 ++++++++++++-------
 .../EditEntireItemAction.tsx                  |  1 +
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
index 3c293598..ddda1fcf 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
@@ -1,46 +1,65 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { fireEvent, render, screen } from 'testSrc/helpers'
-import { EditEntireItemAction, Props } from './EditEntireItemAction'
+import { screen, fireEvent } from 'testSrc/helpers'
 import { JSONErrors } from '../../constants'
 
-const mockedProps = mock<Props>()
-
+const mockedProps = mock<any>()
 const valueOfEntireItem = '"Sample string"'
 
+async function renderWithMockedMonaco(props: any) {
+  vi.resetModules()
+  vi.doMock('react-monaco-editor', () => ({
+    default: ({ value, onChange, 'data-testid': dataTestId }: any) => (
+      <textarea
+        data-testid={dataTestId}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    ),
+  }))
+
+  const { EditEntireItemAction } = await import('./EditEntireItemAction')
+  const { render } = await import('testSrc/helpers')
+  return render(<EditEntireItemAction {...props} />)
+}
+
 describe('EditEntireItemAction', () => {
-  it('renders correctly with provided props', () => {
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue={valueOfEntireItem}
-    />)
+  it('renders correctly with provided props', async () => {
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: valueOfEntireItem,
+    })
 
     expect(screen.getByTestId('json-value')).toBeInTheDocument()
     expect(screen.getByTestId('json-value')).toHaveValue(valueOfEntireItem)
   })
 
-  it('triggers handleUpdateValueFormSubmit when the form is submitted', () => {
+  it('triggers handleUpdateValueFormSubmit when the form is submitted', async () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue={valueOfEntireItem}
-      onSubmit={handleUpdateValueFormSubmit}
-    />)
+
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: valueOfEntireItem,
+      onSubmit: handleUpdateValueFormSubmit,
+    })
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
     expect(handleUpdateValueFormSubmit).toHaveBeenCalled()
   })
 
-  it('shouuld show error and do not submit', () => {
+  it('should show error and not submit', async () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue="xxxx"
-      onSubmit={handleUpdateValueFormSubmit}
-    />)
+
+    await renderWithMockedMonaco({
+      ...instance(mockedProps),
+      initialValue: 'xxxx',
+      onSubmit: handleUpdateValueFormSubmit,
+    })
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
-    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(JSONErrors.valueJSONFormat)
+    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(
+      JSONErrors.valueJSONFormat,
+    )
     expect(handleUpdateValueFormSubmit).not.toHaveBeenCalled()
   })
 })
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
index e043b6d4..61dc6c9c 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx
@@ -68,6 +68,7 @@ export const EditEntireItemAction = (props: Props) => {
                 wrapperClassName={styles.editorWrapper}
                 value={value}
                 onChange={setValue}
+                data-testid="json-value"
               />
             </div>
           </div>

From 78abc0475e48189792c0066fcf1f0c3432d27127 Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Mon, 2 Jun 2025 18:16:23 +0300
Subject: [PATCH 4/5] change the default mock for monaco editor

---
 src/webviews/test/{setup.ts => setup.tsx} | 17 ++++++++++++++---
 vite.config.mjs                           |  2 +-
 2 files changed, 15 insertions(+), 4 deletions(-)
 rename src/webviews/test/{setup.ts => setup.tsx} (74%)

diff --git a/src/webviews/test/setup.ts b/src/webviews/test/setup.tsx
similarity index 74%
rename from src/webviews/test/setup.ts
rename to src/webviews/test/setup.tsx
index 21aff95c..1de0054a 100644
--- a/src/webviews/test/setup.ts
+++ b/src/webviews/test/setup.tsx
@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom/vitest'
 import 'jsdom-worker'
+import React from 'react'
 
 import { mswServer } from 'testSrc/server'
 
@@ -8,6 +9,7 @@ window.URL.revokeObjectURL = () => {}
 window.URL.createObjectURL = () => URL
 
 // Mock the ResizeObserver
+// eslint-disable-next-line react-refresh/only-export-components
 const ResizeObserverMock = vi.fn(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
@@ -15,12 +17,21 @@ const ResizeObserverMock = vi.fn(() => ({
 }))
 
 vi.mock('react-virtualized-auto-sizer', async () => ({
-  ...(await vi.importActual<typeof import('react-virtualized-auto-sizer')>('react-virtualized-auto-sizer')),
-  default: ({ children }: { children: any }) => children({ height: 600, width: 600 }),
+  ...(await vi.importActual<typeof import('react-virtualized-auto-sizer')>(
+    'react-virtualized-auto-sizer',
+  )),
+  default: ({ children }: { children: any }) =>
+    children({ height: 600, width: 600 }),
 }))
 
 vi.mock('react-monaco-editor', () => ({
-  default: () => null,
+  default: ({ value, onChange, 'data-testid': dataTestId }: any) => (
+    <textarea
+      data-testid={dataTestId}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+    />
+  ),
   monaco: {
     languages: {
       getLanguages: vi.fn(),
diff --git a/vite.config.mjs b/vite.config.mjs
index ee149299..66aeafab 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -80,7 +80,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     testTimeout: 20000,
-    setupFiles: ['./src/webviews/test/setup.ts'],
+    setupFiles: ['./src/webviews/test/setup.tsx'],
     coverage: {
       reporter: ['text', 'html'],
       reportsDirectory: './report/coverage',

From db90ec7c9fc09187870e7a31e0fe820e1cdc725a Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Mon, 2 Jun 2025 19:20:04 +0300
Subject: [PATCH 5/5] remove local mock

---
 .../EditEntireItemAction.spec.tsx             | 62 ++++++++-----------
 1 file changed, 26 insertions(+), 36 deletions(-)

diff --git a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
index ddda1fcf..88ed130b 100644
--- a/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
+++ b/src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx
@@ -1,60 +1,50 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { screen, fireEvent } from 'testSrc/helpers'
+import { fireEvent, render, screen } from 'testSrc/helpers'
+import { EditEntireItemAction, Props } from './EditEntireItemAction'
 import { JSONErrors } from '../../constants'
 
-const mockedProps = mock<any>()
+const mockedProps = mock<Props>()
 const valueOfEntireItem = '"Sample string"'
 
-async function renderWithMockedMonaco(props: any) {
-  vi.resetModules()
-  vi.doMock('react-monaco-editor', () => ({
-    default: ({ value, onChange, 'data-testid': dataTestId }: any) => (
-      <textarea
-        data-testid={dataTestId}
-        value={value}
-        onChange={(e) => onChange?.(e.target.value)}
-      />
-    ),
-  }))
-
-  const { EditEntireItemAction } = await import('./EditEntireItemAction')
-  const { render } = await import('testSrc/helpers')
-  return render(<EditEntireItemAction {...props} />)
-}
-
 describe('EditEntireItemAction', () => {
-  it('renders correctly with provided props', async () => {
-    await renderWithMockedMonaco({
-      ...instance(mockedProps),
-      initialValue: valueOfEntireItem,
-    })
+  it('renders correctly with provided props', () => {
+    render(
+      <EditEntireItemAction
+        {...instance(mockedProps)}
+        initialValue={valueOfEntireItem}
+      />,
+    )
 
     expect(screen.getByTestId('json-value')).toBeInTheDocument()
     expect(screen.getByTestId('json-value')).toHaveValue(valueOfEntireItem)
   })
 
-  it('triggers handleUpdateValueFormSubmit when the form is submitted', async () => {
+  it('triggers handleUpdateValueFormSubmit when the form is submitted', () => {
     const handleUpdateValueFormSubmit = vi.fn()
 
-    await renderWithMockedMonaco({
-      ...instance(mockedProps),
-      initialValue: valueOfEntireItem,
-      onSubmit: handleUpdateValueFormSubmit,
-    })
+    render(
+      <EditEntireItemAction
+        {...instance(mockedProps)}
+        initialValue={valueOfEntireItem}
+        onSubmit={handleUpdateValueFormSubmit}
+      />,
+    )
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
     expect(handleUpdateValueFormSubmit).toHaveBeenCalled()
   })
 
-  it('should show error and not submit', async () => {
+  it('should show error and not submit', () => {
     const handleUpdateValueFormSubmit = vi.fn()
 
-    await renderWithMockedMonaco({
-      ...instance(mockedProps),
-      initialValue: 'xxxx',
-      onSubmit: handleUpdateValueFormSubmit,
-    })
+    render(
+      <EditEntireItemAction
+        {...instance(mockedProps)}
+        initialValue="xxxx"
+        onSubmit={handleUpdateValueFormSubmit}
+      />,
+    )
 
     fireEvent.submit(screen.getByTestId('json-entire-form'))
     expect(screen.getByTestId('edit-json-error')).toHaveTextContent(