Merge pull request #1600 from RedisInsight/feature/RI-4023_no-recommendations_message

#RI-4023 - update no recommendations message

Author: AmirAllayarovSofteq

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

@@ -499,29 +499,42 @@
     "content": [
       {
         "id": "1",
-        "type": "paragraph",
-        "value": "If you are using sorted sets to work with time series data, consider using RedisTimeSeries to optimize the memory usage while having extraordinary query performance and small overhead during ingestion."
+        "type": "span",
+        "value": "If you are using sorted sets to work with time series data, consider using "
       },
       {
         "id": "2",
+        "type": "link",
+        "value": {
+          "href": "https://redis.io/docs/stack/timeseries/",
+          "name": "RedisTimeSeries"
+        }
+      },
+      {
+        "id": "3",
+        "type": "span",
+        "value": " to optimize the memory usage while having extraordinary query performance and small overhead during ingestion."
+      },
+      {
+        "id": "4",
         "type": "spacer",
         "value": "l"
       },
       {
-        "id": "3",
+        "id": "5",
         "type": "span",
         "value": "Create a "
       },
       {
-        "id": "4",
+        "id": "6",
         "type": "link",
         "value": {
           "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/",
           "name": "free Redis Stack database"
         }
       },
       {
-        "id": "5",
+        "id": "7",
         "type": "span",
         "value": " to use modern data models and processing engines."
       }
@@ -566,47 +579,55 @@
   },
   "redisSearch": {
     "id": "redisSearch",
-    "title":"Optimize your search and query experience",
+    "title":"Optimize your query and search experience",
     "redisStack": true,
     "content": [
       {
         "id": "1",
-        "type": "span",
-        "value": "RediSearch was designed to help address your query needs and support a better development experience when dealing with complex data scenarios. Take a look at the powerful API options here ("
+        "type": "link",
+        "value": {
+          "href": "https://redis.io/docs/stack/search/",
+          "name": "RediSearch"
+        }
       },
       {
         "id": "2",
+        "type": "span",
+        "value": "was designed to help address your query needs and support a better development experience when dealing with complex data scenarios. Take a look at the "
+      },
+      {
+        "id": "3",
         "type": "link",
         "value": {
           "href": "https://redis.io/commands/?name=Ft",
-          "name": "Commands"
+          "name": "powerful API options"
         }
       },
       {
-        "id": "3",
+        "id": "4",
         "type": "span",
-        "value": ") and try it. Supports full-text search, wildcards, fuzzy logic, and more."
+        "value": " and try them. Supports full-text search, wildcards, fuzzy logic, and more."
       },
       {
-        "id": "4",
+        "id": "5",
         "type": "spacer",
         "value": "l"
       },
       {
-        "id": "5",
+        "id": "6",
         "type": "span",
         "value": "Create a "
       },
       {
-        "id": "6",
+        "id": "7",
         "type": "link",
         "value": {
           "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/",
           "name": "free Redis Stack database"
         }
       },
       {
-        "id": "7",
+        "id": "8",
         "type": "span",
         "value": " which extends the core capabilities of Redis OSS and uses modern data models and processing engines."
       }

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

@@ -19,6 +19,8 @@ import { Theme } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg'
 import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg'
+import NoRecommendationsDark from 'uiSrc/assets/img/icons/recommendations_dark.svg'
+import NoRecommendationsLight from 'uiSrc/assets/img/icons/recommendations_light.svg'
 
 import { renderContent, renderBadges, renderBadgesLegend } from './utils'
 import styles from './styles.module.scss'
@@ -91,7 +93,15 @@ const Recommendations = () => {
   if (isNull(recommendations) || !recommendations.length) {
     return (
       <div className={styles.container} data-testid="empty-recommendations-message">
-        <EuiText size="m">No Recommendations at the moment.</EuiText>
+        <EuiIcon
+          type={theme === Theme.Dark ? NoRecommendationsDark : NoRecommendationsLight}
+          className={styles.noRecommendationsIcon}
+          data-testid="no=recommendations-icon"
+        />
+        <EuiText className={styles.bigText}>AMAZING JOB!</EuiText>
+        <EuiText size="m">No Recommendations at the moment,</EuiText>
+        <br />
+        <EuiText size="m">keep up the good work!</EuiText>
       </div>
     )
   }

redisinsight/ui/src/constants/dbAnalysisRecommendations.json

@@ -68,6 +68,17 @@
   flex-direction: column;
   align-items: center;
   height: 100%;
+  padding-bottom: 162px;
+
+  .noRecommendationsIcon {
+    width: 154px;
+    height: 127px;
+  }
+}
+
+.bigText {
+  font: normal normal 600 18px/22px Graphik, sans-serif !important;
+  margin: 16px 0 12px;
 }
 
 .loadingWrapper {