#RI-4768 - Change design for recommendations

Author: egor-zalenski

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

@@ -30,6 +30,8 @@ import { IRecommendationsStatic, IRecommendationParams } from 'uiSrc/slices/inte
 import _content from 'uiSrc/constants/dbAnalysisRecommendations.json'
 import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg'
 import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg'
+import { ReactComponent as SnoozeIcon } from 'uiSrc/assets/img/icons/snooze.svg'
+import { ReactComponent as StarsIcon } from 'uiSrc/assets/img/icons/stars.svg'
 
 import styles from './styles.module.scss'
 
@@ -118,9 +120,17 @@ const Recommendation = ({
     )
   }
 
-  const handleDelete = () => {
+  const handleDelete = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    event.preventDefault()
     setIsLoading(true)
-    dispatch(deleteLiveRecommendations([id], onSuccessActionDelete, () => setIsLoading(false)))
+    dispatch(
+      deleteLiveRecommendations(
+        [id],
+        onSuccessActionDelete,
+        () => setIsLoading(false)
+      )
+    )
   }
 
   const onSuccessActionDelete = () => {
@@ -149,6 +159,19 @@ const Recommendation = ({
 
   const recommendationContent = () => (
     <EuiText>
+      {!isUndefined(tutorial) && (
+        <EuiButton
+          fill
+          iconType={StarsIcon}
+          iconSide="right"
+          className={styles.btn}
+          onClick={handleRedirect}
+          color="secondary"
+          data-testid={`${name}-to-tutorial-btn`}
+        >
+          { tutorial ? 'Start Tutorial' : 'Workbench' }
+        </EuiButton>
+      )}
       {renderRecommendationContent(
         recommendationsContent[name]?.content,
         params,
@@ -168,26 +191,6 @@ const Recommendation = ({
       )}
       <div className={styles.actions}>
         <RecommendationVoting live id={id} vote={vote} name={name} containerClass={styles.votingContainer} />
-        <EuiButton
-          isDisabled={isLoading}
-          className={styles.btn}
-          onClick={handleDelete}
-          color="secondary"
-          data-testid={`${name}-delete-btn`}
-        >
-          Snooze
-        </EuiButton>
-        {!isUndefined(tutorial) && (
-          <EuiButton
-            fill
-            className={styles.btn}
-            onClick={handleRedirect}
-            color="secondary"
-            data-testid={`${name}-to-tutorial-btn`}
-          >
-            { tutorial ? 'Tutorial' : 'Workbench' }
-          </EuiButton>
-        )}
       </div>
     </EuiText>
   )
@@ -228,6 +231,24 @@ const Recommendation = ({
         <EuiFlexItem grow className="truncateText">
           {title}
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            title="Snooze recommendation"
+            content="This recommendation will be removed from the list and displayed again when relevant."
+            position="top"
+            display="inlineBlock"
+            anchorClassName="flex-row"
+          >
+            <EuiButtonIcon
+              href="#"
+              iconType={SnoozeIcon}
+              className={styles.snoozeBtn}
+              onClick={handleDelete}
+              aria-label="snooze recommendation"
+              data-testid={`snooze-${name}-btn`}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiToolTip
             title={`${hide ? 'Show' : 'Hide'} recommendation`}

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

@@ -1,23 +1,22 @@
+:global(.euiAccordion__childWrapper) {
+  background-color: var(--recommendationBgColor);
+}
+
 .recommendationAccordion {
-  border: 1px solid var(--recommendationLiveBorderColor);
   margin-bottom: 10px;
-  border-radius: 4px;
+  border-radius: 8px;
   overflow: hidden;
 
-  &.read {
-    border: 1px solid var(--controlsBorderColor);
-  }
-
   .redisStackLink {
     margin-right: 12px;
   }
 
   :global {
     .euiAccordion__button {
-      padding: 4px 18px;
+      padding: 6px 18px;
       border-bottom: 1px solid transparent;
       color: var(--euiTextSubduedColor) !important;
-      background-color: var(--recommendationsBgColor) !important;
+      background-color: var(--recommendationBgColor) !important;
       font-size: 14px;
       font-weight: 400;
 
@@ -35,8 +34,7 @@
 
     .euiAccordion.euiAccordion-isOpen {
       .euiAccordion__button {
-        border-bottom-color: var(--controlsBorderColor);
-        background-color: var(--recommendationBgColor) !important;
+        padding: 14px 18px;
         color: var(--htmlColor) !important;
         font-weight: 500;
       }
@@ -49,15 +47,15 @@
     }
 
     .euiPanel {
-      background: var(--recommendationsBgColor) !important;
-      padding-bottom: 0 !important;
+      background: var(--recommendationBgColor) !important;
+      padding: 0 18px 18px !important;
     }
 
     .euiAccordion__iconWrapper {
       display: flex;
       justify-content: center;
       align-items: center;
-     }
+    }
 
     .euiAccordion__buttonReverse .euiAccordion__icon {
       width: 12px;
@@ -108,32 +106,18 @@
   margin-top: 15px;
   justify-content: space-around;
   align-items: center;
-  border-top: 1px solid var(--separatorColorLight);
   height: 48px;
-
-  .btn {
-    height: 32px !important;
-    min-width: 60px !important;
-
-    :global(.euiButton__content) {
-      padding: 0 12px;
-    }
-
-    :global(.euiButton__text) {
-      font: normal normal 400 14px/17px Graphik, sans-serif !important;
-    }
-
-    &:last-of-type {
-      margin-left: 8px !important;
-    }
-  }
 }
 
 .fullWidth {
   width: 100%;
 }
 
 .votingContainer {
+  justify-content: center;
+  border-radius: 8px;
+  background-color: var(--recommendationsBgColor) !important;
+  padding: 4px 0;
   :global {
     .voteContent {
       margin-left: 6px !important;
@@ -152,3 +136,40 @@
 .keyNameContainer {
   background-color: var(--recommendationBgColor);
 }
+
+.snoozeBtn {
+  svg {
+    fill: var(--recommendationBgColor) !important;
+    g {
+      stroke: currentColor !important;
+    }
+  }
+}
+
+.accordionContent {
+  .btn {
+    box-shadow: none !important;
+    display: block;
+    margin-top: 1px;
+    height: 32px !important;
+    min-width: 60px !important;
+    border-color: var(--highlightDotColor) !important;
+    background-color: var(--highlightDotColor) !important;
+    margin-bottom: 12px;
+
+    svg path {
+      fill: var(--euiColorEmptyShade);
+    }
+
+    :global(.euiButton__content) {
+      padding: 0 12px;
+    }
+
+    :global(.euiButton__text) {
+      color: var(--euiColorEmptyShade);
+      font:
+        normal normal 400 14px/17px Graphik,
+        sans-serif !important;
+    }
+  }
+}

redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -12,7 +12,7 @@
 
 .keyName {
   padding: 4px 30px 4px 8px;
-  background-color: var(--recommendationBgColor);
+  background-color: var(--recommendationsBgColor);
   border: 1px dashed var(--separatorColorLight);
   border-radius: 4px;
   font: normal normal normal 13px/16px Graphik, sans-serif !important;