RI-7136: Show overwrite confirmation when editing JSON in default editor

package.json

@@ -236,6 +236,7 @@
     "@elastic/eui": "34.6.0",
     "@reduxjs/toolkit": "^1.6.2",
     "@stablelib/snappy": "^1.0.2",
+    "@types/json-dup-key-validator": "^1.0.2",
     "ajv": "^8.17.1",
     "axios": "^1.8.4",
     "brotli-dec-wasm": "^2.3.0",
@@ -259,6 +260,7 @@
     "java-object-serialization": "^0.1.2",
     "js-yaml": "^4.1.0",
     "json-bigint": "^1.0.0",
+    "json-dup-key-validator": "^1.0.3",
     "jsonpath": "^1.1.1",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.spec.tsx

@@ -51,4 +51,32 @@ describe('EditEntireItemAction', () => {
     )
     expect(handleUpdateValueFormSubmit).not.toHaveBeenCalled()
   })
+
+  it('should show confirmation modal when JSON has duplicate keys, and confirm submit on confirm', () => {
+    const handleUpdateValueFormSubmit = jest.fn()
+
+    const duplicateKeyJson = `
+  {
+    "test": "one",
+    "test": "two"
+  }
+  `
+
+    render(
+      <EditEntireItemAction
+        {...instance(mockedProps)}
+        initialValue={duplicateKeyJson}
+        onSubmit={handleUpdateValueFormSubmit}
+      />,
+    )
+
+    fireEvent.submit(screen.getByTestId('json-entire-form'))
+
+    expect(screen.getByText(/Duplicate JSON key detected/i)).toBeInTheDocument()
+
+    const confirmButton = screen.getByLabelText(/overwrite/i)
+    fireEvent.click(confirmButton)
+
+    expect(handleUpdateValueFormSubmit).toHaveBeenCalledWith(duplicateKeyJson)
+  })
 })

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/edit-entire-item-action/EditEntireItemAction.tsx

@@ -1,11 +1,7 @@
 import React, { ChangeEvent, useState } from 'react'
-import {
-  EuiButtonIcon,
-  EuiForm,
-  EuiTextArea,
-  keys,
-} from '@elastic/eui'
+import { EuiButtonIcon, EuiForm, EuiTextArea, keys } from '@elastic/eui'
 import cx from 'classnames'
+import jsonValidator from 'json-dup-key-validator'
 
 import FieldMessage from 'uiSrc/components/field-message/FieldMessage'
 import { Nullable } from 'uiSrc/utils'
@@ -17,6 +13,7 @@
 import { JSONErrors } from '../../constants'
 
 import styles from '../../styles.module.scss'
+import ConfirmOverwrite from '../add-item/ConfirmOverwrite'
 
 export interface Props {
   initialValue: string
@@ -28,6 +25,8 @@
   const { initialValue, onCancel, onSubmit } = props
   const [value, setValue] = useState<string>(initialValue)
   const [error, setError] = useState<Nullable<string>>(null)
+  const [isConfirmationVisible, setIsConfirmationVisible] =
+    useState<boolean>(false)
 
   const handleOnEsc = (e: KeyboardEvent) => {
     if (e.code?.toLowerCase() === keys.ESCAPE) {
@@ -44,6 +43,17 @@
       return
     }
 
+    const validationError = jsonValidator.validate(value, false)
+
+    if (validationError) {
+      setIsConfirmationVisible(true)
+      return
+    }
+
+    onSubmit(value)
+  }
+
+  const confirmApply = () => {
     onSubmit(value)
   }
 
@@ -73,26 +83,32 @@
                     data-testid="json-value"
                   />
                 </FlexItem>
-                <div className={cx(styles.controls, styles.controlsBottom)}>
-                  <EuiButtonIcon
-                    iconSize="m"
-                    iconType="cross"
-                    color="primary"
-                    aria-label="Cancel add"
-                    className={styles.declineBtn}
-                    onClick={onCancel}
-                    data-testid="cancel-edit-btn"
-                  />
-                  <EuiButtonIcon
-                    iconSize="m"
-                    iconType="check"
-                    color="primary"
-                    type="submit"
-                    aria-label="Apply"
-                    className={styles.applyBtn}
-                    data-testid="apply-edit-btn"
-                  />
-                </div>
+                <ConfirmOverwrite
+                  isOpen={isConfirmationVisible}
+                  onCancel={() => setIsConfirmationVisible(false)}
+                  onConfirm={confirmApply}
+                >
+                  <div className={cx(styles.controls, styles.controlsBottom)}>
+                    <EuiButtonIcon
+                      iconSize="m"
+                      iconType="cross"
+                      color="primary"
+                      aria-label="Cancel add"
+                      className={styles.declineBtn}
+                      onClick={onCancel}
+                      data-testid="cancel-edit-btn"
+                    />
+                    <EuiButtonIcon
+                      iconSize="m"
+                      iconType="check"
+                      color="primary"
+                      type="submit"
+                      aria-label="Apply"
+                      className={styles.applyBtn}
+                      data-testid="apply-edit-btn"
+                    />
+                  </div>
+                </ConfirmOverwrite>
               </EuiForm>
               {error && (
                 <div

yarn.lock

@@ -2831,6 +2831,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-bigint/-/json-bigint-1.0.1.tgz#201062a6990119a8cc18023cfe1fed12fc2fc8a7"
   integrity sha512-zpchZLNsNuzJHi6v64UBoFWAvQlPhch7XAi36FkH6tL1bbbmimIF+cS7vwkzY4u5RaSWMoflQfu+TshMPPw8uw==
 
+"@types/json-dup-key-validator@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/json-dup-key-validator/-/json-dup-key-validator-1.0.2.tgz#30120b573e6ccfa0eac5c9a3f07d384805fa9dce"
+  integrity sha512-zJSAGITlz2nFT7xcKsvns8UifwSJpKuhgsdZj7+WoxiixiGnIefNiLK2uNhEICRkI9S2ccU6RYdqPS7iJRtU7Q==
+
 "@types/json-schema@^7.0.0", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -4137,6 +4142,11 @@ babel-preset-vite@^1.1.3:
     babel-plugin-transform-vite-meta-glob "1.1.2"
     babel-plugin-transform-vite-meta-hot "1.0.0"
 
+backslash@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/backslash/-/backslash-0.2.0.tgz#6c3c1fce7e7e714ccfc10fd74f0f73410677375f"
+  integrity sha512-Avs+8FUZ1HF/VFP4YWwHQZSGzRPm37ukU1JQYQWijuHhtXdOuAzcZ8PcAzfIw898a8PyBzdn+RtnKA6MzW0X2A==
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -8857,6 +8867,13 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-dup-key-validator@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/json-dup-key-validator/-/json-dup-key-validator-1.0.3.tgz#ec147e457ef600bd2a794121e88f4ec9f3edef85"
+  integrity sha512-JvJcV01JSiO7LRz7DY1Fpzn4wX2rJ3dfNTiAfnlvLNdhhnm0Pgdvhi2SGpENrZn7eSg26Ps3TPhOcuD/a4STXQ==
+  dependencies:
+    backslash "^0.2.0"
+
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"