#4989 - resolve pr comments

Author: rsergeenko

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/RejsonDetailsWrapper.tsx

@@ -85,7 +85,7 @@ const RejsonDetailsWrapper = (props: Props) => {
         <div className="flex-column" style={{ flex: '1', height: '100%' }}>
           <div
             data-testid="json-details"
-            className={`${[styles.container].join(' ')}`}
+            className={styles.container}
           >
             {loading && (
               <EuiProgress

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx

@@ -7,7 +7,8 @@ import {
   EuiFocusTrap,
   EuiForm,
   EuiOutsideClickDetector,
-  EuiWindowEvent
+  EuiWindowEvent,
+  keys
 } from '@elastic/eui'
 
 import FieldMessage from 'uiSrc/components/field-message/FieldMessage'
@@ -41,7 +42,7 @@ const AddItem = (props: Props) => {
   }, [key, value])
 
   const handleOnEsc = (e: KeyboardEvent) => {
-    if (e.code?.toLowerCase() === 'escape') {
+    if (e.code?.toLowerCase() === keys.ESCAPE) {
       e.stopPropagation()
       onCancel?.()
     }

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

@@ -6,7 +6,8 @@ import {
   EuiForm,
   EuiOutsideClickDetector,
   EuiTextArea,
-  EuiWindowEvent
+  EuiWindowEvent,
+  keys
 } from '@elastic/eui'
 import cx from 'classnames'
 
@@ -32,7 +33,7 @@ const EditEntireItemAction = (props: Props) => {
   const [error, setError] = useState<Nullable<string>>(null)
 
   const handleOnEsc = (e: KeyboardEvent) => {
-    if (e.code?.toLowerCase() === 'escape') {
+    if (e.code?.toLowerCase() === keys.ESCAPE) {
       e.stopPropagation()
       onCancel?.()
     }
@@ -41,7 +42,7 @@ const EditEntireItemAction = (props: Props) => {
   const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
 
-    const error: null | string = validateRejsonValue(value)
+    const error = validateRejsonValue(value)
     if (error) {
       setError(error)
       return

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

@@ -41,7 +41,7 @@ const EditItemFieldAction = ({
         deleting={deleting}
         closePopover={() => setDeleting('')}
         updateLoading={false}
-        showPopover={(item) => { setDeleting(item) }}
+        showPopover={setDeleting}
         handleDeleteItem={() => handleSubmitRemoveKey(path, keyName)}
         testid="remove-json-field"
       />

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-details/RejsonDetails.tsx

@@ -9,7 +9,7 @@ import {
 } from 'uiSrc/slices/browser/rejson'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
-import { getBrackets, isRealArray, isRealObject } from '../utils'
+import { getBrackets, isRealArray, isRealObject, wrapPath } from '../utils'
 import { BaseProps, ObjectTypes } from '../interfaces'
 import RejsonDynamicTypes from '../rejson-dynamic-types'
 import { AddItem } from '../components'
@@ -49,12 +49,9 @@ const RejsonDetails = (props: BaseProps) => {
       return
     }
 
-    try {
-      const unescapedKey = JSON.parse(key!)
-      const updatedPath = unescapedKey.includes('"') ? `['${unescapedKey}']` : `["${unescapedKey}"]`
+    const updatedPath = wrapPath(key as string)
+    if (updatedPath) {
       handleSetRejsonDataAction(selectedKey, updatedPath, value)
-    } catch {
-      //
     }
   }
 

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-object/RejsonObject.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames'
 
 import RejsonDynamicTypes from '../rejson-dynamic-types'
 import { JSONObjectProps, ObjectTypes, REJSONResponse } from '../interfaces'
-import { generatePath, getBrackets } from '../utils'
+import { generatePath, getBrackets, wrapPath } from '../utils'
 
 import { AddItem, AddItemFieldAction, EditEntireItemAction, EditItemFieldAction } from '../components'
 
@@ -63,12 +63,9 @@ const RejsonObject = (props: JSONObjectProps) => {
       return
     }
 
-    try {
-      const unescapedKey = JSON.parse(key as string)
-      const updatedPath = unescapedKey.includes('"') ? `${path}['${unescapedKey}']` : `${path}["${unescapedKey}"]`
+    const updatedPath = wrapPath(key as string, path)
+    if (updatedPath) {
       handleSetRejsonDataAction(selectedKey, updatedPath, value)
-    } catch {
-      //
     }
   }
 

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/rejson-scalar/RejsonScalar.tsx

@@ -44,7 +44,7 @@ const RejsonScalar = (props: JSONScalarProps) => {
   }
 
   const onApplyValue = (value: JSONScalarValue) => {
-    const error: null | string = validateRejsonValue(value)
+    const error = validateRejsonValue(value)
     if (error) {
       setError(error)
       return

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/utils/utils.spec.ts

@@ -1,4 +1,4 @@
-import { generatePath, getBrackets, isRealArray, isRealObject, isScalar, isValidKey } from './utils'
+import { generatePath, getBrackets, isRealArray, isRealObject, isScalar, isValidKey, wrapPath } from './utils'
 import { ObjectTypes } from '../interfaces'
 
 describe('JSONUtils', () => {
@@ -12,6 +12,15 @@ describe('JSONUtils', () => {
     })
   })
 
+  describe('wrapPath', () => {
+    it('should properly wrap path', () => {
+      expect(wrapPath('"key"')).toEqual('["key"]')
+      expect(wrapPath('"ke\\"y"')).toEqual("['ke\"y']")
+      expect(wrapPath('"key"', 'path')).toEqual('path["key"]')
+      expect(wrapPath('"key\\""', 'path')).toEqual("path['key\"']")
+    })
+  })
+
   describe('isScalar', () => {
     it('should return Truthy for scalar variables', () => {
       const string = 'string'

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/utils/utils.ts

@@ -29,6 +29,15 @@ export const generatePath = (parentPath: string, keyName: string | number) => {
   return parentPath ? `${parentPath}[${currentPath}]` : `[${currentPath}]`
 }
 
+export const wrapPath = (key: string, path: string = '') => {
+  try {
+    const unescapedKey = JSON.parse(key!)
+    return unescapedKey.includes('"') ? `${path}['${unescapedKey}']` : `${path}["${unescapedKey}"]`
+  } catch {
+    return null
+  }
+}
+
 export const validateRejsonValue = (value: any) => {
   try {
     JSON.parse(value as string)