#RI-2965, #RI-2966

redisinsight/ui/src/pages/browser/components/rejson-details/JSONScalar/JSONScalar.tsx

@@ -58,17 +58,17 @@ const JSONScalar = (props: Props) => {
       path = keyName.includes('"') ? `${parentPath}['${keyName}']` : `${parentPath}["${keyName}"]`
     }
 
-    let changedValue = value
+    let val = value
     if (value === null) {
-      changedValue = JSON.stringify(value)
+      val = JSON.stringify(value)
     }
     if (typeof value === 'string') {
-      changedValue = `"${value}"`
+      val = `"${value}"`
     }
 
-    setChangedValue(changedValue)
+    setChangedValue(val)
     setPath(path)
-  }, [parentPath, keyName])
+  }, [parentPath, keyName, value])
 
   const validateJSONValue = (value: JSONScalarValue) => {
     let error: string = ''
@@ -208,7 +208,7 @@ const JSONScalar = (props: Props) => {
                 updateLoading={false}
                 showPopover={(item) => setDeleting(`${item}scalar`)}
                 handleDeleteItem={() => handleSubmitRemoveKey(path, keyName.toString())}
-                />
+              />
             </div>
           </div>
         </div>

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

@@ -76,25 +76,27 @@ const RejsonDetailsWrapper = () => {
           data-testid="progress-key-json"
         />
       )}
-      <RejsonDetails
-        selectedKey={selectedKey}
-        dbNumber={0}
-        dataType={type || ''}
-        deleteMsg=""
-        instanceId={123}
-        resultTableKeyMap={{}}
-        handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
-        onJSONPropertyDeleted={reportJSONPropertyDeleted}
-        data={data}
-        onJSONKeyExpandAndCollapse={reportJSONKeyExpandAndCollapse}
-        onJSONPropertyAdded={reportJSONPropertyAdded}
-        onJSONPropertyEdited={reportJSONPropertyEdited}
-        shouldRejsonDataBeDownloaded={!downloaded}
-        handleSubmitUpdateValue={handleEditValueUpdate}
-        handleDeleteKeyDialogOpen={() => {}}
-        handleOpenExpiryDialog={() => {}}
-        keyProperty={{}}
-      />
+      {!(loading && data === undefined) && (
+        <RejsonDetails
+          selectedKey={selectedKey}
+          dbNumber={0}
+          dataType={type || ''}
+          deleteMsg=""
+          instanceId={123}
+          resultTableKeyMap={{}}
+          handleSubmitJsonUpdateValue={handleSubmitJsonUpdateValue}
+          onJSONPropertyDeleted={reportJSONPropertyDeleted}
+          data={data}
+          onJSONKeyExpandAndCollapse={reportJSONKeyExpandAndCollapse}
+          onJSONPropertyAdded={reportJSONPropertyAdded}
+          onJSONPropertyEdited={reportJSONPropertyEdited}
+          shouldRejsonDataBeDownloaded={!downloaded}
+          handleSubmitUpdateValue={handleEditValueUpdate}
+          handleDeleteKeyDialogOpen={() => {}}
+          handleOpenExpiryDialog={() => {}}
+          keyProperty={{}}
+        />
+      )}
     </div>
   )
 }

redisinsight/ui/src/slices/browser/keys.ts

@@ -612,7 +612,6 @@ function addTypedKey(
           onSuccessAction()
         }
         dispatch(addKeySuccess())
-        dispatch<any>(fetchKeyInfo(data.keyName))
         dispatch(
           addMessageNotification(successMessages.ADDED_NEW_KEY(data.keyName))
         )

redisinsight/ui/src/slices/browser/rejson.ts

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { cloneDeep } from 'lodash'
 import axios, { CancelTokenSource } from 'axios'
 import * as jsonpath from 'jsonpath'
 
@@ -20,8 +19,8 @@ import {
   RemoveRejsonRlResponse,
 } from 'apiSrc/modules/browser/dto/rejson-rl.dto'
 
-import { InitialStateRejson } from '../interfaces'
 import { refreshKeyInfoAction } from './keys'
+import { InitialStateRejson } from '../interfaces'
 import { addErrorNotification, addMessageNotification } from '../app/notifications'
 import { AppDispatch, RootState } from '../store'
 
@@ -30,7 +29,7 @@ export const initialState: InitialStateRejson = {
   error: '',
   data: {
     downloaded: false,
-    data: null,
+    data: undefined,
     type: '',
   },
 }