Merge pull request #2161 from RedisInsight/feature/RI-4106_rework-search

Feature/ri 4106 rework search

Author: mariasergeenko

redisinsight/ui/src/assets/img/icons/bulk_actions.svg

@@ -26,6 +26,7 @@ import ShowChildByCondition from './show-child-by-condition'
 import RecommendationVoting from './recommendation-voting'
 import RecommendationCopyComponent from './recommendation-copy-component'
 import FeatureFlagComponent from './feature-flag-component'
+import { ModuleNotLoaded, FilterNotAvailable } from './messages'
 
 export {
   NavigationMenu,
@@ -59,4 +60,6 @@ export {
   RecommendationVoting,
   RecommendationCopyComponent,
   FeatureFlagComponent,
+  ModuleNotLoaded,
+  FilterNotAvailable
 }

redisinsight/ui/src/assets/img/icons/redis_db_blue.svg

@@ -28,14 +28,14 @@ describe('KeysSummary', () => {
     const { queryByTestId } = render(
       <KeysSummary {...instance(mockedProps)} scanned={1} items={[{}]} totalItemsCount={1} />
     )
-    expect(queryByTestId('keys-summary')).toHaveTextContent('Results: 1 key.')
+    expect(queryByTestId('keys-summary')).toHaveTextContent('Results: 1.')
   })
 
   it('should Keys summary show proper text with count > 1', () => {
     const { queryByTestId } = render(
       <KeysSummary {...instance(mockedProps)} scanned={2} items={[{}, {}]} totalItemsCount={2} />
     )
-    expect(queryByTestId('keys-summary')).toHaveTextContent('Results: 2 keys.')
+    expect(queryByTestId('keys-summary')).toHaveTextContent('Results: 2.')
   })
 
   it('should not render Scan more button if showScanMore = false ', () => {

redisinsight/ui/src/assets/img/icons/treeview.svg

@@ -47,14 +47,13 @@ const KeysSummary = (props: Props) => {
                   <b>
                     {'Results: '}
                     <span data-testid="keys-number-of-results">{numberWithSpaces(resultsLength)}</span>
-                    {` key${resultsLength !== 1 ? 's' : ''}. `}
+                    {'. '}
                   </b>
                   <EuiTextColor color="subdued">
                     {'Scanned '}
                     <span data-testid="keys-number-of-scanned">{numberWithSpaces(scannedDisplay)}</span>
                     {' / '}
                     <span data-testid="keys-total">{nullableNumberWithSpaces(totalItemsCount)}</span>
-                    {' keys'}
                     <span
                       className={cx([styles.loading, { [styles.loadingShow]: loading }])}
                     />

redisinsight/ui/src/components/index.ts

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+
+import FilterNotAvailable from './FilterNotAvailable'
+
+describe('FilterNotAvailable', () => {
+  it('should render', () => {
+    expect(render(<FilterNotAvailable />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/keys-summary/KeysSummary.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { EuiIcon, EuiText, EuiTitle, EuiSpacer, EuiLink, EuiButton } from '@elastic/eui'
+import RedisDbBlueIcon from 'uiSrc/assets/img/icons/redis_db_blue.svg'
+
+import styles from './styles.module.scss'
+
+const GET_STARTED_LINK = 'https://redis.com/try-free/?utm_source=redisinsight&utm_medium=main&utm_campaign=browser_filter'
+const LEARN_MORE_LINK = 'https://redis.io/docs/stack/about/?utm_source=redisinsight&utm_medium=main&utm_campaign=browser_filter'
+
+const FilterNotAvailable = () => (
+  <div className={styles.container}>
+    <EuiIcon type={RedisDbBlueIcon} size="original" />
+    <EuiTitle size="m" className={styles.title} data-testid="filter-not-available-title">
+      <h4>Upgrade your Redis database to version 6 or above</h4>
+    </EuiTitle>
+    <EuiText>Filtering by data type is supported in Redis 6 and above.</EuiText>
+    <EuiSpacer size="m" />
+    <EuiText color="subdued">Create a free Redis Stack database that supports filtering and extends the core capabilities of open-source Redis.</EuiText>
+    <EuiSpacer size="l" />
+    <div className={styles.linksWrapper}>
+      <EuiButton
+        fill
+        color="secondary"
+        target="_blank"
+        href={GET_STARTED_LINK}
+        data-testid="get-started-link"
+        size="s"
+      >
+        Get Started For Free
+      </EuiButton>
+      <EuiSpacer size="m" />
+      <EuiLink
+        className={styles.link}
+        external={false}
+        target="_blank"
+        color="text"
+        href={LEARN_MORE_LINK}
+        data-testid="learn-more-link"
+      >
+        Learn More
+      </EuiLink>
+    </div>
+  </div>
+)
+
+export default FilterNotAvailable

redisinsight/ui/src/components/keys-summary/KeysSummary.tsx

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

redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.spec.tsx

@@ -0,0 +1,24 @@
+.container {
+  padding: 40px 60px;
+  text-align: center;
+
+  .title {
+    font-family: 'Graphik', sans-serif;
+    font-size: 28px;
+    font-weight: 600;
+    word-break: break-word;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .linksWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .link {
+      color: var(--wbTextColor) !important;
+      text-decoration: none !important;
+    }
+  }
+}