Merge pull request #1130 from RedisInsight/feature/RI-3417_save-selected-formatters

#RI-3417 - save selected formatter

Author: vlad-dargel

redisinsight/ui/src/constants/storage.ts

@@ -17,6 +17,7 @@ enum BrowserStorageItem {
   dbConfig = 'dbConfig_',
   RunQueryMode = 'RunQueryMode',
   wbCleanUp = 'wbCleanUp',
+  viewFormat = 'viewFormat',
 }
 
 export default BrowserStorageItem

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

@@ -69,7 +69,7 @@ export const initialState: KeysStore = {
     error: '',
     data: null,
     length: 0,
-    viewFormat: defaultViewFormat,
+    viewFormat: localStorageService?.get(BrowserStorageItem.viewFormat) ?? defaultViewFormat,
   },
   addKey: {
     loading: false,
@@ -86,6 +86,9 @@ export const initialKeyInfo = {
   length: 0,
 }
 
+const getInitialSelectedKeyState = (state: KeysStore) =>
+  ({ ...initialState.selectedKey, viewFormat: state.selectedKey.viewFormat })
+
 // A slice for recipes
 const keysSlice = createSlice({
   name: 'keys',
@@ -213,7 +216,6 @@ const keysSlice = createSlice({
       state.selectedKey = {
         ...state.selectedKey,
         loading: false,
-        viewFormat: defaultViewFormat,
         // data: null,
       }
     },
@@ -313,11 +315,13 @@ const keysSlice = createSlice({
     },
 
     resetKeyInfo: (state) => {
-      state.selectedKey = cloneDeep(initialState.selectedKey)
+      state.selectedKey = cloneDeep(getInitialSelectedKeyState(state as KeysStore))
     },
 
     // reset keys for keys slice
-    resetKeys: () => cloneDeep(initialState),
+    resetKeys: (state) => cloneDeep(
+      { ...initialState, selectedKey: getInitialSelectedKeyState(state as KeysStore) }
+    ),
 
     resetKeysData: (state) => {
       // state.data.keys = []
@@ -334,6 +338,7 @@ const keysSlice = createSlice({
 
     setViewFormat: (state, { payload }: PayloadAction<KeyValueFormat>) => {
       state.selectedKey.viewFormat = payload
+      localStorageService?.set(BrowserStorageItem.viewFormat, payload)
     }
   },
 })
@@ -392,7 +397,6 @@ export let sourceKeysFetch: Nullable<CancelTokenSource> = null
 
 export function setInitialStateByType(type: string) {
   return (dispatch: AppDispatch) => {
-    dispatch(setViewFormat(defaultViewFormat))
 
     if (type === KeyTypes.Hash) {
       dispatch(setHashInitialState())

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

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash'
 import { AxiosError } from 'axios'
-import { KeyTypes } from 'uiSrc/constants'
+import { KeyTypes, KeyValueFormat } from 'uiSrc/constants'
 import { apiService } from 'uiSrc/services'
 import { parseKeysListResponse, stringToBuffer } from 'uiSrc/utils'
 import { cleanup, initialStateDefault, mockedStore } from 'uiSrc/utils/test-utils'
@@ -56,6 +56,8 @@ import reducer, {
   addZsetKey,
   setLastBatchKeys,
   updateSelectedKeyRefreshTime,
+  resetKeyInfo,
+  resetKeys,
 } from '../../browser/keys'
 import { getString } from '../../browser/string'
 
@@ -780,6 +782,52 @@ describe('keys slice', () => {
     })
   })
 
+  describe('resetKeyInfo', () => {
+    it('should properly save viewFormat', () => {
+      // Arrange
+      const viewFormat = KeyValueFormat.HEX
+      const initialStateMock = {
+        ...initialState,
+        selectedKey: {
+          ...initialState.selectedKey,
+          viewFormat
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialStateMock, resetKeyInfo())
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        browser: { keys: nextState },
+      })
+      expect(keysSelector(rootState)).toEqual(initialStateMock)
+    })
+  })
+
+  describe('resetKeys', () => {
+    it('should properly save viewFormat', () => {
+      // Arrange
+      const viewFormat = KeyValueFormat.HEX
+      const initialStateMock = {
+        ...initialState,
+        selectedKey: {
+          ...initialState.selectedKey,
+          viewFormat
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialStateMock, resetKeys())
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        browser: { keys: nextState },
+      })
+      expect(keysSelector(rootState)).toEqual(initialStateMock)
+    })
+  })
+
   describe('thunks', () => {
     describe('fetchKeys', () => {
       it('call both loadKeys and loadKeysSuccess when fetch is successed', async () => {