Merge pull request #3912 from RedisInsight/fe/feature/RI-6161-add-examples-to-pub-sub

RI-6161 replace tooltip with popover in pubsub textarea append icon

Author: mariasergeenko

redisinsight/ui/src/constants/links.ts

@@ -15,6 +15,7 @@ export const EXTERNAL_LINKS = {
   rdiQuickStart: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/quick-start-guide/',
   rdiPipeline: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/data-pipelines/',
   rdiPipelineTransforms: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/transform-examples/',
+  pubSub: 'https://redis.io/docs/latest/commands/psubscribe/',
 }
 
 export const UTM_CAMPAINGS: Record<any, string> = {
@@ -23,6 +24,7 @@ export const UTM_CAMPAINGS: Record<any, string> = {
   [OAuthSocialSource.Workbench]: 'redisinsight_workbench',
   [CloudSsoUtmCampaign.BrowserFilter]: 'browser_filter',
   [OAuthSocialSource.EmptyDatabasesList]: 'empty_db_list',
+  PubSub: 'pub_sub',
   Main: 'main',
 }
 

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

@@ -16,7 +16,7 @@ import NotSubscribedIconLight from 'uiSrc/assets/img/pub-sub/not-subscribed-lt.s
 
 import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
 import PatternsInfo from './components/patternsInfo'
-import AppendInfo from './components/append-info'
+import ClickableAppendInfo from './components/clickable-append-info'
 import styles from './styles.module.scss'
 
 const SubscriptionPanel = () => {
@@ -95,7 +95,7 @@ const SubscriptionPanel = () => {
               placeholder="Enter Pattern"
               aria-label="channel names for filtering"
               data-testid="channels-input"
-              append={<AppendInfo title={null} content="Subscribe to one or more channels or patterns by entering them, separated by spaces." />}
+              append={<ClickableAppendInfo />}
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/append-info/AppendInfo.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import ClickableAppendInfo from './ClickableAppendInfo'
+
+describe('ClickableAppendInfo', () => {
+  it('should render', () => {
+    expect(
+      render(
+        <ClickableAppendInfo />
+      )
+    ).toBeTruthy()
+  })
+
+  it('should open popover on click', async () => {
+    render(<ClickableAppendInfo />)
+    fireEvent.click(screen.getByTestId('append-info-icon'))
+    expect(screen.getByTestId('pub-sub-examples')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/append-info/AppendInfo.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { EuiIcon, EuiLink, EuiPopover, EuiText } from '@elastic/eui'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { EXTERNAL_LINKS, UTM_CAMPAINGS, UTM_MEDIUMS } from 'uiSrc/constants/links'
+import styles from './styles.module.scss'
+
+const ClickableAppendInfo = () => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onClick = () => {
+    const newVal = !open
+    setOpen(newVal)
+  }
+
+  return (
+    <EuiPopover
+      id="showPupSubExamples"
+      ownFocus={false}
+      button={(
+        <EuiIcon
+          size="l"
+          type="iInCircle"
+          style={{ cursor: 'pointer' }}
+          onClick={onClick}
+          data-testid="append-info-icon"
+        />
+    )}
+      isOpen={open}
+      panelClassName={styles.popover}
+      anchorClassName={styles.infoIcon}
+      panelPaddingSize="s"
+      data-testid="pub-sub-examples"
+    >
+      <EuiText
+        color="subdued"
+        size="s"
+      >
+        Supported glob-style patterns are described&nbsp;
+        <EuiLink
+          external={false}
+          target="_blank"
+          href={getUtmExternalLink(EXTERNAL_LINKS.pubSub, {
+            medium: UTM_MEDIUMS.Main,
+            campaign: UTM_CAMPAINGS.PubSub,
+          })}
+        >here.
+        </EuiLink>
+      </EuiText>
+    </EuiPopover>
+  )
+}
+
+export default ClickableAppendInfo

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/append-info/index.ts

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

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/clickable-append-info/ClickableAppendInfo.spec.tsx

@@ -0,0 +1,15 @@
+.infoIcon {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  color: var(--iconsDefaultColor) !important;
+  background-color: var(--browserTableRowEven) !important;
+}
+
+.popover {
+  max-width: 200px !important;
+  background-color: var(--euiTooltipBackgroundColor) !important;
+  color: var(--euiTooltipTitleTextColor) !important;
+  border-radius: 4px;
+}