#RIVS-162- [FE] Editing of element not canceled after adding new element

Author: egor-zalenski

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/hash-details-table/HashDetailsTable.tsx

@@ -61,9 +61,9 @@ import {
 } from 'uiSrc/utils'
 import { stringToBuffer } from 'uiSrc/utils/formatters/bufferFormatters'
 import { decompressingBuffer } from 'uiSrc/utils/decompressors'
+import PopoverDelete from 'uiSrc/pages/browser/components/popover-delete/PopoverDelete'
 import { AddFieldsToHashDto, GetHashFieldsResponse, HashFieldDto, } from 'apiSrc/modules/browser/hash/dto'
 
-import PopoverDelete from '../../../../../components/popover-delete/PopoverDelete'
 import styles from './styles.module.scss'
 
 const suffix = '_hash'
@@ -94,7 +94,7 @@ const HashDetailsTable = (props: Props) => {
   const { loading } = useSelector(hashSelector)
   const { viewType } = useSelector(keysSelector)
   const { id: instanceId, compressor = null } = useSelector(connectedInstanceSelector)
-  const { viewFormat: viewFormatProp } = useSelector(selectedKeySelector)
+  const { viewFormat: viewFormatProp, lastRefreshTime } = useSelector(selectedKeySelector)
   const { name: key, length } = useSelector(selectedKeyDataSelector) ?? { name: '' }
   const { loading: updateLoading } = useSelector(updateHashValueStateSelector)
   const { [KeyTypes.Hash]: hashSizes } = useSelector(appContextBrowserKeyDetails)
@@ -114,6 +114,10 @@ const HashDetailsTable = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  useEffect(() => {
+    resetState()
+  }, [lastRefreshTime])
+
   useEffect(() => {
     setFields(loadedFields)
 
@@ -122,15 +126,19 @@ const HashDetailsTable = (props: Props) => {
     }
 
     if (viewFormat !== viewFormatProp) {
-      setExpandedRows([])
-      setViewFormat(viewFormatProp)
-      setEditingIndex(null)
-      dispatch(setSelectedKeyRefreshDisabled(false))
-
-      clearCache()
+      resetState()
     }
   }, [loadedFields, viewFormatProp])
 
+  const resetState = () => {
+    setExpandedRows([])
+    setViewFormat(viewFormatProp)
+    setEditingIndex(null)
+    dispatch(setSelectedKeyRefreshDisabled(false))
+
+    clearCache()
+  }
+
   const clearCache = () => setTimeout(() => {
     cellCache.clearAll()
     forceUpdate({})

redisinsight/ui/src/pages/browser/modules/key-details/components/list-details/list-details-table/ListDetailsTable.tsx

@@ -94,7 +94,7 @@ const ListDetailsTable = (props: Props) => {
   const { name: key } = useSelector(selectedKeyDataSelector) ?? { name: '' }
   const { id: instanceId, compressor = null } = useSelector(connectedInstanceSelector)
   const { viewType } = useSelector(keysSelector)
-  const { viewFormat: viewFormatProp } = useSelector(selectedKeySelector)
+  const { viewFormat: viewFormatProp, lastRefreshTime } = useSelector(selectedKeySelector)
   const { [KeyTypes.List]: listSizes } = useSelector(appContextBrowserKeyDetails)
 
   const [elements, setElements] = useState<IListElement[]>([])
@@ -110,6 +110,10 @@ const ListDetailsTable = (props: Props) => {
 
   const dispatch = useDispatch()
 
+  useEffect(() => {
+    resetState()
+  }, [lastRefreshTime])
+
   useEffect(() => {
     setElements(loadedElements)
 
@@ -118,15 +122,19 @@ const ListDetailsTable = (props: Props) => {
     }
 
     if (viewFormat !== viewFormatProp) {
-      setExpandedRows([])
-      setViewFormat(viewFormatProp)
-      setEditingIndex(null)
-      dispatch(setSelectedKeyRefreshDisabled(false))
-
-      clearCache()
+      resetState()
     }
   }, [loadedElements, viewFormatProp])
 
+  const resetState = () => {
+    setExpandedRows([])
+    setViewFormat(viewFormatProp)
+    setEditingIndex(null)
+    dispatch(setSelectedKeyRefreshDisabled(false))
+
+    clearCache()
+  }
+
   const clearCache = () => setTimeout(() => {
     cellCache.clearAll()
     forceUpdate({})