extend EditEntireItemAction with shouldCloseOnOutsideClick

Author: pawelangelow

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

@@ -52,4 +52,41 @@ describe('EditEntireItemAction', () => {
     )
     expect(handleUpdateValueFormSubmit).not.toHaveBeenCalled()
   })
+
+  it('should call onCancel when clicking outside and shouldCloseOnOutsideClick is true', () => {
+    const handleCancel = vi.fn()
+
+    render(
+      <div data-testid="outside">
+        <EditEntireItemAction
+          {...instance(mockedProps)}
+          initialValue={valueOfEntireItem}
+          onCancel={handleCancel}
+          shouldCloseOnOutsideClick
+        />
+      </div>,
+    )
+
+    // Simulate outside click
+    fireEvent.mouseDown(screen.getByTestId('outside'))
+    expect(handleCancel).toHaveBeenCalled()
+  })
+
+  it('should NOT call onCancel when clicking outside and shouldCloseOnOutsideClick is false', () => {
+    const handleCancel = vi.fn()
+
+    render(
+      <div data-testid="outside">
+        <EditEntireItemAction
+          {...instance(mockedProps)}
+          initialValue={valueOfEntireItem}
+          onCancel={handleCancel}
+          shouldCloseOnOutsideClick={false}
+        />
+      </div>,
+    )
+
+    fireEvent.mouseDown(screen.getByTestId('outside'))
+    expect(handleCancel).not.toHaveBeenCalled()
+  })
 })

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

@@ -17,18 +17,22 @@ import styles from '../../styles.module.scss'
 
 export interface Props {
   initialValue: string
+  shouldCloseOnOutsideClick?: boolean
   onCancel?: () => void
   onSubmit: (value: string) => void
 }
 
 export const EditEntireItemAction = (props: Props) => {
-  const { initialValue, onCancel, onSubmit } = props
+  const {
+    initialValue,
+    onCancel,
+    onSubmit,
+    shouldCloseOnOutsideClick = true,
+  } = props
   const [value, setValue] = useState<string>(initialValue)
   const [error, setError] = useState<Nullable<string>>(null)
 
-  const handleClickOutside = () => {
-    onCancel?.()
-  }
+  const handleClickOutside = () => shouldCloseOnOutsideClick && onCancel?.()
 
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 

src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx

@@ -256,6 +256,7 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
           initialValue={valueOfEntireObject}
           onCancel={() => setEditEntireObject(false)}
           onSubmit={handleUpdateValueFormSubmit}
+          shouldCloseOnOutsideClick={false}
         />
       ) : (
         <RejsonDynamicTypes