Merge pull request #1562 from RedisInsight/feature/RI-3941_redisstack_icon

Feature/ri 3941 redisstack icon

Author: AmirAllayarovSofteq

redisinsight/ui/src/constants/dbAnalysisRecommendations.json

@@ -282,6 +282,7 @@
   "bigSets": {
     "id": "bigSets",
     "title": "Switch to Bloom filter, cuckoo filter, or HyperLogLog",
+    "redisStack": true,
     "content": [
       {
         "id": "1",
@@ -409,6 +410,29 @@
           "href": "https://docs.redis.com/latest/ri/memory-optimizations/",
           "name": "Read more"
         }
+      },
+      {
+        "id": "11",
+        "type": "spacer",
+        "value": "l"
+      },
+      {
+        "id": "12",
+        "type": "span",
+        "value": "Create a "
+      },
+      {
+        "id": "13",
+        "type": "link",
+        "value": {
+          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight/",
+          "name": "free Redis Stack database"
+        }
+      },
+      {
+        "id": "14",
+        "type": "span",
+        "value": " to use modern data models and processing engines."
       }
     ],
     "badges": ["configuration_changes"]
@@ -492,7 +516,7 @@
         "id": "4",
         "type": "link",
         "value": {
-          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/",
+          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight/",
           "name": "free Redis Stack database"
         }
       },

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx

@@ -330,4 +330,18 @@ describe('Recommendations', () => {
 
     expect(screen.queryByTestId('badges-legend')).toBeInTheDocument()
   })
+
+  it('should render redisstack link', () => {
+    (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
+      ...mockdbAnalysisSelector,
+      data: {
+        recommendations: [{ name: 'bigSets' }]
+      }
+    }))
+
+    render(<Recommendations />)
+
+    expect(screen.queryByTestId('bigSets-redis-stack-link')).toBeInTheDocument()
+    expect(screen.queryByTestId('bigSets-redis-stack-link')).toHaveAttribute('href', 'https://redis.io/docs/stack/')
+  })
 })

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx

@@ -6,9 +6,11 @@ import {
   EuiAccordion,
   EuiPanel,
   EuiText,
+  EuiToolTip,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLink,
 } from '@elastic/eui'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
@@ -38,19 +40,36 @@ const Recommendations = () => {
     }
   })
 
+  const onRedisStackClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => event.stopPropagation()
+
   const sortedRecommendations = sortBy(recommendations, ({ name }) =>
     (recommendationsContent[name]?.redisStack ? -1 : 0))
 
-  const renderButtonContent = (redisStack: boolean, title: string, badges: string[]) => (
+  const renderButtonContent = (redisStack: boolean, title: string, badges: string[], id: string) => (
     <EuiFlexGroup className={styles.accordionButton} responsive={false} alignItems="center" justifyContent="spaceBetween">
       <EuiFlexGroup alignItems="center">
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem onClick={onRedisStackClick} grow={false}>
           {redisStack && (
-            <EuiIcon
-              type={theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin}
-              className={styles.redisStack}
-              data-testid="redis-stack-icon"
-            />
+            <EuiLink
+              external={false}
+              target="_blank"
+              href="https://redis.io/docs/stack/"
+              className={styles.redisStackLink}
+              data-testid={`${id}-redis-stack-link`}
+            >
+              <EuiToolTip
+                content="Redis Stack"
+                position="top"
+                display="inlineBlock"
+                anchorClassName="flex-row"
+              >
+                <EuiIcon
+                  type={theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin}
+                  className={styles.redisStackIcon}
+                  data-testid={`${id}-redis-stack-icon`}
+                />
+              </EuiToolTip>
+            </EuiLink>
           )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
@@ -97,7 +116,7 @@ const Recommendations = () => {
               <EuiAccordion
                 id={name}
                 arrowDisplay="right"
-                buttonContent={renderButtonContent(redisStack, title, badges)}
+                buttonContent={renderButtonContent(redisStack, title, badges, id)}
                 buttonClassName={styles.accordionBtn}
                 buttonProps={{ 'data-test-subj': `${id}-button` }}
                 className={styles.accordion}

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss

@@ -41,6 +41,16 @@
 
   .accordionButton :global(.euiFlexItem) {
     margin: 0;
+
+    .redisStackLink {
+      margin-right: 16px;
+      animation: none !important;
+    }
+  
+    .redisStackIcon {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   :global(.euiAccordion__buttonReverse .euiAccordion__iconWrapper) {
@@ -116,10 +126,4 @@
   .span {
     display: inline;
   }
-
-  .redisStack {
-    width: 20px;
-    height: 20px;
-    margin-right: 16px;
-  }
 }