diff --git a/redisinsight/ui/src/constants/storage.ts b/redisinsight/ui/src/constants/storage.ts index 03c4b62933..7e38aaeecc 100644 --- a/redisinsight/ui/src/constants/storage.ts +++ b/redisinsight/ui/src/constants/storage.ts @@ -17,6 +17,7 @@ enum BrowserStorageItem { dbConfig = 'dbConfig_', RunQueryMode = 'RunQueryMode', wbCleanUp = 'wbCleanUp', + viewFormat = 'viewFormat', } export default BrowserStorageItem diff --git a/redisinsight/ui/src/slices/browser/keys.ts b/redisinsight/ui/src/slices/browser/keys.ts index 8d07470add..2a6de1e894 100644 --- a/redisinsight/ui/src/slices/browser/keys.ts +++ b/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) => { state.selectedKey.viewFormat = payload + localStorageService?.set(BrowserStorageItem.viewFormat, payload) } }, }) @@ -392,7 +397,6 @@ export let sourceKeysFetch: Nullable = null export function setInitialStateByType(type: string) { return (dispatch: AppDispatch) => { - dispatch(setViewFormat(defaultViewFormat)) if (type === KeyTypes.Hash) { dispatch(setHashInitialState()) diff --git a/redisinsight/ui/src/slices/tests/browser/keys.spec.ts b/redisinsight/ui/src/slices/tests/browser/keys.spec.ts index 6a9863bc8a..cade1f38b1 100644 --- a/redisinsight/ui/src/slices/tests/browser/keys.spec.ts +++ b/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 () => {