Merge pull request #2175 from RedisInsight/fe/feature/RI-4554_cover-filtering

#RI-4554 - cover filtering for redis < 6

Author: rsergeenko

redisinsight/ui/src/assets/img/icons/redis_db_blue.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/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/messages/filter-not-available/FilterNotAvailable.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/messages/filter-not-available/FilterNotAvailable.tsx

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

redisinsight/ui/src/components/messages/filter-not-available/index.ts

@@ -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;
+    }
+  }
+}

redisinsight/ui/src/components/messages/filter-not-available/styles.module.scss

@@ -0,0 +1,7 @@
+import ModuleNotLoaded from './module-not-loaded'
+import FilterNotAvailable from './filter-not-available'
+
+export {
+  ModuleNotLoaded,
+  FilterNotAvailable
+}