Merge pull request #3145 from RedisInsight/fe/bugfix/RI-5371

#RI-5371 - fix showing no results messages

Author: vlad-dargel

redisinsight/ui/src/constants/texts.tsx

@@ -9,6 +9,13 @@ export const NoResultsFoundText = (
     No results found.
   </EuiText>
 )
+
+export const LoadingText = (
+  <EuiText size="m" data-testid="loading-keys" style={{ lineHeight: 1.4 }}>
+    loading...
+  </EuiText>
+)
+
 export const NoSelectedIndexText = (
   <EuiText size="m" data-testid="no-result-select-index">
     Select an index and enter a query to search per values of keys.

redisinsight/ui/src/pages/browser/components/browser-left-panel/BrowserLeftPanel.tsx

@@ -67,7 +67,8 @@ const BrowserLeftPanel = (props: Props) => {
 
   const isDataLoaded = searchMode === SearchMode.Pattern ? isDataPatternLoaded : isDataRedisearchLoaded
   const keysState = searchMode === SearchMode.Pattern ? patternKeysState : redisearchKeysState
-  const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading || redisearchListLoading
+  const loading = searchMode === SearchMode.Pattern ? patternLoading : redisearchLoading
+  const headerLoading = searchMode === SearchMode.Pattern ? patternLoading : redisearchListLoading
   const isSearched = searchMode === SearchMode.Pattern ? patternIsSearched : redisearchIsSearched
   const scrollTopPosition = searchMode === SearchMode.Pattern ? scrollPatternTopPosition : scrollRedisearchTopPosition
   const commonFilterType = searchMode === SearchMode.Pattern ? filter : keysState.keys?.[0]?.type
@@ -123,7 +124,7 @@ const BrowserLeftPanel = (props: Props) => {
     <div className={styles.container}>
       <KeysHeader
         keysState={keysState}
-        loading={loading}
+        loading={headerLoading}
         isSearched={isSearched}
         loadKeys={loadKeys}
         handleScanMoreClick={handleScanMoreClick}

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

@@ -85,12 +85,13 @@ const KeyList = forwardRef((props: Props, ref) => {
   const { keyList: { isNotRendered: isNotRenderedContext } } = useSelector(appContextBrowser)
 
   const [, rerender] = useState({})
-  const [firstDataLoaded, setFirstDataLoaded] = useState<boolean>(!!keysState.keys.length)
+  const [firstDataLoaded, setFirstDataLoaded] = useState<boolean>(
+    !!keysState.keys.length || !isNotRenderedContext
+  )
   const [deletePopoverIndex, setDeletePopoverIndex] = useState<Maybe<number>>(undefined)
 
   const controller = useRef<Nullable<AbortController>>(null)
   const itemsRef = useRef(keysState.keys)
-  const isNotRendered = useRef(isNotRenderedContext)
   const renderedRowsIndexesRef = useRef({ startIndex: 0, lastIndex: 0 })
 
   const dispatch = useDispatch()
@@ -108,15 +109,16 @@ const KeyList = forwardRef((props: Props, ref) => {
   useEffect(() => {
     itemsRef.current = [...keysState.keys]
 
-    if (!isNotRendered.current && !loading) {
+    if (
+      (!firstDataLoaded && keysState.lastRefreshTime)
+      || (searchMode === SearchMode.Redisearch && itemsRef.current.length === 0)
+    ) {
       setFirstDataLoaded(true)
+      dispatch(setBrowserIsNotRendered(false))
     }
 
-    isNotRendered.current = false
-    dispatch(setBrowserIsNotRendered(isNotRendered.current))
     if (itemsRef.current.length === 0) {
       cancelAllMetadataRequests()
-      setFirstDataLoaded(true)
       rerender({})
       return
     }
@@ -135,24 +137,13 @@ const KeyList = forwardRef((props: Props, ref) => {
 
   const NoItemsMessage = () => (
     <NoKeysMessage
+      isLoading={loading || !firstDataLoaded}
       total={keysState.total}
       scanned={keysState.scanned}
       onAddKeyPanel={onAddKeyPanel}
     />
   )
 
-  const getNoItemsMessage = () => {
-    if (isNotRendered.current) {
-      return ''
-    }
-
-    if (itemsRef.current.length < keysState.keys.length) {
-      return 'loading...'
-    }
-
-    return <NoItemsMessage />
-  }
-
   const onLoadMoreItems = (props: { startIndex: number, stopIndex: number }) => {
     if (searchMode === SearchMode.Redisearch
       && keysState.maxResults
@@ -331,6 +322,8 @@ const KeyList = forwardRef((props: Props, ref) => {
     },
   ]
 
+  const noItemsMessage = NoItemsMessage()
+
   const VirtualizeTable = () => (
     <VirtualTable
       selectable
@@ -346,7 +339,7 @@ const KeyList = forwardRef((props: Props, ref) => {
       items={itemsRef.current}
       totalItemsCount={keysState.total ?? Infinity}
       scanned={isSearched || isFiltered ? keysState.scanned : 0}
-      noItemsMessage={getNoItemsMessage()}
+      noItemsMessage={noItemsMessage}
       selectedKey={selectedKey.data}
       scrollTopProp={scrollTopPosition}
       setScrollTopPosition={setScrollTopPosition}

redisinsight/ui/src/pages/browser/components/key-tree/KeyTree.tsx

@@ -105,9 +105,12 @@ const KeyTree = forwardRef((props: Props, ref) => {
   }, [keysState.keys])
 
   useEffect(() => {
-    setFirstDataLoaded(true)
+    if (keysState.lastRefreshTime) {
+      setFirstDataLoaded(true)
+    }
+
     setItems(parseKeyNames(keysState.keys))
-  }, [sorting, delimiter, keysState.lastRefreshTime])
+  }, [keysState.lastRefreshTime, delimiter, sorting])
 
   useEffect(() => {
     openSelectedKey(selectedKeyName)
@@ -161,19 +164,14 @@ const KeyTree = forwardRef((props: Props, ref) => {
   }
 
   if (keysState.keys.length === 0) {
-    const NoItemsMessage = () => {
-      if (loading || !firstDataLoaded) {
-        return <span>loading...</span>
-      }
-
-      return (
-        <NoKeysMessage
-          total={keysState.total}
-          scanned={keysState.scanned}
-          onAddKeyPanel={onAddKeyPanel}
-        />
-      )
-    }
+    const NoItemsMessage = () => (
+      <NoKeysMessage
+        isLoading={loading || !firstDataLoaded}
+        total={keysState.total}
+        scanned={keysState.scanned}
+        onAddKeyPanel={onAddKeyPanel}
+      />
+    )
 
     return (
       <div className={cx(styles.content)}>

redisinsight/ui/src/pages/browser/components/no-keys-message/NoKeysMessage.tsx

@@ -5,6 +5,7 @@ import { SearchMode } from 'uiSrc/slices/interfaces/keys'
 
 import {
   FullScanNoResultsFoundText,
+  LoadingText,
   NoResultsFoundText,
   NoSelectedIndexText,
   ScanNoResultsFoundText,
@@ -15,6 +16,7 @@ import { redisearchSelector } from 'uiSrc/slices/browser/redisearch'
 import NoKeysFound from '../no-keys-found'
 
 export interface Props {
+  isLoading: boolean
   total: number
   scanned: number
   onAddKeyPanel: (value: boolean) => void
@@ -25,6 +27,7 @@ const NoKeysMessage = (props: Props) => {
     total,
     scanned,
     onAddKeyPanel,
+    isLoading,
   } = props
 
   const { selectedIndex, isSearched: redisearchIsSearched } = useSelector(redisearchSelector)
@@ -35,6 +38,10 @@ const NoKeysMessage = (props: Props) => {
       return NoSelectedIndexText
     }
 
+    if (isLoading) {
+      return LoadingText
+    }
+
     if (total === 0) {
       return NoResultsFoundText
     }
@@ -44,6 +51,10 @@ const NoKeysMessage = (props: Props) => {
     }
   }
 
+  if (isLoading) {
+    return LoadingText
+  }
+
   if (total === 0) {
     return (<NoKeysFound onAddKeyPanel={onAddKeyPanel} />)
   }

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.spec.tsx

@@ -2,7 +2,7 @@ import { cloneDeep } from 'lodash'
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
-import { cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
+import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import WBResults, { Props } from './WBResults'
 
 const mockedProps = mock<Props>()
@@ -27,12 +27,18 @@ describe('WBResults', () => {
     expect(render(<WBResults {...instance(mockedProps)} />)).toBeTruthy()
   })
 
-  it('should not render NoResults component with empty items', () => {
-    const { getByTestId } = render(<WBResults {...instance(mockedProps)} items={[]} />)
+  it('should render NoResults component with empty items', () => {
+    const { getByTestId } = render(<WBResults {...instance(mockedProps)} items={[]} isResultsLoaded />)
 
     expect(getByTestId('wb_no-results')).toBeInTheDocument()
   })
 
+  it('should not render NoResults component with empty items and loading state', () => {
+    render(<WBResults {...instance(mockedProps)} items={[]} isResultsLoaded={false} />)
+
+    expect(screen.queryByTestId('wb_no-results')).not.toBeInTheDocument()
+  })
+
   it('should render with custom props', () => {
     const itemsMock: CommandExecutionUI[] = [
       {

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import cx from 'classnames'
 import {
-  EuiButtonEmpty,
+  EuiButtonEmpty, EuiProgress,
 } from '@elastic/eui'
 
 import { CodeButtonParams } from 'uiSrc/constants'
@@ -16,6 +16,7 @@ import WbNoResultsMessage from 'uiSrc/pages/workbench/components/wb-no-results-m
 import styles from './styles.module.scss'
 
 export interface Props {
+  isResultsLoaded: boolean
   items: CommandExecutionUI[]
   clearing: boolean
   processing: boolean
@@ -30,6 +31,7 @@ export interface Props {
 }
 const WBResults = (props: Props) => {
   const {
+    isResultsLoaded,
     items = [],
     clearing,
     processing,
@@ -60,7 +62,15 @@ const WBResults = (props: Props) => {
 
   return (
     <div className={styles.wrapper}>
-      {!!items.length && (
+      {!isResultsLoaded && (
+        <EuiProgress
+          color="primary"
+          size="xs"
+          position="absolute"
+          data-testid="progress-wb-history"
+        />
+      )}
+      {!!items?.length && (
         <div className={styles.header}>
           <EuiButtonEmpty
             size="s"
@@ -76,7 +86,7 @@ const WBResults = (props: Props) => {
       )}
       <div className={cx(styles.container)}>
         <div ref={scrollDivRef} />
-        {items.length ? items.map((
+        {items?.length ? items.map((
           {
             command = '',
             isOpen = false,
@@ -124,7 +134,7 @@ const WBResults = (props: Props) => {
             onQueryDelete={() => onQueryDelete(id)}
           />
         )) : null}
-        {!items.length && (<WbNoResultsMessage />)}
+        {(isResultsLoaded && !items.length) && (<WbNoResultsMessage />)}
       </div>
     </div>
   )

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/styles.module.scss

@@ -11,6 +11,8 @@
 
   display: flex;
   flex-direction: column;
+
+  position: relative;
 }
 
 .container {

redisinsight/ui/src/pages/workbench/components/wb-results/WBResultsWrapper.tsx

@@ -6,6 +6,7 @@ import { CodeButtonParams } from 'uiSrc/constants'
 import WBResults from './WBResults'
 
 export interface Props {
+  isResultsLoaded: boolean
   items: CommandExecutionUI[]
   clearing: boolean
   processing: boolean

redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx

@@ -39,6 +39,7 @@ export interface Props {
   items: CommandExecutionUI[]
   clearing: boolean
   processing: boolean
+  isResultsLoaded: boolean
   setScript: (script: string) => void
   setScriptEl: Function
   scriptEl: Nullable<monacoEditor.editor.IStandaloneCodeEditor>
@@ -74,6 +75,7 @@ const WBView = (props: Props) => {
     scriptEl,
     activeMode,
     resultsMode,
+    isResultsLoaded,
     onSubmit,
     onQueryOpen,
     onQueryDelete,
@@ -218,6 +220,7 @@ const WBView = (props: Props) => {
                     items={items}
                     clearing={clearing}
                     processing={processing}
+                    isResultsLoaded={isResultsLoaded}
                     activeMode={activeMode}
                     activeResultsMode={resultsMode}
                     scrollDivRef={scrollDivRef}