RI-7693: Add subscribe patterns explanation

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"

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx → 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()
   })

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

redisinsight/ui/src/pages/pub-sub/components/subscribe-information/index.ts

@@ -0,0 +1,3 @@
+import SubscribeInformation from './SubscribeInformation'
+
+export default SubscribeInformation

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>