Merge pull request #2965 from RedisInsight/fe/feature/RI-4950_tutorials-home-page

#RI-4950 - add tutorials for home page, refactoring

Author: mariasergeenko

redisinsight/ui/src/assets/img/click-learn-rocket.svg

@@ -97,6 +97,9 @@ beforeEach(() => {
 })
 
 describe('DatabaseSidePanels', () => {
+  beforeEach(() => {
+    reactRouterDom.useParams = jest.fn().mockReturnValue({ instanceId: 'instanceId' })
+  })
   it('should render', () => {
     expect(render(<DatabaseSidePanels />)).toBeTruthy()
   })
@@ -135,6 +138,25 @@ describe('DatabaseSidePanels', () => {
     expect(screen.queryByTestId('recommendations-unread-count')).not.toBeInTheDocument()
   })
 
+  it('should not render recommendations count without instanceId', () => {
+    reactRouterDom.useParams = jest.fn().mockReturnValue({ instanceId: undefined });
+    (insightsPanelSelector as jest.Mock).mockReturnValue({
+      isOpen: true,
+      tabSelected: 'tips'
+    });
+
+    (recommendationsSelector as jest.Mock).mockImplementationOnce(() => ({
+      ...mockRecommendationsSelector,
+      data: {
+        recommendations: [],
+        totalUnread: 7,
+      },
+    }))
+
+    render(<DatabaseSidePanels />)
+    expect(screen.queryByTestId('recommendations-unread-count')).not.toBeInTheDocument()
+  })
+
   it('should render recommendations count with totalUnread > 0', () => {
     (insightsPanelSelector as jest.Mock).mockReturnValue({
       isOpen: true,

redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.test.tsx

@@ -7,7 +7,7 @@ import { useHistory, useLocation, useParams } from 'react-router-dom'
 import { changeSelectedTab, insightsPanelSelector, resetExplorePanelSearch, setExplorePanelIsPageOpen, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { recommendationsSelector } from 'uiSrc/slices/recommendations/recommendations'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceCDSelector, connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { FullScreen, OnboardingTour } from 'uiSrc/components'
@@ -93,7 +93,7 @@ const DatabaseSidePanels = (props: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_PANEL_CLOSED,
       eventData: {
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
         provider,
         page,
         tab: tabSelected
@@ -109,7 +109,7 @@ const DatabaseSidePanels = (props: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_PANEL_TAB_CHANGED,
       eventData: {
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
         prevTab: tabSelected,
         currentTab: name,
       },
@@ -121,7 +121,7 @@ const DatabaseSidePanels = (props: Props) => {
       sendEventTelemetry({
         event: TelemetryEvent.INSIGHTS_PANEL_FULL_SCREEN_CLICKED,
         eventData: {
-          databaseId: instanceId,
+          databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
           state: value ? 'exit' : 'open'
         },
       })
@@ -155,7 +155,7 @@ const DatabaseSidePanels = (props: Props) => {
       >
         <>
           <span className={styles.tabName}>Tips</span>
-          {!!totalUnread && (
+          {(!!totalUnread && instanceId) && (
             <div
               className={styles.tabTotalUnread}
               data-testid="recommendations-unread-count"

redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 import EnablementAreaContext from 'uiSrc/pages/workbench/contexts/enablementAreaContext'
 import { CodeButtonParams } from 'uiSrc/constants'
 import { parseParams } from 'uiSrc/utils'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { getFileInfo, getTutorialSection, } from '../../utils'
 
@@ -64,7 +64,7 @@ const Code = ({ children, params = '', label, path, ...rest }: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.EXPLORE_PANEL_COMMAND_COPIED,
       eventData: {
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
         buttonName: label,
         path,
         provider,

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/Code/Code.tsx

@@ -149,32 +149,48 @@ describe('CodeButtonBlock', () => {
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.EXPLORE_PANEL_DATABASE_CHANGE_CLICKED,
-      eventData:
-        {
-          databaseId: 'instanceId'
-        }
+      eventData: {
+        databaseId: 'instanceId'
+      }
     })
   })
 
   it('should call popover with no module loaded', async () => {
-    const sendEventTelemetryMock = jest.fn();
-    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
     const onApply = jest.fn()
 
     render(
       <CodeButtonBlock
         {...instance(mockedProps)}
         label={label}
         onApply={onApply}
-        params={{ run_confirmation: 'true' }}
+        params={{ run_confirmation: 'false' }}
         content="ft.info"
       />
     )
     await act(() => {
       fireEvent.click(screen.getByTestId(`run-btn-${label}`))
     })
 
-    expect(screen.getByTestId('tutorials-docker-link')).toBeInTheDocument()
-    expect(screen.getByTestId('tutorials-get-started-link')).toBeInTheDocument()
+    expect(screen.getByTestId('module-not-loaded-popover')).toBeInTheDocument()
+  })
+
+  it('should call not opened db popover without instanceId', async () => {
+    reactRouterDom.useParams = jest.fn().mockReturnValue({ instanceId: undefined })
+    const onApply = jest.fn()
+
+    render(
+      <CodeButtonBlock
+        {...instance(mockedProps)}
+        label={label}
+        onApply={onApply}
+        params={{ run_confirmation: 'false' }}
+        content={simpleContent}
+      />
+    )
+    await act(() => {
+      fireEvent.click(screen.getByTestId(`run-btn-${label}`))
+    })
+
+    expect(screen.getByTestId('database-not-opened-popover')).toBeInTheDocument()
   })
 })

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CodeButtonBlock/CodeButtonBlock.spec.tsx

@@ -10,8 +10,7 @@ import { BooleanParams, CodeButtonParams, MonacoLanguage } from 'uiSrc/constants
 import { CodeBlock } from 'uiSrc/components'
 import { getDBConfigStorageField } from 'uiSrc/services'
 import { ConfigDBStorageItem } from 'uiSrc/constants/storage'
-import ModuleNotLoadedMinimalized
-  from 'uiSrc/components/messages/module-not-loaded-minimalized/ModuleNotLoadedMinimalized'
+import { ModuleNotLoadedMinimalized, DatabaseNotOpened } from 'uiSrc/components/messages'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
@@ -82,12 +81,7 @@ const CodeButtonBlock = (props: Props) => {
   }
 
   const handleRunClicked = () => {
-    if (notLoadedModule) {
-      setIsPopoverOpen(true)
-      return
-    }
-
-    if (!isNotShowConfirmation && isButtonHasConfirmation) {
+    if (!instanceId || notLoadedModule || (!isNotShowConfirmation && isButtonHasConfirmation)) {
       setIsPopoverOpen(true)
       return
     }
@@ -104,6 +98,24 @@ const CodeButtonBlock = (props: Props) => {
     setIsPopoverOpen(false)
   }
 
+  const getPopoverMessage = (): React.ReactNode => {
+    if (!instanceId) {
+      return (<DatabaseNotOpened />)
+    }
+
+    if (notLoadedModule) {
+      return (
+        <ModuleNotLoadedMinimalized
+          moduleName={notLoadedModule}
+          source={OAuthSocialSource.Tutorials}
+          onClose={() => setIsPopoverOpen(false)}
+        />
+      )
+    }
+
+    return (<RunConfirmationPopover onApply={handleApplyRun} />)
+  }
+
   return (
     <div className={styles.wrapper}>
       <EuiFlexGroup gutterSize="none">
@@ -158,14 +170,7 @@ const CodeButtonBlock = (props: Props) => {
               </EuiToolTip>
             )}
           >
-            {!!notLoadedModule && (
-              <ModuleNotLoadedMinimalized
-                moduleName={notLoadedModule}
-                source={OAuthSocialSource.Tutorials}
-                onClose={() => setIsPopoverOpen(false)}
-              />
-            )}
-            {!notLoadedModule && <RunConfirmationPopover onApply={handleApplyRun} />}
+            {getPopoverMessage()}
           </EuiPopover>
         </EuiFlexItem>
       </EuiFlexGroup>

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CodeButtonBlock/CodeButtonBlock.tsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
 import cx from 'classnames'
 
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { workbenchCustomTutorialsSelector } from 'uiSrc/slices/workbench/wb-custom-tutorials'
 import { EAItemActions } from 'uiSrc/constants'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
@@ -60,7 +60,7 @@ const Group = (props: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.EXPLORE_PANEL_IMPORT_CLICKED,
       eventData: {
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
       }
     })
   }

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/Group/Group.tsx

@@ -15,7 +15,7 @@ import { useSelector } from 'react-redux'
 
 import { ExternalLink } from 'uiSrc/components'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { getTutorialCapability, Nullable } from 'uiSrc/utils'
 
 import { ReactComponent as RocketIcon } from 'uiSrc/assets/img/icons/rocket.svg'
@@ -88,7 +88,7 @@ const InternalPage = (props: Props) => {
         path,
         link,
         section: getTutorialSection(manifestPath),
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
       }
     })
   }

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -27,4 +27,7 @@
     margin: ($margin-size-pace * 3 + px) 0;
   }
 
+  img {
+    max-width: 100%;
+  }
 }

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/InternalPage/styles/main.scss

@@ -7,7 +7,7 @@ import { useDispatch } from 'react-redux'
 import { EnablementAreaComponent, IEnablementAreaItem } from 'uiSrc/slices/interfaces'
 
 import { ApiEndpoints, EAItemActions, EAManifestFirstKey } from 'uiSrc/constants'
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
 import { deleteCustomTutorial, uploadCustomTutorial } from 'uiSrc/slices/workbench/wb-custom-tutorials'
 
 import {
@@ -58,7 +58,7 @@ const Navigation = (props: Props) => {
     sendEventTelemetry({
       event: TelemetryEvent.EXPLORE_PANEL_IMPORT_SUBMITTED,
       eventData: {
-        databaseId: instanceId,
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
         source: file ? 'Upload' : 'URL'
       }
     })
@@ -74,7 +74,7 @@ const Navigation = (props: Props) => {
       sendEventTelemetry({
         event: TelemetryEvent.EXPLORE_PANEL_TUTORIAL_DELETED,
         eventData: {
-          databaseId: instanceId,
+          databaseId: instanceId || TELEMETRY_EMPTY_VALUE,
         }
       })
     }))