#RI-5371 - fix showing no results messages

Author: rsergeenko

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

@@ -146,7 +146,7 @@ const KeyList = forwardRef((props: Props, ref) => {
       return ''
     }
 
-    if (itemsRef.current.length < keysState.keys.length) {
+    if (!keysState.lastRefreshTime || itemsRef.current.length < keysState.keys.length) {
       return 'loading...'
     }
 
@@ -331,6 +331,8 @@ const KeyList = forwardRef((props: Props, ref) => {
     },
   ]
 
+  const noItemsMessage = getNoItemsMessage()
+
   const VirtualizeTable = () => (
     <VirtualTable
       selectable
@@ -346,7 +348,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/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}

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

@@ -63,6 +63,7 @@ const WBViewWrapper = () => {
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const {
+    isLoaded,
     loading,
     items,
     clearing,
@@ -233,6 +234,7 @@ const WBViewWrapper = () => {
       items={items}
       clearing={clearing}
       processing={processing}
+      isResultsLoaded={isLoaded}
       script={script}
       setScript={setScript}
       setScriptEl={setScriptEl}

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

@@ -9,6 +9,7 @@ export interface StateWorkbenchSettings {
 }
 
 export interface StateWorkbenchResults {
+  isLoaded: boolean
   loading: boolean
   processing: boolean
   clearing: boolean

redisinsight/ui/src/slices/tests/workbench/wb-results.spec.ts

@@ -302,7 +302,8 @@ describe('workbench results slice', () => {
       const mockCommandExecution = [{ mode: null, id: 'e3553f5a-0fdf-4282-8406-8b377c2060d2', databaseId: '3f795233-e26a-463b-a116-58cf620b18f2', command: 'get test', role: null, nodeOptions: null, createdAt: '2022-06-10T15:47:13.000Z', emptyCommand: false }]
       const state = {
         ...initialStateWithItems,
-        items: mockCommandExecution
+        items: mockCommandExecution,
+        isLoaded: true
       }
 
       // Act
@@ -323,7 +324,8 @@ describe('workbench results slice', () => {
 
       const state = {
         ...initialStateWithItems,
-        items: [{ mode: null, id: 'e3553f5a-0fdf-4282-8406-8b377c2060d2', databaseId: '3f795233-e26a-463b-a116-58cf620b18f2', command: EMPTY_COMMAND, role: null, nodeOptions: null, createdAt: '2022-06-10T15:47:13.000Z', emptyCommand: true }]
+        items: [{ mode: null, id: 'e3553f5a-0fdf-4282-8406-8b377c2060d2', databaseId: '3f795233-e26a-463b-a116-58cf620b18f2', command: EMPTY_COMMAND, role: null, nodeOptions: null, createdAt: '2022-06-10T15:47:13.000Z', emptyCommand: true }],
+        isLoaded: true,
       }
 
       // Act

redisinsight/ui/src/slices/workbench/wb-results.ts

@@ -29,6 +29,7 @@ import {
 } from '../interfaces'
 
 export const initialState: StateWorkbenchResults = {
+  isLoaded: false,
   loading: false,
   processing: false,
   clearing: false,
@@ -54,11 +55,13 @@ const workbenchResultsSlice = createSlice({
       state.items = payload.map((item) =>
         ({ ...item, command: item.command || EMPTY_COMMAND, emptyCommand: !item.command }))
       state.loading = false
+      state.isLoaded = true
     },
 
     loadWBHistoryFailure: (state, { payload }) => {
       state.error = payload
       state.loading = false
+      state.isLoaded = true
     },
 
     // Process Workbench command to API
@@ -177,6 +180,7 @@ const workbenchResultsSlice = createSlice({
 
     resetWBHistoryItems: (state) => {
       state.items = []
+      state.isLoaded = false
     },
 
     stopProcessing: (state) => {