#RI-3037-add spublish check (#781)

* #RI-3037-add spublish check

Author: AmirAllayarovSofteq

redisinsight/ui/src/constants/commandsVersions.ts

@@ -5,4 +5,7 @@ export const CommandsVersions = {
   FILTER_PER_KEY_TYPES: {
     since: '6.0',
   },
+  SPUBLISH_NOT_SUPPORTED: {
+    since: '7.0',
+  },
 }

redisinsight/ui/src/pages/pubSub/components/messages-list/EmptyMessagesList/EmptyMessagesList.spec.tsx

@@ -7,13 +7,31 @@ import EmptyMessagesList from './EmptyMessagesList'
 describe('EmptyMessagesList', () => {
   it('should render', () => {
     expect(
-      render(<EmptyMessagesList />)
+      render(<EmptyMessagesList isSpublishNotSupported />)
     ).toBeTruthy()
   })
 
   it('should render cluster info for Cluster connection type', () => {
-    const { queryByTestId } = render(<EmptyMessagesList connectionType={ConnectionType.Cluster} />)
+    const { queryByTestId } = render(
+      <EmptyMessagesList connectionType={ConnectionType.Cluster} isSpublishNotSupported />
+    )
 
     expect(queryByTestId('empty-messages-list-cluster')).toBeInTheDocument()
   })
+
+  it('should render cluster info for Cluster connection type', () => {
+    const { queryByTestId } = render(
+      <EmptyMessagesList isSpublishNotSupported />
+    )
+
+    expect(queryByTestId('empty-messages-list-cluster')).toBeInTheDocument()
+  })
+
+  it('should not render cluster info for Cluster connection type', () => {
+    const { queryByTestId } = render(
+      <EmptyMessagesList isSpublishNotSupported={false} />
+    )
+
+    expect(queryByTestId('empty-messages-list-cluster')).not.toBeInTheDocument()
+  })
 })

redisinsight/ui/src/pages/pubSub/components/messages-list/EmptyMessagesList/EmptyMessagesList.tsx

@@ -8,9 +8,10 @@ import styles from './styles.module.scss'
 
 export interface Props {
   connectionType?: ConnectionType
+  isSpublishNotSupported: boolean
 }
 
-const EmptyMessagesList = ({ connectionType }: Props) => (
+const EmptyMessagesList = ({ connectionType, isSpublishNotSupported }: Props) => (
   <div className={styles.container} data-testid="empty-messages-list">
     <div className={cx(styles.content, { [styles.contentCluster]: connectionType === ConnectionType.Cluster })}>
       <EuiText className={styles.title}>No messages to display</EuiText>
@@ -21,7 +22,7 @@ const EmptyMessagesList = ({ connectionType }: Props) => (
         <EuiIcon type="alert" className={styles.alertIcon} />
         Running in production may decrease performance and memory available
       </EuiText>
-      {connectionType === ConnectionType.Cluster && (
+      {(connectionType === ConnectionType.Cluster || isSpublishNotSupported) && (
         <>
           <div className={styles.separator} />
           <EuiText className={styles.cluster} data-testid="empty-messages-list-cluster">

redisinsight/ui/src/pages/pubSub/components/messages-list/MessagesListWrapper.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 import AutoSizer from 'react-virtualized-auto-sizer'
 
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { connectedInstanceSelector, connectedInstanceOverviewSelector } from 'uiSrc/slices/instances/instances'
 import { pubSubSelector } from 'uiSrc/slices/pubsub/pubsub'
+import { isVersionHigherOrEquals } from 'uiSrc/utils'
+import { CommandsVersions } from 'uiSrc/constants/commandsVersions'
 import EmptyMessagesList from './EmptyMessagesList'
 import MessagesList from './MessagesList'
 
@@ -12,6 +14,18 @@ import styles from './MessagesList/styles.module.scss'
 const MessagesListWrapper = () => {
   const { messages = [], isSubscribed } = useSelector(pubSubSelector)
   const { connectionType } = useSelector(connectedInstanceSelector)
+  const { version } = useSelector(connectedInstanceOverviewSelector)
+
+  const [isSpublishNotSupported, setIsSpublishNotSupported] = useState<boolean>(true)
+
+  useEffect(() => {
+    setIsSpublishNotSupported(
+      isVersionHigherOrEquals(
+        version,
+        CommandsVersions.SPUBLISH_NOT_SUPPORTED.since
+      )
+    )
+  }, [version])
 
   return (
     <>
@@ -35,7 +49,9 @@ const MessagesListWrapper = () => {
           </div>
         </div>
       )}
-      {messages.length === 0 && !isSubscribed && <EmptyMessagesList connectionType={connectionType} />}
+      {messages.length === 0 && !isSubscribed && (
+        <EmptyMessagesList isSpublishNotSupported={isSpublishNotSupported} connectionType={connectionType} />
+      )}
     </>
   )
 }