Merge pull request #1342 from RedisInsight/fe/bugfix/RI-3748_Infinity_loading_without_keys_context

#RI-3748 - Loading endless spinner in Browser displayed when user creates keys in Workbench

Author: egor-zalenski

redisinsight/ui/src/components/analytics-tabs/constants.ts

@@ -12,7 +12,7 @@ export const analyticsViewTabs: AnalyticsTabs[] = [
   },
   {
     id: AnalyticsViewTab.DatabaseAnalysis,
-    label: 'Redis Database Analysis',
+    label: 'Database Analysis',
   },
   {
     id: AnalyticsViewTab.SlowLog,

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -37,7 +37,8 @@ import {
 } from 'uiSrc/slices/browser/keys'
 import {
   appContextBrowser,
-  setBrowserKeyListScrollPosition
+  setBrowserKeyListScrollPosition,
+  setBrowserIsNotRendered,
 } from 'uiSrc/slices/app/context'
 import { GroupBadge } from 'uiSrc/components'
 import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api'
@@ -72,13 +73,13 @@ const KeyList = forwardRef((props: Props, ref) => {
   const selectedKey = useSelector(selectedKeySelector)
   const { total, nextCursor, previousResultCount } = useSelector(keysDataSelector)
   const { isSearched, isFiltered, viewType } = useSelector(keysSelector)
-  const { keyList: { scrollTopPosition } } = useSelector(appContextBrowser)
+  const { keyList: { scrollTopPosition, isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser)
 
   const [, rerender] = useState({})
   const [firstDataLoaded, setFirstDataLoaded] = useState(!!keysState.keys.length)
 
   const itemsRef = useRef(keysState.keys)
-  const isNotRendered = useRef(true)
+  const isNotRendered = useRef(isNotRenderedContext)
   const renderedRowsIndexesRef = useRef({ startIndex: 0, lastIndex: 0 })
 
   const dispatch = useDispatch()
@@ -107,6 +108,7 @@ const KeyList = forwardRef((props: Props, ref) => {
     }
 
     isNotRendered.current = false
+    dispatch(setBrowserIsNotRendered(isNotRendered.current))
     if (itemsRef.current.length === 0) {
       rerender({})
       return

redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.spec.tsx

@@ -164,7 +164,7 @@ describe('STANDALONE db', () => {
     })
     await waitForEuiToolTipVisible()
 
-    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
+    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
   })
 })
 
@@ -182,6 +182,6 @@ describe('SENTINEL db', () => {
     })
     await waitForEuiToolTipVisible()
 
-    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Redis Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
+    expect(screen.getByTestId('db-new-reports-tooltip')).toHaveTextContent('Database AnalysisAnalyze up to 10 000 keys per Redis database to get an overview of your data.')
   })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/header/Header.tsx

@@ -155,7 +155,7 @@ const Header = (props: Props) => {
                 position="bottom"
                 anchorClassName={styles.tooltipAnchor}
                 className={styles.tooltip}
-                title="Redis Database Analysis"
+                title="Database Analysis"
                 content={connectionType === ConnectionType.Cluster ? clusterTooltipMessage : commonTooltipMessage}
                 data-testid="db-new-reports-tooltip"
               >

redisinsight/ui/src/slices/app/context.ts

@@ -12,7 +12,8 @@ export const initialState: StateAppContext = {
     keyList: {
       isDataLoaded: false,
       scrollTopPosition: 0,
-      selectedKey: null
+      isNotRendered: true,
+      selectedKey: null,
     },
     panelSizes: {},
     tree: {
@@ -67,6 +68,9 @@ const appContextSlice = createSlice({
     setBrowserKeyListScrollPosition: (state, { payload }: { payload: number }) => {
       state.browser.keyList.scrollTopPosition = payload
     },
+    setBrowserIsNotRendered: (state, { payload }: { payload: boolean }) => {
+      state.browser.keyList.isNotRendered = payload
+    },
     setBrowserPanelSizes: (state, { payload }: { payload: any }) => {
       state.browser.panelSizes = payload
     },
@@ -153,6 +157,7 @@ export const {
   setBrowserKeyListDataLoaded,
   setBrowserSelectedKey,
   setBrowserKeyListScrollPosition,
+  setBrowserIsNotRendered,
   setBrowserPanelSizes,
   setBrowserTreeSelectedLeaf,
   setBrowserTreeNodesOpen,

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

@@ -40,6 +40,7 @@ export interface StateAppContext {
     keyList: {
       isDataLoaded: boolean
       scrollTopPosition: number
+      isNotRendered: boolean
       selectedKey: Nullable<RedisResponseBuffer>
     },
     panelSizes: {

redisinsight/ui/src/slices/tests/app/context.spec.ts

@@ -31,7 +31,8 @@ import reducer, {
   appContextBrowserTree,
   setBrowserTreeSelectedLeaf,
   updateBrowserTreeSelectedLeaf,
-  setBrowserTreeDelimiter
+  setBrowserTreeDelimiter,
+  setBrowserIsNotRendered,
 } from '../../app/context'
 
 jest.mock('uiSrc/services', () => ({
@@ -472,6 +473,30 @@ describe('slices', () => {
     })
   })
 
+  describe('setBrowserIsNotRendered', () => {
+    it('should properly set browser is not rendered value', () => {
+      // Arrange
+      const isNotRendered = false
+      const state = {
+        ...initialState.browser,
+        keyList: {
+          ...initialState.browser.keyList,
+          isNotRendered
+        }
+      }
+
+      // Act
+      const nextState = reducer(initialState, setBrowserIsNotRendered(isNotRendered))
+
+      // Assert
+      const rootState = Object.assign(initialStateDefault, {
+        app: { context: nextState },
+      })
+
+      expect(appContextBrowser(rootState)).toEqual(state)
+    })
+  })
+
   describe('setBrowserTreeDelimiter', () => {
     it('should properly set browser tree delimiter', () => {
       // Arrange