From 1702301f62ac5227683b4b4becd0efd84126d1e5 Mon Sep 17 00:00:00 2001
From: Pavel Angelov <pavel.angelov@redis.com>
Date: Mon, 10 Nov 2025 14:27:35 +0200
Subject: [PATCH] this

---
 .../subscribe-form/SubscribeForm.tsx          |  3 +
 .../SubscribeInformation.spec.tsx}            |  9 +--
 .../SubscribeInformation.tsx                  | 55 ++++++++++++++++
 .../components/subscribe-information/index.ts |  3 +
 .../subscription-panel/SubscriptionPanel.tsx  |  6 +-
 .../ClickableAppendInfo.tsx                   | 63 -------------------
 .../components/clickable-append-info/index.ts |  3 -
 .../clickable-append-info/styles.module.scss  |  8 ---
 8 files changed, 69 insertions(+), 81 deletions(-)
 rename redisinsight/ui/src/pages/pub-sub/components/{subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx => subscribe-information/SubscribeInformation.spec.tsx} (62%)
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx
 create mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscribe-information/index.ts
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/index.ts
 delete mode 100644 redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/styles.module.scss

diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscribe-form/SubscribeForm.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscribe-form/SubscribeForm.tsx
index 8afa59aac9..76d6905796 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/subscribe-form/SubscribeForm.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/subscribe-form/SubscribeForm.tsx
@@ -13,6 +13,7 @@ import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 
 import { UserIcon, IndicatorExcludedIcon } from 'uiSrc/components/base/icons'
 import { FlexProps } from 'uiSrc/components/base/layout/flex/flex.styles'
+import SubscribeInformation from '../subscribe-information'
 
 export interface SubscribeFormProps extends Omit<FlexProps, 'direction'> {}
 
@@ -52,6 +53,8 @@ const SubscribeForm = (props: SubscribeFormProps) => {
         />
       </FormField>
 
+      <SubscribeInformation />
+
       <Button
         variant={isSubscribed ? 'secondary-ghost' : 'primary'}
         size="large"
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx
similarity index 62%
rename from redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx
rename to redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx
index 93c54226eb..09795d4975 100644
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx
+++ b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.spec.tsx
@@ -1,14 +1,15 @@
 import React from 'react'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
-import ClickableAppendInfo from './ClickableAppendInfo'
+import SubscribeInformation from './SubscribeInformation'
 
-describe('ClickableAppendInfo', () => {
+describe('SubscribeInformation', () => {
   it('should render', () => {
-    expect(render(<ClickableAppendInfo />)).toBeTruthy()
+    expect(render(<SubscribeInformation />)).toBeTruthy()
   })
 
   it('should open popover on click', async () => {
-    render(<ClickableAppendInfo />)
+    render(<SubscribeInformation />)
+
     fireEvent.click(screen.getByTestId('append-info-icon'))
     expect(screen.getByTestId('pub-sub-examples')).toBeInTheDocument()
   })
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx
new file mode 100644
index 0000000000..f705b29a36
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/SubscribeInformation.tsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { Text } from 'uiSrc/components/base/text'
+import {
+  EXTERNAL_LINKS,
+  UTM_CAMPAINGS,
+  UTM_MEDIUMS,
+} from 'uiSrc/constants/links'
+import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
+import { Link } from 'uiSrc/components/base/link/Link'
+import { RiPopover } from 'uiSrc/components/base'
+import { Col } from 'uiSrc/components/base/layout/flex'
+import { Spacer } from 'uiSrc/components/base/layout'
+
+const SubscribeInformation = () => (
+  <RiPopover
+    id="showPupSubExamples"
+    button={
+      <RiIcon
+        size="l"
+        type="InfoIcon"
+        // 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"
+      />
+    }
+    data-testid="pub-sub-examples"
+  >
+    <Col>
+      <Text>
+        Subscribe to one or more channels or patterns by entering them,
+        separated by spaces.
+      </Text>
+
+      <Spacer />
+
+      <Text>
+        Supported glob-style patterns are described&nbsp;
+        <Link
+          variant="inline"
+          target="_blank"
+          href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
+            medium: UTM_MEDIUMS.Main,
+            campaign: UTM_CAMPAINGS.PubSub,
+          })}
+        >
+          here.
+        </Link>
+      </Text>
+    </Col>
+  </RiPopover>
+)
+
+export default SubscribeInformation
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/index.ts b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/index.ts
new file mode 100644
index 0000000000..462ec6e39b
--- /dev/null
+++ b/redisinsight/ui/src/pages/pub-sub/components/subscribe-information/index.ts
@@ -0,0 +1,3 @@
+import SubscribeInformation from './SubscribeInformation'
+
+export default SubscribeInformation
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 16801d009d..9b7980d782 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 ClickableAppendInfo from './components/clickable-append-info'
-import styles from './styles.module.scss'
 import PatternsInfo from '../patternsInfo'
+import styles from './styles.module.scss'
+import SubscribeInformation from '../subscribe-information'
 
 const SubscriptionPanel = () => {
   const { messages, isSubscribed, subscriptions, loading, count } =
@@ -103,7 +103,7 @@ const SubscriptionPanel = () => {
       <FlexItem>
         <Row align="center">
           <FlexItem>
-            <ClickableAppendInfo />
+            <SubscribeInformation />
           </FlexItem>
           <FlexItem className={styles.channels}>
             <FormField>
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx
deleted file mode 100644
index a2c0cfb7f4..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useState } from 'react'
-import { getUtmExternalLink } from 'uiSrc/utils/links'
-import { Text } from 'uiSrc/components/base/text'
-import {
-  EXTERNAL_LINKS,
-  UTM_CAMPAINGS,
-  UTM_MEDIUMS,
-} from 'uiSrc/constants/links'
-import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
-import { Link } from 'uiSrc/components/base/link/Link'
-import { RiPopover } from 'uiSrc/components/base'
-import styles from './styles.module.scss'
-
-const ClickableAppendInfo = () => {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const onClick = () => {
-    const newVal = !open
-    setOpen(newVal)
-  }
-
-  return (
-    <RiPopover
-      id="showPupSubExamples"
-      ownFocus={false}
-      button={
-        <RiIcon
-          size="l"
-          type="InfoIcon"
-          style={{ cursor: 'pointer' }}
-          onClick={onClick}
-          data-testid="append-info-icon"
-        />
-      }
-      isOpen={open}
-      closePopover={() => setOpen(false)}
-      panelClassName={styles.popover}
-      anchorClassName={styles.infoIcon}
-      panelPaddingSize="s"
-      data-testid="pub-sub-examples"
-    >
-      <Text color="subdued" size="s">
-        Subscribe to one or more channels or patterns by entering them,
-        separated by spaces.
-        <br />
-        Supported glob-style patterns are described&nbsp;
-        <Link
-          variant="inline"
-          size="S"
-          target="_blank"
-          href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
-            medium: UTM_MEDIUMS.Main,
-            campaign: UTM_CAMPAINGS.PubSub,
-          })}
-        >
-          here.
-        </Link>
-      </Text>
-    </RiPopover>
-  )
-}
-
-export default ClickableAppendInfo
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/index.ts b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/index.ts
deleted file mode 100644
index 89e433f906..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ClickableAppendInfo from './ClickableAppendInfo'
-
-export default ClickableAppendInfo
diff --git a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/styles.module.scss
deleted file mode 100644
index 71d9ebf269..0000000000
--- a/redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/styles.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.infoIcon {
-  width: 34px;
-}
-
-.popover {
-  max-width: 250px !important;
-  border-radius: 4px;
-}