Merge pull request #3402 from RedisInsight/fe/feature/RI-5759

#RI-5759 - open tutorials after load sample data, add links to tutorial

Author: rsergeenko

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.spec.tsx

@@ -24,6 +24,8 @@ import { apiService } from 'uiSrc/services'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { RedisDefaultModules } from 'uiSrc/slices/interfaces'
 import { loadList } from 'uiSrc/slices/browser/redisearch'
+import { changeSelectedTab, changeSidePanel, resetExplorePanelSearch } from 'uiSrc/slices/panels/sidePanels'
+import { InsightsPanelTabs, SidePanels } from 'uiSrc/slices/interfaces/insights'
 import ExpertChat from './ExpertChat'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -98,7 +100,7 @@ describe('ExpertChat', () => {
       messages: [],
       agreements: []
     });
-    (connectedInstanceSelector as jest.Mock).mockImplementation(() => ({
+    (connectedInstanceSelector as jest.Mock).mockImplementationOnce(() => ({
       modules: [{ name: RedisDefaultModules.FT }, { name: RedisDefaultModules.ReJSON }]
     }))
 
@@ -111,7 +113,7 @@ describe('ExpertChat', () => {
     const sendEventTelemetryMock = jest.fn();
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock);
 
-    (aiExpertChatSelector as jest.Mock).mockReturnValue({
+    (aiExpertChatSelector as jest.Mock).mockReturnValueOnce({
       loading: false,
       messages: [],
       agreements: ['instanceId']
@@ -230,4 +232,37 @@ describe('ExpertChat', () => {
     });
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
+
+  it('should call proper actions after click tutorial in the initial message', async () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock);
+
+    (aiExpertChatSelector as jest.Mock).mockReturnValue({
+      loading: false,
+      messages: [],
+      agreements: ['instanceId']
+    })
+
+    render(<ExpertChat />, { store })
+
+    const afterRenderActions = [...store.getActions()]
+
+    fireEvent.click(screen.getByTestId('tutorial-initial-message-link'))
+
+    expect(store.getActions()).toEqual([
+      ...afterRenderActions,
+      changeSelectedTab(InsightsPanelTabs.Explore),
+      changeSidePanel(SidePanels.Insights),
+      resetExplorePanelSearch()
+    ])
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.EXPLORE_PANEL_TUTORIAL_OPENED,
+      eventData: {
+        databaseId: 'instanceId',
+        source: 'sample_data'
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
 })

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/ExpertChat.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useParams } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import { EuiIcon } from '@elastic/eui'
 import {
   aiExpertChatSelector,
@@ -9,20 +9,23 @@ import {
   removeExpertChatHistoryAction,
   updateExpertChatAgreements,
 } from 'uiSrc/slices/panels/aiAssistant'
-import { getCommandsFromQuery, isRedisearchAvailable, Nullable, scrollIntoView } from 'uiSrc/utils'
+import { findTutorialPath, getCommandsFromQuery, isRedisearchAvailable, Nullable, scrollIntoView } from 'uiSrc/utils'
 import { connectedInstanceSelector, freeInstancesSelector } from 'uiSrc/slices/instances/instances'
 
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { AiChatMessage, AiChatType } from 'uiSrc/slices/interfaces/aiAssistant'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { oauthCloudUserSelector } from 'uiSrc/slices/oauth/cloud'
 import { fetchRedisearchListAction } from 'uiSrc/slices/browser/redisearch'
 import TelescopeImg from 'uiSrc/assets/img/telescope-dark.svg?react'
+import { openTutorialByPath } from 'uiSrc/slices/panels/sidePanels'
+import { SAMPLE_DATA_TUTORIAL } from 'uiSrc/constants'
 import NoIndexesInitialMessage from './components/no-indexes-initial-message'
 import ExpertChatHeader from './components/expert-chat-header'
+import InitialMessage from './components/initial-message'
 
 import { EXPERT_CHAT_AGREEMENTS } from '../texts'
-import { ChatForm, ChatHistory, ExpertChatInitialMessage } from '../shared'
+import { ChatForm, ChatHistory } from '../shared'
 
 import styles from './styles.module.scss'
 
@@ -44,6 +47,7 @@ const ExpertChat = () => {
   const isAgreementsAccepted = agreements.includes(instanceId) || messages.length > 0
 
   const dispatch = useDispatch()
+  const history = useHistory()
 
   useEffect(() => {
     if (!instanceId) {
@@ -164,6 +168,19 @@ const ExpertChat = () => {
     })
   }, [])
 
+  const handleClickTutorial = () => {
+    const tutorialPath = findTutorialPath({ id: SAMPLE_DATA_TUTORIAL })
+    dispatch(openTutorialByPath(tutorialPath, history, true))
+
+    sendEventTelemetry({
+      event: TelemetryEvent.EXPLORE_PANEL_TUTORIAL_OPENED,
+      eventData: {
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
+        source: 'sample_data',
+      }
+    })
+  }
+
   const scrollToBottom = (behavior: ScrollBehavior = 'smooth') => {
     setTimeout(() => {
       scrollIntoView(scrollDivRef?.current, {
@@ -213,8 +230,8 @@ const ExpertChat = () => {
           isLoading={loading || isLoading}
           modules={modules}
           initialMessage={isNoIndexes
-            ? <NoIndexesInitialMessage onSuccess={getIndexes} />
-            : ExpertChatInitialMessage}
+            ? <NoIndexesInitialMessage onClickTutorial={handleClickTutorial} onSuccess={getIndexes} />
+            : <InitialMessage onClickTutorial={handleClickTutorial} />}
           inProgressMessage={inProgressMessage}
           history={messages}
           scrollDivRef={scrollDivRef}

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/initial-message/InitialMessage.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { EuiLink, EuiSpacer, EuiText } from '@elastic/eui'
+
+export interface Props {
+  onClickTutorial: () => void
+}
+
+const InitialMessage = (props: Props) => {
+  const { onClickTutorial } = props
+
+  return (
+    <>
+      <EuiText size="xs">Welcome!</EuiText>
+      <EuiText size="xs">I am here to help you get started with data querying.</EuiText>
+      <EuiText size="xs">Type <b>/help</b> to get more info on what questions I can answer.</EuiText>
+      <EuiSpacer />
+      <EuiText size="xs">With <span style={{ color: 'red' }}>&hearts;</span>, your Redis Copilot!</EuiText>
+      <EuiSpacer />
+      <EuiText size="xs">
+        Explore several common Redis use cases with our
+        {' '}
+        <EuiLink
+          color="subdued"
+          external={false}
+          className="defaultLink"
+          onClick={onClickTutorial}
+          data-testid="tutorial-initial-message-link"
+        >
+          tutorial
+        </EuiLink>
+        , utilizing the provided sample data.
+      </EuiText>
+    </>
+  )
+}
+
+export default InitialMessage

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/initial-message/index.ts

@@ -0,0 +1,3 @@
+import InitialMessage from './InitialMessage'
+
+export default InitialMessage

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/components/no-indexes-initial-message/NoIndexesInitialMessage.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect } from 'react'
-import { EuiSpacer, EuiText } from '@elastic/eui'
-import LoadSampleData from 'uiSrc/pages/browser/components/load-sample-data'
+import { EuiLink, EuiSpacer, EuiText } from '@elastic/eui'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import LoadSampleData from 'uiSrc/pages/browser/components/load-sample-data'
 import styles from './styles.module.scss'
 
 export interface Props {
   onSuccess?: () => void
+  onClickTutorial: () => void
 }
 
 const NoIndexesInitialMessage = (props: Props) => {
-  const { onSuccess } = props
+  const { onSuccess, onClickTutorial } = props
 
   useEffect(() => {
     sendEventTelemetry({
@@ -21,13 +22,26 @@ const NoIndexesInitialMessage = (props: Props) => {
   return (
     <div data-testid="no-indexes-chat-message">
       <EuiText size="xs">Hi!</EuiText>
-      <EuiText size="xs">I am here to help you get started with data querying.</EuiText>
-      <EuiText size="xs">I noticed that you have no indexes created.</EuiText>
+      <EuiText size="xs">I am here to help you get started with data querying. I noticed that you have no indexes created.</EuiText>
       <EuiSpacer />
       <EuiText size="xs">Would you like to load the sample data to see what Redis Copilot can help you do?</EuiText>
       <EuiSpacer />
       <LoadSampleData anchorClassName={styles.anchorClassName} onSuccess={onSuccess} />
-      <EuiSpacer size="xs" />
+      <EuiSpacer />
+      <EuiText size="xs">
+        Explore several common Redis use cases with our
+        {' '}
+        <EuiLink
+          color="subdued"
+          external={false}
+          className="defaultLink"
+          onClick={onClickTutorial}
+          data-testid="tutorial-initial-message-link"
+        >
+          tutorial
+        </EuiLink>
+        , utilizing the provided sample data.
+      </EuiText>
     </div>
   )
 }

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/expert-chat/styles.module.scss

@@ -33,6 +33,12 @@
       }
     }
   }
+
+  :global {
+    .defaultLink {
+      color: var(--externalLinkColor) !important;
+    }
+  }
 }
 
 .iconTelescope {

redisinsight/ui/src/components/side-panels/panels/ai-assistant/components/shared/chat-history/texts.tsx

@@ -11,13 +11,3 @@ export const AssistanceChatInitialMessage = (
     <EuiText size="xs">With <span style={{ color: 'red' }}>&hearts;</span>, your Redis Copilot!</EuiText>
   </>
 )
-
-export const ExpertChatInitialMessage = (
-  <>
-    <EuiText size="xs">Welcome!</EuiText>
-    <EuiText size="xs">I am here to help you get started with data querying.</EuiText>
-    <EuiText size="xs">Type <b>/help</b> to get more info on what questions I can answer.</EuiText>
-    <EuiSpacer />
-    <EuiText size="xs">With <span style={{ color: 'red' }}>&hearts;</span>, your Redis Copilot!</EuiText>
-  </>
-)

redisinsight/ui/src/constants/browser.ts

@@ -1,5 +1,7 @@
 import { KeyValueFormat, SortOrder } from './keys'
 
+export const SAMPLE_DATA_TUTORIAL = 'redis_use_cases'
+
 export const DEFAULT_DELIMITER = ':'
 export const DEFAULT_TREE_SORTING = SortOrder.ASC
 export const DEFAULT_SHOW_HIDDEN_RECOMMENDATIONS = false

redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.spec.tsx

@@ -12,9 +12,7 @@ import {
 
 import { bulkImportDefaultData, bulkImportDefaultDataSuccess } from 'uiSrc/slices/browser/bulkActions'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { changeKeyViewType, loadKeys } from 'uiSrc/slices/browser/keys'
 import { apiService } from 'uiSrc/services'
-import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { addMessageNotification } from 'uiSrc/slices/app/notifications'
 import successMessages from 'uiSrc/components/notifications/success-messages'
 import LoadSampleData from './LoadSampleData'
@@ -63,8 +61,6 @@ describe('LoadSampleData', () => {
       addMessageNotification(
         successMessages.UPLOAD_DATA_BULK()
       ),
-      changeKeyViewType(KeyViewType.Tree),
-      loadKeys(),
     ]
 
     expect(store.getActions().slice(0, expectedActions.length)).toEqual(expectedActions)

redisinsight/ui/src/pages/browser/components/load-sample-data/LoadSampleData.tsx

@@ -5,9 +5,6 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { bulkActionsSelector, bulkImportDefaultDataAction } from 'uiSrc/slices/browser/bulkActions'
-import { changeKeyViewType, fetchKeys, keysSelector } from 'uiSrc/slices/browser/keys'
-import { KeyViewType, SearchMode } from 'uiSrc/slices/interfaces/keys'
-import { SCAN_TREE_COUNT_DEFAULT } from 'uiSrc/constants/api'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import styles from './styles.module.scss'
@@ -23,30 +20,12 @@ const LoadSampleData = (props: Props) => {
 
   const { id } = useSelector(connectedInstanceSelector)
   const { loading } = useSelector(bulkActionsSelector)
-  const { viewType } = useSelector(keysSelector)
 
   const dispatch = useDispatch()
 
-  const onSuccessImport = () => {
-    if (onSuccess) {
-      onSuccess()
-      return
-    }
-
-    if (viewType === KeyViewType.Browser) {
-      dispatch(changeKeyViewType(KeyViewType.Tree))
-    }
-
-    dispatch(fetchKeys({
-      searchMode: SearchMode.Pattern,
-      cursor: '0',
-      count: SCAN_TREE_COUNT_DEFAULT
-    }))
-  }
-
   const handleSampleData = () => {
     setIsConfirmationOpen(false)
-    dispatch(bulkImportDefaultDataAction(id, onSuccessImport))
+    dispatch(bulkImportDefaultDataAction(id, onSuccess))
 
     sendEventTelemetry({
       event: TelemetryEvent.IMPORT_SAMPLES_CLICKED,