Merge pull request #3155 from RedisInsight/fe/bugfix/RIVS-162_Editing_element_is_not_cancelled_after_search

#RIVS-162 - editing element is not cancelled after search

Author: vlad-dargel

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({})

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

@@ -59,9 +59,6 @@ const listSlice = createSlice({
   reducers: {
     setListInitialState: () => initialState,
 
-    setListElements: (state, { payload } : PayloadAction<RedisResponseBuffer[]>) => {
-      state.data.elements = payload
-    },
     // load List elements
     loadListElements: (state, { payload: resetData = true }: PayloadAction<Maybe<boolean>>) => {
       state.loading = true
@@ -195,7 +192,6 @@ const listSlice = createSlice({
 // Actions generated from the slice
 export const {
   setListInitialState,
-  setListElements,
   loadListElements,
   loadListElementsSuccess,
   loadListElementsFailure,

redisinsight/ui/src/slices/interfaces/instances.ts

@@ -1,4 +1,4 @@
-import { RedisResponseBuffer } from 'uiSrc/slices/interfaces/app'
+import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces/app'
 import { Maybe, Nullable } from 'uiSrc/utils'
 import { GetHashFieldsResponse } from 'apiSrc/modules/browser/hash/dto'
 import { GetSetMembersResponse } from 'apiSrc/modules/browser/set/dto'
@@ -454,7 +454,8 @@ export interface ModifiedSentinelMaster extends CreateSentinelDatabaseDto {
 export interface ModifiedGetListElementsResponse
   extends GetListElementsDto,
   GetListElementsResponse {
-  key?: string;
+  elements: { index: number, element: RedisResponseBuffer }[]
+  key?: RedisString;
   searchedIndex: Nullable<number>;
 }