RI-6336 - WIP - moving to per DB config

KIvanow · KIvanow · commit 6a3f38045d97 · 2025-01-22T10:16:04.000+02:00
diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.spec.tsx
@@ -50,8 +50,6 @@ const propsMock = {
   onAddKeyPanel: jest.fn(),
 }
 
-const shownColumns = [BrowserColumns.Size, BrowserColumns.TTL]
-
 const mockedKeySlice = {
   viewType: KeyViewType.Browser,
   searchMode: SearchMode.Pattern,
diff --git a/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx b/redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx
@@ -24,6 +24,7 @@ import {
   setBrowserPatternScrollPosition,
   setBrowserIsNotRendered,
   setBrowserRedisearchScrollPosition,
+  appContextDbConfig,
 } from 'uiSrc/slices/app/context'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
 import { KeysStoreData, SearchMode } from 'uiSrc/slices/interfaces/keys'
@@ -82,7 +83,8 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const selectedKey = useSelector(selectedKeySelector)
   const { nextCursor, previousResultCount } = useSelector(keysDataSelector)
-  const { isSearched, isFiltered, searchMode, deleting, shownColumns } = useSelector(keysSelector)
+  const { isSearched, isFiltered, searchMode } = useSelector(keysSelector)
+  const { shownColumns } = useSelector(appContextDbConfig)
   const { keyList: { isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser)
 
   const [, rerender] = useState({})
@@ -282,6 +284,7 @@ const KeyList = forwardRef((props: Props, ref) => {
     dispatch(fetchKeysMetadata(
       itemsToFetch.map(({ name }) => name),
       commonFilterType,
+      shownColumns,
       controller.current?.signal,
       (loadedItems) => onSuccessFetchedMetadata(startIndex, loadedItems),
       () => { rerender({}) }
diff --git a/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss b/redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss
@@ -29,17 +29,30 @@
       .ReactVirtualized__Table__rowColumn {
         .moveOnHoverKey {
           transition: transform ease 0.3s;
-          &.hide { transform: translateX(-8px) }
+
+          &.hide {
+            transform: translateX(-8px)
+          }
         }
+
         .showOnHoverKey {
           display: none;
-          &.show { display: block !important; }}
+
+          &.show {
+            display: block !important;
+          }
+        }
       }
 
       &:hover {
         .ReactVirtualized__Table__rowColumn {
-          .moveOnHoverKey { transform: translateX(-8px) }
-          .showOnHoverKey { display: block !important; }
+          .moveOnHoverKey {
+            transform: translateX(-8px)
+          }
+
+          .showOnHoverKey {
+            display: block !important;
+          }
         }
       }
     }
@@ -79,4 +92,4 @@
 
 :global(.table-row-selected) .action {
   opacity: 1;
-}
+}
diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
@@ -9,9 +9,9 @@ import ColumnsIcon from 'uiSrc/assets/img/icons/columns.svg?react'
 import TreeViewIcon from 'uiSrc/assets/img/icons/treeview.svg?react'
 import KeysSummary from 'uiSrc/components/keys-summary'
 import { SCAN_COUNT_DEFAULT, SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
-import { resetBrowserTree, setBrowserKeyListDataLoaded, } from 'uiSrc/slices/app/context'
+import { appContextDbConfig, resetBrowserTree, setBrowserKeyListDataLoaded, setBrowserShownColumns, } from 'uiSrc/slices/app/context'
 
-import { changeKeyViewType, fetchKeys, keysSelector, resetKeysData, setShownColumns } from 'uiSrc/slices/browser/keys'
+import { changeKeyViewType, fetchKeys, keysSelector, resetKeysData } from 'uiSrc/slices/browser/keys'
 import { redisearchSelector } from 'uiSrc/slices/browser/redisearch'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { KeysStoreData, KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
@@ -59,7 +59,8 @@ const KeysHeader = (props: Props) => {
   } = props
 
   const { id: instanceId } = useSelector(connectedInstanceSelector)
-  const { viewType, searchMode, isFiltered, shownColumns } = useSelector(keysSelector)
+  const { viewType, searchMode, isFiltered } = useSelector(keysSelector)
+  const { shownColumns } = useSelector(appContextDbConfig)
   const { selectedIndex } = useSelector(redisearchSelector)
 
   const [columnsConfigShown, setColumnsConfigShown] = useState(false)
@@ -193,7 +194,7 @@ const KeysHeader = (props: Props) => {
       status ? shown.push(BrowserColumns.Size) : hidden.push(BrowserColumns.Size)
     }
 
-    dispatch(setShownColumns(newColumns))
+    dispatch(setBrowserShownColumns(newColumns))
     sendEventTelemetry({
       event: TelemetryEvent.SHOW_BROWSER_COLUMN_CLICKED,
       eventData: {
diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/VirtualTree.tsx
@@ -7,7 +7,7 @@ import {
   FixedSizeTree as Tree,
 } from 'react-vtree'
 import { EuiIcon, EuiImage, EuiLoadingSpinner, EuiProgress } from '@elastic/eui'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { bufferToString, Maybe, Nullable } from 'uiSrc/utils'
 import { useDisposableWebworker } from 'uiSrc/services'
@@ -18,6 +18,7 @@ import KeyLightSVG from 'uiSrc/assets/img/sidebar/browser.svg'
 import KeyDarkSVG from 'uiSrc/assets/img/sidebar/browser_active.svg'
 import { RedisResponseBuffer, RedisString } from 'uiSrc/slices/interfaces'
 import { fetchKeysMetadataTree } from 'uiSrc/slices/browser/keys'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { GetKeyInfoResponse } from 'apiSrc/modules/browser/keys/dto'
 
 import { Node } from './components/Node'
@@ -72,6 +73,7 @@ const VirtualTree = (props: Props) => {
 
   const { theme } = useContext(ThemeContext)
   const [rerenderState, rerender] = useState({})
+  const { shownColumns } = useSelector(appContextDbConfig)
   const controller = useRef<Nullable<AbortController>>(null)
   const elements = useRef<any>({})
   const nodes = useRef<TreeNode[]>([])
@@ -144,6 +146,7 @@ const VirtualTree = (props: Props) => {
     dispatch(fetchKeysMetadataTree(
       itemsInit,
       filter,
+      shownColumns,
       controller.current?.signal,
       (loadedItems) =>
         onSuccessFetchedMetadata(loadedItems),
@@ -251,7 +254,7 @@ const VirtualTree = (props: Props) => {
     <AutoSizer>
       {({ height, width }) => (
         <div data-testid="virtual-tree" style={{ position: 'relative' }}>
-          { nodes.current.length > 0 && (
+          {nodes.current.length > 0 && (
             <>
               {loading && (
                 <EuiProgress
@@ -275,7 +278,7 @@ const VirtualTree = (props: Props) => {
               </Tree>
             </>
           )}
-          { nodes.current.length === 0 && loading && (
+          {nodes.current.length === 0 && loading && (
             <div className={styles.loadingContainer} style={{ width, height }} data-testid="virtual-tree-spinner">
               <div className={styles.loadingBody}>
                 <EuiLoadingSpinner size="xl" className={styles.loadingSpinner} />
diff --git a/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx b/redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx
@@ -17,7 +17,7 @@ import KeyRowSize from 'uiSrc/pages/browser/components/key-row-size'
 import KeyRowName from 'uiSrc/pages/browser/components/key-row-name'
 import KeyRowType from 'uiSrc/pages/browser/components/key-row-type'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
-import { keysSelector } from 'uiSrc/slices/browser/keys'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { DeleteKeyPopover } from '../../../delete-key-popover/DeleteKeyPopover'
 import { TreeData } from '../../interfaces'
 import styles from './styles.module.scss'
@@ -60,7 +60,7 @@ const Node = ({
 
   const delimiterView = delimiters.length === 1 ? delimiters[0] : '-'
 
-  const { shownColumns } = useSelector(keysSelector)
+  const { shownColumns } = useSelector(appContextDbConfig)
   const getSize = shownColumns.includes(BrowserColumns.Size)
   const getTtl = shownColumns.includes(BrowserColumns.TTL)
 
diff --git a/redisinsight/ui/src/pages/browser/modules/key-details/KeyDetails.tsx b/redisinsight/ui/src/pages/browser/modules/key-details/KeyDetails.tsx
@@ -16,6 +16,7 @@ import { KeyTypes } from 'uiSrc/constants'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 import { Nullable } from 'uiSrc/utils'
+import { appContextDbConfig } from 'uiSrc/slices/app/context'
 import { NoKeySelected } from './components/no-key-selected'
 import { DynamicTypeDetails } from './components/dynamic-type-details'
 
@@ -43,6 +44,7 @@ const KeyDetails = (props: Props) => {
 
   const { instanceId } = useParams<{ instanceId: string }>()
   const { viewType } = useSelector(keysSelector)
+  const { shownColumns } = useSelector(appContextDbConfig)
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const isKeySelected = !isNull(useSelector(selectedKeyDataSelector))
   const { type: keyType } = useSelector(selectedKeyDataSelector) ?? { type: KeyTypes.String }
@@ -54,6 +56,7 @@ const KeyDetails = (props: Props) => {
 
     dispatch(fetchKeyInfo(
       keyProp,
+      shownColumns,
       undefined,
       (data) => {
         if (!data) return
diff --git a/redisinsight/ui/src/slices/app/context.ts b/redisinsight/ui/src/slices/app/context.ts
@@ -11,6 +11,7 @@ import {
   DEFAULT_TREE_SORTING,
   KeyTypes, Pages,
   SortOrder,
+  BrowserColumns,
 } from 'uiSrc/constants'
 import { localStorageService, setCapabilityStorageField, setDBConfigStorageField } from 'uiSrc/services'
 import { clearExpertChatHistory } from 'uiSrc/slices/panels/aiAssistant'
@@ -30,6 +31,8 @@ import { SearchMode } from '../interfaces/keys'
 import { AppWorkspace, RedisResponseBuffer, StateAppContext } from '../interfaces'
 import { AppDispatch, RootState } from '../store'
 
+const DEFAULT_SHOWN_COLUMNS = [BrowserColumns.Size, BrowserColumns.TTL]
+
 export const initialState: StateAppContext = {
   workspace: localStorageService.get(BrowserStorageItem.homePage) === Pages.rdi
     ? AppWorkspace.RDI
@@ -42,6 +45,7 @@ export const initialState: StateAppContext = {
     treeViewSort: DEFAULT_TREE_SORTING,
     slowLogDurationUnit: DEFAULT_SLOWLOG_DURATION_UNIT,
     showHiddenRecommendations: DEFAULT_SHOW_HIDDEN_RECOMMENDATIONS,
+    shownColumns: DEFAULT_SHOWN_COLUMNS,
   },
   dbIndex: {
     disabled: false
@@ -131,6 +135,7 @@ const appContextSlice = createSlice({
       state.dbConfig.treeViewSort = payload?.treeViewSort ?? DEFAULT_TREE_SORTING
       state.dbConfig.slowLogDurationUnit = payload?.slowLogDurationUnit ?? DEFAULT_SLOWLOG_DURATION_UNIT
       state.dbConfig.showHiddenRecommendations = payload?.showHiddenRecommendations
+      state.dbConfig.shownColumns = payload?.shownColumns ?? DEFAULT_SHOWN_COLUMNS
     },
     setSlowLogUnits: (state, { payload }) => {
       state.dbConfig.slowLogDurationUnit = payload
@@ -144,6 +149,10 @@ const appContextSlice = createSlice({
       state.dbConfig.treeViewSort = payload
       setDBConfigStorageField(state.contextInstanceId, BrowserStorageItem.treeViewSort, payload)
     },
+    setBrowserShownColumns: (state, { payload }: PayloadAction<BrowserColumns[]>) => {
+      state.dbConfig.shownColumns = payload
+      setDBConfigStorageField(state.contextInstanceId, BrowserStorageItem.browserShownColumns, payload)
+    },
     setRecommendationsShowHidden: (state, { payload }: { payload: boolean }) => {
       state.dbConfig.showHiddenRecommendations = payload
       setDBConfigStorageField(state.contextInstanceId, BrowserStorageItem.showHiddenRecommendations, payload)
@@ -275,6 +284,7 @@ export const {
   setLastPipelineManagementPage,
   setPipelineDialogState,
   resetPipelineManagement,
+  setBrowserShownColumns,
 } = appContextSlice.actions
 
 // Selectors
diff --git a/redisinsight/ui/src/slices/browser/keys.ts b/redisinsight/ui/src/slices/browser/keys.ts
@@ -80,8 +80,6 @@ export const initialState: KeysStore = {
   isBrowserFullScreen: false,
   searchMode: localStorageService?.get(BrowserStorageItem.browserSearchMode) ?? SearchMode.Pattern,
   viewType: localStorageService?.get(BrowserStorageItem.browserViewType) ?? KeyViewType.Browser,
-  shownColumns: localStorageService?.get(BrowserStorageItem.browserShownColumns)
-    ?? [BrowserColumns.Size, BrowserColumns.TTL],
   data: {
     total: 0,
     scanned: 0,
@@ -425,10 +423,6 @@ const keysSlice = createSlice({
     setSelectedKeyRefreshDisabled: (state, { payload }: PayloadAction<boolean>) => {
       state.selectedKey.isRefreshDisabled = payload
     },
-    setShownColumns: (state, { payload }: PayloadAction<BrowserColumns[]>) => {
-      state.shownColumns = payload
-      localStorageService?.set(BrowserStorageItem.browserShownColumns, payload)
-    },
   },
 })
 
@@ -479,7 +473,6 @@ export const {
   deleteSearchHistorySuccess,
   deleteSearchHistoryFailure,
   setSelectedKeyRefreshDisabled,
-  setShownColumns
 } = keysSlice.actions
 
 // A selector
@@ -663,6 +656,7 @@ export function fetchMorePatternKeysAction(oldKeys: IKeyPropTypes[] = [], cursor
 // Asynchronous thunk action
 export function fetchKeyInfo(
   key: RedisResponseBuffer,
+  shownColumns: BrowserColumns[] = [BrowserColumns.Size, BrowserColumns.TTL],
   resetData?: boolean,
   onSuccess?: (data: Nullable<IKeyPropTypes>) => void
 ) {
@@ -672,7 +666,6 @@ export function fetchKeyInfo(
     try {
       const state = stateInit()
       const { encoding } = state.app.info
-      const { shownColumns } = state.browser.keys
       const { data, status } = await apiService.post(
         getUrl(
           state.connections.instances?.connectedInstance?.id ?? '',
@@ -736,13 +729,15 @@ export function fetchKeyInfo(
 }
 
 // Asynchronous thunk action
-export function refreshKeyInfoAction(key: RedisResponseBuffer) {
+export function refreshKeyInfoAction(
+  key: RedisResponseBuffer,
+  shownColumns: BrowserColumns[] = [BrowserColumns.Size, BrowserColumns.TTL]
+) {
   return async (dispatch: AppDispatch, stateInit: () => RootState) => {
     dispatch(refreshKeyInfo())
     try {
       const state = stateInit()
       const { encoding } = state.app.info
-      const { shownColumns } = state.browser.keys
       const { data, status } = await apiService.post(
         getUrl(
           state.connections.instances?.connectedInstance?.id ?? '',
@@ -1045,14 +1040,14 @@ export function editKeyTTL(key: RedisResponseBuffer, ttl: number) {
 export function fetchKeysMetadata(
   keys: RedisString[],
   filter: Nullable<KeyTypes>,
+  shownColumns: BrowserColumns[] = [BrowserColumns.Size, BrowserColumns.TTL],
   signal?: AbortSignal,
   onSuccessAction?: (data: GetKeyInfoResponse[]) => void,
   onFailAction?: () => void
 ) {
   return async (_dispatch: AppDispatch, stateInit: () => RootState) => {
     try {
       const state = stateInit()
-      const { shownColumns } = state.browser.keys
       const { data } = await apiService.post<GetKeyInfoResponse[]>(
         getUrl(
           state.connections.instances?.connectedInstance?.id,
@@ -1082,14 +1077,14 @@ export function fetchKeysMetadata(
 export function fetchKeysMetadataTree(
   keys: RedisString[],
   filter: Nullable<KeyTypes>,
+  shownColumns: BrowserColumns[] = [BrowserColumns.Size, BrowserColumns.TTL],
   signal?: AbortSignal,
   onSuccessAction?: (data: GetKeyInfoResponse[]) => void,
   onFailAction?: () => void
 ) {
   return async (_dispatch: AppDispatch, stateInit: () => RootState) => {
     try {
       const state = stateInit()
-      const { shownColumns } = state.browser.keys
       const { data } = await apiService.post<GetKeyInfoResponse[]>(
         getUrl(
           state.connections.instances?.connectedInstance?.id,
diff --git a/redisinsight/ui/src/slices/interfaces/app.ts b/redisinsight/ui/src/slices/interfaces/app.ts
@@ -2,7 +2,7 @@ import { AxiosError } from 'axios'
 import { EuiComboBoxOptionOption } from '@elastic/eui'
 import { RelativeWidthSizes } from 'uiSrc/components/virtual-table/interfaces'
 import { Nullable } from 'uiSrc/utils'
-import { DurationUnits, FeatureFlags, ICommands, SortOrder } from 'uiSrc/constants'
+import { BrowserColumns, DurationUnits, FeatureFlags, ICommands, SortOrder } from 'uiSrc/constants'
 import { GetServerInfoResponse } from 'apiSrc/modules/server/dto/server.dto'
 import { RedisString as RedisStringAPI } from 'apiSrc/common/constants/redis-string'
 
@@ -74,6 +74,7 @@ export interface StateAppContext {
     treeViewSort: SortOrder
     slowLogDurationUnit: DurationUnits
     showHiddenRecommendations: boolean
+    shownColumns: BrowserColumns[]
   }
   dbIndex: {
     disabled: boolean
diff --git a/redisinsight/ui/src/slices/tests/browser/keys.spec.ts b/redisinsight/ui/src/slices/tests/browser/keys.spec.ts
@@ -80,7 +80,6 @@ import reducer, {
   setLastBatchPatternKeys,
   updateSelectedKeyRefreshTime,
   refreshKey,
-  setShownColumns,
 } from '../../browser/keys'
 
 jest.mock('uiSrc/services', () => ({

Original file line number	Diff line number	Diff line change
`@@ -50,8 +50,6 @@ const propsMock = {`
`50`	`50`	`onAddKeyPanel: jest.fn(),`
`51`	`51`	`}`
`52`	`52`
`53`		`-const shownColumns = [BrowserColumns.Size, BrowserColumns.TTL]`
`54`		`-`
`55`	`53`	`const mockedKeySlice = {`
`56`	`54`	`viewType: KeyViewType.Browser,`
`57`	`55`	`searchMode: SearchMode.Pattern,`