#RI-3941 - resolve comments

Author: AmirAllayarovSofteq

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

@@ -341,7 +341,7 @@ describe('Recommendations', () => {
 
     render(<Recommendations />)
 
-    expect(screen.queryByTestId('redis-stack-link')).toBeInTheDocument()
-    expect(screen.queryByTestId('redis-stack-link')).toHaveAttribute('href', 'https://redis.io/docs/stack/')
+    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

@@ -40,23 +40,22 @@ const Recommendations = () => {
     }
   })
 
-  const onRedisStackClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => event.stopPropagation()
+  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 && (
             <EuiLink
               external={false}
               target="_blank"
               href="https://redis.io/docs/stack/"
               className={styles.redisStackLink}
-              data-testid="redis-stack-link"
-              onClick={onRedisStackClick}
+              data-testid={`${id}-redis-stack-link`}
             >
               <EuiToolTip
                 content="Redis Stack"
@@ -67,7 +66,7 @@ const Recommendations = () => {
                 <EuiIcon
                   type={theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin}
                   className={styles.redisStackIcon}
-                  data-testid="redis-stack-icon"
+                  data-testid={`${id}-redis-stack-icon`}
                 />
               </EuiToolTip>
             </EuiLink>
@@ -117,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}