refactor(ui): move onboarding tour from + button to Add new tutorial title

- Remove OnboardingTour from Group component + button
- Add OnboardingTour wrapper around Add new tutorial title in UploadTutorialForm
- Pass isPageOpened prop to UploadTutorialForm for proper onboarding visibility

Author: dantovska

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

@@ -10,11 +10,10 @@ import {
 } 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'
 
 import { RiAccordion } from 'uiSrc/components/base/display/accordion/RiAccordion'
 import { Col, Row } from 'uiSrc/components/base/layout/flex'
-import { RiTooltip, OnboardingTour } from 'uiSrc/components'
+import { RiTooltip } from 'uiSrc/components'
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
@@ -34,7 +33,6 @@ export interface Props {
   initialIsOpen?: boolean
   forceState?: 'open' | 'closed'
   onToggle?: (isOpen: boolean) => void
-  isPageOpened?: boolean
   isShowActions?: boolean
   isShowFolder?: boolean
   hasChildren?: boolean
@@ -53,7 +51,6 @@ const Group = (props: Props) => {
     onToggle,
     onCreate,
     onDelete,
-    isPageOpened,
     isShowFolder,
     hasChildren = true,
   } = props
@@ -92,23 +89,15 @@ const Group = (props: Props) => {
       {actions?.includes(EAItemActions.Create) &&
         hasChildren &&
         (isGroupOpen || forceState === 'open') && (
-          <OnboardingTour
-            options={ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS}
-            anchorPosition="downLeft"
-            anchorWrapperClassName="onboardingPopoverAnchor"
-            panelClassName={cx({ hide: isPageOpened })}
-            preventPropagation
-          >
-            <RiTooltip content="Upload tutorial">
-              <S.GroupHeaderButton
-                role="presentation"
-                onClick={handleCreate}
-                data-testid="open-upload-tutorial-btn"
-              >
-                <RiIcon type="PlusSlimIcon" size="m" />
-              </S.GroupHeaderButton>
-            </RiTooltip>
-          </OnboardingTour>
+          <RiTooltip content="Upload tutorial">
+            <S.GroupHeaderButton
+              role="presentation"
+              onClick={handleCreate}
+              data-testid="open-upload-tutorial-btn"
+            >
+              <RiIcon type="PlusSlimIcon" size="m" />
+            </S.GroupHeaderButton>
+          </RiTooltip>
         )}
       {actions?.includes(EAItemActions.Delete) && (
         <DeleteTutorialButton

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

@@ -171,7 +171,6 @@ const Navigation = (props: Props) => {
             )}
             onCreate={() => setIsCreateOpen((v) => !v)}
             onDelete={onDeleteCustomTutorial}
-            isPageOpened={isInternalPageVisible}
             hasChildren={hasChildren}
             forceState={
               isCustomTutorials && isCustomTutorialsOnboarding
@@ -184,14 +183,18 @@ const Navigation = (props: Props) => {
               actions?.includes(EAItemActions.Create) &&
               (children?.length === 0 ? (
                 <Col gap="l">
-                  <UploadTutorialForm onSubmit={submitCreate} />
+                  <UploadTutorialForm
+                    onSubmit={submitCreate}
+                    isPageOpened={isInternalPageVisible}
+                  />
                   <UploadWarning />
                 </Col>
               ) : (
                 isCreateOpen && (
                   <UploadTutorialForm
                     onSubmit={submitCreate}
                     onCancel={() => setIsCreateOpen(false)}
+                    isPageOpened={isInternalPageVisible}
                   />
                 )
               ))}

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

@@ -2,11 +2,13 @@ import React, { useState } from 'react'
 import { useFormik } from 'formik'
 import { FormikErrors } from 'formik/dist/types'
 import { isEmpty } from 'lodash'
+import cx from 'classnames'
 
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { Nullable } from 'uiSrc/utils'
 import validationErrors from 'uiSrc/constants/validationErrors'
-import { RiFilePicker, RiTooltip } from 'uiSrc/components'
+import { RiFilePicker, RiTooltip, OnboardingTour } from 'uiSrc/components'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Row } from 'uiSrc/components/base/layout/flex'
@@ -29,10 +31,11 @@ export interface FormValues {
 export interface Props {
   onSubmit: (data: FormValues) => void
   onCancel?: () => void
+  isPageOpened?: boolean
 }
 
 const UploadTutorialForm = (props: Props) => {
-  const { onSubmit, onCancel } = props
+  const { onSubmit, onCancel, isPageOpened } = props
   const [errors, setErrors] = useState<FormikErrors<FormValues>>({})
 
   const initialValues: FormValues = {
@@ -79,7 +82,15 @@ const UploadTutorialForm = (props: Props) => {
 
   return (
     <S.Wrapper className={styles.wrapper} data-testid="upload-tutorial-form">
-      <Text>Add new tutorial</Text>
+      <OnboardingTour
+        options={ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS}
+        anchorPosition="downLeft"
+        anchorWrapperClassName="onboardingPopoverAnchor"
+        panelClassName={cx({ hide: isPageOpened })}
+        preventPropagation
+      >
+        <Text>Add new tutorial</Text>
+      </OnboardingTour>
       <Spacer size="m" />
       <div>
         <div className={styles.uploadFileWrapper}>