RI-7627 Fix the onboarding flow

redisinsight/ui/src/components/base/display/tour/TourStep.tsx

@@ -61,7 +61,6 @@ export const TourStep = ({
   open,
   content,
   title,
-  onClose,
   placement = 'rightUp',
   className = '',
   children,

redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx

@@ -8,6 +8,8 @@ import {
 import { useNavigation } from '../hooks/useNavigation'
 import FeatureFlagComponent from 'uiSrc/components/feature-flag-component/FeatureFlagComponent'
 import { FeatureFlags } from 'uiSrc/constants'
+import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
+import NavigationTabTrigger from './AppNavigationTabTrigger'
 
 type AppNavigationContainerProps = {
   children?: ReactNode
@@ -46,13 +48,18 @@ export type AppNavigationProps = {
 const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
   const { privateRoutes } = useNavigation()
   const activeTab = privateRoutes.find((route) => route.isActivePage)
-  const navTabs: (TabInfo & { featureFlag?: FeatureFlags })[] =
-    privateRoutes.map((route) => ({
-      label: route.tooltipText,
-      content: '',
-      value: route.pageName,
-      featureFlag: route.featureFlag,
-    }))
+  const navTabs: (TabInfo & {
+    isActivePage: boolean
+    featureFlag?: FeatureFlags
+    onboard?: OnboardingTourOptions
+  })[] = privateRoutes.map((route) => ({
+    label: route.tooltipText,
+    content: '',
+    value: route.pageName,
+    isActivePage: route.isActivePage,
+    featureFlag: route.featureFlag,
+    onboard: route.onboard,
+  }))
 
   return (
     <StyledAppNavigation>
@@ -76,39 +83,42 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => {
           }}
         >
           <Tabs.TabBar.Compose variant="default">
-            {navTabs.map(({ value, label, disabled, featureFlag }, index) => {
-              const key = `${value}-${index}`
-              if (featureFlag) {
-                return (
-                  <FeatureFlagComponent
-                    name={featureFlag as FeatureFlags}
-                    key={key}
-                  >
-                    <Tabs.TabBar.Trigger.Compose
-                      value={value}
-                      disabled={disabled}
+            {navTabs.map(
+              (
+                { value, label, disabled, featureFlag, onboard, isActivePage },
+                index,
+              ) => {
+                const key = `${value}-${index}`
+                if (featureFlag) {
+                  return (
+                    <FeatureFlagComponent
+                      name={featureFlag as FeatureFlags}
+                      key={key}
                     >
-                      <Tabs.TabBar.Trigger.Tab>
-                        {label ?? value}
-                      </Tabs.TabBar.Trigger.Tab>
-                      <Tabs.TabBar.Trigger.Marker />
-                    </Tabs.TabBar.Trigger.Compose>
-                  </FeatureFlagComponent>
+                      <NavigationTabTrigger
+                        value={value}
+                        label={label}
+                        disabled={disabled}
+                        onboard={onboard}
+                        isActivePage={isActivePage}
+                        tabKey={key}
+                      />
+                    </FeatureFlagComponent>
+                  )
+                }
+
+                return (
+                  <NavigationTabTrigger
+                    value={value}
+                    label={label}
+                    disabled={disabled}
+                    onboard={onboard}
+                    isActivePage={isActivePage}
+                    tabKey={key}
+                  />
                 )
-              }
-              return (
-                <Tabs.TabBar.Trigger.Compose
-                  value={value}
-                  disabled={disabled}
-                  key={key}
-                >
-                  <Tabs.TabBar.Trigger.Tab>
-                    {label ?? value}
-                  </Tabs.TabBar.Trigger.Tab>
-                  <Tabs.TabBar.Trigger.Marker />
-                </Tabs.TabBar.Trigger.Compose>
-              )
-            })}
+              },
+            )}
           </Tabs.TabBar.Compose>
         </Tabs.Compose>
       </AppNavigationContainer>

redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigationTabTrigger.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react'
+import Tabs from 'uiSrc/components/base/layout/tabs'
+import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
+import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
+
+interface NavigationTabTriggerProps {
+  value: string
+  label?: ReactNode | string
+  disabled?: boolean
+  onboard?: OnboardingTourOptions
+  isActivePage: boolean
+  tabKey: string
+}
+
+const NavigationTabTrigger = ({
+  value,
+  label,
+  disabled,
+  onboard,
+  isActivePage,
+  tabKey,
+}: NavigationTabTriggerProps) =>
+  renderOnboardingTourWithChild(
+    <Tabs.TabBar.Trigger.Compose value={value} disabled={disabled} key={tabKey}>
+      <Tabs.TabBar.Trigger.Tab>{label ?? value}</Tabs.TabBar.Trigger.Tab>
+      <Tabs.TabBar.Trigger.Marker />
+    </Tabs.TabBar.Trigger.Compose>,
+    { options: onboard, anchorPosition: 'upCenter' },
+    isActivePage,
+    `ob-${label}`,
+  )
+
+export default NavigationTabTrigger

redisinsight/ui/src/components/navigation-menu/navigation.types.ts

@@ -1,5 +1,6 @@
 import { IconType } from 'uiSrc/components/base/forms/buttons'
 import { FeatureFlags } from 'uiSrc/constants'
+import { OnboardingTourOptions } from '../onboarding-tour'
 
 export interface INavigations {
   isActivePage: boolean
@@ -11,6 +12,6 @@ export interface INavigations {
   connectedInstanceId?: string
   onClick: () => void
   iconType: IconType
-  onboard?: any
+  onboard?: OnboardingTourOptions
   featureFlag?: FeatureFlags
 }

redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx

@@ -42,7 +42,7 @@ import { InsightsPanelTabs, SidePanels } from 'uiSrc/slices/interfaces/insights'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { FeatureFlags } from 'uiSrc/constants'
 import { isAnyFeatureEnabled } from 'uiSrc/utils/features'
-
+import { Link } from 'uiSrc/components/base/link/Link'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import styles from './styles.module.scss'
 
@@ -342,21 +342,23 @@ const ONBOARDING_FEATURES = {
             and working with commands in editor mode.
             <Spacer size="xs" />
             Workbench visualizes complex{' '}
-            <a
+            <Link
               href={EXTERNAL_LINKS.redisStack}
               target="_blank"
               rel="noreferrer"
+              variant="inline"
             >
               Redis Stack
-            </a>{' '}
+            </Link>{' '}
             data models such as documents, graphs, and time series. Or you{' '}
-            <a
+            <Link
               href="https://github.com/RedisInsight/Packages"
               target="_blank"
               rel="noreferrer"
+              variant="inline"
             >
               can build your own visualization
-            </a>
+            </Link>
             .
             {isString(firstIndex) && (
               <>
@@ -459,13 +461,14 @@ const ONBOARDING_FEATURES = {
             building custom Redis Insight tutorials.
             <Spacer size="xs" />
             Use our{' '}
-            <a
+            <Link
               href={EXTERNAL_LINKS.guidesRepo}
               target="_blank"
               rel="noreferrer"
+              variant="inline"
             >
               instructions
-            </a>{' '}
+            </Link>{' '}
             to describe your implementations of Redis for other users to follow
             and interact with in the context of a connected Redis database
           </>

redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx

@@ -18,6 +18,7 @@ import { ColorText } from 'uiSrc/components/base/text'
 import { TourStep } from 'uiSrc/components/base/display/tour/TourStep'
 import { Col, Row } from 'uiSrc/components/base/layout/flex'
 import { Title } from 'uiSrc/components/base/text/Title'
+import { Spacer } from 'uiSrc/components/base/layout'
 import { Props as OnboardingWrapperProps } from './OnboardingTourWrapper'
 
 import styles from './styles.module.scss'
@@ -111,8 +112,9 @@ const OnboardingTour = (props: Props) => {
       <div className={styles.content} data-testid="step-content">
         {content}
       </div>
-      <Row className={styles.footer} align="center" justify="between">
-        <ColorText color="subdued" className={styles.stepCount}>
+      <Spacer />
+      <Row align="center" justify="between">
+        <ColorText>
           {currentStep} of {totalSteps}
         </ColorText>
         <Row grow={false} gap="m">

redisinsight/ui/src/components/onboarding-tour/styles.module.scss

@@ -2,20 +2,10 @@
   &.fullSize {
     width: 100%;
     height: 100%;
-
-    :global {
-      .euiPopover, .euiPopover__anchor {
-        width: 100%;
-        height: 100%;
-      }
-    }
   }
 }
 
 .popoverPanel {
-  background-color: var(--euiTooltipBackgroundColor) !important;
-  max-width: 360px !important;
-
   &.lastStep > span {
     display: none;
   }
@@ -28,62 +18,5 @@
       font-size: 11px;
       line-height: 14px;
     }
-
-    .title {
-      font-size: 16px;
-      font-weight: 500;
-    }
-  }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 14px;
-
-    .stepCount {
-      font-size: 14px;
-    }
-
-    .backNext {
-      display: flex;
-    }
-  }
-
-
-  :global {
-    .euiTourFooter {
-      display: none;
-    }
-
-    .euiTourHeader {
-      padding: 10px 18px 0 !important
-    }
-
-    .euiPopover__panelArrow {
-      &--right {
-        &:before, &:after {
-          border-right-color: var(--euiTooltipBackgroundColor) !important;
-        }
-      }
-
-      &--left {
-        &:before, &:after {
-          border-left-color: var(--euiTooltipBackgroundColor) !important;
-        }
-      }
-
-      &--bottom {
-        &:before, &:after {
-          border-bottom-color: var(--euiTooltipBackgroundColor) !important;
-        }
-      }
-
-      &--top {
-        &:before, &:after {
-          border-top-color: var(--euiTooltipBackgroundColor) !important;
-        }
-      }
-    }
   }
 }

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -2,9 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
-
 import { isNumber } from 'lodash'
-import { useTheme } from '@redis-ui/styles'
 import styled from 'styled-components'
 
 import {
@@ -79,7 +77,6 @@ const isOneSideMode = (isInsightsOpen: boolean) =>
 
 const BrowserPage = () => {
   const { instanceId } = useParams<{ instanceId: string }>()
-  const theme = useTheme()
   const {
     name: connectedInstanceName,
     db = 0,

redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx

@@ -14,6 +14,7 @@ import { EmptyButton, PrimaryButton } from 'uiSrc/components/base/forms/buttons'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
 import { RiPopover } from 'uiSrc/components/base'
+import { Row } from 'uiSrc/components/base/layout/flex'
 import styles from './styles.module.scss'
 
 const OnboardingStartPopover = () => {
@@ -50,9 +51,8 @@ const OnboardingStartPopover = () => {
       ownFocus={false}
       closePopover={() => {}}
       panelClassName={styles.onboardingStartPopover}
-      anchorPosition="upCenter"
+      anchorPosition="downRight"
       data-testid="onboarding-start-popover"
-      style={{ display: 'none' }}
     >
       <Title size="S">Take a quick tour of Redis Insight?</Title>
       <Spacer size="s" />
@@ -62,10 +62,10 @@ const OnboardingStartPopover = () => {
         <br />
         Would you like us to show them to you?
       </Text>
-      <div className={styles.onboardingActions}>
+      <Spacer />
+      <Row justify="between">
         <EmptyButton
           onClick={handleSkip}
-          className={styles.skipTourBtn}
           size="small"
           data-testid="skip-tour-btn"
         >
@@ -79,7 +79,7 @@ const OnboardingStartPopover = () => {
         >
           Show me around
         </PrimaryButton>
-      </div>
+      </Row>
     </RiPopover>
   )
 }