#RI-4879 - fix explore guides message showing

Author: rsergeenko

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

@@ -10,6 +10,7 @@ import KeyDetailsWrapper from 'uiSrc/pages/browser/components/key-details/KeyDet
 
 import { updateBrowserTreeSelectedLeaf } from 'uiSrc/slices/app/context'
 import {
+  keysDataSelector,
   keysSelector,
   selectedKeyDataSelector,
   toggleBrowserFullScreen
@@ -45,6 +46,7 @@ const BrowserRightPanel = (props: Props) => {
   } = props
 
   const { isBrowserFullScreen, viewType } = useSelector(keysSelector)
+  const { total } = useSelector(keysDataSelector)
   const { type, length } = useSelector(selectedKeyDataSelector) ?? { type: '', length: 0 }
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -116,6 +118,7 @@ const BrowserRightPanel = (props: Props) => {
           onCloseKey={closePanel}
           onEditKey={onEditKey}
           onRemoveKey={onSelectKey}
+          totalKeys={total}
         />
       )}
       {isAddKeyPanelOpen && every([!isBulkActionsPanelOpen, !isCreateIndexPanelOpen], Boolean) && (

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
+import { render, screen } from 'uiSrc/utils/test-utils'
 import KeyDetails, { Props } from './KeyDetails'
 
 const mockedProps = mock<Props>()
@@ -9,4 +9,16 @@ describe('KeyDetails', () => {
   it('should render', () => {
     expect(render(<KeyDetails {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it('should render explore-guides when there are no keys', () => {
+    render(<KeyDetails {...instance(mockedProps)} totalKeys={0} />)
+
+    expect(screen.getByTestId('explore-guides')).toBeInTheDocument()
+  })
+
+  it('should render proper message when there are keys', () => {
+    render(<KeyDetails {...instance(mockedProps)} totalKeys={10} />)
+
+    expect(screen.getByTestId('select-key-message')).toBeInTheDocument()
+  })
 })

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

@@ -55,10 +55,11 @@ export interface Props {
   onRemoveKey: () => void
   onEditTTL: (key: RedisResponseBuffer, ttl: number) => void
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer, onFailure?: () => void) => void
+  totalKeys: number
 }
 
 const KeyDetails = ({ ...props }: Props) => {
-  const { onClosePanel, onRemoveKey } = props
+  const { onClosePanel, onRemoveKey, totalKeys } = props
   const { loading, error = '', data } = useSelector(selectedKeySelector)
   const { type: selectedKeyType, name: selectedKey } = useSelector(selectedKeyDataSelector) ?? {
     type: KeyTypes.String,
@@ -168,7 +169,15 @@ const KeyDetails = ({ ...props }: Props) => {
                     <p data-testid="no-keys-selected-text">
                       {error}
                     </p>
-                  ) : (<ExploreGuides />)}
+                  ) : (
+                    <>
+                      {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 />)}
+                    </>
+                  )}
                 </EuiText>
               </div>
             </>

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

@@ -33,6 +33,7 @@ export interface Props {
   onEditKey: (key: RedisResponseBuffer, newKey: RedisResponseBuffer) => void
   onRemoveKey: () => void
   keyProp: RedisResponseBuffer | null
+  totalKeys: number
 }
 
 const KeyDetailsWrapper = (props: Props) => {
@@ -43,7 +44,8 @@ const KeyDetailsWrapper = (props: Props) => {
     onCloseKey,
     onEditKey,
     onRemoveKey,
-    keyProp
+    keyProp,
+    totalKeys
   } = props
 
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -155,6 +157,7 @@ const KeyDetailsWrapper = (props: Props) => {
       onRemoveKey={onRemoveKey}
       onEditTTL={handleEditTTL}
       onEditKey={handleEditKey}
+      totalKeys={totalKeys}
     />
   )
 }