handle root level changes

Author: pawelangelow

src/webviews/src/modules/key-details/components/rejson-details/rejson-details/RejsonDetails.spec.tsx

@@ -338,4 +338,66 @@ describe('RejsonDetails', () => {
     expect(useRejson.setReJSONDataAction).not.toBeCalled()
     expect(useRejson.appendReJSONArrayItemAction).toBeCalled()
   })
+
+  it('should show confirmation dialog when adding a key that already exists', () => {
+    render(
+      <RejsonDetails
+        {...instance(mockedProps)}
+        data={{ existingKey: '123' }}
+        dataType="object"
+        selectedKey={mockedSelectedKey}
+        isDownloaded
+      />,
+    )
+
+    fireEvent.click(screen.getByTestId('add-object-btn'))
+
+    fireEvent.change(screen.getByTestId('json-key'), {
+      target: { value: '"existingKey"' },
+    })
+
+    fireEvent.change(screen.getByTestId('json-value'), {
+      target: { value: '"newValue"' },
+    })
+
+    fireEvent.click(screen.getByTestId('apply-btn'))
+
+    expect(screen.getByText('Duplicate JSON key detected')).toBeInTheDocument()
+    expect(useRejson.setReJSONDataAction).not.toBeCalled()
+  })
+
+  it('should call setReJSONDataAction when user confirms overwrite', () => {
+    render(
+      <RejsonDetails
+        {...instance(mockedProps)}
+        data={{ existingKey: '123' }}
+        dataType="object"
+        selectedKey={mockedSelectedKey}
+        isDownloaded
+      />,
+    )
+
+    fireEvent.click(screen.getByTestId('add-object-btn'))
+
+    fireEvent.change(screen.getByTestId('json-key'), {
+      target: { value: '"existingKey"' },
+    })
+
+    fireEvent.change(screen.getByTestId('json-value'), {
+      target: { value: '"newValue"' },
+    })
+
+    fireEvent.click(screen.getByTestId('apply-btn'))
+
+    const confirmBtn = screen.getByTestId('confirm-btn')
+    fireEvent.click(confirmBtn)
+
+    expect(useRejson.setReJSONDataAction).toBeCalledWith(
+      mockedSelectedKey,
+      '["existingKey"]',
+      '"newValue"',
+      undefined, // length is not required
+      expect.any(Function), // callback is not required
+    )
+  })
 })

src/webviews/src/modules/key-details/components/rejson-details/rejson-details/RejsonDetails.tsx

@@ -16,6 +16,8 @@ import {
   setReJSONDataAction,
 } from '../hooks/useRejsonStore'
 
+import { checkExistingPath } from '../rejson-object/tbd'
+import ReJSONConfirmDialog from '../rejson-object/RejsonConfirmDialog'
 import styles from '../styles.module.scss'
 
 export const RejsonDetails = (props: BaseProps) => {
@@ -31,6 +33,8 @@ export const RejsonDetails = (props: BaseProps) => {
   } = props
 
   const [addRootKVPair, setAddRootKVPair] = useState<boolean>(false)
+  const [isConfirmVisible, setIsConfirmVisible] = useState<boolean>(false)
+  const [confirmDialogAction, setConfirmDialogAction] = useState<any>(() => {})
 
   const databaseId = useKeysInContext((state) => state.databaseId)
 
@@ -61,14 +65,38 @@ export const RejsonDetails = (props: BaseProps) => {
     })
   }
 
-  const handleFormSubmit = ({ key, value }: { key?: string, value: string }) => {
+  const handleFormSubmit = ({
+    key,
+    value,
+  }: {
+    key?: string
+    value: string
+  }) => {
+    const updatedPath = wrapPath(key as string)
+    if (key) {
+      const isExisting = checkExistingPath(updatedPath as string, data)
+
+      if (isExisting) {
+        setConfirmDialogAction(() => () => {
+          setIsConfirmVisible(false)
+
+          if (updatedPath) {
+            handleSetRejsonDataAction(selectedKey, updatedPath, value)
+          }
+          setAddRootKVPair(false)
+        })
+
+        setIsConfirmVisible(true)
+        return
+      }
+    }
+
     setAddRootKVPair(false)
     if (isRealArray(data, dataType)) {
       handleAppendRejsonArrayItemAction(selectedKey, '.', value)
       return
     }
 
-    const updatedPath = wrapPath(key as string)
     if (updatedPath) {
       handleSetRejsonDataAction(selectedKey, updatedPath, value)
     }
@@ -101,6 +129,11 @@ export const RejsonDetails = (props: BaseProps) => {
             <span>{getBrackets(isObject ? ObjectTypes.Object : ObjectTypes.Array, 'start')}</span>
           </div>
         )}
+        <ReJSONConfirmDialog
+          open={isConfirmVisible}
+          onClose={() => setIsConfirmVisible(false)}
+          onConfirm={confirmDialogAction}
+        />
         <RejsonDynamicTypes
           data={data}
           parentPath={parentPath}