RI-7693: Add patterns counting in Pub/Sub

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

@@ -7,6 +7,7 @@ import { pubSubSelector } from 'uiSrc/slices/pubsub/pubsub'
 import { isVersionHigherOrEquals } from 'uiSrc/utils'
 import { CommandsVersions } from 'uiSrc/constants/commandsVersions'
 import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
+import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 import EmptyMessagesList from './EmptyMessagesList'
 import MessagesList from './MessagesList'
 
@@ -15,6 +16,7 @@ import { Text } from 'uiSrc/components/base/text'
 import { RiBadge } from 'uiSrc/components/base/display/badge/RiBadge'
 import { HorizontalSpacer } from 'uiSrc/components/base/layout'
 import SubscribeForm from '../subscribe-form'
+import PatternsInfo from '../patternsInfo'
 import { InnerContainer, Wrapper } from './MessageListWrapper.styles'
 
 const SubscribeStatus = ({ isSubscribed }: { isSubscribed: boolean }) => {
@@ -26,10 +28,18 @@ const SubscribeStatus = ({ isSubscribed }: { isSubscribed: boolean }) => {
 }
 
 const MessagesListWrapper = () => {
-  const { messages = [], isSubscribed } = useSelector(pubSubSelector)
+  const {
+    messages = [],
+    isSubscribed,
+    subscriptions,
+  } = useSelector(pubSubSelector)
   const connectionType = useConnectionType()
   const { version } = useSelector(connectedInstanceOverviewSelector)
 
+  const channels = subscriptions?.length
+    ? subscriptions.map((sub) => sub.channel).join(' ')
+    : DEFAULT_SEARCH_MATCH
+
   const [isSpublishNotSupported, setIsSpublishNotSupported] =
     useState<boolean>(true)
 
@@ -48,9 +58,13 @@ const MessagesListWrapper = () => {
     return (
       <Wrapper>
         <Row align="center" justify="between" grow={false}>
-          <Row gap="s">
-            <Text>Messages:</Text>
-            <Text>{messages.length}</Text>
+          <Row align="center" gap="m">
+            <PatternsInfo channels={channels} />
+
+            <Row align="center" gap="s">
+              <Text>Messages:</Text>
+              <Text>{messages.length}</Text>
+            </Row>
           </Row>
 
           <Row align="center" justify="end" gap="s">

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.spec.tsx → redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.spec.tsx

@@ -11,6 +11,7 @@ describe('PatternsInfo', () => {
     const content = 'hello'
     render(<PatternsInfo channels={content} />)
     expect(screen.getByText('Patterns: 1')).toBeInTheDocument()
+
     fireEvent.focus(screen.getByTestId('append-info-icon'))
     await waitFor(() => screen.getAllByText(content))
     expect(screen.getAllByText(content)[0]).toBeInTheDocument()

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.tsx → redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
-import { Text } from 'uiSrc/components/base/text'
 import { RiTooltip } from 'uiSrc/components'
+import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 
+import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import styles from './styles.module.scss'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { HorizontalSpacer } from 'uiSrc/components/base/layout'
 
 export interface PatternsInfoProps {
   channels?: string
@@ -17,29 +18,33 @@ const PatternsInfo = ({ channels }: PatternsInfoProps) => {
   }
 
   return (
-    <div className={styles.patternsContainer}>
-      <Text color="subdued" size="s" data-testid="patterns-count">
-        Patterns:&nbsp;{getChannelsCount()}{' '}
+    <Row grow={false} align="center">
+      <Text data-testid="patterns-count">
+        Patterns:&nbsp;{getChannelsCount()}
       </Text>
+
+      <HorizontalSpacer size="s" />
+
       <RiTooltip
-        anchorClassName={styles.appendIcon}
         position="right"
         title={
           <>
             {channels
               ?.trim()
               .split(' ')
-              .map((ch) => <p key={`${ch}`}>{ch}</p>)}
+              .map((ch) => <Text key={`${ch}`}>{ch}</Text>)}
           </>
         }
       >
         <RiIcon
           type="InfoIcon"
-          style={{ cursor: 'pointer' }}
+          // TODO: Remove marginTop
+          // Hack: for some reason this icon has extra height, which breaks flex alignment
+          style={{ cursor: 'pointer', marginTop: 4 }}
           data-testid="append-info-icon"
         />
       </RiTooltip>
-    </div>
+    </Row>
   )
 }
 

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx

@@ -24,9 +24,9 @@ import { RiTooltip } from 'uiSrc/components'
 import { AllIconsType, RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
-import PatternsInfo from './components/patternsInfo'
 import ClickableAppendInfo from './components/clickable-append-info'
 import styles from './styles.module.scss'
+import PatternsInfo from '../patternsInfo'
 
 const SubscriptionPanel = () => {
   const { messages, isSubscribed, subscriptions, loading, count } =
@@ -110,7 +110,7 @@ const SubscriptionPanel = () => {
               <TextInput
                 value={channels}
                 disabled={isSubscribed}
-                onChange={value => setChannels(value)}
+                onChange={(value) => setChannels(value)}
                 onBlur={onFocusOut}
                 placeholder="Enter Pattern"
                 aria-label="channel names for filtering"