diff --git a/redisinsight/ui/src/components/base/display/tour/TourStep.tsx b/redisinsight/ui/src/components/base/display/tour/TourStep.tsx index 0edea1b780..713a40acbb 100644 --- a/redisinsight/ui/src/components/base/display/tour/TourStep.tsx +++ b/redisinsight/ui/src/components/base/display/tour/TourStep.tsx @@ -61,7 +61,6 @@ export const TourStep = ({ open, content, title, - onClose, placement = 'rightUp', className = '', children, diff --git a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx index c6d9d9dbea..5b9d6b3c4d 100644 --- a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx +++ b/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 ( @@ -76,39 +83,42 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => { }} > - {navTabs.map(({ value, label, disabled, featureFlag }, index) => { - const key = `${value}-${index}` - if (featureFlag) { - return ( - - { + const key = `${value}-${index}` + if (featureFlag) { + return ( + - - {label ?? value} - - - - + + + ) + } + + return ( + ) - } - return ( - - - {label ?? value} - - - - ) - })} + }, + )} diff --git a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigationTabTrigger.tsx b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigationTabTrigger.tsx new file mode 100644 index 0000000000..37e1b112cb --- /dev/null +++ b/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( + + {label ?? value} + + , + { options: onboard, anchorPosition: 'upCenter' }, + isActivePage, + `ob-${label}`, + ) + +export default NavigationTabTrigger diff --git a/redisinsight/ui/src/components/navigation-menu/navigation.types.ts b/redisinsight/ui/src/components/navigation-menu/navigation.types.ts index b403d8f398..a6651b28ea 100644 --- a/redisinsight/ui/src/components/navigation-menu/navigation.types.ts +++ b/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 } diff --git a/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx b/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx index 3f71d5c4f0..bc59d7af8c 100644 --- a/redisinsight/ui/src/components/onboarding-features/OnboardingFeatures.tsx +++ b/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. Workbench visualizes complex{' '} - Redis Stack - {' '} + {' '} data models such as documents, graphs, and time series. Or you{' '} - can build your own visualization - + . {isString(firstIndex) && ( <> @@ -459,13 +461,14 @@ const ONBOARDING_FEATURES = { building custom Redis Insight tutorials. Use our{' '} - instructions - {' '} + {' '} to describe your implementations of Redis for other users to follow and interact with in the context of a connected Redis database diff --git a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx b/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx index f2c5a99f89..3260ddfcea 100644 --- a/redisinsight/ui/src/components/onboarding-tour/OnboardingTour.tsx +++ b/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) => {
{content}
- - + + + {currentStep} of {totalSteps} diff --git a/redisinsight/ui/src/components/onboarding-tour/styles.module.scss b/redisinsight/ui/src/components/onboarding-tour/styles.module.scss index 5062935d06..c505eb59cb 100644 --- a/redisinsight/ui/src/components/onboarding-tour/styles.module.scss +++ b/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; - } - } - } } } diff --git a/redisinsight/ui/src/pages/browser/BrowserPage.tsx b/redisinsight/ui/src/pages/browser/BrowserPage.tsx index 67f69b2a9d..b829aecc4d 100644 --- a/redisinsight/ui/src/pages/browser/BrowserPage.tsx +++ b/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, diff --git a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx index e71a9e629d..4c1bb98a08 100644 --- a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/OnboardingStartPopover.tsx +++ b/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' }} > Take a quick tour of Redis Insight? @@ -62,10 +62,10 @@ const OnboardingStartPopover = () => {
Would you like us to show them to you? -
+ + @@ -79,7 +79,7 @@ const OnboardingStartPopover = () => { > Show me around -
+
) } diff --git a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss index 0455cd8048..cf092c8ce9 100644 --- a/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss +++ b/redisinsight/ui/src/pages/browser/components/onboarding-start-popover/styles.module.scss @@ -1,16 +1,4 @@ .onboardingStartPopover { - width: 360px !important; - - background-color: var(--euiTooltipBackgroundColor) !important; - - :global(.euiPopover__panelArrow) { - display: none; - } -} - -.onboardingActions { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 16px; + width: 360px; + margin-right: 30px; // Dirty placement fix, to position popover in the bottom right corner of the screen, in line with the browser containers } diff --git a/redisinsight/ui/src/pages/pub-sub/PubSubPage.tsx b/redisinsight/ui/src/pages/pub-sub/PubSubPage.tsx index 2a96076464..6809cdc9fd 100644 --- a/redisinsight/ui/src/pages/pub-sub/PubSubPage.tsx +++ b/redisinsight/ui/src/pages/pub-sub/PubSubPage.tsx @@ -107,7 +107,7 @@ const PubSubPage = () => {
diff --git a/redisinsight/ui/src/pages/pub-sub/styles.module.scss b/redisinsight/ui/src/pages/pub-sub/styles.module.scss index ce845f8d39..85f8f66443 100644 --- a/redisinsight/ui/src/pages/pub-sub/styles.module.scss +++ b/redisinsight/ui/src/pages/pub-sub/styles.module.scss @@ -16,12 +16,9 @@ } .onboardAnchor { - position: relative; - visibility: hidden; - opacity: 0; + align-self: end; } .onboardPanel { - position: fixed; - top: calc(100% - 214px) !important; + margin-right: 15px; // Dirty placement fix, to position popover in the bottom right corner of the screen, in line with the browser containers } diff --git a/redisinsight/ui/src/utils/onboarding.tsx b/redisinsight/ui/src/utils/onboarding.tsx index 7a6016005f..341789e988 100644 --- a/redisinsight/ui/src/utils/onboarding.tsx +++ b/redisinsight/ui/src/utils/onboarding.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { PopoverAnchorPosition } from '@elastic/eui' import { OnboardingTour } from 'uiSrc/components' import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour' import { Props as OnboardingTourProps } from 'uiSrc/components/onboarding-tour/OnboardingTourWrapper' @@ -6,6 +7,7 @@ import { Maybe } from 'uiSrc/utils/types' interface Props extends Omit { options: Maybe + anchorPosition?: PopoverAnchorPosition } const renderOnboardingTourWithChild = (