wip

pawelangelow · pawelangelow · commit 93af801d24e3 · 2025-06-06T16:11:57.000+03:00
diff --git a/package.json b/package.json
@@ -255,6 +255,7 @@
   },
   "dependencies": {
     "@stablelib/snappy": "^1.0.3",
+    "@types/deep-diff": "^1.0.5",
     "@vscode/l10n": "^0.0.18",
     "@vscode/webview-ui-toolkit": "^1.4.0",
     "axios": "^1.8.3",
@@ -264,6 +265,7 @@
     "connection-string": "^4.4.0",
     "cors": "^2.8.5",
     "date-fns": "^2.30.0",
+    "deep-diff": "^1.0.2",
     "detect-port": "^1.6.1",
     "dotenv": "^16.4.5",
     "file-saver": "^2.0.5",
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx b/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx
@@ -1,8 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
+import { diff } from 'deep-diff'
 
+import { useShallow } from 'zustand/react/shallow'
 import { Spinner } from 'uiSrc/ui'
 
+import { checkExistingPath } from './tbd'
+import ReJSONConfirmDialog from './RejsonConfirmDialog'
 import { RejsonDynamicTypes } from '../rejson-dynamic-types'
 import { JSONObjectProps, ObjectTypes } from '../interfaces'
 import { generatePath, getBrackets, wrapPath } from '../utils'
@@ -13,10 +17,18 @@ import {
   EditItemFieldAction,
 } from '../components'
 
+import { useRejsonStore } from '../hooks/useRejsonStore'
 import styles from '../styles.module.scss'
 
 const defaultValue: [] = []
 
+const JSONParse = (value: string) => JSON.parse(value)
+
+const hasModifications = (oldObj: any, newObj: any) => {
+  const differences = diff(oldObj, newObj)
+  return differences?.some((d: any) => d.kind === 'E')
+}
+
 export const RejsonObject = React.memo((props: JSONObjectProps) => {
   const {
     type,
@@ -38,14 +50,24 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
     value: currentValue,
   } = props
 
-  const [path] = useState<string>(currentFullPath || generatePath(parentPath, keyName))
+  const [path] = useState<string>(
+    currentFullPath || generatePath(parentPath, keyName),
+  )
   const [value, setValue] = useState<any>(defaultValue)
   const [downloaded, setDownloaded] = useState<boolean>(isDownloaded)
   const [editEntireObject, setEditEntireObject] = useState<boolean>(false)
   const [valueOfEntireObject, setValueOfEntireObject] = useState<any>('')
   const [addNewKeyValuePair, setAddNewKeyValuePair] = useState<boolean>(false)
   const [loading, setLoading] = useState<boolean>(false)
   const [isExpanded, setIsExpanded] = useState<boolean>(false)
+  const [isConfirmVisible, setIsConfirmVisible] = useState<boolean>(false)
+  const [confirmDialogAction, setConfirmDialogAction] = useState<any>(() => {})
+
+  const { fullValue } = useRejsonStore(
+    useShallow((state) => ({
+      fullValue: state.data.data,
+    })),
+  )
 
   useEffect(() => {
     if (!expandedRows?.has(path)) {
@@ -62,34 +84,71 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
     fetchObject()
   }, [])
 
-  const handleFormSubmit = ({ key, value }: { key?: string, value: string }) => {
-    setAddNewKeyValuePair(false)
-
+  const handleFormSubmit = ({
+    key,
+    value: updatedValue,
+  }: {
+    key?: string
+    value: string
+  }) => {
     if (type === ObjectTypes.Array) {
       handleAppendRejsonObjectItemAction(selectedKey, path, value)
       return
     }
 
     const updatedPath = wrapPath(key as string, path)
+    const isKeyExisting = fullValue
+      ? checkExistingPath(updatedPath || '', JSONParse(fullValue as string))
+      : false
+
+    if (isKeyExisting) {
+      setConfirmDialogAction(() => () => {
+        setAddNewKeyValuePair(false)
+
+        if (updatedPath) {
+          handleSetRejsonDataAction(selectedKey, updatedPath, updatedValue)
+        }
+      })
+
+      setIsConfirmVisible(true)
+      return
+    }
+
+    setAddNewKeyValuePair(false)
     if (updatedPath) {
-      handleSetRejsonDataAction(selectedKey, updatedPath, value)
+      handleSetRejsonDataAction(selectedKey, updatedPath, updatedValue)
     }
   }
 
-  const handleUpdateValueFormSubmit = (value: string) => {
+  const handleUpdateValueFormSubmit = (updatedValue: string) => {
+    if (hasModifications(value, updatedValue)) {
+      setConfirmDialogAction(() => () => {
+        setEditEntireObject(false)
+        handleSetRejsonDataAction(selectedKey, path, updatedValue as string)
+      })
+
+      setIsConfirmVisible(true)
+      return
+    }
+
     setEditEntireObject(false)
-    handleSetRejsonDataAction(selectedKey, path, value as string)
+    handleSetRejsonDataAction(selectedKey, path, updatedValue as string)
   }
 
   const onClickEditEntireObject = async () => {
     const data = await handleFetchVisualisationResults(selectedKey, path, true)
 
     setEditEntireObject(true)
-    setValueOfEntireObject(typeof data.data === 'object' ? JSON.stringify(data.data, (_key, value) => (
-      typeof value === 'bigint'
-        ? value.toString()
-        : value
-    ), 4) : data.data)
+    setValueOfEntireObject(
+      typeof data.data === 'object'
+        ? JSON.stringify(
+          data.data,
+          (_key, value) =>
+            (typeof value === 'bigint' ? value.toString() : value),
+          4,
+        )
+        : data.data,
+    )
   }
 
   const onClickExpandCollapse = (path: string) => {
@@ -116,7 +175,10 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
     const spinnerDelay = setTimeout(() => setLoading(true), 300)
 
     try {
-      const { data, downloaded } = await handleFetchVisualisationResults(selectedKey, path)
+      const { data, downloaded } = await handleFetchVisualisationResults(
+        selectedKey,
+        path,
+      )
 
       setValue(data)
       onJsonKeyExpandAndCollapse(true, path)
@@ -134,7 +196,15 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
     <>
       <div className={styles.row} key={keyName + parentPath}>
         <div className={styles.rowContainer}>
-          <div className={styles.quotedKeyName} style={{ paddingLeft: `${leftPadding}em` }}>
+          <ReJSONConfirmDialog
+            open={isConfirmVisible}
+            onClose={() => setIsConfirmVisible(false)}
+            onConfirm={confirmDialogAction}
+          />
+          <div
+            className={styles.quotedKeyName}
+            style={{ paddingLeft: `${leftPadding}em` }}
+          >
             <span
               className={cx(styles.quoted, styles.keyName)}
               onClick={() => onClickExpandCollapse(path)}
@@ -155,7 +225,11 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
                 {getBrackets(type, 'end')}
               </div>
             )}
-            {isExpanded && !editEntireObject && <span className={styles.defaultFontOpenIndex}>{getBrackets(type, 'start')}</span>}
+            {isExpanded && !editEntireObject && (
+              <span className={styles.defaultFontOpenIndex}>
+                {getBrackets(type, 'start')}
+              </span>
+            )}
           </div>
           {!editEntireObject && !loading && (
             <EditItemFieldAction
@@ -193,7 +267,9 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
           onJsonKeyExpandAndCollapse={onJsonKeyExpandAndCollapse}
           handleSubmitUpdateValue={handleSubmitUpdateValue}
           handleFetchVisualisationResults={handleFetchVisualisationResults}
-          handleAppendRejsonObjectItemAction={handleAppendRejsonObjectItemAction}
+          handleAppendRejsonObjectItemAction={
+            handleAppendRejsonObjectItemAction
+          }
           handleSetRejsonDataAction={handleSetRejsonDataAction}
         />
       )}
@@ -203,6 +279,7 @@ export const RejsonObject = React.memo((props: JSONObjectProps) => {
           onCancel={() => setAddNewKeyValuePair(false)}
           onSubmit={handleFormSubmit}
           leftPadding={leftPadding}
+          shouldCloseOnOutsideClick={false}
         />
       )}
       {isExpanded && !editEntireObject && (
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/tbd.spec.ts b/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/tbd.spec.ts
@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/quotes */
+import { checkExistingPath } from './tbd'
+
+describe('checkExistingPath', () => {
+  it('returns true for empty path (a.k.a. the whole object)', () => {
+    const obj = { foo: 123 }
+    expect(checkExistingPath(`$`, obj)).toBe(true)
+  })
+
+  it('detects root-level existing key', () => {
+    const obj = { foo: 123 }
+    expect(checkExistingPath(`$['foo']`, obj)).toBe(true)
+  })
+
+  it('detects root-level missing key', () => {
+    const obj = { foo: 123 }
+    expect(checkExistingPath(`$['bar']`, obj)).toBe(false)
+  })
+
+  it('detects nested existing key', () => {
+    const obj = { array: { nested: 42 } }
+    expect(checkExistingPath(`$['array']['nested']`, obj)).toBe(true)
+  })
+
+  it('detects nested missing key', () => {
+    const obj = { array: { nested: 42 } }
+    expect(checkExistingPath(`$['array']['newNested']`, obj)).toBe(false)
+  })
+
+  it('returns false if parent is missing', () => {
+    const obj = {}
+    expect(checkExistingPath(`$['nonExistent']['child']`, obj)).toBe(false)
+  })
+
+  it('handles numeric index paths', () => {
+    const obj = { arr: [{ val: 1 }] }
+    expect(checkExistingPath(`$['arr'][0]['val']`, obj)).toBe(true)
+    expect(checkExistingPath(`$['arr'][1]['val']`, obj)).toBe(false)
+  })
+
+  it('handles non-object parents gracefully', () => {
+    const obj = { a: 123 }
+    expect(checkExistingPath(`$['a']['b']`, obj)).toBe(false) // number can't have a child
+  })
+})
diff --git a/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/tbd.ts b/src/webviews/src/modules/key-details/components/rejson-details/rejson-object/tbd.ts
@@ -0,0 +1,74 @@
+import { get } from 'lodash'
+import { IJSONData } from '../interfaces'
+
+// Matches [number] or ['string'] / ["string"] segments (with support for escaped characters inside strings)
+const REGEX = /\[(?:(["'])((?:\\.|(?!\1).)*)\1|(\d+))\]/g
+
+/**
+ * Parses a Redis JSONPath string into lodash.get compatible path chunks.
+ * Supports both numeric indices and JSON string keys (single or double quoted).
+ *
+ * Example: $['foo'][0]["bar"] => ['foo', 0, 'bar']
+ */
+
+const parseRedisJsonPath = (path: string): (string | number)[] => {
+  if (typeof path !== 'string') throw new TypeError('Path must be a string')
+
+  const matches = Array.from(path.matchAll(REGEX))
+
+  const chunks: (string | number)[] = []
+  let lastIndex = 0
+
+  if (path.startsWith('$') || path.startsWith('.')) {
+    lastIndex = 1
+  }
+
+  matches.forEach((match) => {
+    if (match.index !== lastIndex) {
+      throw new SyntaxError(
+        `Invalid segment at position ${lastIndex}: "${path.slice(lastIndex)}"`,
+      )
+    }
+
+    const [, quote, strContent, numContent] = match
+
+    // Assumming the path will be created from wrapPath()
+    // no need to handle the JSON encodings
+    if (quote) {
+      const jsonStr = `"${strContent}"`
+      chunks.push(JSON.parse(jsonStr))
+    } else if (numContent) {
+      chunks.push(Number(numContent))
+    }
+
+    lastIndex = match.index! + match[0].length
+  })
+
+  if (lastIndex !== path.length) {
+    throw new SyntaxError(
+      `Unexpected trailing content starting at position ${lastIndex}: "${path.slice(lastIndex)}"`,
+    )
+  }
+
+  return chunks
+}
+
+export const checkExistingPath = (path: string, object: IJSONData): boolean => {
+  const parsedPath = parseRedisJsonPath(path)
+
+  if (!parsedPath.length) {
+    // Path is root "$". We don't want to override the whole object.
+    return true
+  }
+
+  const isRootKey = parsedPath.length === 1
+
+  const parent = isRootKey ? object : get(object, parsedPath.slice(0, -1))
+  const key = parsedPath[parsedPath.length - 1]
+
+  if (typeof parent !== 'object' || parent === null) return false
+
+  return Object.prototype.hasOwnProperty.call(parent, key)
+}
+
+export default parseRedisJsonPath
diff --git a/yarn.lock b/yarn.lock
@@ -1640,6 +1640,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/deep-diff@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@types/deep-diff/-/deep-diff-1.0.5.tgz#95c08a57f097ffadd28bc98a45a8025f53c581e4"
+  integrity sha512-PQyNSy1YMZU1hgZA5tTYfHPpUAo9Dorn1PZho2/budQLfqLu3JIP37JAavnwYpR1S2yFZTXa3hxaE4ifGW5jaA==
+
 "@types/detect-port@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/detect-port/-/detect-port-1.3.5.tgz#deecde143245989dee0e82115f3caba5ee0ea747"
@@ -3352,6 +3357,11 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
+deep-diff@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.2.tgz#afd3d1f749115be965e89c63edc7abb1506b9c26"
+  integrity sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==
+
 deep-eql@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.3.tgz#7c7775513092f7df98d8df9996dd085eb668cc6d"
