Merge pull request #1846 from RedisInsight/fe/feature/I-4181_to-tutorial-button

#RI-4181 - add to tutorial button for recommendations

Author: vlad-dargel

redisinsight/ui/src/components/config/Config.spec.tsx

@@ -15,6 +15,8 @@ import { appServerInfoSelector, getServerInfo } from 'uiSrc/slices/app/info'
 import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
 import { getRedisCommands } from 'uiSrc/slices/app/redis-commands'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
+import { getWBGuides } from 'uiSrc/slices/workbench/wb-guides'
+import { getWBTutorials } from 'uiSrc/slices/workbench/wb-tutorials'
 import Config from './Config'
 
 let store: typeof mockedStore
@@ -59,7 +61,9 @@ describe('Config', () => {
       processCliClient(),
       getRedisCommands(),
       getNotifications(),
-      getUserConfigSettings()
+      getWBGuides(),
+      getWBTutorials(),
+      getUserConfigSettings(),
     ]
     expect(store.getActions()).toEqual([...afterRenderActions])
   })
@@ -89,6 +93,8 @@ describe('Config', () => {
       processCliClient(),
       getRedisCommands(),
       getNotifications(),
+      getWBGuides(),
+      getWBTutorials(),
       getUserConfigSettings(),
       setSettingsPopupState(true),
     ]

redisinsight/ui/src/components/config/Config.tsx

@@ -27,6 +27,8 @@ import { checkIsAnalyticsGranted } from 'uiSrc/telemetry/checkAnalytics'
 import { setFavicon, isDifferentConsentsExists } from 'uiSrc/utils'
 import { fetchUnsupportedCliCommandsAction } from 'uiSrc/slices/cli/cli-settings'
 import { fetchRedisCommandsInfo } from 'uiSrc/slices/app/redis-commands'
+import { fetchGuides } from 'uiSrc/slices/workbench/wb-guides'
+import { fetchTutorials } from 'uiSrc/slices/workbench/wb-tutorials'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import favicon from 'uiSrc/assets/favicon.ico'
 
@@ -47,6 +49,10 @@ const Config = () => {
     dispatch(fetchRedisCommandsInfo())
     dispatch(fetchNotificationsAction())
 
+    // get guides & tutorials
+    dispatch(fetchGuides())
+    dispatch(fetchTutorials())
+
     // fetch config settings, after that take spec
     if (pathname !== SETTINGS_PAGE_PATH) {
       dispatch(fetchUserConfigSettings(() => dispatch(fetchUserSettingsSpec())))

redisinsight/ui/src/constants/dbAnalysisRecommendations.json

@@ -42,6 +42,7 @@
   "bigHashes": {
     "id": "bigHashes",
     "title": "Shard big hashes to small hashes",
+    "tutorial": "/quick-guides/document/working-with-hashes.md",
     "content": [
       {
         "id": "1",
@@ -126,7 +127,7 @@
       {
         "id": "1",
         "type": "paragraph",
-        "value": "Several set values with IntSet encoding exceed the set-max-intset-entries. Change the configuration in reds.conf to efficiently use the IntSet encoding." 
+        "value": "Several set values with IntSet encoding exceed the set-max-intset-entries. Change the configuration in reds.conf to efficiently use the IntSet encoding."
       },
       {
         "id": "2",
@@ -282,6 +283,7 @@
   "bigSets": {
     "id": "bigSets",
     "title": "Switch to Bloom filter, cuckoo filter, or HyperLogLog",
+    "tutorial": "/redis_stack/probabilistic_data_structures.md",
     "redisStack": true,
     "content": [
       {
@@ -307,21 +309,21 @@
         "type": "list",
         "value": [
           [
-            { 
+            {
               "id": "1",
               "type": "span",
                "value": "Count the number of unique observations in a stream"
             }
           ],
           [
-            { 
+            {
               "id": "2",
               "type": "span",
               "value": "Check if an observation already appeared in the stream"
             }
           ],
           [
-            { 
+            {
               "id": "3",
               "type": "span",
               "value": "Find the fraction or the number of observations in the stream that are smaller or larger than a given value"
@@ -347,7 +349,7 @@
                 "name": "HyperLogLog"
               }
             },
-            { 
+            {
               "id": "2",
               "type": "span",
                "value": " can be used for estimating the number of unique observations in a set."
@@ -362,7 +364,7 @@
                 "name": "Bloom filter or cuckoo filter"
               }
             },
-            { 
+            {
               "id": "2",
               "type": "span",
                "value": " can be used for checking if an observation has already appeared in the stream (false positive matches are possible, but false negatives are not)."
@@ -377,7 +379,7 @@
                 "name": "t-digest"
               }
             },
-            { 
+            {
               "id": "2",
               "type": "span",
                "value": " can be used for estimating the fraction or the number of observations in the stream that are smaller or larger than a given value."
@@ -496,6 +498,7 @@
     "id": "RTS",
     "title":"Optimize the use of time series",
     "redisStack": true,
+    "tutorial": "/redis_stack/redis_for_time_series.md",
     "content": [
       {
         "id": "1",
@@ -579,8 +582,9 @@
   },
   "redisSearch": {
     "id": "redisSearch",
-    "title":"Optimize your query and search experience",
+    "title": "Optimize your query and search experience",
     "redisStack": true,
+    "tutorial": "/redis_stack/working_with_json.md",
     "content": [
       {
         "id": "1",
@@ -638,6 +642,7 @@
     "id": "searchIndexes",
     "title":"Enhance your search indexes",
     "redisStack": true,
+    "tutorial": "/quick-guides/document/working-with-hashes.md",
     "content": [
       {
         "id": "1",

redisinsight/ui/src/pages/databaseAnalysis/components/recommendation-voting/styles.module.scss

@@ -1,9 +1,4 @@
 .votingContainer {
-  padding-top: 15px;
-  margin-top: 15px !important;
-  border-top: 1px solid var(--separatorColor);
-  height: 49px;
-
   .vote {
     margin-left: 10px;
   }
@@ -42,7 +37,7 @@
     padding: 4px 8px 4px 4px;
     margin: 0 10px;
     height: 22px !important;
-  
+
     :global(.euiButtonContent.euiButton__content) {
       padding: 0;
     }

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import reactRouterDom from 'react-router-dom'
 import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
@@ -13,6 +14,41 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn,
+  }),
+}))
+
+jest.mock('uiSrc/slices/workbench/wb-guides', () => ({
+  ...jest.requireActual('uiSrc/slices/workbench/wb-guides'),
+  workbenchGuidesSelector: jest.fn().mockReturnValue({
+    loading: false,
+    error: '',
+    items: [{
+      label: 'Quick guides',
+      type: 'group',
+      children: [
+        {
+          label: 'Quick guides',
+          type: 'group',
+          children: [
+            {
+              type: 'internal-link',
+              id: 'document-capabilities',
+              label: 'Document Capabilities',
+              args: {
+                path: '/quick-guides/document/working-with-hashes.md',
+              },
+            },
+          ]
+        }
+      ]
+    }],
+  }),
+}))
+
 jest.mock('uiSrc/slices/analytics/dbAnalysis', () => ({
   ...jest.requireActual('uiSrc/slices/analytics/dbAnalysis'),
   dbAnalysisSelector: jest.fn().mockReturnValue({
@@ -389,4 +425,62 @@ describe('Recommendations', () => {
     expect(screen.queryByTestId('bigSets-redis-stack-link')).toBeInTheDocument()
     expect(screen.queryByTestId('bigSets-redis-stack-link')).toHaveAttribute('href', 'https://redis.io/docs/stack/')
   })
+
+  it('should render go to tutorial button', () => {
+    (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
+      ...mockdbAnalysisSelector,
+      data: {
+        recommendations: [{ name: 'bigHashes' }]
+      }
+    }))
+
+    render(<Recommendations />)
+
+    expect(screen.getByTestId('bigHashes-to-tutorial-btn')).toBeInTheDocument()
+  })
+
+  it('should call proper history push after click go to tutorial button', () => {
+    const sendEventTelemetryMock = jest.fn()
+    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock);
+
+    (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
+      ...mockdbAnalysisSelector,
+      data: {
+        recommendations: [{ name: 'bigHashes' }]
+      }
+    }))
+
+    render(<Recommendations />)
+
+    expect(screen.getByTestId('bigHashes-to-tutorial-btn')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('bigHashes-to-tutorial-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.DATABASE_RECOMMENDATIONS_TUTORIAL_CLICKED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+        recommendation: 'bigHashes',
+      }
+    })
+    sendEventTelemetry.mockRestore()
+  })
+
+  it('should call proper telemetry after click go to tutorial button', () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock });
+
+    (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({
+      ...mockdbAnalysisSelector,
+      data: {
+        recommendations: [{ name: 'bigHashes' }]
+      }
+    }))
+
+    render(<Recommendations />)
+
+    expect(screen.getByTestId('bigHashes-to-tutorial-btn')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('bigHashes-to-tutorial-btn'))
+
+    expect(pushMock).toBeCalledWith('/instanceId/workbench?path=quick-guides/0/0/0')
+  })
 })