Merge pull request #3847 from RedisInsight/fe/feature/RI-6122-improvements-to-filter-pub-sub-channels

RI-6122 improvements to filter pub-sub

Author: mariasergeenko

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, waitFor } from '@testing-library/react'
 import { cloneDeep } from 'lodash'
 import { toggleSubscribeTriggerPubSub } from 'uiSrc/slices/pubsub/pubsub'
 import { cleanup, clearStoreActions, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
@@ -27,4 +27,13 @@ describe('SubscriptionPanel', () => {
 
     expect(clearStoreActions(store.getActions())).toEqual(clearStoreActions(expectedActions))
   })
+
+  it('should set default value on blur when empty', async () => {
+    render(<SubscriptionPanel />)
+    fireEvent.change(screen.getByTestId('channels-input'), { target: { value: '' } })
+    fireEvent.blur(screen.getByTestId('channels-input'))
+
+    await waitFor(() => screen.getByDisplayValue('*'))
+    expect(screen.getByDisplayValue('*')).toBeInTheDocument()
+  })
 })

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

@@ -14,6 +14,9 @@ import SubscribedIconLight from 'uiSrc/assets/img/pub-sub/subscribed-lt.svg'
 import NotSubscribedIconDark from 'uiSrc/assets/img/pub-sub/not-subscribed.svg'
 import NotSubscribedIconLight from 'uiSrc/assets/img/pub-sub/not-subscribed-lt.svg'
 
+import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
+import PatternsInfo from './components/patternsInfo'
+import AppendInfo from './components/append-info'
 import styles from './styles.module.scss'
 
 const SubscriptionPanel = () => {
@@ -24,7 +27,7 @@ const SubscriptionPanel = () => {
 
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
-  const [channels, setChannels] = useState('')
+  const [channels, setChannels] = useState(DEFAULT_SEARCH_MATCH)
 
   const toggleSubscribe = () => {
     dispatch(toggleSubscribeTriggerPubSub(channels))
@@ -41,6 +44,12 @@ const SubscriptionPanel = () => {
     })
   }
 
+  const onFocusOut = () => {
+    if (!channels) {
+      setChannels(DEFAULT_SEARCH_MATCH)
+    }
+  }
+
   const subscribedIcon = theme === Theme.Dark ? SubscribedIconDark : SubscribedIconLight
   const notSubscribedIcon = theme === Theme.Dark ? NotSubscribedIconDark : NotSubscribedIconLight
 
@@ -61,6 +70,11 @@ const SubscriptionPanel = () => {
               You are { !isSubscribed && 'not' } subscribed
             </EuiText>
           </EuiFlexItem>
+          {isSubscribed && (
+            <EuiFlexItem grow={false} style={{ marginLeft: 12 }}>
+              <PatternsInfo channels={channels} />
+            </EuiFlexItem>
+          )}
           {displayMessages && (
             <EuiFlexItem grow={false} style={{ marginLeft: 12 }}>
               <EuiText color="subdued" size="s" data-testid="messages-count">Messages: {count}</EuiText>
@@ -75,11 +89,13 @@ const SubscriptionPanel = () => {
             <EuiFieldText
               value={channels}
               disabled={isSubscribed}
-              className={styles.channels}
+              compressed
               onChange={(e) => setChannels(e.target.value)}
-              placeholder="Enter Channel to Subscribe"
+              onBlur={onFocusOut}
+              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." />}
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
+import AppendInfo from './AppendInfo'
+
+describe('AppendInfo', () => {
+  it('should render', () => {
+    expect(
+      render(
+        <AppendInfo />
+      )
+    ).toBeTruthy()
+  })
+
+  it('should show info text on hover', async () => {
+    const content = 'Some content'
+    render(<AppendInfo content={content} />)
+    fireEvent.mouseOver(screen.getByTestId('append-info-icon'))
+    await waitFor(() => screen.getByText(content))
+    expect(screen.getByText(content)).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { EuiIcon, EuiToolTip, EuiToolTipProps, ToolTipPositions } from '@elastic/eui'
+
+export interface AppendInfoProps extends Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> {
+  position?: ToolTipPositions
+}
+const AppendInfo = ({ title, content, ...rest }: AppendInfoProps) => (
+  <EuiToolTip
+    anchorClassName="inputAppendIcon"
+    position="right"
+    title={title}
+    content={content}
+    {...rest}
+  >
+    <EuiIcon
+      type="iInCircle"
+      style={{ cursor: 'pointer' }}
+      data-testid="append-info-icon"
+    />
+  </EuiToolTip>
+)
+
+export default AppendInfo

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { fireEvent, render, screen, waitFor } from 'uiSrc/utils/test-utils'
+import PatternsInfo from './PatternsInfo'
+
+describe('PatternsInfo', () => {
+  it('should render', () => {
+    expect(
+      render(
+        <PatternsInfo />
+      )
+    ).toBeTruthy()
+  })
+
+  it('should show info text on hover', async () => {
+    const content = 'hello'
+    render(<PatternsInfo channels={content} />)
+    expect(screen.getByText('Patterns: 1')).toBeInTheDocument()
+    fireEvent.mouseOver(screen.getByTestId('append-info-icon'))
+    await waitFor(() => screen.getByText(content))
+    expect(screen.getByText(content)).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,26 @@
+import { EuiText } from '@elastic/eui'
+import React from 'react'
+import { DEFAULT_SEARCH_MATCH } from 'uiSrc/constants/api'
+import AppendInfo from '../append-info'
+
+import styles from './styles.module.scss'
+
+export interface PatternsInfoProps {
+  channels?: string
+}
+
+const PatternsInfo = ({ channels }: PatternsInfoProps) => {
+  const getChannelsCount = () => {
+    if (!channels || channels?.trim() === DEFAULT_SEARCH_MATCH) return 'All'
+    return channels.trim().split(' ').length
+  }
+
+  return (
+    <div className={styles.patternsContainer}>
+      <EuiText color="subdued" size="s" data-testid="patterns-count">Patterns:&nbsp;{getChannelsCount()} </EuiText>
+      <AppendInfo title={<>{channels?.trim().split(' ').map((ch) => <p>{ch}</p>)}</>} />
+    </div>
+  )
+}
+
+export default PatternsInfo

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

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

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/components/patternsInfo/styles.module.scss

@@ -0,0 +1,4 @@
+.patternsContainer {
+  display: flex;
+  align-items: center;
+}

redisinsight/ui/src/pages/pub-sub/components/subscription-panel/styles.module.scss

@@ -24,11 +24,7 @@
 .channels {
   margin-right: 8px;
 
-  input {
-    width: 210px;
-  }
-
-  :global(.euiFormControlLayout), input {
-    height: 30px;
+  :global(.euiFormControlLayout--compressed .inputAppendIcon > svg) {
+    height: 31px !important;
   }
 }