RI-7179: replace eui tour step

pd-redis · web-flow · commit face974feee0 · 2025-06-30T16:31:34.000+03:00
* replace eui tour step
diff --git a/redisinsight/ui/src/components/base/display/tour/TourStep.tsx b/redisinsight/ui/src/components/base/display/tour/TourStep.tsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react'
+import { Popover } from '@redis-ui/components'
+import {
+  PopoverPlacementMapType,
+  TourStepProps,
+} from 'uiSrc/components/base/display/tour/types'
+import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
+
+const popoverPlacementMap: PopoverPlacementMapType = {
+  upCenter: {
+    placement: 'top',
+    align: 'center',
+  },
+  upLeft: {
+    placement: 'top',
+    align: 'start',
+  },
+  upRight: {
+    placement: 'top',
+    align: 'end',
+  },
+  downCenter: {
+    placement: 'bottom',
+    align: 'center',
+  },
+  downLeft: {
+    placement: 'bottom',
+    align: 'start',
+  },
+  downRight: {
+    placement: 'bottom',
+    align: 'end',
+  },
+  leftCenter: {
+    placement: 'left',
+    align: 'center',
+  },
+  leftUp: {
+    placement: 'left',
+    align: 'start',
+  },
+  leftDown: {
+    placement: 'left',
+    align: 'end',
+  },
+  rightCenter: {
+    placement: 'right',
+    align: 'center',
+  },
+  rightUp: {
+    placement: 'right',
+    align: 'start',
+  },
+  rightDown: {
+    placement: 'right',
+    align: 'end',
+  },
+}
+
+export const TourStep = ({
+  open,
+  content,
+  title,
+  onClose,
+  placement = 'rightUp',
+  className = '',
+  children,
+  minWidth = 300,
+  maxWidth,
+  offset = 5,
+  ...rest
+}: TourStepProps) => {
+  const [isVisible, setIsVisible] = useState(open)
+  const id = useGenerateId()
+  const titleId = `${id}-title`
+
+  useEffect(() => {
+    setIsVisible(open)
+  }, [open])
+
+  if (!isVisible) {
+    return null
+  }
+  const place = popoverPlacementMap[placement]
+  const popoverContent = (
+    <Popover.Card.Compose style={{ minWidth, maxWidth }}>
+      <Popover.Card.Header.Compose id={titleId}>
+        {title}
+      </Popover.Card.Header.Compose>
+      <Popover.Card.Body.Compose>{content}</Popover.Card.Body.Compose>
+    </Popover.Card.Compose>
+  )
+  return (
+    <Popover
+      className={className}
+      open={isVisible}
+      placement={place.placement}
+      align={place.align}
+      sideOffset={offset}
+      alignOffset={-10}
+      content={popoverContent}
+      id={id}
+      aria-labelledby={titleId}
+      {...rest}
+      withButton
+      persistent
+    >
+      {children}
+    </Popover>
+  )
+}
diff --git a/redisinsight/ui/src/components/base/display/tour/types.ts b/redisinsight/ui/src/components/base/display/tour/types.ts
@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react'
+import { Popover } from '@redis-ui/components'
+
+export type TourStepProps = {
+  /**
+   * Contents of the tour step popover
+   */
+  content: ReactNode
+  /**
+   * Step will display if set to `true`
+   */
+  open?: boolean
+  /**
+   * The title text that appears atop each step in the tour.
+   */
+  title?: ReactNode
+  placement?:
+    | 'upCenter'
+    | 'upLeft'
+    | 'upRight'
+    | 'downCenter'
+    | 'downLeft'
+    | 'downRight'
+    | 'leftCenter'
+    | 'leftUp'
+    | 'leftDown'
+    | 'rightCenter'
+    | 'rightUp'
+    | 'rightDown'
+  className?: string
+  children?: ReactNode
+  minWidth?: number | string
+  maxWidth?: number | string
+  offset?: number
+}
+type PopoverTypes = React.ComponentProps<typeof Popover>
+
+export type PopoverPlacementMapType = Record<
+  NonNullable<TourStepProps['placement']>,
+  {
+    placement: PopoverTypes['placement']
+    align: PopoverTypes['align']
+  }
+>
diff --git a/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx b/redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx
@@ -64,7 +64,7 @@ const CliHeader = () => {
   return (
     <div className={styles.container} id="cli-header">
       <Row justify="between" align="center" style={{ height: '100%' }}>
-        <FlexItem className={styles.title}>
+        <FlexItem className={styles.title} direction="row">
           <EuiIcon type="console" size="m" />
           <OnboardingTour
             options={ONBOARDING_FEATURES.BROWSER_CLI}
diff --git a/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss b/redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss
@@ -33,8 +33,6 @@
 }
 
 .title {
-  display: flex;
-  flex-direction: row !important;
   align-items: center;
   :global {
     .euiIcon {
diff --git a/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx b/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx
@@ -697,7 +697,7 @@ const ONBOARDING_FEATURES = {
 
       useEffect(() => {
         const closeLastStep = async () => {
-          await dispatch(
+          dispatch(
             incrementOnboardStepAction(OnboardingSteps.Finish, 0, async () => {
               await sendEventTelemetry({
                 event: TelemetryEvent.ONBOARDING_TOUR_FINISHED,
diff --git a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.spec.tsx b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.spec.tsx
@@ -106,7 +106,7 @@ describe('OnboardingTour', () => {
 
     fireEvent.click(screen.getByTestId('back-btn'))
     expect(store.getActions()).toEqual([setOnboardPrevStep()])
-    expect(onBack).toBeCalled()
+    expect(onBack).toHaveBeenCalled()
   })
 
   it('should call proper actions on next button', () => {
@@ -131,7 +131,7 @@ describe('OnboardingTour', () => {
 
     fireEvent.click(screen.getByTestId('next-btn'))
     expect(store.getActions()).toEqual([setOnboardNextStep()])
-    expect(onNext).toBeCalled()
+    expect(onNext).toHaveBeenCalled()
   })
 
   it('should call proper actions on skip button', () => {
@@ -156,7 +156,7 @@ describe('OnboardingTour', () => {
 
     fireEvent.click(screen.getByTestId('skip-tour-btn'))
     expect(store.getActions()).toEqual([skipOnboarding()])
-    expect(onSkip).toBeCalled()
+    expect(onSkip).toHaveBeenCalled()
   })
 
   it('should not show onboarding if step !== currentStep', () => {
diff --git a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx
@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from 'react'
-
-import { EuiTourStep } from '@elastic/eui'
 import { useDispatch } from 'react-redux'
 import cx from 'classnames'
 
@@ -16,7 +14,10 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Text } from 'uiSrc/components/base/text'
+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 { Props as OnboardingWrapperProps } from './OnboardingTourWrapper'
 
 import styles from './styles.module.scss'
@@ -79,7 +80,7 @@ const OnboardingTour = (props: Props) => {
   }
 
   const Header = (
-    <div className={styles.header}>
+    <Col className={styles.header}>
       {!isLastStep ? (
         <EmptyButton
           onClick={handleSkip}
@@ -99,24 +100,22 @@ const OnboardingTour = (props: Props) => {
           data-testid="close-tour-btn"
         />
       )}
-      <div className={styles.title} data-testid="step-title">
+      <Title size="XS" data-testid="step-title">
         {title}
-      </div>
-    </div>
+      </Title>
+    </Col>
   )
 
   const StepContent = (
-    <>
-      <div className={styles.content}>
-        <Text>
-          <div data-testid="step-content">{content}</div>
-        </Text>
+    <Col>
+      <div className={styles.content} data-testid="step-content">
+        {content}
       </div>
-      <div className={styles.footer}>
-        <Text color="subdued" className={styles.stepCount}>
+      <Row className={styles.footer} align="center" justify="between">
+        <ColorText color="subdued" className={styles.stepCount}>
           {currentStep} of {totalSteps}
-        </Text>
-        <div className={styles.backNext}>
+        </ColorText>
+        <Row grow={false} gap="m">
           {currentStep > 1 && (
             <SecondaryButton
               onClick={handleClickBack}
@@ -130,13 +129,12 @@ const OnboardingTour = (props: Props) => {
             onClick={handleClickNext}
             size="s"
             data-testid="next-btn"
-            style={{ marginLeft: 8 }}
           >
             {!isLastStep ? 'Next' : 'Take me back'}
           </PrimaryButton>
-        </div>
-      </div>
-    </>
+        </Row>
+      </Row>
+    </Col>
   )
 
   return (
@@ -147,28 +145,21 @@ const OnboardingTour = (props: Props) => {
       })}
       role="presentation"
     >
-      <EuiTourStep
+      <TourStep
         content={StepContent}
-        decoration="none"
-        isStepOpen={isOpen}
+        open={isOpen}
         minWidth={300}
-        onFinish={() => setIsOpen(false)}
-        step={step}
-        stepsTotal={totalSteps}
-        title=""
-        subtitle={Header}
-        anchorPosition={anchorPosition}
-        className={styles.popover}
-        anchorClassName={styles.popoverAnchor}
-        panelClassName={cx(styles.popoverPanel, panelClassName, {
+        maxWidth={360}
+        title={Header}
+        placement={anchorPosition}
+        className={cx(styles.popoverPanel, panelClassName, {
           [styles.lastStep]: isLastStep,
         })}
-        zIndex={9999}
         offset={5}
         data-testid="onboarding-tour"
       >
         {children}
-      </EuiTourStep>
+      </TourStep>
     </div>
   )
 }
diff --git a/redisinsight/ui/src/components/onboarding-tour/styles.module.scss b/redisinsight/ui/src/components/onboarding-tour/styles.module.scss
@@ -1,33 +1,26 @@
 .wrapper {
-   &.fullSize {
-     width: 100%;
-     height: 100%;
-
-     :global {
-       .euiPopover, .euiPopover__anchor {
-         width: 100%;
-         height: 100%;
-       }
-     }
-   }
+  &.fullSize {
+    width: 100%;
+    height: 100%;
+
+    :global {
+      .euiPopover, .euiPopover__anchor {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 }
 
 .popoverPanel {
-  position: fixed !important;
   background-color: var(--euiTooltipBackgroundColor) !important;
-  border: 0 !important;
   max-width: 360px !important;
 
-  &.lastStep {
-    :global(.euiPopover__panelArrow) {
-      display: none;
-    }
+  &.lastStep > span {
+    display: none;
   }
 
   .header {
-    display: flex;
-    flex-direction: column;
-
     .skipTourBtn {
       display: flex;
       align-self: flex-end;
@@ -73,16 +66,19 @@
           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;
diff --git a/redisinsight/ui/src/pages/pub-sub/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/styles.module.scss

Original file line number	Diff line number	Diff line change
`@@ -33,8 +33,6 @@`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`.title {`
`36`		`- display: flex;`
`37`		`- flex-direction: row !important;`
`38`	`36`	`align-items: center;`
`39`	`37`	`:global {`
`40`	`38`	`.euiIcon {`