From b961340219994c62bd0bb80a2cf9c5c042ec2718 Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Mon, 10 Nov 2025 13:44:19 +0200
Subject: [PATCH] add patterns

---
 .../messages-list/MessagesListWrapper.tsx     | 22 +++++++++++++---
 .../patternsInfo/PatternsInfo.spec.tsx        |  1 +
 .../patternsInfo/PatternsInfo.tsx             | 25 +++++++++++--------
 .../components => }/patternsInfo/index.ts     |  0
 .../subscription-panel/SubscriptionPanel.tsx  |  4 +--
 .../patternsInfo/styles.module.scss           |  9 -------
 6 files changed, 36 insertions(+), 25 deletions(-)
 rename redisinsight/ui/src/pages/pub-sub/components/{subscription-panel/components => }/patternsInfo/PatternsInfo.spec.tsx (99%)
 rename redisinsight/ui/src/pages/pub-sub/components/{subscription-panel/components => }/patternsInfo/PatternsInfo.tsx (61%)
 rename redisinsight/ui/src/pages/pub-sub/components/{subscription-panel/components => }/patternsInfo/index.ts (100%)
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/styles.module.scss

diff --git a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx b/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
index 31ada6df49..8355a7c5f0 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/messages-list/MessagesListWrapper.tsx
+++ b/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">
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.spec.tsx b/redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.spec.tsx
similarity index 99%
rename from redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.spec.tsx
rename to redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.spec.tsx
index dfd817ec34..4778e8f4da 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.spec.tsx
+++ b/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()
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.tsx b/redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.tsx
similarity index 61%
rename from redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.tsx
rename to redisinsight/ui/src/pages/pub-sub/components/patternsInfo/PatternsInfo.tsx
index b9ac92becd..d5aaf9fbd3 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/PatternsInfo.tsx
+++ b/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>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/index.ts b/redisinsight/ui/src/pages/pub-sub/components/patternsInfo/index.ts
similarity index 100%
rename from redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/index.ts
rename to redisinsight/ui/src/pages/pub-sub/components/patternsInfo/index.ts
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx
index 0dab4bfe29..16801d009d 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/SubscriptionPanel.tsx
+++ b/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"
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/styles.module.scss
deleted file mode 100644
index 7b7d2a8dae..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/styles.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.patternsContainer {
-  display: flex;
-  align-items: center;
-}
-
-.appendIcon {
-  color: var(--iconsDefaultColor) !important;
-  margin-left: 4px;
-}