Merge pull request #2508 from RedisInsight/fe/bugfix/RI-4879

#RI-4879 - fix showing message for key details

Author: mariasergeenko

redisinsight/ui/src/pages/browser/components/browser-right-panel/BrowserRightPanel.tsx

@@ -46,7 +46,7 @@ const BrowserRightPanel = (props: Props) => {
   } = props
 
   const { isBrowserFullScreen, viewType } = useSelector(keysSelector)
-  const { total } = useSelector(keysDataSelector)
+  const { total, lastRefreshTime: keysLastRefreshTime } = useSelector(keysDataSelector)
   const { type, length } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -119,6 +119,7 @@ const BrowserRightPanel = (props: Props) => {
           onEditKey={onEditKey}
           onRemoveKey={onSelectKey}
           totalKeys={total}
+          keysLastRefreshTime={keysLastRefreshTime}
         />
       )}
       {isAddKeyPanelOpen && every([!isBulkActionsPanelOpen, !isCreateIndexPanelOpen], Boolean) && (

redisinsight/ui/src/pages/browser/components/key-details/KeyDetails/KeyDetails.spec.tsx

@@ -10,14 +10,21 @@ describe('KeyDetails', () => {
     expect(render(<KeyDetails {...instance(mockedProps)} />)).toBeTruthy()
   })
 
+  it('should render nothing when there are no keys', () => {
+    render(<KeyDetails {...instance(mockedProps)} totalKeys={0} keysLastRefreshTime={null} />)
+
+    expect(screen.queryByTestId('explore-guides')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('select-key-message')).not.toBeInTheDocument()
+  })
+
   it('should render explore-guides when there are no keys', () => {
-    render(<KeyDetails {...instance(mockedProps)} totalKeys={0} />)
+    render(<KeyDetails {...instance(mockedProps)} totalKeys={0} keysLastRefreshTime={1} />)
 
     expect(screen.getByTestId('explore-guides')).toBeInTheDocument()
   })
 
   it('should render proper message when there are keys', () => {
-    render(<KeyDetails {...instance(mockedProps)} totalKeys={10} />)
+    render(<KeyDetails {...instance(mockedProps)} totalKeys={10} keysLastRefreshTime={1} />)
 
     expect(screen.getByTestId('select-key-message')).toBeInTheDocument()
   })

redisinsight/ui/src/pages/browser/components/key-details/KeyDetails/KeyDetails.tsx

@@ -30,6 +30,7 @@ import { sendEventTelemetry, TelemetryEvent, getBasedOnViewTypeEvent } from 'uiS
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
 
 import ExploreGuides from 'uiSrc/components/explore-guides'
+import { Nullable } from 'uiSrc/utils'
 import KeyDetailsHeader from '../../key-details-header/KeyDetailsHeader'
 import ZSetDetails from '../../zset-details/ZSetDetails'
 import StringDetails from '../../string-details/StringDetails'
@@ -56,10 +57,11 @@ export interface Props {
   onEditTTL: (key: RedisResponseBuffer, ttl: number) => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
   totalKeys: number
+  keysLastRefreshTime: Nullable<number>
 }
 
 const KeyDetails = ({ ...props }: Props) => {
-  const { onClosePanel, onRemoveKey, totalKeys } = props
+  const { onClosePanel, onRemoveKey, totalKeys, keysLastRefreshTime } = props
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const { type: selectedKeyType, name: selectedKey } = useSelector(selectedKeyDataSelector) ?? {
     type: KeyTypes.String,
@@ -139,6 +141,16 @@ const KeyDetails = ({ ...props }: Props) => {
     [KeyTypes.Stream]: <StreamDetailsWrapper isFooterOpen={isAddItemPanelOpen} />,
   }
 
+  const NoKeysSelectedMessage = () => (
+    <>
+      {totalKeys > 0 ? (
+        <span data-testid="select-key-message">
+          Select the key from the list on the left to see the details of the key.
+        </span>
+      ) : (<ExploreGuides />)}
+    </>
+  )
+
   return (
     <div className={styles.page}>
       <EuiFlexGroup
@@ -169,15 +181,7 @@ const KeyDetails = ({ ...props }: Props) => {
                     <p data-testid="no-keys-selected-text">
                       {error}
                     </p>
-                  ) : (
-                    <>
-                      {totalKeys > 0 ? (
-                        <span data-testid="select-key-message">
-                          Select the key from the list on the left to see the details of the key.
-                        </span>
-                      ) : (<ExploreGuides />)}
-                    </>
-                  )}
+                  ) : (!!keysLastRefreshTime && <NoKeysSelectedMessage />)}
                 </EuiText>
               </div>
             </>

redisinsight/ui/src/pages/browser/components/key-details/KeyDetailsWrapper.tsx

@@ -23,6 +23,7 @@ import { fetchReJSON } from 'uiSrc/slices/browser/rejson'
 import { refreshStream } from 'uiSrc/slices/browser/stream'
 import { getBasedOnViewTypeEvent, sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { RedisResponseBuffer } from 'uiSrc/slices/interfaces'
+import { Nullable } from 'uiSrc/utils'
 import KeyDetails from './KeyDetails/KeyDetails'
 
 export interface Props {
@@ -34,6 +35,7 @@ export interface Props {
   onRemoveKey: () => void
   keyProp: RedisResponseBuffer | null
   totalKeys: number
+  keysLastRefreshTime: Nullable<number>
 }
 
 const KeyDetailsWrapper = (props: Props) => {
@@ -45,7 +47,8 @@ const KeyDetailsWrapper = (props: Props) => {
     onEditKey,
     onRemoveKey,
     keyProp,
-    totalKeys
+    totalKeys,
+    keysLastRefreshTime,
   } = props
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -158,6 +161,7 @@ const KeyDetailsWrapper = (props: Props) => {
       onEditTTL={handleEditTTL}
       onEditKey={handleEditKey}
       totalKeys={totalKeys}
+      keysLastRefreshTime={keysLastRefreshTime}
     />
   )
 }