RI-6954: Edit ReJSONs with Monaco editor (#286)

Author: pawelangelow

src/webviews/src/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx

@@ -5,42 +5,51 @@ import { EditEntireItemAction, Props } from './EditEntireItemAction'
 import { JSONErrors } from '../../constants'
 
 const mockedProps = mock<Props>()
-
 const valueOfEntireItem = '"Sample string"'
 
 describe('EditEntireItemAction', () => {
   it('renders correctly with provided props', () => {
-    render(<EditEntireItemAction
-      {...instance(mockedProps)}
-      initialValue={valueOfEntireItem}
-    />)
+    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', () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...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('shouuld show error and do not submit', () => {
+  it('should show error and not submit', () => {
     const handleUpdateValueFormSubmit = vi.fn()
-    render(<EditEntireItemAction
-      {...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(JSONErrors.valueJSONFormat)
+    expect(screen.getByTestId('edit-json-error')).toHaveTextContent(
+      JSONErrors.valueJSONFormat,
+    )
     expect(handleUpdateValueFormSubmit).not.toHaveBeenCalled()
   })
 })

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,14 @@ 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={styles.editor}>
+              <MonacoJson
+                wrapperClassName={styles.editorWrapper}
+                value={value}
+                onChange={setValue}
+                data-testid="json-value"
+              />
+            </div>
           </div>
           <div className={cx(styles.controls, styles.controlsBottom)}>
             <VSCodeButton
@@ -100,7 +95,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 />}

src/webviews/src/modules/key-details/components/rejson-details/styles.module.scss

@@ -44,15 +44,15 @@
 }
 
 .row {
-  @apply min-h-[25px] relative flex items-end;
+  @apply relative flex items-end;
 
   &:last-child {
     @apply pb-3;
   }
 
   &: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;
 }
 
@@ -149,10 +152,15 @@
   }
 }
 
-.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, .jsonButtonStyle {
+.buttonStyle,
+.jsonButtonStyle {
   @apply z-[1];
 }

src/webviews/test/setup.ts src/webviews/test/setup.tsxsrc/webviews/test/setup.ts renamed to 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,19 +9,29 @@ 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(),
   disconnect: 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(),

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',